🚀 51 Web Projects

A collection of 51 beginner-friendly web development projects built using HTML, CSS, and JavaScript.

Whether you're a beginner looking to improve your frontend development skills or an open-source contributor seeking projects to work on, this repository has something for everyone.

🎉 Contribute your own project! Have a web development project you'd like to share? You're welcome to add it here! Read our Contributing Guide to get started.

⭐ Star this repository if you find it useful!

🌟 About The Project

This repository contains a curated collection of web development projects ranging from beginner to intermediate level.

The goal of this repository is to:

Help beginners practice web development
Encourage open-source contributions
Build real-world frontend projects
Improve problem-solving and development skills
Provide hands-on learning experience

🛠️ Tech Stack

HTML5
CSS3
JavaScript
Git
GitHub

📂 Featured Projects

No.	Project
01	Rock Paper Scissors
02	Tic Tac Toe
03	CodeForces Clone
04	Job Application Form
05	Pokemon Card Game
06	Shapes Game
07	Tribute Website
08	Amazon Clone
09	Digital Clock
10	E-Commerce Shopping App
11	Square Game
12	Pokemon Card Collection
13	Portfolio
14	BMI Calculator
15	Calculator
16	Currency Converter
17	Portfolio (ll)
18	Cards Project
19	Gallery Project
20	Insta App
21	Notes API (MongoDB)
22	Notes App
23	Spotify Project
24	Student Management System
25	UI Project Using Tailwind
26	AI-Powered Smart Food Donation & Distribution System

🚀 Getting Started

Fork The Repository

Click the Fork button at the top-right corner of this repository.

Clone The Repository

git clone https://github.com/jaikaran109/51_Web_Projects.git

Navigate To The Repository

cd 51_Web_Projects

Open Any Project

Choose any project folder and open the index.html file in your browser.

📁 Repository Structure

51_Web_Projects
│
├── .github
│   ├── ISSUE_TEMPLATE
│   ├── workflows
│   └── pull_request_template.md
│
├── 01-Rock-Paper-Scissors
├── 02-Tic-Tac-Toe
├── 03-CodeForces-Clone
├── 04-Job-Application
├── 05-Pokemon-Card-Game
├── 06-Shapes-Games
├── 07-Tribute-Website
├── 08-Amazon-Clone
├── 09-Digital-Clock
├── 10-E-Commerce_Shopping_App
├── 11-Square-Game
├── 12-Pokemon-Card-Collection
├── 13-Portfolio
├── 14-BMI-Calculator
├── 15-Calculator
├── 16-Currency-Converter
├── 17-Portfolio-ll
├── 18-Cards-Project-Using-ComponentsAndProps
├── 19-Gallery-Project
├── 20-Insta-App
├── 21-Notes-Api_MongoDB
├── 22-Notes-App
├── 23-Spotify-Project
├── 24-Student-Management-System
├── 25-UI-Project-Using-Tailwind
├── 26-AI-Powered-Smart-Food-Donation-Distribution-System
│
├── scripts/            # Automation scripts for GitHub issues
├── CODE_OF_CONDUCT.md
├── LICENSE
├── SECURITY.md
├── CONTRIBUTORS.md
└── README.md

📊 Project Table

No.	Project	Language	Tech Stack	Status
01	Rock Paper Scissors	HTML, CSS, JS	Vanilla	✅ Complete
02	Tic Tac Toe	HTML, CSS, JS	Vanilla	✅ Complete
03	CodeForces Clone	HTML, CSS, JS	Vanilla	✅ Complete
04	Job Application	HTML, CSS	Vanilla	✅ Complete
05	Pokemon Card Game	HTML, CSS, JS	Vanilla	✅ Complete
06	Shapes Game	HTML, CSS, JS	Vanilla	✅ Complete
07	Tribute Website	HTML, CSS	Vanilla	✅ Complete
08	Amazon Clone	HTML, CSS	Vanilla	✅ Complete
09	Digital Clock	HTML, CSS, JS	Vanilla	✅ Complete
10	E-Commerce Shopping App	HTML, CSS, JS, Node.js, MongoDB	Full Stack	✅ Complete
11	Square Game	HTML, CSS, JS	Vanilla	✅ Complete
12	Pokemon Card Collection	HTML, CSS, JS	Vanilla	✅ Complete
13	Portfolio	HTML, CSS	Vanilla	✅ Complete
14	BMI Calculator	HTML, CSS, JS	Vanilla	✅ Complete
15	Calculator	HTML, CSS, JS	Vanilla	✅ Complete
16	Currency Converter	HTML, CSS, JS	Vanilla	✅ Complete
17	Portfolio ll	HTML, CSS, JS	Vanilla	✅ Complete
18	Cards Project	HTML, CSS, JS, React	React + Vite	✅ Complete
19	Gallery Project	HTML, CSS, JS, React	React + Vite	✅ Complete
20	Insta App	HTML, CSS, JS, Node.js	Full Stack	✅ Complete
21	Notes API (MongoDB)	Node.js, Express, MongoDB	Full Stack	✅ Complete
22	Notes App	HTML, CSS, JS, React	React + Vite	✅ Complete
23	Spotify Project	HTML, CSS, JS, Node.js	Full Stack	✅ Complete
24	Student Management System	HTML, CSS, JS, Node.js, MongoDB	Full Stack	✅ Complete
25	UI Project Using Tailwind	HTML, CSS, JS, React	React + Vite + Tailwind	✅ Complete
26	AI-Powered Smart Food Donation & Distribution System	HTML, CSS, JS, React, Node.js, MongoDB	Full Stack	✅ Complete

