To complete the challenges and build this project you'll need a basic understanding of JavaScript. You can start by completing the #100Devs JavaScript Basics: Classes 12-14 courses.
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: Ordered & Unordered Lists
- CSS: Page Themes & Navigation
- JavaScript: DOM Elements & Event Listeners
- Forms: Validating User Inputs
1. Try adding hover styles to the navigation links.
2. Since the navigation menu is too wide for mobile devices, you will need to build a working mobile menu.
3. Build an input field allowing the user to add items to each list. The input should only contain text. If the input is not valid, display an error message to the user.
4. For an extra challenge, try building a button that toggles the page theme from light to dark (as pictured in the screenshots). There is a hint in the comments to point you in the right direction, you'll need to use your resources and searching skills to figure it out!
Once you complete the courses and challenges you'll have the skills to build a basic landing page featuring a sign-up form offering free trials to your potential customers!!! Have fun, be creative, and think of any product or service you like! You can use any of the Canva designs here for inspiration. Your site can be a single page or multiple pages, but it should have at least a light/dark theme and display a helpful error message if the user's input is not valid. The starter files are in the practice 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/javascript-dom-intro
git clone https://github.com/YOUR-GITHUB-USERNAME/YOUR-REPOSITORY-NAME
4. Run the command (Press Enter)
5. Navigate to the project folder
cd javascript-dom-intro
cd YOUR-REPOSITORY-NAME
Done! You are now able to run the project locally.
A big thanks to Leon Noel and the #100Devs community for the project inspiration.
If you found some value here and would like to support, feel free to give the project a ⭐️!
- HTML + CSS - HTML Elements & CSS Fundamentals
- HTML + CSS - Containers & Responsive Design
- HTML + CSS - Forms, Links & More CSS Styles
- JavaScript - The DOM & User Interactions
- JavaScript - Promises & Using the Fetch API
This project is distributed under the MIT License. Click here for more information.