50 Projects In 50 Days – HTML, CSS & JavaScript
-
Introduction
-
Day 1 – Expanding Cards
-
Day 2 – Progress Steps
-
Day 3 – Rotating Navigation
-
Day 4 – Hidden Search Widget
-
Day 5 – Blurry Loading
-
Day 6 – Scroll Animation
-
Day 7 – Split Landing Page
-
Day 8 – Form Wave Animation
-
Day 9 – Sound Board
-
Day 10 – Dad Jokes
-
Day 11 – Event KeyCodes
-
Day 12 – FAQ Collapse
-
Day 13 – Random Choice Picker
-
Day 14 – Animated Navigation
-
Day 15 – Incrementing Counter
-
Day 16 – Drink Water
-
Day 17 – Movie App
-
Day 18 – Background Slider
-
Day 19 – Theme Clock
-
Day 20 – Button Ripple Effect
-
Day 21 – Drag N Drop
-
Day 22 – Drawing App
-
Day 23 – Kinetic CSS Loader
-
Day 24 – Content Placeholder
-
Day 25 – Sticky Navbar
-
Day 26 – Double Vertical Slider
-
Day 27 – Toast Notification
-
Day 28 – Github Profiles
-
Day 29 – Double Heart Click
-
Day 30 – Auto Text Effect
-
Day 31 – Password Generator
-
Day 32 – Good, Cheap, Fast Checkboxes
-
Day 33 – Notes App
-
Day 34 – Animated Countdown
-
Day 35 – Image Carousel
-
Day 36 – Hoverboard
-
Day 37 – Pokedex
-
Day 38 – Mobile Tab Navigation
-
Day 39 – Password Strength Background
-
Day 40 – 3D Background Boxes
-
Day 41 – Verify Account UI
-
Day 42 – Live User Filter
-
Day 43 – Feedback UI Design
-
Day 44 – Custom Range Slider
-
Day 45 – Netflix Navigation
-
Day 46 – Quiz App
-
Day 47 – Testimonial Box Switcher
-
Day 48 – Random Image Feed
-
Day 49 – Todo List
-
Day 50 – Insect Catch Game
-
Bonus Day 1 – Simple Timer
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.
What's included
- 19.5 hours on-demand video
- 1 article
- Access on mobile and TV
- Certificate of completion