README.md

August 2, 2024 · View on GitHub

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.


Projects

markdown Copy code

NoSource CodeYouTube LinkStatus
00Expanding CardsHow to Create Animated Expanding Cards • 50 Days 50 Projects -1Completed
01Progress StepsHow to Create Animated Progress Steps • 50 Days 50 Projects -2Completed
02Animated Rotating MenuHow to Create an Animated Menu • 50 Days 50 Projects -3Completed
03Hidden Search WidgetHow to Create a Toggle Search Input • 50 Days 50 Projects -4Completed
04Blurred Loading ScreenHow to Create an Animated Loading Screen • 50 Days 50 Projects -5Completed
05Scroll AnimationHow to Create Scroll Animations • 50 Days 50 Projects -6Completed
06Split Landing PageHow to Create an Animated Expanding Landing Page • 50 Days 50 Projects -7Completed
07Wave AnimationHow to Create Wave Animation • 50 Days 50 Projects -8Completed
08Sound Stream DeckLet's Create a Sound Stream Deck • 50 Days 50 Projects -9Completed
09Dad JokesLet's Build a Dad Jokes Generator • 50 Days 50 Projects -10Completed
10Event keyCodesKeyCodes Recap Project • 50 Days 50 Projects -11Completed
11FAQ CollapseLet's Create a Detailed Collapse Project • 50 Days 50 Projects -12Completed
12Random Choice PickerSimple Game with setTimeout and setInterval • 50 Days 50 Projects -13Completed
13Animated NavigationAnimated Expanding Menu • 50 Days 50 Projects -14Completed
14Incrementing CounterLet's Build an Incrementing Counter • 50 Days 50 Projects -15Completed
15Random Image FeedHow to Create a Random Image Feed • 50 Days 50 Projects -16Completed
16Loading ScreenCSS Loading Screen • 50 Days 50 Projects -17Completed
17Auto Text EffectAutomatic Text Effect • 50 Days 50 Projects -18Completed
18NotesNotes App (localStorage) • 50 Days 50 Projects -19Completed
19Quiz AppQuiz App • 50 Days 50 Projects -20Completed
20Drawing AppDrawing App - Canvas • 50 Days 50 Projects -21Completed
21PokedexPokedex Guide - Fetch API & Async Await Basic Project • 50 Days 50 Projects -22Completed
22Verify Account UIVerify Account UI • 50 Days 50 Projects -23Completed
23Drag and DropDrag and Drop • 50 Days 50 Projects -24Completed
24Password StrengthPassword Strength UI - Tailwind CSS • 50 Days 50 Projects -25Completed
25Mobile Tab NavigationLet's Create Mobile Tab Navigation • HTML, CSS, JavaScript -26Completed
26Image CarouselMoving Image Showcase (setInterval) • HTML, CSS, JavaScript -27Completed
27NotificationJavaScript Beginner Project (DOM - Math.random) • Project -28Completed
28Button EffectQuick Review Project for JavaScript and CSS (clientX-Y offsetTop-Left) -29Completed
29Hoverboard15-Minute JavaScript Game for Beginners (mouseover - mouseout) • Project -30Completed
30Box SwitcherJavaScript Project for Beginners • HTML, CSS, JavaScript -31Completed
31Sticky NavbarCreating a Sticky Navbar • HTML, CSS & JSCompleted
32Feedback UICreating a Feedback UI • HTML, CSS & JSCompleted
33Movie AppBuild a Movie Website in 50 Minutes - Responsive • JavaScript Fetch APICompleted
34GitHub Profile CardCreating GitHub Profile Cards • Axios - JavaScriptCompleted