Development
Web Development
JavaScript
20 Web Projects With Vanilla JavaScript
4.8 (2,095 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,967 students enrolled

20 Web Projects With Vanilla JavaScript

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)
Highest Rated
4.8 (2,095 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,967 students enrolled
Created by Brad Traversy
Last updated 1/2020
English
English [Auto-generated]
Preview this course
20 Web Projects With Vanilla JavaScript
Current price: $83.99 Original price: $119.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 16 hours on-demand video
  • 1 article
  • 20 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
  • Beginner Friendly
Course content
Expand all 121 lectures 16:07:05
+ – 1: Form Validator | Intro Project
6 lectures 55:15
Project Intro
Preview 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
+ – 2: Movie Seat Booking | DOM & Local Storage
6 lectures 59:24
Project Intro
Preview 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
+ – 3: Custom Video Player | HTML5 Video API
5 lectures 36:24
Project Intro
Preview 02:06
Project HTML
08:21
Project CSS
09:52
Play, Pause & Stop
09:24
Video Progress Bar & Timestamp
06:41
+ – 4: Exchange Rate Calculator | Fetch & JSON Intro
5 lectures 38:45
Project Intro
Preview 01:48
Project HTML
04:29
Project CSS
10:12
A Look at JSON & Fetch
09:19
Fetch Rates & Update DOM
12:57
+ – 5: DOM Array Methods | forEach, map, filter, sort, reduce
8 lectures 51:20
Project Intro
Preview 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
+ – 6: Menu Slider & Modal | DOM & CSS
5 lectures 40:56
Project Intro
Preview 01:05
Project HTML
10:11
Navbar Styling
07:32
Header & Modal Styling
12:08
Menu & Modal Toggle
10:00
+ – 7: Hangman Game | DOM, SVG, Events
7 lectures 01:02:48
Project Intro
Preview 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
+ – 8: Meal Finder | Fetch & MealDB API
5 lectures 57:39
Project Intro
Preview 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
+ – 9: Expense Tracker | Array Methods & Local Storage
7 lectures 52:25
Project Intro
Preview 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
Requirements
  • Basic knowledge in HTML, CSS & JavaScript
Description

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.

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!!


Who this course is for:
  • Anyone that wants to build some fun and easy to intermediate projects
Featured review
Brandon Whisnant
Brandon Whisnant ( 196 courses, 20 reviews )
3 months ago
Brad is the best. All of his courses are amazing. I've been coding professionally for four years and use his courses to keep up with the pace of modern web development. My favorite part is how thorough he is and how he doesn't forget about the beginners. I always recommend his courses to my friends that are looking to try development out because I know they will be in good hands.