20 Web Projects With Vanilla JavaScript (Udemy.com)
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)
Created by: Brad Traversy
Last updated February 2024
What you will 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 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!!
Instructor Details
- 4.7 Rating
7,416 Reviews
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.
More courses by Brad Traversy
Modern JavaScript From The Beginning 2.0 (Just Updated) (2025)
4.6 (36,520 Reviews)
Provider: Udemy
Time: 40.2h
$16.99
Modern HTML & CSS From The Beginning 2.0 (2025)
4.8 (28,669 Reviews)
Provider: Udemy
Time: 24.3h
$129.99
Bootstrap 4 From Scratch With 5 Projects (2018)
4.6 (17,122 Reviews)
Provider: Udemy
Time: 11.3h
$84.99
MERN Stack Front To Back: Full Stack React, Redux & Node.js (2019)
4.4 (15,750 Reviews)
Provider: Udemy
Time: 11.9h
$99.99
50 Projects In 50 Days - HTML, CSS & JavaScript (2025)
4.6 (12,876 Reviews)
Provider: Udemy
Time: 19.4h
$119.99
More JavaScript courses
The Modern Javascript Bootcamp Course (2026)
4.9 (13,238 Reviews)
Provider: Udemy
Time: 51.9h
$24.99
JavaScript: Understanding Advanced ES Next (ES6 and Beyond) (2025)
4.9 (1,076 Reviews)
Provider: Udemy
Time: 3.5h
$79.99
Reviews
By Ali Mahmoud on 4/26/2022
The projects are very helpful and 100% improved my skills and the idea behind the course is amazing. Brad is an amazing instructor and is very clear most of the time. The downsides are: 1) Very few projects have some bugs/issues. 2) Brad does some bad practices like removing button outlines or writing nested timeouts. 3)The Q&A section needs more attention (as some students' questions are never answered)
By Isaac C on 11/24/2020
Very good course over all. You definitely need to have a solid foundation already in HTML/CSS/JS or you will get lost at times. Specially with some of the harder courses that involve arrays or API request. Only reason this is not a perfect 5 is because it could be better if the instructor explained some stuff in more detail sometimes since in some exercises he will type some code but not explain why he did it this way or how it works. But as long as you're willing to look into it and figure it out on your own you should be solid.
By Logan Ponder on 11/16/2020
My favorite course so far! Throughout the course, Brad not only goes through the Javascript of each project, step by step; he also covers all the HTML and CSS which was SO helpful as beginner. I can only hope that Brad releases another course just like this one, as the practice and repetition that comes with each project has been so helpful! Highly recommended for anyone trying to put into practice JavaScript/HTML/CSS fundamentals. The Best!
By Paul Pudhnum on 8/13/2020
This course was exactly what I need to learn vanilla JS. There is a good variety of projects for web, games, animation, and interaction. There is no bs, Brad gets right into it and the consistency of the lesson from lesson was fantastic for me. I liked the fact that it was not just JS, he goes into the HTML and CSS which is very helpful. The quality is great, consistent, sound is good. Recommend!
By Phil Gormley on 6/9/2020
Pro: Tons of great practice exercises Con: Brad often enters lines of code without adequately explaining what they do or without explaining at all. Also, the class is 100% Brad's screen with code and results. Would help to have whiteboard sidebars that explain concepts
By Sameer Patankar on 6/5/2020
This course is good, and does work well as a follow-up or work through side-by-side with B.D's Modern JS course. I'm using to refactor this code in React later as well as to revise the JS. I do think there are small things that could be improved here. More emphasis on why or the logic behind why the apps were coded the way they were. When showing CSS or blocks of code, centralising the displayed view to get as much of the code on the screen at the same time as possible, at the centre. Good course though!
By Kim Drezdon on 4/29/2020
I took this to refresh my memory on JavaScript because I had taken a break to focus on another language. This course was a lot of fun, the projects were really interesting and useful. Going through each project, totally from scratch, was really helpful to see because the repetition of it gave me a solid understanding of how a project comes together. It made me look into Visual Studio Code shortcuts, so I could code as fast as Brad. It helped me learn a bit more about CSS too. Brad is a great teacher, thorough and calm, I look forward to taking more courses by him.
By Fero Hriadel on 4/14/2020
Just finished the last project. This was the best course I've ever taken. Tons of practice. Just what I needed. I took it because I didn't feel confident manipulating the DOM; and man, did this one help with that! Thank you Brad. You have no idea how much you helped. They should give you some prize or award for this one. I highly recommend this course.
By Aimee Ruiz on 4/10/2020
I always enjoy the courses from Traversy Media. I just love his approach to teaching, solid advice and not afraid to leave the errors in there so we can benefit from those as well. I look forward to creating my own projects from the lessons I have learned in this course, all solid foundations in JavaScript. Can't say enough good things about Traversy Media! Thank you for all you do to teach and encourage the web dev community.
By Bindu Radhakrishnan on 3/20/2020
I thoroughly enjoyed each project in this course and definitely learned a lot. There is a lot of satisfaction doing these projects and then tinkering around to see what more you can learn and do. The canvas project was a little overwhelming but I know that I can look it up whenever I want to use it. Also, worked on the expense tracker project on react from your youtube channel. One thing that I would like is to see how to embed a third party editor like codemirror or ckeditor into a textarea. Thanks for this wonderful course.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 94 / 100











