This course is called “20 Web Projects With Vanilla JavaScript”, aimed at teaching HTML, CSS, and JavaScript through projects. You will build from simple games to an expense recording app and even a relaxation application, all from the ground up. The projects assist you in developing and realizing dynamic function Features without applying any Frameworks or Libraries. During the process, I shall be taking time to ensure that you understand each part as we progress through the construction.
While following the course in “20 Web Projects With Vanilla JavaScript”, you will also be learning about layouts and user interfaces CSS animation, and about JavaScript in its fundamentals. You will also get familiar with dom-manipulation and different types of JavaScript events along with Fetch API, Audio and Video API, and Speech API. Also, the learners will be able to work on higher-order array methods, local storage, and many others since the course offers a variety of topics in JavaScript.
20 Web Projects With Vanilla JavaScript Table of Contents:
- Introduction
- Welcome to the course (02:25)
- Getting setup (06:34)
- The Code (00:09)
- Project 1: Form Validator
- Project intro (01:57)
- Project HTML (06:20)
- Project CSS (13:47)
- Adding Simple Validation (14:43)
- Check Required & Refactor (09:15)
- Check Length, Email & Password Match (09:13)
- Project 2: Movie Seat Booking
- Project intro (01:23)
- Project HTML (05:46)
- Project CSS (16:06)
- Selecting Movie & Seats From UI (15:13)
- Save Data To Local Storage (12:43)
- Populate UI With Saved Data (08:13)
- Project 3: Custom Video Player
- Project intro (02:06)
- Project HTML (08:21)
- Project CSS (09:52)
- Play, Pause & Stop (09:24)
- Video Progress Bar & Timestamp (06:41)
- Project 4: Exchange Rate Calculator
- Project intro (01:48)
- Project HTML (04:29)
- Project CSS (10:12)
- A Look at JSON & Fetch (09:19)
- Fetch Rates & Update DOM (12:57)
- Project 5: DOM Array Methods
- Project intro (02:07)
- Project UI (09:19)
- Generate Random Users - Fetch w/ Async/Await (07:45)
- Output Users - forEach() & DOM Methods (10:27)
- Double Money - map() (06:00)
- Sort By Richest - sort() (05:00)
- Show Millionaires - filter() (04:26)
- Calculate Wealth - reduce() (06:16)
- Project 6: Menu Slider & Modal
- Project intro (01:05)
- Project HTML (10:11)
- Navbar Styling (07:32)
- Header & Modal Styling (12:08)
- Menu & Modal Toggle (10:00)
- Project 7: Hangman Game
- Project intro (01:49)
- Draw Hangman With SVG (11:35)
- Main Styling (10:55)
- Popup & Notification Styling (08:35)
- Display Words Function (11:22)
- Letter Press Event Handler (08:38)
- Wrong Letters & Play Again (09:54)
- Project 8: Meal Finder
- Project intro (01:24)
- Project HTML & Base CSS (10:18)
- Search & Display Meals From API (20:09)
- Show Single Meal Page (15:28)
- Display Random Meal & Single Meal CSS (10:20)
- Project 9: Expense Tracker
- Project intro (01:33)
- Project HTML (05:10)
- Project CSS (14:00)
- Show Transaction Items (08:50)
- Display Balance, Income & Expense (08:19)
- Add & Delete Transactions (08:53)
- Persist To Local Storage (05:40)
- Project 10: Music Player
- Project intro (01:56)
- Project HTML (05:40)
- Music Container & Rotate Animation (10:09)
- Music Info Styling & Animation (09:21)
- Load, Play & Pause Song (08:46)
- Next, Prev Song & Progress (12:20)
- Project 11: Infinite Scroll Posts
- Project intro (02:30)
- Project HTML (03:05)
- Project CSS & Loader Animation (09:52)
- Get Initial Posts From API (07:26)
- Add Infinite Scrolling (06:09)
- Filter Fetched Posts (05:15)
- Project 12: Typing Game
- Project intro (01:45)
- Project HTML (04:39)
- Project CSS (12:22)
- Word Match & Score (08:15)
- Adding The Timer (09:20)
- Difficulty Setting (08:08)
- Project 13: Speech Text Reader
- Project intro (01:57)
- HTML & Output Speech Boxes (12:17)
- Project CSS (17:18)
- Get Speech Voices (07:28)
- Speech Buttons (04:58)
- Change Voice & Custom Text Box (05:04)
- Project 14: Memory Cards
- Project intro (02:11)
- Project HTML (07:16)
- Basic Card Styling (10:35)
- Card Rotation & Slide Effect (11:03)
- Add Card Container & Form Styling (06:27)
- Create Cards & Flip Effect With JS (10:23)
- Prev & Next Button Functionality (06:23)
- Set & Get Card Data From Local Storage (13:17)
- Project 15: Lyrics Search App
- Project intro (01:29)
- Project HTML & Header Styling (09:46)
- Form Styling (07:15)
- Fetching Songs & Artists (09:49)
- Update DOM & Add Pagination (15:07)
- Get & Display Song Lyrics (10:08)
- Project 16: Relaxer App
- Project intro (00:51)
- Creating The Large Circle (10:01)
- Creating & Animating The Pointer (04:37)
- Breath Animation With JS Trigger (09:40)
- Project 17: Breakout Game
- Project intro (01:01)
- Creating & Styling The Page (11:15)
- Canvas Plan Outline (06:03)
- Draw Ball, Paddle & Score (11:01)
- Creating The Bricks (09:27)
- Move Paddle (12:51)
- Move Ball & Break Bricks (10:29)
- Lose & Reset Game (04:59)
- Project 18: New Year Countdown
- Project intro (01:08)
- Landing Page HTML & Styling (11:07)
- Create The Countdown (11:59)
- Dynamic Year & Spinner (07:11)
- Project 19: Speak Number Guessing Game
- Project intro (01:30)
- Project UI (08:51)
- Capture Mic Input (08:09)
- Check Guessed Number (12:50)
- Project 20: Product Filtering UI
- Project intro (02:03)
- Navbar HTML & Tailwind (10:46)
- Products HTML & Tailwind (10:43)
- Display Items From JS (09:46)
- Add & Remove Items From Cart (07:04)
- Product Filtering (10:16)
Who is this course for?
- This is for all those who want to create fun projects from easy to intermediate levels.
