50 Projects In 50 Days - HTML, CSS & JavaScript (Udemy.com)
Sharpen your skills by building 50+ quick, unique and fun mini projects
Created by: Brad Traversy
Last updated July 2025
Our take
Based on the ratings of 12,876 students, a sample of their written reviews and the syllabus, as the course stood in July 2025. No course pays to be reviewed.
Brad Traversy's course is a project-based follow-up for people who have seen HTML, CSS and JavaScript once and now want to use them. It runs about 19 hours across 170 lectures, split into 50 daily projects plus two bonus ones. Most are small: expanding cards, a drawing app, a Pokedex, a quiz app, an insect catch game. The stated level is beginner, but the requirements ask for a basic grasp of all three languages, so it works best as a second step rather than a first.
Reviewers like the explanations. One praises how the instructor says why a technique is or is not needed, not just what to type, and likes his walkthrough of different ways to import fonts. Others call the projects small, fun and useful for DOM practice. The complaints are fewer. One 3-star reviewer finished the projects and still did not feel confident in JavaScript, and suggests treating it as extra practice. Another wanted a Spanish version, and a 2-star reviewer said it is not for today's tech world.
More than 93% of the 12,876 ratings are four or five stars, and about 69% are five. The course was last updated in July 2025, and it sticks to vanilla JavaScript, so it does not touch frameworks. There are no quizzes or coding exercises, so the learning comes from coding along. It suits anyone who has finished a basic tutorial and needs reps. Pair it with a proper JavaScript course if the language itself still feels shaky.
Pros
- 50 finished mini projects, from a drawing app to a Pokedex, each doable in a few hours
- Explains why a technique is used and shows alternatives, such as several ways to import fonts
- Real DOM practice: events, array methods and HTTP requests inside working widgets
- Rated 4.6 from 12,876 reviews, with more than 93% giving four or five stars
Cons
- Reviewers say it is better as extra practice than as a main way to learn JavaScript
- No quizzes or coding exercises, so nothing checks that the ideas have stuck
- Vanilla JavaScript only, and one reviewer felt it was not for today's tech world
Nice little projects to practice your JS skills, especially DOM manipulation.
Labeled beginner, but it expects basic HTML, CSS and JavaScript already, so true first-timers may struggle.
What you will learn
- Project based teaching to sharpen your HTML, CSS & JavaScript skills
- Perfect for beginners looking for things to build unique projects in a short timeframe
- Modern styling with flexbox, CSS animations, custom properties, etc
- DOM manipulation, events, array methods, HTTP requests & more
Course content
53 sections · 170 lectures · 19 hours of video 1 article
- 1Introduction 2 free previews4 lectures · 13 min
- 2Day 1 - Expanding Cards 1 free preview3 lectures · 17 min
- 3Day 2 - Progress Steps 1 free preview3 lectures · 25 min
- 4Day 3 - Rotating Navigation 1 free preview3 lectures · 24 min
- 5Day 4 - Hidden Search Widget2 lectures · 10 min
- 6Day 5 - Blurry Loading3 lectures · 13 min
- 7Day 6 - Scroll Animation2 lectures · 14 min
- 8Day 7 - Split Landing Page 1 free preview3 lectures · 23 min
- 9Day 8 - Form Wave Animation3 lectures · 19 min
- 10Day 9 - Sound Board2 lectures · 11 min
- 11Day 10 - Dad Jokes4 lectures · 25 min
- 12Day 11 - Event KeyCodes3 lectures · 14 min
- 13Day 12 - FAQ Collapse3 lectures · 21 min
- 14Day 13 - Random Choice Picker4 lectures · 20 min
- 15Day 14 - Animated Navigation3 lectures · 19 min
- 16Day 15 - Incrementing Counter3 lectures · 13 min
- 17Day 16 - Drink Water4 lectures · 31 min
- 18Day 17 - Movie App 1 free preview4 lectures · 36 min
- 19Day 18 - Background Slider3 lectures · 22 min
- 20Day 19 - Theme Clock4 lectures · 36 min
- 21Day 20 - Button Ripple Effect3 lectures · 16 min
- 22Day 21 - Drag N Drop3 lectures · 20 min
- 23Day 22 - Drawing App 1 free preview5 lectures · 29 min
- 24Day 23 - Kinetic CSS Loader2 lectures · 8 min
- 25Day 24 - Content Placeholder4 lectures · 22 min
- 26Day 25 - Sticky Navbar3 lectures · 24 min
- 27Day 26 - Double Vertical Slider3 lectures · 26 min
- 28Day 27 - Toast Notification2 lectures · 16 min
- 29Day 28 - Github Profiles5 lectures · 44 min
- 30Day 29 - Double Heart Click3 lectures · 22 min
- 31Day 30 - Auto Text Effect2 lectures · 10 min
- 32Day 31 - Password Generator5 lectures · 42 min
- 33Day 32 - Good, Cheap, Fast Checkboxes4 lectures · 18 min
- 34Day 33 - Notes App4 lectures · 31 min
- 35Day 34 - Animated Countdown4 lectures · 28 min
- 36Day 35 - Image Carousel3 lectures · 18 min
- 37Day 36 - Hoverboard3 lectures · 14 min
- 38Day 37 - Pokedex4 lectures · 28 min
- 39Day 38 - Mobile Tab Navigation3 lectures · 16 min
- 40Day 39 - Password Strength Background3 lectures · 15 min
- 41Day 40 - 3D Background Boxes3 lectures · 28 min
- 42Day 41 - Verify Account UI2 lectures · 15 min
- 43Day 42 - Live User Filter3 lectures · 27 min
- 44Day 43 - Feedback UI Design3 lectures · 25 min
- 45Day 44 - Custom Range Slider3 lectures · 24 min
- 46Day 45 - Netflix Navigation3 lectures · 20 min
- 47Day 46 - Quiz App3 lectures · 22 min
- 48Day 47 - Testimonial Box Switcher3 lectures · 21 min
- 49Day 48 - Random Image Feed2 lectures · 10 min
- 50Day 49 - Todo List 1 free preview4 lectures · 24 min
- 51Day 50 - Insect Catch Game4 lectures · 42 min
- 52Bonus Day 1 - Simple Timer3 lectures · 33 min
- 53Bonus Day 2 - Dice Roller3 lectures · 21 min
Who it is for
The instructor says it suits
- Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript
What you need before you start
- A very basic understanding of HTML, CSS & JavaScript
How it compares
Against the other 110 rated Udemy courses in CSS on CourseDuck:
- Rating4.6 out of 5higher than 76% of them
- Reviews12,876#8 of 111 by number of reviews
- Length19.4 hourslonger than 88% of them
- Last updatedJuly 2025more recently than 90% of them
Course Description
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50+ mini projects in HTML, CSS & JavaScript that relate to the DOM (Document Object Model). Here is a list of what we will create in this course:
Expanding Cards
Progress Steps
Rotating Navigation Animation
Hidden Search Widget
Blurry Loading
Scroll Animation
Split Landing Page
Form Wave
Sound Board
Dad Jokes
Event Keycodes
Faq Collapse
Random Choice Picker
Animated Navigation
Incrementing Counter
Drink Water
Movie App
Background Slider
Theme Clock
Button Ripple Effect
Drag N Drop
Drawing App
Kinetic Loader
Content Placeholder
Sticky Navbar
Double Vertical Slider
Toast Notification
Github Profiles
Double Click Heart
Auto Text Effect
Password Generator
Good Cheap Fast
Notes App
Animated Countdown
Image Carousel
Hoverboard
Pokedex
Mobile Tab Navigation
Password Strength Background
3d Background Boxes
Verify Account UI
Live User Filter
Feedback UI Design
Custom Range Slider
Netflix Mobile Navigation
Quiz App
Testimonial Box Switcher
Random Image Feed
Todo List
Insect Catch Game
Simple Timer (Bonus Day 1)
Many people jump into a frontend framework too early. Learning vanilla JavaScript and understanding how the document object model works are essential before moving to a framework. This course teaches you this by creating real-world projects of all types.
You will also learn more about HTML5 and CSS including semantic tags in your markup, basic CSS properties such as colors, alignment, flexbox, and shadows as well as creating responsive layouts with CSS media queries, CSS custom properties, animations/transitions, and more.
50 projects may seem like a lot, but we were able to make them small enough to where you can complete a project in just a few hours. Of course, this depends on your skill level.
Instructor Details
- 4.6 Rating
12,876 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
MERN From Scratch | eCommerce Platform (2025)
4.7 (8,141 Reviews)
Provider: Udemy
Time: 13.5h
$13.99
More CSS courses
Build Responsive Real-World Websites with HTML and CSS (2024)
4.8 (119,018 Reviews)
Provider: Udemy
Time: 37.5h
$174.99
Advanced CSS and Sass: Flexbox, Grid, Animations and More! (2024)
4.8 (46,326 Reviews)
Provider: Udemy
Time: 28.1h
$149.99
Modern HTML & CSS From The Beginning 2.0 (2025)
4.8 (28,669 Reviews)
Provider: Udemy
Time: 24.3h
$129.99
How to Create A Website: An HTML Tutorial and CSS Tutorial (2025)
4.7 (2,057 Reviews)
Provider: Udemy
Time: 31.9h
$10.99
Ultimate CSS Grid Course: From Beginner to Advanced (2021)
4.7 (1,039 Reviews)
Provider: Udemy
Time: 2.7h
$13.99
Reviews
By Raul Veras on 1/30/2026
I like the way every step was explained in this video, especially when he elaborated on the why we may or may not need certain things. Also, like how he explained different ways to link or import fonts.
By Shimon Morgenstern on 1/28/2026
This course is amazing. Brad fills the course with a lot of relevant information, all taught in an easy to understand style with hands-on projects for reinforcement. I highly recommend this course and Brad's courses in general.
By Kristina Vignjević on 1/21/2026
The course includes many exercises and projects, which is great for hands-on practice. Even after completing projects, I didn’t feel fully confident in my JavaScript understanding. I would recommend this course as a additional practice resource rather than a primary source for learning JavaScript.
By Zuzana Kotkova on 12/8/2025
I have been following Brad Traversy for some years now. Bought several his courses, and as always this one is great, never disappointed. Nice little projects to practice your JS skills, especially DOM manipulation.
By Leroy Minderman on 11/22/2025
Very nice to have some code along excercises with real world-examples next to a course on full-stack development to get some experience. This course is providing excellent idea's for my own website.
By Shohrukh Koyirov on 11/17/2025
I find this tutorial very cool. You enjoy small projects. It will not boring. The duration of each project is also perfect, so it will be not boring. I enjoyed this course and gladly suggest this tutorial to other people too!
By Darrell Mayson on 11/11/2025
As expected Brad delivers. Perfectly timed, well explained, well paced and engaging - after so many hit and miss searches! Already feel this course will deliver as a fun and useful learning resource.
By Asadullahil Galib on 10/25/2025
The thing I love about Brad is that, he goes directly to the point and and doesn't waste much time with unnecessary topics
By Aaron Asuncion on 9/30/2025
This course package is great for those who are staring to/beginners in front-end web development. The JavaScript can be overwhelming at first but the more you do it, the better you become and you the more get use to it thru repetition. One Comment: there are a couple of projects that may NOT be working. Overall this pckg. is great for reviewing and also a good learning material.
By Bheki Thomola on 9/14/2025
Brilliant way to practise. Learning theory with random practise sessions is not helpful. Doing complete projects as in this course is the only way to learn and retain the skills.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100











