🚀 100 Days of Web Development Challenge

Level up your frontend skills with this 100 Days of Web Development Challenge using HTML, CSS & JavaScript. Build mini-projects, practice daily coding, and create a portfolio-worthy collection!

🌐 Live Website • 💬 Discord Community • 🤝 Contribute

📌 About This Challenge

This repository documents my 100+ Days of Web Development journey, where I:

🎯 Learn and practice frontend fundamentals daily
💻 Build 150+ mini-projects & real-world apps
📊 Track progress with interactive tools & visuals
🔥 Strengthen problem-solving & coding consistency
🌟 Create a portfolio-worthy project collection

✨ Key Features

🎯 150+ Projects: From beginner to advanced level
📊 Progress Tracker: Interactive heatmap to visualize coding streaks
🗂️ Project Showcase: Beautiful, searchable and filterable project gallery
🎨 Modern UI/UX: Glassmorphism design with smooth animations
📱 Fully Responsive: Works perfectly on all devices
🌐 Live Demos: Every project deployed and accessible

🗺️ Learning Roadmap

🎯 Phase 1: Foundation (Days 1-30) - Beginner

📚 Core Skills: HTML, CSS, JavaScript Basics

Day	Project	Skills Learned
1	Personal Portfolio	HTML Structure, CSS Styling, Flexbox
2	Responsive Landing Page	Media Queries, Grid Layout
3	Todo List	DOM Manipulation, Event Listeners
4	Weather App	API Integration, Fetch API
5	Calculator	JavaScript Logic, Functions
6	Quiz App	Conditional Logic, Arrays
7	Expense Tracker	Local Storage, Data Management
8	Pomodoro Timer	setInterval, Date Objects
9	Note Taking App	CRUD Operations, Storage
10	Recipe Book	Template Strings, Array Methods
11-20	Blog, E-commerce, Chat UI, Music Player, Drawing App, Password Generator, Unit Converter, Countdown Timer, Tip Calculator, QR Code Generator	Advanced CSS, Canvas API, Security
21-30	Flashcards, Markdown Previewer, Currency Converter, BMI Calculator, Quote Generator, Image Gallery, Dice Roller, Rock Paper Scissors, Memory Game, Tic Tac Toe	Game Logic, API Integration, Animations

🎓 Skills Mastered: HTML5, CSS3, Vanilla JavaScript, DOM, Local Storage, Basic APIs

🚀 Phase 2: Intermediate (Days 31-60)

�� Real-World Applications: APIs, Firebase, Advanced JavaScript

Day	Project	Skills Learned
31	Job Board	Dynamic Content, Filtering
32	Social Media Dashboard	Data Visualization, Charts
33	Real Estate Website	Complex Layouts, Forms
34	Hotel Booking System	Date Pickers, Validation
35	Food Delivery App	Cart Logic, State Management
36	Fitness Tracker	Progress Tracking, Charts
37	Event Management	Calendar Integration, Scheduling
38	Booking Appointment System	Time Management, Notifications
39	Online Learning Platform	Video Integration, Progress
40	Movie Database	TMDB API, Search Functionality
41-50	GitHub Profile Finder, Stock Tracker, News Aggregator, Chat App (Firebase), Project Management, E-commerce Cart, Banking Dashboard, Flight Booking, Recipe Sharing, Blog with CMS	Firebase, Real-time Data, Node.js Basics
51-60	Portfolio+Blog, Task Board, File Uploader, Code Editor, Voice Notes, Expense Splitter, Habit Tracker, Budget Planner, Meal Planner, Travel Planner	Web Speech API, File APIs, Advanced State

🎓 Skills Mastered: REST APIs, Firebase, Node.js Basics, Web APIs, Complex State Management

🔥 Phase 3: Advanced (Days 61-90)

⚡ Modern Stack: React, WebRTC, Socket.io, AI Integration

