Welcome to my 50 Projects in 50 Days challenge repository! This is a hands-on, practical journey through modern frontend web development. Each day, I built a unique, interactive web project using just HTML, CSS, and vanilla JavaScript.
This collection serves as a comprehensive learning portfolio, demonstrating core concepts, creative UI/UX patterns, and real-world application logic—all without relying on frameworks.
💡 Perfect For: Beginners building their first portfolio, developers brushing up on fundamentals, or anyone looking for inspiration for small, focused projects.
✅ Every Project is Live! – Click any link in the table below to see a working demo instantly.
✅ Pure Vanilla Code – No frameworks, libraries, or bloat. Just foundational web tech.
✅ Diverse Concepts – From animations and widgets to full apps and games.
✅ Clean & Consistent – Each project is self-contained in its own folder for easy study.
✅ Course-Aligned – Based on the popular "50 Projects in 50 Days" course by Brad Traversy & Florin Pop.
| # | Project | Live Demo |
|---|---|---|
| 01 | Expanding Cards | GO >> |
| 02 | Progress Steps | GO >> |
| 03 | Rotating Navigation Animation | GO >> |
| 04 | Hidden Search Widget | GO >> |
| 05 | Blurry Loading | GO >> |
| 06 | Scroll Animation | GO >> |
| 07 | Split Landing Page | GO >> |
| 08 | Form Wave | GO >> |
| 09 | Sound Board | GO >> |
| 10 | Dad Jokes | GO >> |
| 11 | Event Keycodes | GO >> |
| 12 | Faq Collapse | GO >> |
| 13 | Random Choice Picker | GO >> |
| 14 | Animated Navigation | GO >> |
| 15 | Incrementing Counter | GO >> |
| 16 | Drink Water | GO >> |
| 17 | Movie App | GO >> |
| 18 | Background Slider | GO >> |
| 19 | Theme Clock | GO >> |
| 20 | Button Ripple Effect | GO >> |
| 21 | Drag N Drop | GO >> |
| 22 | Drawing App | GO >> |
| 23 | Kinetic Loader | GO >> |
| 24 | Content Placeholder | GO >> |
| 25 | Sticky Navbar | GO >> |
| 26 | Double Vertical Slider | GO >> |
| 27 | Toast Notification | GO >> |
| 28 | Github Profiles | GO >> |
| 29 | Double Click Heart | GO >> |
| 30 | Auto Text Effect | GO >> |
| 31 | Password Generator | GO >> |
| 32 | Good Cheap Fast | GO >> |
| 33 | Notes App | GO >> |
| 34 | Animated Countdown | GO >> |
| 35 | Image Carousel | GO >> |
| 36 | Hoverboard | GO >> |
| 37 | Pokedex | GO >> |
| 38 | Mobile Tab Navigation | GO >> |
| 39 | Password Strength Background | GO >> |
| 40 | 3d Background Boxes | GO >> |
| 41 | Verify Account Ui | GO >> |
| 42 | Live User Filter | GO >> |
| 43 | Feedback Ui Design | GO >> |
| 44 | Custom Range Slider | GO >> |
| 45 | Netflix Mobile Navigation | GO >> |
| 46 | Quiz App | GO >> |
| 47 | Testimonial Box Switcher | GO >> |
| 48 | Random Image Feed | GO >> |
| 49 | Todo List | GO >> |
| 50 | Insect Catch Game | GO >> |
- Browse the table above and click any "GO >>" link to see a live demo.
- To study the code, navigate to the corresponding project folder (e.g.,
/01_Expending_Card) here on GitHub. - Each folder contains the full source:
index.html,style.css, andscript.js.
# 1. Clone the repository
git clone https://github.com/Feroz455/50Project50days.git
cd 50Project50days
# 2. Open any project in your browser
# Option A: Direct file open
open 01_Expending_Card/index.html
# Option B: Use a local server (Recommended for some features)
# Install 'live-server' globally: npm install -g live-server
# Then run: live-server 01_Expending_Card
## 📁 Project Structure
50Projects50days/
│
├── 01_Expending_Card/ # Expanding Cards
├── 02 _Progress_Steps/ # Progress Steps
├── 03_Rotating_Navigation/ # Rotating Navigation Animation
├── 04_Hidden_Search/ # Hidden Search Widget
├── 05 _Blurry_Loading/ # Blurry Loading
├── 06_Scroll_Animation/ # Scroll Animation
├── 07_Split_Landing_Page/ # Split Landing Page
├── 08_Form_Wave_Animation/ # Form Wave Animation
├── 09_Sound_Board/ # Sound Board
├── 10_Dad_Jokes/ # Dad Jokes Generator
├── 11_Event_KeyCodes/ # Event Keycodes Display
├── 12_FAQ_Collapse/ # FAQ Collapse Component
├── 13_Random_Choice_Picker/ # Random Choice Picker
├── 14_Animated_Navigation/ # Animated Navigation
├── 15 _Incrementing_Counter/ # Incrementing Counter
├── 16_Drink_Water/ # Drink Water Tracker
├── 17_Movie_App/ # Movie Application
├── 18_Background_Slider/ # Background Slider
├── 19_Theme_Clock/ # Theme Clock
├── 20_Button_Ripple_Effect/ # Button Ripple Effect
├── 21_Drag_N_Drop/ # Drag and Drop Interface
├── 22_Drawing_App/ # Drawing Application
├── 23_Kinetic_CSS_Loader/ # Kinetic CSS Loader
├── 24_Content_Placeholder/ # Content Placeholder
├── 25_Sticky_Navbar/ # Sticky Navigation Bar
├── 26_Double_Vertical_Slider/ # Double Vertical Slider
├── 27_Toast_Notification/ # Toast Notification System
├── 28_Github_Profiles/ # GitHub Profiles Viewer
├── 29_Double_Heart_Click/ # Double Click Heart Animation
├── 30_Auto_Text_effect/ # Auto Text Effect
├── 31_Password_Generator/ # Password Generator
├── 32_Good_Cheap_Fast/ # Good, Cheap, Fast Toggle
├── 33_Notes_App/ # Notes Application
├── 34_Animated_Countdown/ # Animated Countdown Timer
├── 35_Image_Carousel/ # Image Carousel
├── 36_Hoverboard/ # Hoverboard Color Grid
├── 37_Pokedex/ # Pokémon Dex Application
├── 38_Mobile_Tab_Navigation/ # Mobile Tab Navigation
├── 39_Password_Strength_Background/ # Password Strength Background
├── 40_3D_Background_Boxes/ # 3D Background Boxes
├── 41_Verify_Account_UI/ # Verify Account UI
├── 42_Live_User_Filter/ # Live User Filter
├── 43_Feedback_UI_Design/ # Feedback UI Design
├── 44_Coustom_Range_Slider/ # Custom Range Slider
├── 45_Netflix_Navigation/ # Netflix Mobile Navigation
├── 46_Quiz_App/ # Quiz Application
├── 47_Testimonial_Box_Switcher/# Testimonial Box Switcher
├── 48_Random_Image_Feed/ # Random Image Feed
├── 49_Todo_List/ # Todo List Application
├── 50_Insect_Catch_Game/ # Insect Catch Game
│
├── PROJECT_STATER/ # Starter templates
├── .vscode/ # VS Code configuration
├── .gitignore # Git ignore file
└── README.md # This file
| # | Project | Technologies | Category |
|---|---|---|---|
| 01 | Expanding Cards | HTML, CSS, JS | UI Components |
| 02 | Progress Steps | HTML, CSS, JS | UI Components |
| 03 | Rotating Navigation | HTML, CSS, JS | Navigation |
| 04 | Hidden Search Widget | HTML, CSS, JS | Widgets |
| 05 | Blurry Loading | HTML, CSS, JS | Animations |
| 06 | Scroll Animation | HTML, CSS, JS | Animations |
| 07 | Split Landing Page | HTML, CSS, JS | Layout |
| 08 | Form Wave Animation | HTML, CSS, JS | Forms |
| 09 | Sound Board | HTML, CSS, JS | Media |
| 10 | Dad Jokes | HTML, CSS, JS, API | API Integration |
| 11 | Event Keycodes | HTML, CSS, JS | Events |
| 12 | FAQ Collapse | HTML, CSS, JS | UI Components |
| 13 | Random Choice Picker | HTML, CSS, JS | Utilities |
| 14 | Animated Navigation | HTML, CSS, JS | Navigation |
| 15 | Incrementing Counter | HTML, CSS, JS | UI Components |
| 16 | Drink Water | HTML, CSS, JS | Applications |
| 17 | Movie App | HTML, CSS, JS, API | Applications |
| 18 | Background Slider | HTML, CSS, JS | Media |
| 19 | Theme Clock | HTML, CSS, JS | Utilities |
| 20 | Button Ripple Effect | HTML, CSS, JS | Effects |
| 21 | Drag N Drop | HTML, CSS, JS | Interactions |
| 22 | Drawing App | HTML, CSS, JS | Applications |
| 23 | Kinetic CSS Loader | HTML, CSS | Animations |
| 24 | Content Placeholder | HTML, CSS, JS | UI Components |
| 25 | Sticky Navbar | HTML, CSS, JS | Navigation |
| 26 | Double Vertical Slider | HTML, CSS, JS | Media |
| 27 | Toast Notification | HTML, CSS, JS | UI Components |
| 28 | Github Profiles | HTML, CSS, JS, API | API Integration |
| 29 | Double Heart Click | HTML, CSS, JS | Interactions |
| 30 | Auto Text Effect | HTML, CSS, JS | Effects |
| 31 | Password Generator | HTML, CSS, JS | Utilities |
| 32 | Good Cheap Fast | HTML, CSS, JS | UI Components |
| 33 | Notes App | HTML, CSS, JS | Applications |
| 34 | Animated Countdown | HTML, CSS, JS | Animations |
| 35 | Image Carousel | HTML, CSS, JS | Media |
| 36 | Hoverboard | HTML, CSS, JS | Effects |
| 37 | Pokedex | HTML, CSS, JS, API | Applications |
| 38 | Mobile Tab Navigation | HTML, CSS, JS | Navigation |
| 39 | Password Strength Background | HTML, CSS, JS | Effects |
| 40 | 3D Background Boxes | HTML, CSS, JS | Effects |
| 41 | Verify Account UI | HTML, CSS, JS | Forms |
| 42 | Live User Filter | HTML, CSS, JS, API | Applications |
| 43 | Feedback UI Design | HTML, CSS, JS | UI Components |
| 44 | Custom Range Slider | HTML, CSS, JS | UI Components |
| 45 | Netflix Navigation | HTML, CSS, JS | Navigation |
| 46 | Quiz App | HTML, CSS, JS | Applications |
| 47 | Testimonial Box Switcher | HTML, CSS, JS | UI Components |
| 48 | Random Image Feed | HTML, CSS, JS, API | Media |
| 49 | Todo List | HTML, CSS, JS | Applications |
| 50 | Insect Catch Game | HTML, CSS, JS | Games |
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A code editor (VS Code recommended)
- Basic understanding of HTML, CSS, and JavaScript
- Clone this repository:
git clone https://github.com/Feroz455/50Project50days.git
- Navigate to any project folder:
cd 50Project50days/01_Expending_Card - Open the
index.htmlfile in your browser.
Install the Live Server extension for a better development experience:
- Open any project folder in VS Code
- Right-click on
index.html - Select "Open with Live Server"
Start with these visually appealing, simpler projects:
- Day 1: Expanding Cards
- Day 2: Progress Steps
- Day 4: Hidden Search Widget
- Day 8: Form Wave Animation
- Day 12: FAQ Collapse
- Day 14: Animated Navigation
- Day 20: Button Ripple Effect
Build practical applications:
- Day 16: Drink Water Tracker
- Day 27: Toast Notification
- Day 31: Password Generator
- Day 33: Notes App
- Day 35: Image Carousel
- Day 38: Mobile Tab Navigation
- Day 46: Quiz App
Tackle complex interactions and API integrations:
- Day 17: Movie App (API)
- Day 21: Drag and Drop
- Day 22: Drawing App
- Day 28: GitHub Profiles (API)
- Day 37: Pokedex (API)
- Day 42: Live User Filter (API)
- Day 50: Insect Catch Game
- Movie App (Day 17): Browse movies with search functionality
- Drawing App (Day 22): Create digital art with customizable tools
- GitHub Profiles (Day 28): Search and view GitHub user profiles
- Pokedex (Day 37): Interactive Pokémon database
- Todo List (Day 49): Full-featured task management app
- Drag N Drop (Day 21): Complex event handling
- Kinetic CSS Loader (Day 23): Pure CSS animations
- 3D Background Boxes (Day 40): 3D CSS transformations
- Insect Catch Game (Day 50): Game logic and collision detection
Each project follows a consistent structure:
Project_Folder/
├── index.html # Main HTML file
├── style.css # Styles
└── script.js # JavaScript logic
- HTML5: Semantic markup, forms, canvas (for drawing app)
- CSS3: Flexbox, Grid, animations, transitions, variables, 3D transforms
- JavaScript (ES6+): DOM manipulation, event handling, async/await, local storage
- APIs: Fetch API for external data (movies, jokes, GitHub, Pokémon)
All projects are tested and work in modern browsers (Chrome 90+, Firefox 88+, Safari 14+). Some projects using newer CSS features may have limited support in older browsers.
While we appreciate contributions, we are primarily accepting pull requests only for bug fixes to keep the code aligned with the original course material. Please avoid:
- Major visual redesigns
- Adding new features that change project scope
- Framework/library integrations
- Fork the repository
- Create a bug fix branch:
git checkout -b fix/issue-description - Commit your changes:
git commit -m 'Fix: description of fix' - Push to the branch:
git push origin fix/issue-description - Open a Pull Request with a clear description of the bug and your fix
If you find a bug:
- Check if the issue already exists
- Create a new issue with:
- Project name and number
- Steps to reproduce
- Expected vs actual behavior
- Browser and OS information
| Metric | Value | Details |
|---|---|---|
| Total Projects | 50 | Complete collection |
| Lines of Code | ~15,000+ | Estimated total |
| Languages | HTML, CSS, JavaScript | 37.9%, 35.8%, 26.3% |
| Total Commits | 56 | Development history |
| First Commit | Nov 9, 2022 | Project start |
| Last Update | Nov 19, 2022 | All projects completed |
| Stars | 0 | Be the first to star! |
| Forks | 0 | No forks yet |
- Portfolio Development: 50 projects to showcase to employers
- Skill Reinforcement: Daily practice builds muscle memory
- Problem-Solving: Learn to break down complex UI into code
- Creativity: Each project encourages creative thinking
- Confidence: Progressively tackle more challenging concepts
- Code Along: Don't just copy-paste; type everything out
- Experiment: After completing a project, try modifying it
- Document: Add comments explaining tricky parts for future reference
- Share: Post your progress on social media or dev communities
- Refactor: Revisit earlier projects as your skills improve
- Original Course: 50 Projects in 50 Days by Brad Traversy & Florin Pop
- MDN Web Docs: HTML, CSS, JavaScript
- Color Palette Tools: Coolors, Color Hunt
- Font Resources: Google Fonts, Font Awesome
- Icon Libraries: Feather Icons, Heroicons
This project follows the educational guidelines of the original course. The code is provided for learning purposes.
Note: While you're free to use these projects for learning and portfolio purposes, please respect the original course creators' work and avoid redistributing the course material.
- Brad Traversy & Florin Pop: For creating the excellent "50 Projects in 50 Days" course
- All Contributors: Who help improve the code through bug fixes
- The Web Development Community: For continuous inspiration and support
Start your 50-day challenge today! Pick a project and begin coding. 🚀
Maintained by Feroz455 | Last Updated: December 2024 | Based on "50 Projects in 50 Days" course