Provider

Traversy Media

Description

Course Description

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

What you'll learn

Project-based teaching to sharpen your HTML, CSS & JavaScript skills Modern styling with flexbox, CSS animations, custom properties, etc Perfect for beginners looking for things to build unique projects in a short timeframe DOM manipulation, events, array methods, HTTP requests & more Suitable for both beginners & intermediate front-end developers Everything is open-source. Use the projects in your own personal portfolio

Course Link

50 Projects In 50 Days

Index

GitHub Code	Live Demo
01 - Project Starter	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/01%20-%20Project%20Starter
02 - Expanding Cards	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/02%20-%20Expanding%20Cards
03 - Progress Steps	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/03%20-%20Progress%20Steps
04 - Rotating Nav Animation	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/04%20-%20Rotating%20Nav%20Animation
05 - Hidden Search Widget	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/05%20-%20Hidden%20Search%20Widget
06 - Blurry Loading	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/06%20-%20Blurry%20Loading
07 - Scroll Animation	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/07%20-%20Scroll%20Animation
08 - Split Landing Page	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/08%20-%20Split%20Landing%20Page
09 - Form Input Wave	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/09%20-%20Form%20Input%20Wave
10 - Sound Board	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/10%20-%20Sound%20Board
11 - Dad Jokes	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/11%20-%20Dad%20Jokes
12 - Event KeyCodes	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/12%20-%20Event%20KeyCodes
13 - FAQ Collapse	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/13%20-%20FAQ%20Collapse
14 - Random Choice Picker	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/14%20-%20Random%20Choice%20Picker
15 - Animated Navigation	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/15%20-%20Animated%20Navigation
16 - Incrementing Counter	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/16%20-%20Incrementing%20Counter
17 - Water Tracker	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/17%20-%20Water%20Tracker
18 - Movie App	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/18%20-%20Movie%20App
19 - Background Slider	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/19%20-%20Background%20Slider
20 - Theme Clock	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/20%20-%20Theme%20Clock
21 - Button Ripple	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/21%20-%20Button%20Ripple
22 - Drag N Drop	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/22%20-%20Drag%20N%20Drop
23 - Drawing App	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/23%20-%20Drawing%20App
24 - Kinetic Loader	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/24%20-%20Kinetic%20Loader
25 - Content Placeholder	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/25%20-%20Content%20Placeholder
26 - Sticky NavBar	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/26%20-%20Sticky%20NavBar
27 - Double Vertical Slider	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/27%20-%20Double%20Vertical%20Slider
28 - Toast Notification	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/28%20-%20Toast%20Notification
29 - GitHub Profiles	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/29%20-%20GitHub%20Profiles
30 - Double Click Heart	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/30%20-%20Double%20Click%20Heart
31 - Auto Text Effect	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/31%20-%20Auto%20Text%20Effect
32 - Password Generator	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/32%20-%20Password%20Generator
33 - Good, Cheap, Fast Checkboxes	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/33%20-%20Good%2C%20Cheap%2C%20Fast%20Checkboxes
34 - Notes App	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/34%20-%20Notes%20App
35 - Animated Countdown	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/35%20-%20Animated%20Countdown
36 - Image Carousel	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/36%20-%20Image%20Carousel
37 -Hoverboard	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/37%20-Hoverboard
38 - Pokedex	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/38%20-%20Pokedex
39 - Mobile Tab Navigation	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/39%20-%20Mobile%20Tab%20Navigation
40 - Password Strength	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/40%20-%20Password%20Strength
41 - 3D Background Boxes	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/41%20-%203D%20Background%20Boxes
42 - Verify Account UI	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/42%20-%20Verify%20Account%20UI
43 - Live User Filter	https://demos.raydean.tech/50-Projects-HTML-CSS-JS/43%20-%20Live%20User%20Filter