Day	Project	Skills Learned
61	Fullstack E-commerce	React, MongoDB, Express
62	GitHub Stats Dashboard	GitHub API, Data Viz
63	Video Conferencing	WebRTC, Peer Connections
64	Online Code Editor	Monaco Editor, Compilers
65	Real-time Collaboration	Socket.io, Operational Transform
66	Stock Trading Simulator	Real-time Data, Charts
67	Multiplayer Game	Canvas, Socket.io, Game Logic
68	AI Chatbot	OpenAI API, NLP
69	Open-Source E-commerce Template	Modular Architecture
70	Data Visualization Dashboard	D3.js, Complex Charts
71-80	Portfolio Template, IoT Dashboard, ML UI (TensorFlow.js), Voice Assistant, AR Web App, PWA News App, Real-time Analytics, Learning Games, Job Platform, Project Management SaaS	TensorFlow.js, WebXR, Three.js, PWA
81-90	Healthcare Portal, E-learning Platform, AI Tools Directory, Chat Support, UI Component Library, Food Delivery System, Personal Assistant, Video Streaming, Smart Home, Enterprise CRM	Next.js, Prisma, React Native, HLS.js

🎓 Skills Mastered: React, Next.js, WebRTC, Socket.io, AI/ML, Progressive Web Apps, Advanced Backend

🏆 Phase 4: Capstone (Days 91-150+)

🌟 Expert Level: Full-stack, AI, Blockchain, Production Apps

Days	Project Category	Technologies
91-100	Platform Clones	LeetCode Clone, Hackathon Website, Open Source Contribution, PWA, MERN Stack, AI-Powered App, Smart Community Hub, Campus Platform, Music App (Spotify API), Survival Protocol
101-120	Creative & Advanced	Canvas Particle Animation, Interactive Storytelling, README Toolkit, 3D Model Viewer, Form Builder, Dashboard (D3.js), Solar System, AI Image Editor, Custom CMS, Advanced E-commerce, Social Network, LMS
121-140	AI & Blockchain	AI Resume Builder, Smart Contracts (Solidity), Advanced Blog (GraphQL), AI Chat App, Sustainable Dev Platform, AI Code Review Tool, Social Media Platform, AI Image Recognition, Ultimate Kanban, AI Translation App, Advanced CRM, Virtual Assistant, Inventory Management, Sentiment Analysis
141-150+	Production Ready	Time Tracking (ApexCharts), AI SEO Tool, Recruitment Platform, AI Social Media Manager, Chess Game, AI Customer Support, Financial Planning, AI Document Summarizer, Knowledge Base, AI Video Analysis, Mini Geo Guesser, Newsly, Snake Game, Tetris, Time Fracture Arena

🎓 Skills Mastered: Full-stack Development, AI/ML Integration, Blockchain, Production Deployment, System Design

📈 Skill Progression Chart

graph LR
    A[Day 1-30<br/>Beginner] --> B[Day 31-60<br/>Intermediate]
    B --> C[Day 61-90<br/>Advanced]
    C --> D[Day 91-150+<br/>Expert]
    
    A --> E[HTML/CSS/JS]
    B --> F[APIs/Firebase]
    C --> G[React/Node.js]
    D --> H[Full-stack/AI]
    
    E --> I[Portfolio Ready]
    F --> I
    G --> I
    H --> I

🎯 Recommended Learning Path

Week 1-4:   Master HTML, CSS, Vanilla JS fundamentals
Week 5-8:   API integration, Local Storage, Firebase basics
Week 9-12:  React, State Management, Backend basics
Week 13-16: Advanced frameworks, Real-time apps, WebRTC
Week 17-20: AI/ML integration, Blockchain, Production deployment
Week 20+:   Build capstone projects, Contribute to open source

💡 Tips for Success

✅ Do's

Code every single day
Build projects from scratch
Document your learning
Share on social media
Help other learners
Review previous projects

❌ Don'ts

Skip difficult topics
Copy-paste without understanding
Rush through projects
Learn too many things at once
Compare your progress
Give up on errors

