Skip to content
UdemyJavaScriptPaid courseAll LevelsCertificate

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

icon
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

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


icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

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.

icon
More courses by Brad Traversy

$16.99

$129.99

$84.99

$99.99

$119.99

$11.99

icon
More JavaScript courses

Free

Free

Free

$24.99

Free

$79.99

icon
Reviews

4.7

7,416 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

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.

Showing all 10 reviews on CourseDuck

Read all 7,416 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 94 / 100