- ๐ 100 Days 100 Web Projects
- ๐ About This Project
- ๐ Live Demo
- ๐ All Projects (205 Total)
- Getting Started
- ๐ Quick Start
- ๐งฉ Project Structure
- ๐ค Contributing
- ๐ Browser Compatibility
- ๐ฏ Learning Path
- ๐ ๏ธ Technologies Used
- ๐ Support & Community
- ๐ Repository Stats
- โญ Show Your Support
- ๐ Contributors
Welcome to 100 Days 100 Web Projects! This is a comprehensive collection of 218+ web development projects built using HTML, CSS, JavaScript, React, Node.js, and more.
- Frontend Projects: HTML, CSS, JavaScript, React, Vue.js
- Backend Projects: Node.js, Express.js, Flask, MERN Stack
- Full-Stack Applications: Complete web applications with frontend and backend
- Interactive Games: Browser-based games and entertainment apps
- Utility Tools: Practical web tools and calculators
- UI Components: Reusable components and design patterns
๐ Visit the Live Website: 100-days-100-web-project.vercel.app
The website features:
- Interactive project showcase
- Search functionality to find specific projects
- Direct links to all project demos
- Beautiful dark/light theme toggle
- Responsive design for all devices
๐ Visit Live Website to see all projects with working demos!
| Day | Project Name | Difficulty | Demo |
|---|---|---|---|
| 1 | To-Do List | beginner | View Demo |
| 2 | Digital Clock | beginner | View Demo |
| 3 | Indian Flag | beginner | View Demo |
| 4 | Dropdown Nav Bar | beginner | View Demo |
| 5 | Animated Cursor | beginner | View Demo |
| 6 | Auto Background Image Slider | beginner | View Demo |
| 7 | Typewriter | advanced | View Demo |
| 8 | Parallel-X Website | intermediate | View Demo |
| 9 | Captcha Generator | intermediate | View Demo |
| 10 | QR Code Generator | intermediate | View Demo |
| 11 | Serve Website Using Express | intermediate | View Demo |
| 12 | Nodemailer Contact Form | intermediate | View Demo |
| 13 | Login Form Using MERN | intermediate | View Demo |
| 14 | File Uploader | intermediate | View Demo |
| 15 | Progress Bar | beginner | View Demo |
| 16 | Scroll Bar CSS | beginner | View Demo |
| 17 | Slider Using Swiper API | intermediate | View Demo |
| 18 | Carousel Solar System | intermediate | View Demo |
| 19 | Planto | beginner | View Demo |
| 20 | EveSparks | intermediate | View Demo |
| 21 | Video BG Slider Using React | intermediate | View Demo |
| 22 | Page Loader | beginner | View Demo |
| 23 | Jarvis Virtual Assistant | intermediate | View Demo |
| 24 | Chat Bot | intermediate | View Demo |
| 25 | Tic-Tac-Toe | beginner | View Demo |
| 26 | Maze Game | intermediate | View Demo |
| 27 | Memory Game | beginner | View Demo |
| 28 | Wordle | intermediate | View Demo |
| 29 | Snake Game | beginner | View Demo |
| 30 | Flappy-bird-game | intermediate | View Demo |
| 31 | Password Manager | intermediate | View Demo |
| 32 | Missionaries & Cannibals | intermediate | View Demo |
| 33 | Weather Forecasting | intermediate | View Demo |
| 34 | Email Validator | beginner | View Demo |
| 35 | Vanilla-JavaScript-Calculator | beginner | View Demo |
| 36 | Medical App | intermediate | View Demo |
| 37 | 2048 Game | intermediate | View Demo |
| 38 | Github Profile Finder | intermediate | View Demo |
| 39 | Notes App | beginner | View Demo |
| 40 | Analog Clock | beginner | View Demo |
| 41 | Scroll Dark Game | intermediate | View Demo |
| 42 | Amazon App | intermediate | View Demo |
| 43 | Password Generator | beginner | View Demo |
| 44 | BMI Calculator | beginner | View Demo |
| 45 | Black Jack | intermediate | View Demo |
| 46 | Palindrome Generator | beginner | View Demo |
| 47 | Ping Pong Game | intermediate | View Demo |
| 48 | TextToVoiceConverter | intermediate | View Demo |
| 49 | Url Shortener | intermediate | View Demo |
| 50 | Recipe Genie | intermediate | View Demo |
| 51 | Netflix Landing Page Clone | beginner | View Demo |
| 52 | ClimaCode | intermediate | View Demo |
| 53 | E-Commerce Website with Simple Cart Functionality | intermediate | View Demo |
| 54 | Budget Tracker | intermediate | View Demo |
| 55 | Cricket Game | intermediate | View Demo |
| 56 | Pastebin using svelte | intermediate | View Demo |
| 57 | Glowing Social Media Icons | beginner | View Demo |
| 58 | Music App | intermediate | View Demo |
| 59 | Blog Page | beginner | View Demo |
| 60 | Marketing template website | beginner | View Demo |
| 61 | Hologram Button | beginner | View Demo |
| 62 | Solar System Explorer | intermediate | View Demo |
| 63 | Image to Text App | intermediate | View Demo |
| 64 | Zomato-clone | beginner | View Demo |
| 65 | The Cube | intermediate | View Demo |
| 66 | Flask Authentication App | intermediate | View Demo |
| 67 | Blog-Website | beginner | View Demo |
| 68 | 3d Rotating Card | intermediate | View Demo |
| 69 | Spotify Clone Project | intermediate | View Demo |
| 70 | Insect-Catch_Game | intermediate | View Demo |
| 71 | Quotely Laughs | beginner | View Demo |
| 72 | Contact Book | intermediate | View Demo |
| 73 | Candy_Crush_Game | intermediate | View Demo |
| 74 | Stock Profit Calculator | beginner | View Demo |
| 75 | code-space-game project | intermediate | View Demo |
| 76 | Animated Searchbar | beginner | View Demo |
| 77 | Rock-Paper-Scissor-game project | intermediate | View Demo |
| 78 | NPM Package Search | intermediate | View Demo |
| 79 | Linkedin Homepage Clone | intermediate | View Demo |
| 80 | Resume Studio | intermediate | View Demo |
| 81 | Simon Says Game | intermediate | View Demo |
| 82 | Love Calculator Game | beginner | View Demo |
| 83 | Exchange Currency | intermediate | View Demo |
| 84 | Lights Out Puzzle | intermediate | View Demo |
| 85 | Image Search Engine | intermediate | View Demo |
| 86 | Profile Card | beginner | View Demo |
| 87 | Breakout game | intermediate | View Demo |
| 88 | Job dashboard | intermediate | View Demo |
| 89 | N-Queen | intermediate | View Demo |
| 90 | Quiz App Timer | beginner | View Demo |
| 91 | Voting Application Backend | intermediate | View Demo |
| 92 | Slide puzzle Game | intermediate | View Demo |
| 93 | TextUtils | beginner | View Demo |
| 94 | Hangman Game | intermediate | View Demo |
| 95 | TodoList in React TS Tailwind | intermediate | View Demo |
| 96 | HCL Color Generator | beginner | View Demo |
| 97 | Time Capsule | intermediate | View Demo |
| 98 | Virtual Piano | intermediate | View Demo |
| 99 | NASA-APOD Extension | intermediate | View Demo |
| 100 | Text Saver Extension | intermediate | View Demo |
| 101 | Personal Finance Tracker | intermediate | View Demo |
| 102 | Travel Booking Website | intermediate | View Demo |
| 103 | Drumkit Game | beginner | View Demo |
| 104 | Debug-Website | beginner | View Demo |
| 105 | Periodic Table | beginner | View Demo |
| 106 | Plants Website | beginner | View Demo |
| 107 | DocNow | intermediate | View Demo |
| 108 | expense_Tracker | intermediate | View Demo |
| 109 | Mood Tracker | intermediate | View Demo |
| 110 | CRYPTOSHOW | intermediate | View Demo |
| 111 | Whack-a-Mole Game | intermediate | View Demo |
| 112 | Nykaa Clone Website | intermediate | View Demo |
| 113 | CPU Scheduler | intermediate | View Demo |
| 114 | EchoNotes | intermediate | View Demo |
| 115 | Event Registration System | intermediate | View Demo |
| 116 | AI Image Classifier | intermediate | View Demo |
| 117 | Habit Tracker Web App | intermediate | View Demo |
| 118 | Particle Effect | intermediate | View Demo |
| 119 | Virtual Playground | intermediate | View Demo |
| 120 | Typing Speed Test | intermediate | View Demo |
| 121 | InterviewSimulator | intermediate | View Demo |
| 122 | AstronomyDashboard | advanced | View Demo |
| 123 | Pomodoro Timer | intermediate | View Demo |
| 124 | Hurdle Highway 2D | intermediate | View Demo |
| 125 | Snakeladder | intermediate | View Demo |
| 126 | Temperature Converter | beginner | View Demo |
| 127 | Particle Wave Animation | intermediate | View Demo |
| 128 | Reaction Time Test | intermediate | View Demo |
| 129 | YouTube Clone | beginner | View Demo |
| 130 | Dino Game | beginner | View Demo |
| 131 | Retro Highway Racer | intermediate | View Demo |
| 132 | Pokedex | intermediate | View Demo |
| 133 | Stock Market Simulator | intermediate | View Demo |
| 134 | Coin Scratch | intermediate | View Demo |
| 135 | Shooting game | intermediate | View Demo |
| 136 | Sudoku Solver | intermediate | View Demo |
| 137 | Maths Quiz Game | intermediate | View Demo |
| 138 | Age Calculator | beginner | View Demo |
| 139 | Ludo game | intermediate | View Demo |
| 140 | Big Sales Prediction | advanced | View Demo |
| 141 | Dice Roller | intermediate | View Demo |
| 142 | Geo Guesser game | intermediate | View Demo |
| 143 | Morse Code Translator | beginner | View Demo |
| 144 | Car Racing game | intermediate | View Demo |
| 145 | Magic 8 Ball | intermediate | View Demo |
| 146 | Data Structures Visualizer | intermediate | View Demo |
| 147 | Chronosphere | intermediate | View Demo |
| 148 | Contest Tracker | advanced | View Demo |
| 149 | GitHub Profile Battle | advanced | View Demo |
| 150 | App Privacy Policy Generator | intermediate | View Demo |
| 151 | Mini Carrom Game | intermediate | View Demo |
| 152 | Physics Ball Simulation | advanced | View Demo |
| 153 | Material3 Showcase | intermediate | View Demo |
| 154 | FocusRoom | intermediate | View Demo |
| 155 | Hangman Game | advanced | View Demo |
| 156 | Placement Predictor | advanced | View Demo |
| 157 | Map Route Tracker | advanced | View Demo |
| 158 | GitHub Promo Maker | intermediate | View Demo |
| 159 | Dining Philosophers Simulation | intermediate | View Demo |
| 160 | Website Personalizer | intermediate | View Demo |
| 161 | Unit-Converter | intermediate | View Demo |
| 162 | Color Palette From Art Generator | intermediate | View Demo |
| 163 | Ai Image Editor | advanced | View Demo |
| 164 | Code Visualizer Playground | advanced | View Demo |
| 165 | Amazon Clone | beginner | View Demo |
| 166 | Boredom Buster | advanced | View Demo |
| 167 | scam-sms-detector | intermediate | View Demo |
| 168 | Color Sort Puzzle game | advanced | View Demo |
| 169 | Subscription Tracker | advanced | View Demo |
| 170 | Vector Flowchart Designer | advanced | View Demo |
| 171 | Glyph Pattern Maker | advanced | View Demo |
| 172 | PlaceMate | advanced | View Demo |
| 173 | AI-Resume-Analyzer | advanced | View Demo |
| 174 | Smart Expense Splitter | advanced | View Demo |
| 175 | Dev Portfolio Generator | advanced | View Demo |
| 176 | AI Story Generator | advanced | View Demo |
| 177 | Interview Prep Hub | advanced | View Demo |
| 178 | Plane Take Off Simulation | intermediate | View Demo |
| 179 | Cyber Type Battle | intermediate | View Demo |
| 180 | RouteMaster | intermediate | View Demo |
| 181 | Aahar Share | advanced | View Demo |
| 182 | Code Execution Visualizer | advanced | View Demo |
| 183 | LeetCode Progress Tracker | advanced | View Demo |
| 184 | Minesweeper | intermediate | View Demo |
| 185 | GitHub Repository Analyser | intermediate | View Demo |
| 186 | Multi-Track Video and Audio Editor | advanced | View Demo |
| 187 | Image Compressor Web App | intermediate | View Demo |
| 188 | Leetcode Streak Visualizer | advanced | View Demo |
| 189 | PeerRTC Video Chat | advanced | View Demo |
| 190 | Endless train game | advanced | View Demo |
| 191 | Saturn Particle Gesture | advanced | View Demo |
| 192 | Interactive Story Player | intermediate | View Demo |
| 193 | Escape Room | intermediate | View Demo |
| 194 | Lost & Found Portal | intermediate | View Demo |
| 195 | Complaint Management System | advanced | View Demo |
| 196 | Naukri Campus Clone | intermediate | View Demo |
| 197 | Flipkart Clone | intermediate | View Demo |
| 198 | Theme-Toggler | advanced | View Demo |
| 199 | Pac-Man | advanced | View Demo |
| 200 | Dual-Genre Movie Matcher | advanced | View Demo |
| 201 | Number Guesser Game | advanced | View Demo |
| 202 | Traffic Signal Game | intermediate | View Demo |
| 203 | Pomodoro With Miu | intermediate | View Demo |
| 204 | Movie Search App | intermediate | View Demo |
| 205 | Escape the Matrix Game | advanced | View Demo |
The full project list is large and maintained in
projects.jsonand on the live website. To keep this README concise and avoid duplicated tables, please view the complete, up-to-date list at:
- Live website with demos: https://100-days-100-web-project.vercel.app/
- Static data file: projects.json
You can still browse the projects on the website where each entry links to a working demo.
- ๐ฎ Games: 50+ interactive games and puzzles
- ๐ ๏ธ Tools & Utilities: 50+ utility applications
- ๐ Websites & Clones: 25+ complete website replicas
- ๐ฑ Apps: 20+ functional web applications
- ๐จ UI Components: 15+ reusable interface elements
- ๐ฅ๏ธ Backend Projects: 10+ server-side applications
- โ๏ธ React Projects: 8+ modern React applications
- ๐ค AI Projects: 8+ AI-powered applications
โ ๏ธ Important Update:
Please read the latest contribution discussion before getting started:
Project Discussion #1028
The easiest way to explore all projects is through our live website:
- ๐ Visit: 100-days-100-web-project.vercel.app
- โจ Features: Search projects, view demos, dark/light theme
-
Clone the repository:
# Using Git git clone https://github.com/dhairyagothi/100_days_100_web_project.git # Or use GitHub Desktop for GUI cloning
-
Navigate to project directory:
cd 100_days_100_web_project -
Open the main website:
- Simply open
index.htmlin your browser - Or use a local server (recommended):
# Using Python python -m http.server 8000 # Using Node.js npx serve . # Using VS Code Live Server extension
- Simply open
-
For individual projects:
- Navigate to
public/[project-name]/ - Open the project's
index.htmlfile - For Node.js projects, see individual README files
- Navigate to
100_days_100_web_project/
โโโ index.html # Main showcase website
โโโ index.js # Main website functionality
โโโ style.css # Main website styles
โโโ public/ # All individual projects
โ โโโ TO_DO_LIST/ # Day 1: Todo List
โ โโโ digital_clock/ # Day 2: Digital Clock
โ โโโ snake_game/ # Day 29: Snake Game
โ โโโ ... # 218+ projects
โโโ contributors/ # Contributors page
โโโ vercel.json # Deployment configuration
โโโ README.md # You are here!
We welcome contributions from developers of all skill levels! Here's how you can contribute:
- Fork the repository
- Create a new branch:
git checkout -b add-new-project - Add your project in the
public/directory - Add your project metadata entry inside
projects.json - Do not modify rendering logic inside
index.js - Test your project thoroughly
- Run
node scripts/validateProjects.jsbefore submitting - Submit a pull request
- Fork the repository
- Create a new branch:
git checkout -b fix-bug-name - Make your changes
- Test thoroughly
- Submit a pull request
- Improve README files
- Add project descriptions
- Fix typos and formatting
- Add setup instructions
- Follow existing code style and structure
- Add appropriate comments to your code
- Test your changes before submitting
- Include a clear commit message
- Update documentation if needed
๐ For detailed guidelines, see CONTRIBUTING.md
Most projects in this repository are designed to work across modern web browsers. Since rendering and feature support may vary slightly between browsers, contributors are encouraged to test projects across multiple environments.
For the best development and testing experience, use the latest versions of:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
Before submitting a contribution, test your project on:
- Desktop screens
- Tablets
- Mobile devices
Recommended tools:
- Chrome DevTools Device Toolbar
- Firefox Responsive Design Mode
- BrowserStack or similar browser testing platforms
Some projects may behave differently because of:
- Cached CSS or JavaScript files
- Browser-specific rendering differences
- Unsupported browser APIs
- Disabled JavaScript settings
- Extension conflicts
If a project is not working correctly:
- Perform a hard refresh (
Ctrl + Shift + R) - Clear browser cache
- Test in Incognito/Private mode
- Disable conflicting browser extensions
- Check the browser console for errors
- Compare behavior across multiple browsers
Before creating a pull request, verify that:
- The project loads without errors
- Layouts remain responsive on different screen sizes
- Buttons, forms, and navigation work properly
- Animations and interactions function correctly
- No major browser-specific UI issues are present
Perfect for those just starting with web development:
- HTML/CSS fundamentals
- Basic JavaScript interactions
- Simple animations and effects
For developers with some experience:
- API integrations
- Complex animations
- Interactive games and applications
Challenging projects for experienced developers:
- Full-stack applications
- Complex algorithms
- Modern frameworks (React, Node.js)
- ๐ฌ Discussions: GitHub Discussions
- ๐ Bug Reports: Open an Issue
- ๐ง Direct Contact: Create an issue for any questions
- ๐ฑ Instagram: @dhairyaa__31
- ๐ผ LinkedIn: Dhairya Gothi
- ๐ GitHub: @dhairyagothi
If this project helped you, please consider:
- โญ Starring this repository
- ๐ด Forking it to contribute
- ๐ข Sharing it with others
- ๐ Following for more amazing projects
Thanks to all these amazing people who have contributed to this project:
The contributors table above is auto-generated. Visit the contributors page to see the full list of amazing contributors!