🎯 Challenge Goals

✅ Master HTML, CSS & JavaScript fundamentals
✅ Build 150+ real-world frontend projects
✅ Improve GitHub contribution consistency
✅ Prepare for Open Source, Internships & GSoC
✅ Build a strong developer portfolio
✅ Learn modern frameworks (React, Next.js, Node.js)

📂 Project Categories

🟢 Beginner

Days 1-30

HTML, CSS, Vanilla JS

View Projects

🟡 Intermediate

Days 31-60

APIs, Local Storage, Firebase

View Projects

🔴 Advanced

Days 61-90

React, Node.js, WebRTC

View Demo

🔥 Capstone

Days 91-150+

Full-stack, AI, Blockchain

View Projects

🚀 Featured Projects

🌤️ Weather App

Real-time weather data with beautiful glassmorphism UI

Tech: HTML, CSS, JS, Open-Meteo API

View Demo

💬 Chat Application

Real-time messaging with Firebase integration

Tech: HTML, CSS, JS, Firebase

View Demo

🎮 Memory Game

Interactive card-matching game with score tracking

Tech: HTML, CSS, JavaScript

View Demo

📊 Data Visualization Dashboard

Interactive charts and graphs using D3.js

Tech: D3.js, JavaScript, HTML, CSS

View Demo

🔍 Explore All 150+ Projects →

💡 Beyond 150 Projects - Your Choice!

After completing 150+ projects, you have the foundation to build real, useful things that solve actual problems!

🌟 What You Can Build Next:

🛠️ Build Your Own Tools

Create utilities that solve your daily problems

Personal productivity apps
Automation scripts
Developer tools
Browser extensions

🚀 Launch a Startup

Turn your ideas into real products

SaaS applications
Mobile apps
AI-powered tools
Marketplaces

🌍 Contribute to Open Source

Make an impact on real projects

Fix bugs in popular repos
Add new features
Create documentation
Mentor newcomers

🎯 Ideas for Real, Useful Projects:

💼 For Students & Educators

Campus Management System - Attendance, assignments, grades
Study Group Matcher - Connect students studying same subjects
Resource Sharing Platform - Notes, books, study materials
Exam Preparation Tool - Mock tests, flashcards, progress tracking
Project Collaboration Hub - Team formation, version control, communication

🏢 For Freelancers & Businesses

Invoice & Expense Manager - Track income, expenses, generate invoices
Client Portal - Project updates, file sharing, communication
Time Tracking Tool - Billable hours, productivity analytics
Portfolio Generator - Auto-generate portfolios from GitHub
Lead Management System - CRM for small businesses

🌱 For Social Impact

Local Community Platform - Connect neighbors, local events
Volunteer Matching App - Connect volunteers with NGOs
Environmental Tracker - Carbon footprint, eco-challenges
Mental Health Support - Anonymous chat, resources, meditation
Food Donation Network - Connect restaurants with shelters

🎮 For Creative Developers

Interactive Storytelling Engine - Choose-your-own-adventure creator
Music Collaboration Platform - Real-time jam sessions
Art Portfolio Showcase - Beautiful galleries for artists
Game Development Toolkit - Drag-and-drop game builder
Animation Studio - Browser-based animation tool

🤖 For AI Enthusiasts

Personal AI Assistant - Custom ChatGPT for your needs
Code Review Bot - AI-powered code suggestions
Content Generator - Blog posts, social media, marketing
Image Enhancement Tool - AI upscaling, background removal
Voice Clone App - Text-to-speech with your voice

🔧 For Developers

API Testing Platform - Postman alternative
Code Snippet Manager - Personal code library
Git Workflow Automation - Custom CI/CD pipelines
Documentation Generator - Auto-docs from code
Performance Monitor - Website speed analytics

💭 The Philosophy

"The best time to build something useful was after your first project. The second best time is now."

After 150+ projects, you've learned:

