20 Web Projects With Vanilla JavaScript

20 Web Projects With Vanilla JavaScript

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)

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



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

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.

Course content

21 sections • 121 lectures • 16h 7m total length
  • Introduction
  • 1: Form Validator | Intro Project
  • 2: Movie Seat Booking | DOM & Local Storage
  • 3: Custom Video Player | HTML5 Video API
  • 4: Exchange Rate Calculator | Fetch & JSON Intro
  • 5: DOM Array Methods | forEach, map, filter, sort, reduce
  • 6: Menu Slider & Modal | DOM & CSS
  • 7: Hangman Game | DOM, SVG, Events
  • 8: Meal Finder | Fetch & MealDB API
  • 9: Expense Tracker | Array Methods & Local Storage
  • 10: Music Player | HTML5 Audio API
  • 11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader
  • 12: Typing Game | DOM, Intervals, Events
  • 13: Speech Text Reader | Speech Synthesis
  • 14: Memory Cards | CSS Effects, Local Storage
  • 15: Lyrics Search App | Fetch, Pagination, Lyrics.ovh API
  • 16: Relaxer App | CSS Animations, setTimeout
  • 17: Breakout Game | HTML5 Canvas API
  • 18: New Year Countdown | DOM, Date & Time
  • 19: Sortable List | Drag & Drop API
  • 20: Speak Number Guessing Game | Speech Recognition
Created by: Brad Traversy, Full Stack Web Developer & Instructor at Traversy Media
Last updated 1/2020
English [Auto]
Direct Download Available
(4,376 ratings)
24,651 students

Download link

Friendly Websites

Related Posts

Add a Comment

Your email address will not be published. Required fields are marked *