🗂️ Repository Structure

51_Web_Projects/
│
├── .github
│   ├── ISSUE_TEMPLATE/
│   ├── workflows/
│   └── pull_request_template.md
│
├── 01-Rock-Paper-Scissors
├── 02-Tic-Tac-Toe
├── 03-CodeForces-Clone
├── 04-Job-Application
├── 05-Pokemon-Card-Game
├── 06-Shapes-Games
├── 07-Tribute-Website
├── 08-Amazon-Clone
├── 09-Digital-Clock
├── 10-E-Commerce_Shopping_App
├── 11-Square-Game
├── 12-Pokemon-Card-Collection
├── 13-Portfolio
├── 14-BMI-Calculator
├── 15-Calculator
├── 16-Currency-Converter
├── 17-Portfolio-ll
├── 18-Cards-Project-Using-ComponentsAndProps
├── 19-Gallery-Project
├── 20-Insta-App
├── 21-Notes-Api_MongoDB
├── 22-Notes-App
├── 23-Spotify-Project
├── 24-Student-Management-System
├── 25-UI-Project-Using-Tailwind
├── 26-AI-Powered-Smart-Food-Donation-Distribution-System
│
├── scripts/            # Automation scripts for GitHub issues
├── CODE_OF_CONDUCT.md
├── LICENSE
├── SECURITY.md
├── CONTRIBUTORS.md
└── README.md

🤝 Contributing

Contributions are welcome and appreciated.

How To Contribute

Fork the repository
Clone your fork
Create a new branch (git checkout -b feature/your-feature-name)
Make your changes
Commit your changes (git commit -m "Fix: ..." or git commit -m "Add: ...")
Push your branch (git push origin feature/your-feature-name)
Open a Pull Request

Please read CONTRIBUTING.md before contributing.

📌 PR format: Add a clear title (Fix: / Add: / Docs: / UI:), a short description, and screenshots for UI/UX changes.

🎯 Contribution Ideas

Improve UI/UX
Add Dark Mode
Improve Responsiveness
Fix Bugs
Improve Accessibility
Optimize Performance
Improve Documentation
Add New Features

🗂️ Scripts

The scripts/ directory contains automation scripts for managing GitHub issues:

create-github-issues.sh - Bulk create per-project issues
create-github-issues-part2.sh - Additional batch of issues
close-batch1.sh - Close unused/generic issues
tmp-check.sh - Temporary check script

⚠️ These scripts are for repository maintainers and use GitHub CLI (gh).

🌱 Open Source Programs

This repository is suitable for:

Hacktoberfest
GirlScript Summer of Code (GSSoC)
Social Summer of Code (SSoC)
Beginner Open Source Contributions

🎯 Contribution Ideas

Improve UI/UX
Add Dark Mode
Improve Responsiveness
Fix Bugs
Improve Accessibility
Optimize Performance
Improve Documentation
Add New Features

🌱 Open Source Programs

This repository is suitable for:

Hacktoberfest
GirlScript Summer of Code (GSSoC)
Social Summer of Code (SSoC)
Beginner Open Source Contributions

📜 Code of Conduct

Please follow the guidelines mentioned in CODE_OF_CONDUCT.md.

👥 Contributors

Thanks to all these amazing people who have contributed to this project! 🎉

_jaikaran109	_RujulaSharma	_{Anshika-Singh-07}	_ayush-68789	_{sanskarmangla005}
_{ApoorvaPoojary8}	_animishgupta	_{DhruvBhardwaj67}	_Mayank-cs23	_wized2
_{Raunakshukla90}	_Sanjh-yadav7	_{Ujjwal21kaushik}	_{ashutoshsingh2711}	_{shreyanshrajpoot}

