Skip to content
UdemyCssPaid courseBeginner levelCertificate

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

icon
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

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 : 92 / 100

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


  1. Expanding Cards

  2. Progress Steps

  3. Rotating Navigation Animation

  4. Hidden Search Widget

  5. Blurry Loading

  6. Scroll Animation

  7. Split Landing Page

  8. Form Wave

  9. Sound Board

  10. Dad Jokes

  11. Event Keycodes

  12. Faq Collapse

  13. Random Choice Picker

  14. Animated Navigation

  15. Incrementing Counter

  16. Drink Water

  17. Movie App

  18. Background Slider

  19. Theme Clock

  20. Button Ripple Effect

  21. Drag N Drop

  22. Drawing App

  23. Kinetic Loader

  24. Content Placeholder

  25. Sticky Navbar

  26. Double Vertical Slider

  27. Toast Notification

  28. Github Profiles

  29. Double Click Heart

  30. Auto Text Effect

  31. Password Generator

  32. Good Cheap Fast

  33. Notes App

  34. Animated Countdown

  35. Image Carousel

  36. Hoverboard

  37. Pokedex

  38. Mobile Tab Navigation

  39. Password Strength Background

  40. 3d Background Boxes

  41. Verify Account UI

  42. Live User Filter

  43. Feedback UI Design

  44. Custom Range Slider

  45. Netflix Mobile Navigation

  46. Quiz App

  47. Testimonial Box Switcher

  48. Random Image Feed

  49. Todo List

  50. Insect Catch Game

  51. 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.

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

$119.99

$129.99

$84.99

$99.99

$59.99

$89.99

icon
More CSS courses

Free

$99.99

$129.99

$74.99

$94.99

Free

icon
Reviews

4.6

12,876 ratings on Udemy

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

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.

Showing all 10 reviews on CourseDuck

Read all 12,876 reviews on Udemy