20 Web Projects With Vanilla JavaScript
This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & JavaScript with no frameworks or libraries. Every project is built from scratch and has some kind of dynamic functionality from small games to an expense tracker to a breathing relax app.
Read more about the course
Although this is a project based course, I will still be explaining everything as I go. These are mini-projects designed for you to complete in a few hours.
You should have some basic knowledge of HTML/CSS/JS. If you are brand new, I would suggest my Modern HTML/CSS From The Beginning and/or my Modern JS From The Beginning courses on Udemy. This course is a mix of both.
Some Things You Will Learn In These Projects:
Create Layouts & UI's With HTML/CSS ( No CSS Frameworks )
CSS Animations (Transitions, Keyframes, etc With JS Triggers)
JavaScript Fundamentals
DOM Selection & Manipulation
JavaScript Events (Forms, buttons, scrolling, etc)
Fetch API & JSON
HTML5 Canvas
The Audio & Video API
Drag & Drop
Web Speech API (Syth & Recognition)
Working with Local Storage
High Order Array Methods - forEach, map, filter, reduce, sort
setTimout, setInterval
Arrow Functions
and More!! Requirements:
- Basic knowledge in HTML, CSS & JavaScript
- Anyone that wants to build some fun and easy to intermediate projects
What you'll learn:
- Build 20 Frontend Projects From Scratch
- No JS or CSS Frameworks
- Modern JavaScript (ES6+) - Arrows, Fetch, Promises, etc
- DOM Manipulation & Events
- Animations With CSS & JavaScript
- Fetch & JSON With 3rd Party API's
- HTML5 Canvas, Speech API, Audio & Video
Watch Online 20 Web Projects With Vanilla JavaScript
| # | Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 02:26 |
| 2 | Getting Setup | 06:35 |
| 3 | Project Intro | 01:58 |
| 4 | Project HTML | 06:21 |
| 5 | Project CSS | 13:48 |
| 6 | Adding Simple Validation | 14:44 |
| 7 | Check Required & Refactor | 09:16 |
| 8 | Check Length, Email & Password Match | 09:14 |
| 9 | Project Intro | 01:24 |
| 10 | Project HTML | 05:47 |
| 11 | Project CSS | 16:07 |
| 12 | Selecting Movie & Seats From UI | 15:14 |
| 13 | Save Data To Local Storage | 12:44 |
| 14 | Populate UI With Saved Data | 08:14 |
| 15 | Project Intro | 02:07 |
| 16 | Project HTML | 08:22 |
| 17 | Project CSS | 09:53 |
| 18 | Play, Pause & Stop | 09:25 |
| 19 | Video Progress Bar & Timestamp | 06:42 |
| 20 | Project Intro | 01:49 |
| 21 | Project HTML | 04:30 |
| 22 | Project CSS | 10:13 |
| 23 | A Look at JSON & Fetch | 09:20 |
| 24 | Fetch Rates & Update DOM | 12:58 |
| 25 | Project Intro | 02:08 |
| 26 | Project UI | 09:20 |
| 27 | Generate Random Users - Fetch w/ Async/Await | 07:46 |
| 28 | Output Users - forEach() & DOM Methods | 10:28 |
| 29 | Double Money - map() | 06:01 |
| 30 | Sort By Richest - sort() | 05:01 |
| 31 | Show Millionaires - filter() | 04:27 |
| 32 | Calculate Wealth - reduce() | 06:17 |
| 33 | Project Intro | 01:06 |
| 34 | Project HTML | 10:12 |
| 35 | Navbar Styling | 07:33 |
| 36 | Header & Modal Styling | 12:09 |
| 37 | Menu & Modal Toggle | 10:01 |
| 38 | Project Intro | 01:50 |
| 39 | Draw Hangman With SVG | 11:36 |
| 40 | Main Styling | 10:56 |
| 41 | Popup & Notification Styling | 08:36 |
| 42 | Display Words Function | 11:23 |
| 43 | Letter Press Event Handler | 08:39 |
| 44 | Wrong Letters & Play Again | 09:55 |
| 45 | Project Intro | 01:25 |
| 46 | Project HTML & Base CSS | 10:19 |
| 47 | Search & Display Meals From API | 20:10 |
| 48 | Show Single Meal Page | 15:29 |
| 49 | Display Random Meal & Single Meal CSS | 10:21 |
| 50 | Project Intro | 01:34 |
| 51 | Project HTML | 05:11 |
| 52 | Project CSS | 14:01 |
| 53 | Show Transaction Items | 08:51 |
| 54 | Display Balance, Income & Expense | 08:20 |
| 55 | Add & Delete Transactions | 08:54 |
| 56 | Persist To Local Storage | 05:41 |
| 57 | Project Intro | 01:57 |
| 58 | Project HTML | 05:41 |
| 59 | Music Container & Rotate Animation | 10:10 |
| 60 | Music Info Styling & Animation | 09:22 |
| 61 | Load, Play & Pause Song | 08:47 |
| 62 | Next, Prev Song & Progress | 12:21 |
| 63 | Project Intro | 02:31 |
| 64 | Project HTML | 03:06 |
| 65 | Project CSS & Loader Animation | 09:53 |
| 66 | Get Initial Posts From API | 07:27 |
| 67 | Add Infinite Scrolling | 06:10 |
| 68 | Filter Fetched Posts | 05:16 |
| 69 | Project Intro | 01:46 |
| 70 | Project HTML | 04:40 |
| 71 | Project CSS | 12:23 |
| 72 | Word Match & Score | 08:16 |
| 73 | Adding The Timer | 09:21 |
| 74 | Difficulty Setting | 08:09 |
| 75 | Project Intro | 01:58 |
| 76 | HTML & Output Speech Boxes | 12:18 |
| 77 | Project CSS | 17:19 |
| 78 | Get Speech Voices | 07:29 |
| 79 | Speech Buttons | 04:59 |
| 80 | Change Voice & Custom Text Box | 05:05 |
| 81 | Project Intro | 02:12 |
| 82 | Project HTML | 07:17 |
| 83 | Basic Card Styling | 10:36 |
| 84 | Card Rotation & Slide Effect | 11:04 |
| 85 | Add Card Container & Form Styling | 06:28 |
| 86 | Create Cards & Flip Effect With JS | 10:24 |
| 87 | Prev & Next Button Functionality | 06:24 |
| 88 | Set & Get Card Data From Local Storage | 13:18 |
| 89 | Project Intro | 01:30 |
| 90 | Project HTML & Header Stying | 09:47 |
| 91 | Form Styling | 07:16 |
| 92 | Fetching Songs & Artists | 09:50 |
| 93 | Update DOM & Add Pagination | 15:08 |
| 94 | Get & Display Song Lyrics | 10:09 |
| 95 | Project Intro | 00:52 |
| 96 | Creating The Large Circle | 10:02 |
| 97 | Creating & Animating The Pointer | 04:38 |
| 98 | Breath Animation With JS Trigger | 09:41 |
| 99 | Project Intro | 01:02 |
| 100 | Creating & Styling The Page | 11:16 |
| 101 | Canvas Plan Outline | 06:04 |
| 102 | Draw Ball, Paddle & Score | 11:02 |
| 103 | Creating The Bricks | 09:28 |
| 104 | Move Paddle | 12:52 |
| 105 | Move Ball & Break Bricks | 10:30 |
| 106 | Lose & Reset Game | 05:00 |
| 107 | Project Intro | 01:09 |
| 108 | Landing Page HTML & Styling | 11:08 |
| 109 | Create The Countdown | 12:00 |
| 110 | Dynamic Year & Spinner | 07:12 |
| 111 | Project Intro | 01:40 |
| 112 | Insert List Items Into DOM | 09:35 |
| 113 | Scramble List Items | 06:43 |
| 114 | Core CSS | 12:23 |
| 115 | Drag & Drop Functionality | 14:58 |
| 116 | Check Order | 05:38 |
| 117 | Project Intro | 01:31 |
| 118 | Project UI | 08:52 |
| 119 | Capture Mic Input | 08:10 |
| 120 | Check Guessed Number | 12:51 |
Similar courses to 20 Web Projects With Vanilla JavaScript
Conquer JavaScript by Building Your Own Framework from Scratchzerotomastery.io
Web Scrape Anything With JavaScriptinterviewespresso (Aaron Jack)
Build Animated Physics Game with JavaScriptudemy
Modern JavaScript Full Coursefireship.io
Testing JavaScript with Kent C. DoddsKent C. Dodds
