50 Projects In 50 Days HTML, CSS & JavaScript
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:
-
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
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.