/50Days50Projects

This repository features 50 mini projects related to HTML, CSS, and JavaScript. The development stages of these projects are available on YouTube.

Primary LanguageCSS

50 Days 50 Projects

  • Overview:
    • This repository is entirely project-based and contains fundamental projects, especially for beginners. It includes a total of 50 mini projects related to HTML, CSS, and JavaScript. You can easily access the source code and YouTube video links for the relevant projects through the "Projects" table below.
  • Organization:
    • Projects are organized into folders. You can click on the relevant project in the Projects section to access the source code and YouTube video links.
  • This is a modified version of the "50 Projects In 50 Days - HTML, CSS & JavaScript" course taught by Brad Traversy and Florin Pop, filtered through my own study.

Projects

markdown Copy code

No Source Code YouTube Link Status
00 Expanding Cards How to Create Animated Expanding Cards • 50 Days 50 Projects -1 Completed
01 Progress Steps How to Create Animated Progress Steps • 50 Days 50 Projects -2 Completed
02 Animated Rotating Menu How to Create an Animated Menu • 50 Days 50 Projects -3 Completed
03 Hidden Search Widget How to Create a Toggle Search Input • 50 Days 50 Projects -4 Completed
04 Blurred Loading Screen How to Create an Animated Loading Screen • 50 Days 50 Projects -5 Completed
05 Scroll Animation How to Create Scroll Animations • 50 Days 50 Projects -6 Completed
06 Split Landing Page How to Create an Animated Expanding Landing Page • 50 Days 50 Projects -7 Completed
07 Wave Animation How to Create Wave Animation • 50 Days 50 Projects -8 Completed
08 Sound Stream Deck Let's Create a Sound Stream Deck • 50 Days 50 Projects -9 Completed
09 Dad Jokes Let's Build a Dad Jokes Generator • 50 Days 50 Projects -10 Completed
10 Event keyCodes KeyCodes Recap Project • 50 Days 50 Projects -11 Completed
11 FAQ Collapse Let's Create a Detailed Collapse Project • 50 Days 50 Projects -12 Completed
12 Random Choice Picker Simple Game with setTimeout and setInterval • 50 Days 50 Projects -13 Completed
13 Animated Navigation Animated Expanding Menu • 50 Days 50 Projects -14 Completed
14 Incrementing Counter Let's Build an Incrementing Counter • 50 Days 50 Projects -15 Completed
15 Random Image Feed How to Create a Random Image Feed • 50 Days 50 Projects -16 Completed
16 Loading Screen CSS Loading Screen • 50 Days 50 Projects -17 Completed
17 Auto Text Effect Automatic Text Effect • 50 Days 50 Projects -18 Completed
18 Notes Notes App (localStorage) • 50 Days 50 Projects -19 Completed
19 Quiz App Quiz App • 50 Days 50 Projects -20 Completed
20 Drawing App Drawing App - Canvas • 50 Days 50 Projects -21 Completed
21 Pokedex Pokedex Guide - Fetch API & Async Await Basic Project • 50 Days 50 Projects -22 Completed
22 Verify Account UI Verify Account UI • 50 Days 50 Projects -23 Completed
23 Drag and Drop Drag and Drop • 50 Days 50 Projects -24 Completed
24 Password Strength Password Strength UI - Tailwind CSS • 50 Days 50 Projects -25 Completed
25 Mobile Tab Navigation Let's Create Mobile Tab Navigation • HTML, CSS, JavaScript -26 Completed
26 Image Carousel Moving Image Showcase (setInterval) • HTML, CSS, JavaScript -27 Completed
27 Notification JavaScript Beginner Project (DOM - Math.random) • Project -28 Completed
28 Button Effect Quick Review Project for JavaScript and CSS (clientX-Y offsetTop-Left) -29 Completed
29 Hoverboard 15-Minute JavaScript Game for Beginners (mouseover - mouseout) • Project -30 Completed
30 Box Switcher JavaScript Project for Beginners • HTML, CSS, JavaScript -31 Completed
31 Sticky Navbar Creating a Sticky Navbar • HTML, CSS & JS Completed
32 Feedback UI Creating a Feedback UI • HTML, CSS & JS Completed
33 Movie App Build a Movie Website in 50 Minutes - Responsive • JavaScript Fetch API Completed
34 GitHub Profile Card Creating GitHub Profile Cards • Axios - JavaScript Completed