Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Brad Traversy's 50 Projects In 50 Days - HTML, CSS & JavaScript

Notifications You must be signed in to change notification settings

RayDeanTech/50-Projects-HTML-CSS-JS

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Brad Traversy's 50 Projects In 50 Days - HTML, CSS & JavaScript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.