CF

50 Projects In 50 Days - HTML, CSS & JavaScript

18h 13m 45s
English
Paid

This course gives you hands‑on practice with real projects. You build small apps with HTML, CSS, and JavaScript. Each project helps you work with the DOM and learn how the browser reacts to user actions. You will write code right away and see results fast.

What You Learn

You learn how to handle events, update the DOM, and work with simple APIs. You also practice layout, styling, and clean code ideas. These projects help you build confidence through clear steps and quick wins.

Project List

You create 50 small projects. Each one teaches a new idea or pattern.

  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 and 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

About the Authors

Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 161 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 161 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome
All Course Lessons (161)
#Lesson TitleDurationAccess
1
Welcome Demo
01:08
2
My Environment & Setup
04:19
3
Project Starter Boilerplate
07:37
4
Project Intro
00:44
5
Initial Cards
08:58
6
Expanding Effect
06:52
7
Project Intro
01:00
8
Creating The Steps
13:02
9
Step Functionality
11:12
10
Project Intro
01:06
11
Content & Circle Styling
12:20
12
Rotate & Slide Effect
11:03
13
Project Intro
00:44
14
Hidden Search Widget
09:07
15
Project Intro
00:55
16
Background Image & Loading Text
04:32
17
Load Blur Effect
07:42
18
Project Intro
01:03
19
Scroll Animation
13:12
20
Project Intro
00:56
21
Split Landing Page HTML & CSS
14:30
22
Adding The Hover Effect
07:12
23
Project Intro
00:43
24
Styling The Form
08:37
25
Adding The Wave Effect
09:38
26
Project Intro
01:11
27
Sound Board Project
09:53
28
Project Intro
01:15
29
Jokes HTML & CSS
06:41
30
Working With Fetch & HTTP Requests/Responses
06:12
31
Fetching & Displaying Jokes
10:30
32
Project Intro
01:35
33
Key Boxes HTML & CSS
06:22
34
Display Key Codes
06:01
35
Project Intro
00:55
36
FAQ Boxes
12:53
37
Toggle Buttons
07:12
38
Project Intro
00:53
39
Choice Picker UI
06:24
40
Create Tags
05:42
41
Select Random Tag
07:25
42
Project Intro
00:59
43
Nav Styling
10:50
44
Icon Styling & Active Toggle
07:01
45
Project Intro
00:39
46
Counters HTML & CSS
05:29
47
Create & Display Increment
06:47
48
Project Intro
00:53
49
Create & Style The Cups
15:16
50
Fill Small Cups
06:33
51
Update Big Cup
08:40
52
Project Intro
01:28
53
Movies UI Layout
14:03
54
Fetching Data From The API
11:17
55
Adding Movies To The DOM
09:27
56
Project Intro
00:43
57
HTML & CSS
12:37
58
Changing Slides
08:22
59
Project Intro
00:35
60
Starting The Clock
12:52
61
Finish Clock Styling
05:48
62
Mode & Clock Function
16:40
63
Project Intro
00:35
64
Button Style & Animation
06:50
65
Button Click Effect
08:10
66
Project Intro
00:59
67
Create Drop Boxes
05:22
68
Drag Drop Events
13:48
69
Project Intro
01:18
70
Drawing Pad UI
06:33
71
Canvas Shapes
07:07
72
Mouse Events & Drawing
06:44
73
Project Intro
00:25
74
Kinetic CSS Loader
07:26
75
Project Intro
00:54
76
Card HTML
05:34
77
Card CSS
05:06
78
Project Intro
00:49
79
Website Content & Style
12:32
80
Navbar CSS & JS
10:22
81
Project Intro
01:02
82
Vertical Slider UI
14:03
83
Vertical Slider Function
10:48
84
Project Intro
01:03
85
Create Toast Notifications
15:00
86
Project Intro
01:50
87
Github Profile Card
14:49
88
Fetching Profile Data With Axios
11:10
89
Dynamic Profile Cards
08:03
90
Adding Repos To Card
08:11
91
Project Intro
01:28
92
HTML & CSS
07:02
93
Show Heart Based On Click Position
13:26
94
Project Intro
00:55
95
Auto Text Effect
09:14
96
Project Intro
01:03
97
Password Generator UI
13:46
98
Random Functions
08:21
99
Generate Password
16:01
100
Copy Password To Clipboard
02:49
101
Project Intro
01:01
102
Style Checkboxes
08:00
103
Check Ball Animation
04:08
104
JavaScript Logic
04:53
105
Project Intro
01:37
106
Notes HTML & CSS
09:29
107
Adding Notes To The DOM
10:06
108
Save Notes To Local Storage
09:42
109
Project Intro
01:15
110
Counter & Final Sections
08:54
111
In & Out Animations
07:40
112
Dynamic Animation With JS
10:37
113
Project Intro
00:31
114
Carousel UI
07:27
115
Carousel Functionality
10:09
116
Project Intro
00:50
117
Styling The Board Squares
05:06
118
Hoverboard Effect
08:17
119
Project Intro
01:09
120
Pokedex UI & Styling
11:11
121
Fetching Pokemon Data
05:05
122
Creating The Pokemon Cards
10:24
123
Project Intro
00:45
124
Create & Style UI
10:26
125
Navigation Effect
04:26
126
Project Intro
01:14
127
Creating The Form & Background
08:58
128
Change Blur On Input
04:42
129
Project Intro
01:28
130
Creating The Button & Boxes
15:57
131
Background Position & Rotate Event
10:11
132
Project Intro
00:59
133
Verify Account UI Project
13:51
134
Project Intro
01:01
135
User List UI
12:29
136
Fetch & Filter Users
13:38
137
Project Intro
01:27
138
Feedback Boxes
11:09
139
Select & Submit Feedback
12:55
140
Project Intro
01:08
141
Styling The Range
12:08
142
Label Value & Movement
11:06
143
Project Intro
01:06
144
Netflix Nav - Part 1
08:34
145
Netflix Nav - Part 2
10:38
146
Project Intro
01:02
147
Quiz UI
09:45
148
Quiz Functionality
11:32
149
Project Intro
00:40
150
Create Box & Progress Bar
12:11
151
Testimonial Switch
07:45
152
Project Intro
01:05
153
Random Image Feed Project
09:14
154
Project Intro
00:54
155
Todo List UI
08:49
156
Add, Remove & Mark Complete
06:10
157
Saving Todos to Local Storage
08:08
158
Project Intro
01:23
159
Game Styling - Part 1
12:20
160
Game Styling - Part 2
09:04
161
Insect Game Functionality
19:03
Unlock unlimited learning

Get instant access to all 160 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What is 50 Projects In 50 Days - HTML, CSS & JavaScript about?
This course gives you hands‑on practice with real projects. You build small apps with HTML, CSS, and JavaScript. Each project helps you work with the DOM and learn how the browser reacts to user actions. You will write code right away and…
Who teaches this course?
It is taught by Brad Traversy, Udemy. You can find more courses by these instructors on the corresponding source pages.
How long is the course?
It contains 161 lessons with a total runtime of 18 hours 13 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/50-projects-in-50-days-html-css-javascript. The page hosts every lesson with the integrated video player; no download is required.