Welcome to hackherway 100 Days, 200 Web Projects! This is a comprehensive collection of 200+ 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 |
| 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 |
| 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 |
- 🎮 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
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/d0midigi/100_days_100_web_project.git # Or use GitHub Desktop for GUI cloning
-
Navigate to project directory:
cd 100_days_200_projects -
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_200_projects/
├── 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
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: (#)
- 💼 LinkedIn: (#)
- 🐙 GitHub: @d0midigi
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:
💖 Made with love by the open source community
🌟 Don't forget to star this repository if you found it helpful!