50 Projects In 50 Days – HTML, CSS & JavaScript

December 3, 2020 Courses
50 Projects In 50 Days – HTML, CSS & JavaScript

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 18 Hours | 7.27 GB

Sharpen your skills by building 50 quick, unique & fun mini projects

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

What you’ll 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
Table of Contents

Introduction
1 Welcome
2 My Environment & Setup
3 Project Starter Boilerplate
4 Course Projects Code & Demos

Day 1 – Expanding Cards
5 Project Intro
6 Initial Cards
7 Expanding Effect

Day 2 – Progress Steps
8 Project Intro
9 Creating The Steps
10 Step Functionality

Day 3 – Rotating Navigation
11 Project Intro
12 Content & Circle Styling
13 Rotate & Slide Effect

Day 4 – Hidden Search Widget
14 Project Intro
15 Hidden Search Widget

Day 5 – Blurry Loading
16 Project Intro
17 Background Image & Loading Text
18 Load Blur Effect

Day 6 – Scroll Animation
19 Project Intro
20 Scroll Animation

Day 7 – Split Landing Page
21 Project Intro
22 Split Landing Page HTML & CSS
23 Adding The Hover Effect

Day 8 – Form Wave Animation
24 Project Intro
25 Styling The Form
26 Adding The Wave Effect

Day 9 – Sound Board
27 Project Intro
28 Sound Board Project

Day 10 – Dad Jokes
29 Project Intro
30 Jokes HTML & CSS
31 Working With Fetch & HTTP Requests Responses
32 Fetching & Displaying Jokes

Day 11 – Event KeyCodes
33 Project Intro
34 Key Boxes HTML & CSS
35 Display Key Codes

Day 12 – FAQ Collapse
36 Project Intro
37 FAQ Boxes
38 Toggle Buttons

Day 13 – Random Choice Picker
39 Project Intro
40 Choice Picker UI
41 Create Tags
42 Select Random Tag

Day 14 – Animated Navigation
43 Project Intro
44 Nav Styling
45 Icon Styling & Active Toggle

Day 15 – Incrementing Counter
46 Project Intro
47 Counters HTML & CSS
48 Create & Display Increment

Day 16 – Drink Water
49 Project Intro
50 Create & Style The Cups
51 Fill Small Cups
52 Update Big Cup

Day 17 – Movie App
53 Project Intro
54 Movies UI Layout
55 Fetching Data From The API
56 Adding Movies To The DOM

Day 18 – Background Slider
57 Project Intro
58 HTML & CSS
59 Changing Slides

Day 19 – Theme Clock
60 Project Intro
61 Starting The Clock
62 Finish Clock Styling
63 Mode & Clock Function

Day 20 – Button Ripple Effect
64 Project Intro
65 Button Style & Animation
66 Button Click Effect

Day 21 – Drag N Drop
67 Project Intro
68 Create Drop Boxes
69 Drag Drop Events

Day 22 – Drawing App
70 Project Intro
71 Drawing Pad UI
72 Canvas Shapes
73 Mouse Events & Drawing

Day 23 – Kinetic CSS Loader
74 Project Intro
75 Kinetic CSS Loader

Day 24 – Content Placeholder
76 Project Intro
77 Card HTML
78 Card CSS

Day 25 – Sticky Navbar
79 Project Intro
80 Website Content & Style
81 Navbar CSS & JS

Day 26 – Double Vertical Slider
82 Project Intro
83 Vertical Slider UI
84 Vertical Slider Function

Day 27 – Toast Notification
85 Project Intro
86 Create Toast Notifications

Day 28 – Github Profiles
87 Project Intro
88 Github Profile Card
89 Fetching Profile Data With Axios
90 Dynamic Profile Cards
91 Adding Repos To Card

Day 29 – Double Heart Click
92 Project Intro
93 HTML & CSS
94 Show Heart Based On Click Position

Day 30 – Auto Text Effect
95 Project Intro
96 Auto Text Effect

Day 31 – Password Generator
97 Project Intro
98 Password Generator UI
99 Random Functions
100 Generate Password
101 Copy Password To Clipboard

Day 32 – Good, Cheap, Fast Checkboxes
102 Project Intro
103 Style Checkboxes
104 Check Ball Animation
105 JavaScript Logic

Day 33 – Notes App
106 Project Intro
107 Notes HTML & CSS
108 Adding Notes To The DOM
109 Save Notes To Local Storage

Day 34 – Animated Countdown
110 Project Intro
111 Counter & Final Sections
112 In & Out Animations
113 Dynamic Animation With JS

Day 35 – Image Carousel
114 Project Intro
115 Carousel UI
116 Carousel Functionality

Day 36 – Hoverboard
117 Project Intro
118 Styling The Board Squares
119 Hoverboard Effect

Day 37 – Pokedex
120 Project Intro
121 Pokedex UI & Styling
122 Fetching Pokemon Data
123 Creating The Pokemon Cards

Day 38 – Mobile Tab Navigation
124 Project Intro
125 Create & Style UI
126 Navigation Effect

Day 39 – Password Strength Background
127 Project Intro
128 Creating The Form & Background
129 Change Blur On Input

Day 40 – 3D Background Boxes
130 Project Intro
131 Creating The Button & Boxes
132 Background Position & Rotate Event

Day 41 – Verify Account UI
133 Project Intro
134 Verify Account UI Project

Day 42 – Live User Filter
135 Project Intro
136 User List UI
137 Fetch & Filter Users

Day 43 – Feedback UI Design
138 Project Intro
139 Feedback Boxes
140 Select & Submit Feedback

Day 44 – Custom Range Slider
141 Project Intro
142 Styling The Range
143 Label Value & Movement

Day 45 – Netflix Navigation
144 Project Intro
145 Netflix Nav – Part 1
146 Netflix Nav – Part 2

Day 46 – Quiz App
147 Project Intro
148 Quiz UI
149 Quiz Functionality

Day 47 – Testimonial Box Switcher
150 Project Intro
151 Create Box & Progress Bar
152 Testimonial Switch

Day 48 – Random Image Feed
153 Project Intro
154 Random Image Feed Project

Day 49 – Todo List
155 Project Intro
156 Todo List UI
157 Add, Remove & Mark Complete
158 Saving Todos to Local Storage

Day 50 – Insect Catch Game
159 Project Intro
160 Game Styling – Part 1
161 Game Styling – Part 2
162 Insect Game Functionality

Resolve the captcha to access the links!