✅ How to structure code
✅ How to solve problems
✅ How to use modern tools
✅ How to learn independently

Now it's time to:

🎯 Solve real problems that matter to you
🚀 Build products people will use
💡 Create tools that make life easier
🌟 Make meaningful contributions

🎓 Your Next Steps:

Identify a Problem - What frustrates you daily?
Validate the Idea - Talk to potential users
Build an MVP - Start small, iterate fast
Get Feedback - Ship early, improve constantly
Scale or Pivot - Grow what works, change what doesn't

🌈 The Sky's The Limit!

You've completed 150+ projects. You're no longer a beginner.
You're a builder. Now go build something amazing! 🚀

📂 Repository Structure

100-Days-Of-Web-Development-ECWoC26/
│
├── 📁 public/                             # 150+ Daily Projects
│   ├── 📁 Day 01 - Personal Portfolio
│   ├── 📁 Day 04 - Weather App
│   ├── 📁 Day 30 - Tic Tac Toe
│   ├── 📁 Day 88 - Video Streaming
│   └── 📁 Day 150+ - Advanced Projects
│
├── 📁 website/                            # Main Portfolio Website
│   ├── 📁 assets/                         # Images, Fonts, Icons
│   ├── 📁 pages/                          # HTML Pages
│   │   ├── projects.html                  # Project Gallery
│   │   ├── login.html                     # Auth System
│   │   └── home.html                      # Landing Page
│   ├── 📁 styles/                         # Modular CSS
│   └── 📁 scripts/                        # JavaScript Logic
│
├── 📄 index.html                          # Entry Point
├── 📄 README.md                           # Documentation
└── 📄 CONTRIBUTING.md                     # Contribution Guide

🔧 Tech Stack

Frontend	HTML5, CSS3, JavaScript (ES6+), TypeScript
Frameworks	React, Next.js, Three.js, D3.js
Backend	Node.js, Express.js, Python (Flask/Django)
Database	Firebase, MongoDB, PostgreSQL
APIs	REST APIs, WebRTC, Socket.io, OpenAI
Tools	Git, GitHub, VS Code, Netlify

🚀 Quick Start

For Learners

Explore Projects: Visit Live Website
Choose a Project: Pick one that matches your skill level

Clone & Run:

git clone https://github.com/Shubham-cyber-prog/100-Days-Of-Web-Development-ECWoC26.git
cd 100-Days-Of-Web-Development-ECWoC26

Open in Browser: Navigate to any project folder and open index.html

For Contributors

Fork the Repository: Click the "Fork" button on GitHub

Clone Your Fork:

git clone https://github.com/YOUR-USERNAME/100-Days-Of-Web-Development-ECWoC26.git
cd 100-Days-Of-Web-Development-ECWoC26

Create a Branch:

git checkout -b feature/your-feature-name

Make Changes: Add your project or improvements

Commit & Push:

git add .
git commit -m "Add: Your feature description"
git push origin feature/your-feature-name

Create Pull Request: Go to the original repo and create a PR

📖 Read the full Contributing Guide for detailed instructions.

🎯 How to Use This Repository

1️⃣ As a Learning Resource

Browse projects by difficulty level
Study the code and understand the implementation
Recreate projects to practice your skills

2️⃣ As a Portfolio Template

Fork and customize for your own journey
Replace projects with your implementations
Showcase your progress to recruiters

3️⃣ As a Contributor

Fix bugs or improve existing projects
Add new features or projects
Help with documentation and testing

🌟 Why This Challenge?

📚 Structured Learning: Progress from basics to advanced topics
🎯 Real Projects: Build portfolio-ready applications
👥 Community: Connect with fellow developers
🏆 Recognition: Showcase your commitment to learning
💼 Career Ready: Prepare for interviews and job opportunities

🤝 Contributing

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

🐛 Fix Bugs: Found an issue? Submit a PR!
✨ Add Features: Enhance existing projects
📝 Improve Docs: Help others understand better
🎨 Design: Improve UI/UX of projects
🧪 Testing: Test projects and report issues