💡 Tip: Interested in contributing? Star this repo ⭐ and open a PR to get your name listed here!

📝 How to Add Yourself

Fork this repository
Make your contribution
Open a Pull Request
Your name and avatar will be added to the contributors list!

Made with ❤️ by all contributors

### 👥 Active Contributors Add your name below! 🎉

To add yourself, fork this repo, add your GitHub profile link in the Contributors section above (or in a CONTRIBUTORS.md file), and open a PR. We'll gladly accept your contribution! 🎉

💡 Tip: Star this repo ⭐ and contribute to get your name here!

⭐ Support The Project

If you find this repository useful:

⭐ Star this repository
🍴 Fork this repository
🐛 Report issues
🚀 Contribute improvements

👨‍💻 Maintainer

Jai Karan

GitHub: https://github.com/jaikaran109

Repository: https://github.com/jaikaran109/51_Web_Projects

📄 License

This project is licensed under the MIT License.

🚀 Happy Coding!

Made with ❤️ by Jai Karan

Navigation Menu

Repository navigation

About

Repository files navigation

🚀 51 Web Projects

🌟 About The Project

🛠️ Tech Stack

📂 Featured Projects

🚀 Getting Started

Fork The Repository

Clone The Repository

Navigate To The Repository

Open Any Project

📁 Repository Structure

📊 Project Table

🗂️ Repository Structure

🤝 Contributing

How To Contribute

🎯 Contribution Ideas

🗂️ Scripts

🌱 Open Source Programs

🎯 Contribution Ideas

🌱 Open Source Programs

📜 Code of Conduct

👥 Contributors

📝 How to Add Yourself

⭐ Support The Project

👨‍💻 Maintainer

Jai Karan

📄 License

🚀 Happy Coding!

About

Releases

Sponsor this project

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
.github		.github
01-Rock-Paper-Scissors		01-Rock-Paper-Scissors
02-Tic-Tac-Toe		02-Tic-Tac-Toe
03-CodeForces-Clone		03-CodeForces-Clone
04-Job-Application		04-Job-Application
05-Pokemon-Card-Game		05-Pokemon-Card-Game
06-Shapes-Games		06-Shapes-Games
07-Tribute-Website		07-Tribute-Website
08-Amazon-Clone		08-Amazon-Clone
09-Digital-Clock		09-Digital-Clock
10-E-Commerce_Shopping_App		10-E-Commerce_Shopping_App
11-Square-Game		11-Square-Game
12-Pokemon-Card-Collection		12-Pokemon-Card-Collection
13-Portfolio		13-Portfolio
14-BMI-Calculator		14-BMI-Calculator
15-Calculator		15-Calculator
16-Currency-Converter		16-Currency-Converter
16-currency-converter		16-currency-converter
17-Portfolio-ll		17-Portfolio-ll
18-Cards-Project-Using-ComponentsAndProps		18-Cards-Project-Using-ComponentsAndProps
19-Gallery-Project		19-Gallery-Project
20-Insta-App		20-Insta-App
21-Notes-Api_MongoDB		21-Notes-Api_MongoDB
22-Notes-App		22-Notes-App
23-Spotify-Project		23-Spotify-Project
24-Student-Management-System		24-Student-Management-System
25-UI-Project-Using-Tailwind		25-UI-Project-Using-Tailwind
26-AI-Powered-Smart-Food-Donation-Distribution-System		26-AI-Powered-Smart-Food-Donation-Distribution-System
scripts		scripts
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
CONTRIBUTORS.md		CONTRIBUTORS.md
GITHUB_ISSUES.md		GITHUB_ISSUES.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md

Latest commit

History

Folders and files

Repository files navigation

🚀 51 Web Projects

🌟 About The Project

🛠️ Tech Stack

📂 Featured Projects

🚀 Getting Started

Fork The Repository

Clone The Repository

Navigate To The Repository

Open Any Project

📁 Repository Structure

📊 Project Table

🗂️ Repository Structure

🤝 Contributing

How To Contribute

🎯 Contribution Ideas

🗂️ Scripts

🌱 Open Source Programs

🎯 Contribution Ideas

🌱 Open Source Programs

📜 Code of Conduct

👥 Contributors

📝 How to Add Yourself

⭐ Support The Project

👨‍💻 Maintainer

Jai Karan

📄 License

🚀 Happy Coding!

About

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

Sponsor this project

Packages

Contributors

Languages