You can download the project or fork and run the project locally to get hands-on practice with the core concepts below. Start with reviewing the code and comments for each file in the practice folder.
- HTML - Buttons & Anchor Tags
- HTML - Building Forms
- CSS - Accessibility: Input Labels
- CSS - Pseudo-Classes & Transitions
1. Try changing the width of the input fields (excluding the file upload and color input) to match the width of the submit button.
2. Next, the dropdown menu looks a bit odd, so to improve the visual consistency, you will need to modify the styling to match the other input fields.
3. Add a form reset button that allows the user to easily clear the form. Both buttons should be in the same row.
4. For an extra challenge, you can try styling the file upload button to match the image in the screenshot. There are no hints for this one, you may need to use your serching skills to find a working solution!
Once you complete the challenges you'll be able to use everything you've learned so far to build a Log-In/Sign-Up page that is accessible for all users and looks great! You can create a clone of the login and signup page from your favorite streaming service, place to shop, or restaurant. The starter files are in the project folder.
If you run into trouble, you can reach out in the [🕒 catchup-crew] or [❓code-help] channels in the #100Devs Discord. It's an amazing community space filled with supportive developers happy to answer any questions you may have!
1. To get started, open this link in a new tab to fork or make a personal copy of this repository
- NOTE: You may find it easier to keep the same name, but you can change it if you like!
2. Click the code button to open the dropdown and copy the URL (make sure HTTPS is selected).
3. Open the terminal in your editor, type 'git clone' and paste the URL (the command should follow one of the formats below).
git clone https://github.com/YOUR-GITHUB-USERNAME/html-css-forms-and-links
git clone https://github.com/YOUR-GITHUB-USERNAME/YOUR-REPOSITORY-NAME
4. Run the command (Press Enter)
5. Navigate to the project folder
cd html-css-forms-and-links
cd YOUR-REPOSITORY-NAME
Done! You are now able to run the project locally.
A big thanks to #100Devs for the community support, and Leon Noel for the project inspiration.
If you found some value here and would like to support, feel free to give the project a ⭐️!
- HTML/CSS - Semantic Elements & Basic CSS Styles
- HTML/CSS - Containers & Responsive Design
- HTML/CSS - Forms & More CSS Styles
- JavaScript (Client-side) - The DOM(Introduction): User Interaction & Changing the DOM
- JavaScript (Client-side) - Fetch API(Introduction): Promise Chains & Handling JSON
- JavaScript (Client-side) - Fetch API(Advanced): Async/Await & Handling JSON
- JavaScript (Server-side) - URL Endpoints with NodeJS(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Advanced): Authentication - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): PostgreSQL - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): ReactJS - Coming Soon!
This project is distributed under the MIT License. Click here for more information.