Read our Contributing Guidelines and Code of Conduct.

Track your own progress using our Interactive Dashboard

🏆 Hall of Fame

Thank you to everyone who has contributed to this project! 🙌
We appreciate your support, commits, issues, ideas, and pull requests 💜

Every contributor brings this project closer to excellence!

📱 Connect With Us

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Thanks to all contributors who made this possible
Special thanks to the ECWoC 2026 organizing team
Inspired by the #100DaysOfCode challenge
Built with ❤️ by the developer community

🌟 If you find this helpful, please consider giving it a star! 🌟

Made with 💙 by Shubham

#100DaysOfWebDev #OpenSource #WebDevelopment #ECWoC26

Name		Name	Last commit message	Last commit date
Latest commit History 1,302 Commits
.agent		.agent
.github		.github
.husky		.husky
.vscode		.vscode
Tools		Tools
assets		assets
components		components
public		public
scripts		scripts
website		website
.DS_Store		.DS_Store
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.gitmodules		.gitmodules
.htmlhintignore		.htmlhintignore
.htmlhintrc		.htmlhintrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.stylelintignore		.stylelintignore
.stylelintrc.json		.stylelintrc.json
3k_lines.txt		3k_lines.txt
404.html		404.html
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
ISSUE_DESCRIPTION.md		ISSUE_DESCRIPTION.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
SOCIAL_METADATA_ISSUE.md		SOCIAL_METADATA_ISSUE.md
accessibility-checker.html		accessibility-checker.html
certificate.html		certificate.html
files.txt		files.txt
files_to_fix.txt		files_to_fix.txt
fix_a11y_batch_8.js		fix_a11y_batch_8.js
index.html		index.html
lighthouserc.json		lighthouserc.json
lint_output.txt		lint_output.txt
manifest.webmanifest		manifest.webmanifest
masthead.html		masthead.html
netlify.toml		netlify.toml
next-env.d.ts		next-env.d.ts
offline.html		offline.html
package-lock.json		package-lock.json
package.json		package.json
performance-budget.json		performance-budget.json
pwa-icon.svg		pwa-icon.svg
remaining_files.txt		remaining_files.txt
sitemap.html		sitemap.html
sw.js		sw.js
verify_tracker.js		verify_tracker.js

Folders and files

Latest commit

History

Repository files navigation

🚀 100 Days of Web Development Challenge

📌 About This Challenge

✨ Key Features

🗺️ Learning Roadmap

🎯 Phase 1: Foundation (Days 1-30) - Beginner

🚀 Phase 2: Intermediate (Days 31-60)

🔥 Phase 3: Advanced (Days 61-90)

🏆 Phase 4: Capstone (Days 91-150+)

📈 Skill Progression Chart

🎯 Recommended Learning Path

💡 Tips for Success

✅ Do's

❌ Don'ts

🎯 Challenge Goals

📂 Project Categories

🟢 Beginner

🟡 Intermediate

🔴 Advanced

🔥 Capstone

🚀 Featured Projects

🌤️ Weather App

💬 Chat Application

🎮 Memory Game

📊 Data Visualization Dashboard

💡 Beyond 150 Projects - Your Choice!

🌟 What You Can Build Next:

🛠️ Build Your Own Tools

🚀 Launch a Startup

🌍 Contribute to Open Source

🎯 Ideas for Real, Useful Projects:

💭 The Philosophy

🎓 Your Next Steps:

🌈 The Sky's The Limit!

📂 Repository Structure

🔧 Tech Stack

🚀 Quick Start

For Learners

For Contributors

🎯 How to Use This Repository

1️⃣ As a Learning Resource

2️⃣ As a Portfolio Template

3️⃣ As a Contributor

🌟 Why This Challenge?

🤝 Contributing

🏆 Hall of Fame

📱 Connect With Us

📜 License

🙏 Acknowledgments

About

Topics

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages