Welcome to 100 Days 100 Web Projects! This is a comprehensive collection of 112+ web development projects ranging from beginner to intermediate level. Our goal is to help developers learn and practice web development through hands-on projects using various technologies.
- 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 | Technologies | Type | Demo Link |
|---|---|---|---|---|
| 1 | To-Do List | HTML, CSS, JS | ๐ Utility | View Demo |
| 2 | Digital Clock | HTML, CSS, JS | โฐ Widget | View Demo |
| 3 | Indian Flag | HTML, CSS | ๐จ Animation | View Demo |
| 4 | Dropdown Nav Bar | HTML, CSS, JS | ๐งญ Navigation | View Demo |
| 4 | Dropdown Nav Bar | HTML, CSS, JS | ๐งญ Navigation | View Demo |
| 5 | Animated Cursor | HTML, CSS, JS | โจ Effect | View Demo |
| 6 | Background Image Slider | HTML, CSS, JS | ๐ผ๏ธ Slider | View Demo |
| 7 | Typewriter Effect | HTML, CSS, JS | โจ๏ธ Animation | View Demo |
| 8 | Parallel-X Website | HTML, CSS, JS | ๐ Website | View Demo |
| 9 | Captcha Generator | HTML, CSS, JS | ๐ Security | View Demo |
| 10 | QR Code Generator | HTML, CSS, JS | ๐ฑ Utility | View Demo |
| 11 | Express Server | Node.js, Express | ๐ฅ๏ธ Backend | GitHub |
| 12 | Gmail Nodemailer | Node.js, Nodemailer | ๐ง Backend | GitHub |
| 13 | MERN Login Form | MongoDB, Express, React, Node | ๐ Full-Stack | GitHub |
| 14 | File Uploader | Node.js, Express | ๐ Utility | GitHub |
| 15 | Progress Bar | HTML, CSS, JS | ๐ UI Component | View Demo |
| 16 | Custom Scroll Bar | CSS | ๐จ UI Component | View Demo |
| 16 | Custom Scroll Bar | CSS | ๐จ UI Component | View Demo |
| 17 | Swiper API Slider | HTML, CSS, JS | ๐ผ๏ธ Slider | View Demo |
| 18 | Carousel Solar System | HTML, CSS, JS | ๐ช Animation | View Demo |
| 19 | Plant Website | HTML, CSS, JS | ๐ฑ Website | View Demo |
| 20 | EveSparks | HTML, CSS, JS | โจ Website | View Demo |
| 21 | React Video Slider | React, Vite | ๐ฅ React App | GitHub |
| 22 | Page Loader | HTML, CSS, JS | โณ Animation | View Demo |
| 23 | Jarvis AI Assistant | HTML, CSS, JS | ๐ค AI | View Demo |
| 24 | AI ChatBot | HTML, CSS, JS | ๐ฌ AI | View Demo |
| 25 | Tic-Tac-Toe | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 26 | Maze Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 27 | Memory Game | HTML, CSS, JS | ๐ง Game | View Demo |
| 28 | Wordle Clone | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 29 | Snake Game | HTML, CSS, JS | ๐ Game | View Demo |
| 30 | Flappy Bird | HTML, CSS, JS | ๐ฆ Game | View Demo |
| 31 | Password Manager | HTML, CSS, JS | ๐ Utility | View Demo |
| 32 | Missionaries & Cannibals | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 33 | Weather Forecasting | HTML, CSS, JS | ๐ค๏ธ App | View Demo |
| 34 | Email Validator | HTML, CSS, JS | โ Utility | View Demo |
| 35 | Vanilla JS Calculator | HTML, CSS, JS | ๐งฎ Calculator | View Demo |
| 36 | Medical App | HTML, CSS, JS | ๐ฅ App | View Demo |
| 37 | 2048 Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 38 | GitHub Profile Finder | HTML, CSS, JS, API | ๐ค Utility | GitHub |
| 39 | Notes App | HTML, CSS, JS | ๐ App | View Demo |
| 40 | Analog Clock | HTML, CSS, JS | โฐ Widget | View Demo |
| 41 | Scroll Dark Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 42 | Amazon Clone | HTML, CSS, JS | ๐ E-commerce | View Demo |
| 43 | Password Generator | HTML, CSS, JS | ๐ Utility | View Demo |
| 44 | BMI Calculator | HTML, CSS, JS | ๐งฎ Calculator | View Demo |
| 45 | BlackJack Game | HTML, CSS, JS | ๐ฐ Game | View Demo |
| 46 | Palindrome Generator | HTML, CSS, JS | ๐ Utility | View Demo |
| 47 | Ping Pong Game | HTML, CSS, JS | ๐ Game | View Demo |
| 48 | Text to Voice Converter | HTML, CSS, JS | ๐ Utility | View Demo |
| 49 | URL Shortener | Node.js, Express | ๐ Backend | GitHub |
| 50 | Recipe Genie | React, Node.js | ๐ณ Full-Stack | GitHub |
| 51 | Netflix Clone | HTML, CSS, JS | ๐ฌ Clone | View Demo |
| 52 | ClimaCode 2.0 | HTML, CSS, JS | ๐ค๏ธ App | View Demo |
| 53 | E-commerce Cart | HTML, CSS, JS | ๐ E-commerce | View Demo |
| 54 | Budget Tracker | HTML, CSS, JS | ๐ฐ Finance | View Demo |
| 55 | Cricket Game | HTML, CSS, JS | ๐ Game | View Demo |
| 56 | Pastebin Clone | Svelte | ๐ App | GitHub |
| 57 | Glowing Social Icons | HTML, CSS | โจ UI Component | View Demo |
| 58 | Music App | HTML, CSS, JS | ๐ต App | View Demo |
| 59 | Blog Page | HTML, CSS, JS | ๐ Blog | View Demo |
| 60 | Marketing Website | HTML, CSS, JS | ๐ Website | View Demo |
| 61 | Hologram Button | HTML, CSS | โจ UI Component | View Demo |
| 62 | Solar System Explorer | HTML, CSS | ๐ช Animation | View Demo |
| 63 | Image to Text App | HTML, CSS, JS | ๐ผ๏ธ OCR | View Demo |
| 64 | Zomato Clone | HTML, CSS, JS | ๐ Clone | View Demo |
| 65 | The Cube | HTML, CSS | ๐ฒ 3D Animation | View Demo |
| 66 | Flask Auth App | Python, Flask | ๐ Backend | GitHub |
| 67 | Blog Website | HTML, CSS, JS | ๐ Blog | View Demo |
| 68 | 3D Rotating Card | HTML, CSS | ๐ฒ 3D Animation | View Demo |
| 69 | Spotify Clone | HTML, CSS, JS | ๐ต Clone | View Demo |
| 70 | Insect Catch Game | HTML, CSS, JS | ๐ Game | View Demo |
| 71 | Quotely Laughs | HTML, CSS, JS | ๐ Entertainment | View Demo |
| 72 | Contact Book | Node.js, Express | ๐ Backend | GitHub |
| 73 | Candy Crush Game | HTML, CSS, JS | ๐ญ Game | View Demo |
| 74 | Stock Profit Calculator | HTML, CSS, JS | ๐ Finance | View Demo |
| 75 | Code Jump Space Game | HTML, CSS, JS | ๐ Game | View Demo |
| 76 | Animated Searchbar | HTML, CSS, JS | ๐ UI Component | View Demo |
| 77 | Rock Paper Scissors | HTML, CSS, JS | โ๏ธ Game | View Demo |
| 78 | NPM Package Search | HTML, CSS, JS | ๐ฆ Utility | View Demo |
| 79 | LinkedIn Clone | HTML, CSS, JS | ๐ผ Clone | View Demo |
| 80 | Resume Studio | HTML, CSS, JS | ๐ Utility | View Demo |
| 81 | Simon Says Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 82 | Love Calculator | HTML, CSS, JS | ๐ Fun | View Demo |
| 83 | Currency Exchange | HTML, CSS, JS | ๐ฑ Utility | View Demo |
| 84 | Lights Out Puzzle | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 85 | Image Search Engine | HTML, CSS, JS | ๐ Search | View Demo |
| 86 | 3D Profile Card | HTML, CSS | ๐ฒ 3D Animation | View Demo |
| 87 | Breakout Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 88 | Job Dashboard | HTML, CSS, JS | ๐ผ Dashboard | View Demo |
| 89 | N-Queen Solver | HTML, CSS, JS | ๐ Algorithm | View Demo |
| 90 | Quiz App Timer | HTML, CSS, JS | โ Quiz | View Demo |
| 91 | Voting App Backend | Node.js, Express | ๐ณ๏ธ Backend | GitHub |
| 92 | Slide Puzzle Game | HTML, CSS, JS | ๐งฉ Game | View Demo |
| 93 | TextUtils | React | โ๏ธ React App | View Demo |
| 94 | Hangman Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 95 | TodoList React TS | React, TypeScript, Tailwind | ๐ React App | View Demo |
| 96 | HCL Color Generator | HTML, CSS, JS | ๐จ Utility | View Demo |
| 97 | Time Capsule | HTML, CSS, JS | โฐ Utility | View Demo |
| 98 | Virtual Piano | HTML, CSS, JS | ๐น Music | View Demo |
| 99 | NASA APOD Extension | HTML, CSS, JS | ๐ Extension | View Demo |
| 100 | Text Saver Extension | HTML, CSS, JS | ๐พ Extension | View Demo |
| 101 | Finance Tracker | HTML, CSS, JS | ๐ฐ Finance | View Demo |
| 102 | Travel Booking Website | HTML, CSS, JS | View Demo | |
| 103 | Drumkit Game | HTML, CSS, JS | ๐ฅ Music | View Demo |
| 104 | Debug Website | HTML, CSS, JS | ๐ Development | View Demo |
| 105 | Periodic Table | HTML, CSS, JS | ๐งช Educational | View Demo |
| 106 | Plants Website | HTML, CSS, JS | ๐ฑ Website | View Demo |
| 107 | DocNow | HTML, CSS, JS | ๐ Utility | View Demo |
| 108 | Expense Tracker | HTML, CSS, JS | ๐ธ Finance | View Demo |
| 109 | Mood Tracker | HTML, CSS, JS | ๐ Wellness | View Demo |
| 110 | CRYPTOSHOW | HTML, CSS, JS | ๐ฐ Crypto | View Demo |
| 111 | Whack-a-Mole Game | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 112 | Nykaa Clone | HTML, CSS, JS | ๐ Clone | View Demo |
| 113 | CPU Scheduler | HTML, CSS, JS | โ๏ธ Simulator | View Demo |
| 114 | EchoNotes | HTML, CSS, JS | ๐ App | View Demo |
| 115 | Event Registration System | API, JavaScript | โ๏ธ Tool | View Demo |
| 116 | AI Image Classifier | API, JavaScript | ๐ค AI Tool | View Demo |
| 117 | Habit Tracker Web App | HTML, CSS, JS | ๐ Productivity | View Demo |
| 118 | Particle Effect | HTML, CSS, JS, Canvas | ๐จ Animation | View Demo |
| 119 | Virtual Playground | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 120 | Typing Speed Test | HTML, CSS, JS | ๐ฎ Game | View Demo |
| 121 | InterviewSimulator | Tool | โ๏ธ Simulator | View Demo |
| 122 | AstronomyDashboard | HTML, CSS, JS | ๐Education | View Demo |
| 123 | Pomodoro Timer | HTML, CSS, JS | ๐ Productivity Tool | View Demo |
| 124 | Hurdle Highway 2D | JavaScript | ๐ฎ Game | View Demo |
| 125 | Snakeladder | JavaScript | ๐ฒ Game | View Demo |
| 126 | Temperature Converter | JavaScript | ๐ก๏ธ Tool | View Demo |
| 127 | Particle Wave Animation | CSS, JavaScript | ๐จ Animation | View Demo |
| 128 | Reaction Time Test | HTML, CSS, JS | โ๏ธ Simulator | View Demo |
| 129 | YouTube Clone | HTML, CSS | ๐ฌ Clone | View Demo |
| 130 | Dino Game | JavaScript | ๐ฆ Game | View Demo |
| 131 | Retro Highway Racer | JavaScript | ๐๏ธ Game | View Demo |
| 132 | Pokedex | Utility | ๐ Utility | View Demo |
| 133 | Stock Market Simulator | Simulator | ๐ Simulator | View Demo |
| 134 | Coin Scratch | ASMR Game | ๐ช Game | View Demo |
| 135 | Shooting Game | 2D Game | ๐ซ Game | View Demo |
| 136 | Sudoku Solver | JavaScript | ๐งฉ Puzzle | View Demo |
| 137 | Maths Quiz Game | JavaScript | โ Quiz Game | View Demo |
| 138 | Age Calculator | JavaScript | ๐ Tool | View Demo |
| 139 | Ludo Game | HTML, CSS, JavaScript | ๐ฒ Game | View Demo |
| 140 | Big Sales Prediction | Machine Learning, Python, JavaScript | ๐ ML Project | View Demo |
| 141 | Dice Roller | HTML, CSS, JavaScript | ๐ฒ Simulator | View Demo |
| 142 | Geo Guesser Game | Map Game | ๐ Game | View Demo |
| 143 | Morse Code Translator | HTML, CSS, JavaScript | ๐ก Translator | View Demo |
| 144 | Car Racing Game | HTML, CSS, JS | ๐๏ธ Game | View Demo |
| 145 | Magic 8 Ball | HTML, CSS, JavaScript | ๐ฎ Simulator | View Demo |
| 146 | Data Structures Visualizer | Visualizer | ๐ Visualizer | View Demo |
| 147 | Chronosphere | Canvas Game | โณ Game | View Demo |
| 148 | Contest Tracker | JavaScript | ๐ Tracker | View Demo |
| 149 | GitHub Profile Battle | JavaScript | โ๏ธ GitHub Tool | View Demo |
| 150 | App Privacy Policy Generator | JavaScript | ๐ Generator | View Demo |
| 151 | Mini Carrom Game | HTML, CSS, JavaScript | ๐ฏ Game | View Demo |
| 152 | Physics Ball Simulation | HTML, CSS, JavaScript, Canvas | โฝ Simulation | View Demo |
| 153 | Material3 Showcase | JavaScript | ๐จ UI Showcase | View Demo |
| 154 | FocusRoom | HTML, CSS, JavaScript | โณ Productivity | View Demo |
| 155 | Hangman Game | React, TypeScript | ๐ฏ Game | View Demo |
| 156 | Placement Predictor | JavaScript, HTML, CSS | ๐ Predictor | View Demo |
| 157 | Map Route Tracker | HTML, CSS, JavaScript | ๐บ๏ธ Tracker | View Demo |
| 158 | GitHub Promo Maker | HTML, CSS, JavaScript | ๐ Generator | View Demo |
| 159 | Dining Philosophers Simulation | JavaScript | ๐ฎ Simulator | [View Demo](https://100-days-100-web-project.vercel.app/public/Dining Philosophers Simulation/index.html) |
- ๐ฎ Games: 25+ interactive games and puzzles
- ๐งฎ Calculators & Tools: 15+ utility applications
- ๐ Websites & Clones: 20+ complete website replicas
- ๐ฑ Apps: 15+ functional web applications
- ๐จ UI Components: 10+ reusable interface elements
- ๐ฅ๏ธ Backend Projects: 10+ server-side applications
- โ๏ธ React Projects: 8+ modern React 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
โ โโโ ... # 112+ 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 - Update the project list in
index.js - Test your project thoroughly
- 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: