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.
More
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
Animating with the JavaScript Web Animations API
70+ JavaScript Challenges: Data Structures & Algorithms
Make a Google search engine clone: JavaScript PHP and MySQL
Web Scrape Anything With JavaScript
JavaScript Interview Espresso
Creating a simple portfolio website with WebGL and Barba.js
Shaders for the Web
Crash Course: Build a Full-Stack Web App in a Weekend!
