50 Projects In 50 Days - HTML, CSS & JavaScript

18h 13m 45s
English
Paid
May 14, 2024

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

More

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

Watch Online 50 Projects In 50 Days - HTML, CSS & JavaScript

Join premium to watch
Go to premium
# Title Duration
1 Welcome 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

Similar courses to 50 Projects In 50 Days - HTML, CSS & JavaScript

Web Developer Bootcamp with Flask and Python in 2022

Web Developer Bootcamp with Flask and Python in 2022udemy

Duration 19 hours 57 minutes 43 seconds
Complete Web Developer in 2023: Zero to Mastery
Advanced JavaScript

Advanced JavaScriptui.dev (ex. Tyler McGinnis)

Duration 3 hours 5 minutes 51 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Duration 12 hours 13 minutes 30 seconds
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
JavaScript Algorithms and Data Structures Masterclass

JavaScript Algorithms and Data Structures Masterclassudemy

Duration 21 hours 47 minutes 46 seconds
GraphQL for beginners with JavaScript

GraphQL for beginners with JavaScriptudemy

Duration 5 hours 35 minutes 31 seconds