🚀 100 Days 100 Web Projects

🌟 About This Project

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.

🎯 What You'll Find Here:

• 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

🔥 Featured Technologies:

🚀 Live Demo

🌐 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

📚 All Projects (112 Total)

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	✈️ Travel	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

📊 Project Categories:

• 🎮 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

Getting Started

🚀 Quick Start

🌐 View Projects Online

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

💻 Local Development

1. Clone the repository:

   # Using Git
   git clone https://github.com/dhairyagothi/100_days_100_web_project.git
   
   # Or use GitHub Desktop for GUI cloning

2. Navigate to project directory:

   cd 100_days_100_web_project

3. Open the main website:

   • Simply open index.html in 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

4. For individual projects:

   • Navigate to public/[project-name]/
   • Open the project's index.html file
   • For Node.js projects, see individual README files

🧩 Project Structure

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!

🤝 Contributing

We welcome contributions from developers of all skill levels! Here's how you can contribute:

🆕 Adding New Projects

1. Fork the repository
2. Create a new branch: git checkout -b add-new-project
3. Add your project in the public/ directory
4. Update the project list in index.js
5. Test your project thoroughly
6. Submit a pull request

🐛 Bug Fixes & Improvements

1. Fork the repository
2. Create a new branch: git checkout -b fix-bug-name
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📝 Documentation

• Improve README files
• Add project descriptions
• Fix typos and formatting
• Add setup instructions

📋 Contribution Guidelines

• 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

🎯 Learning Path

🌱 Beginner Projects (Days 1-30)

Perfect for those just starting with web development:

• HTML/CSS fundamentals
• Basic JavaScript interactions
• Simple animations and effects

🚀 Intermediate Projects (Days 31-70)

For developers with some experience:

• API integrations
• Complex animations
• Interactive games and applications

🔥 Advanced Projects (Days 71-112)

Challenging projects for experienced developers:

• Full-stack applications
• Complex algorithms
• Modern frameworks (React, Node.js)

🛠️ Technologies Used

📞 Support & Community

🆘 Need Help?

• 💬 Discussions: GitHub Discussions
• 🐛 Bug Reports: Open an Issue
• 📧 Direct Contact: Create an issue for any questions

🌟 Stay Connected

• 📱 Instagram: @dhairyaa__31
• 💼 LinkedIn: Dhairya Gothi
• 🐙 GitHub: @dhairyagothi

📊 Repository Stats

⭐ Show Your Support

If this project helped you, please consider:

• ⭐ Starring this repository
• 🍴 Forking it to contribute
• 📢 Sharing it with others
• 💖 Following for more amazing projects

🏆 Contributors

Thanks to all these amazing people who have contributed to this project:

---