Welcome to 100_days_100_web_project! learn and practise web development by contributing your projects.
This repository contains 100 web projects from basic to intermediate using html css and js
PROJECT NAME --- LIVE DEMO
visit URL for live demo :- https://100-days-100-web-project.vercel.app/
| Day | Project Name | Link to the Project Folder | Description |
|---|---|---|---|
| DAY-1 | TODOLIST | TODOLIST | |
| DAY-2 | DIGITAL CLOCK | DIGITAL CLOCK | |
| DAY-3 | INDIAN FLAG | INDIAN FLAG | |
| DAY-4 | DROPDOWN NAV BAR | DROPDOWN NAV BAR | |
| DAY-5 | ANIMATED-CURSOR | ANIMATED-CURSOR | |
| DAY-6 | AUTO-BACKGROUND-IMAGE-SLIDER | AUTO-BACKGROUND-IMAGE-SLIDER | |
| DAY-7 | TYPEWRITER | TYPEWRITER | |
| DAY-8 | PARALLEL-X WEBSITE | PARALLEL-X WEBSITE | |
| DAY-9 | CAPTCHA-GENERATOR | CAPTCHA-GENERATOR | |
| DAY-10 | QR-CODE-GENERATOR | QR-CODE-GENERATOR | |
| DAY-11 | SERVING WEBSITE USING EXPRESS | ||
| DAY-12 | NODEMAILER GMAIL SENDER | NODEMAILER GMAIL SENDER | to use this email sender you need to first clone this repo ->open folder gmail_nodemailer npm i -> nodemon index.js -> open http://localhost:51000/ -> enter your name and email address server automatically will share a email to you from my side . that's it all set. |
| DAY-13 | LOGIN FORM USING MERN | LOGIN FORM USING MERN | to use this Login form you need to first clone this repo ->open folder loginusingmern npm i -> nodemon index.js -> open http://localhost:3000/ -> go to register page enter your details , your details are submitted and stored in mongodb . that's it all set. |
| DAY-14 | FILE UPLOADER | FILE UPLOADER | to use this file uploader you need to first clone this repo ->open folder file_uploader npm i -> npm run start -> open http://localhost:3000/file -> fill all thing and submit file and open your clone folder -> uploads you will see file . that's it all set. |
| DAY-15 | PROGRESS-BAR | PROGRESS-BAR | |
| DAY-16 | SCROLL-BAR-CSS | ||
| DAY-17 | SLIDER USING SWIPER API | SLIDER USING SWIPER API | |
| DAY-18 | Carousel Solar System | Carousel Solar System | |
| DAY-19 | PLANTO | PLANTO | |
| DAY-20 | EVESPARKS | ||
| DAY-21 | Video bg slider using react | Video bg slider using react | to use this Video bg slider using react you need to first clone this repo ->open folder travel_website -> npm i -> npm run dev -> open http://localhost:5120 -> see Video bg slider using react . that's it all set. |
| DAY-22 | PAGELOADER | PAGELOADER | |
| DAY-22 | Jarvis Virtual Assistant | Jarvis Virtual Assistant | |
| DAY-24 | AI ChatBot | AI ChatBot | |
| DAY-25 | Tic-Tac-Toe | Tic-Tac-Toe | |
| DAY-26 | Maze game | Maze game | |
| DAY-27 | MemoryGame | MemoryGame | |
| DAY-28 | wordle | wordle | |
| DAY-29 | Snake Game | Snake Game | |
| DAY-29 | Flappy-bird-game | Flappy-bird-game | |
| DAY-31 | Password Manager | Password Manager | |
| DAY-32 | Missionaries & Cannibals | Missionaries & Cannibals | |
| Day 33 | Weather Forcasting | Weather Forcasting | |
| Day 34 | Email Validator | Email Validator | |
| Day 35 | Vanilla-JavaScript-Calculator | Vanilla-JavaScript-Calculator | |
| Day 36 | Medical App | Medical App | |
| Day 37 | 2048 Game | 2048 Game | |
| Day 38 | Github Profile Finder | Github Profile Finder | |
| Day 39 | Notes App | Notes App | |
| Day 40 | Analog Clock | Analog Clock | |
| Day 41 | Scroll Dark Game | Scroll Dark Game | |
| Day 42 | Amazon App | Amazon App | |
| Day 43 | Password Generator | Password Generator | |
| Day 44 | BMI Calculator | BMI Calculator | |
| Day 45 | Black Jack | Black Jack | |
| Day 46 | Palindrome Generator | Palindrome Generator | |
| Day 47 | Ping Pong Game | Ping Pong Game | |
| Day 48 | TextToVoiceConverter | TextToVoiceConverter | |
| Day 49 | Url Shortener | Url Shortener | |
| Day 50 | Recipe Genie | Recipe Genie | |
| Day 51 | Netflix Landing Page Clone | Netflix Landing Page Clone | |
| Day 52 | ClimaCode | ClimaCode | |
| Day 53 | E-Commerce Website with Simple Cart Functionality | E-Commerce Website with Simple Cart Functionality | |
| Day 54 | Budget Tracker | Budget Tracker | |
| Day 55 | Cricket Game | Cricket Game | |
| Day 56 | Pastebin using svelte | Pastebin using svelte | |
| Day 57 | Glowing Social Media Icons | Glowing Social Media Icons | |
| Day 58 | Music App | Music App | |
| Day 59 | Blog Page | Blog Page | |
| Day 60 | Marketing template website | Marketing template website | |
| Day 61 | Hologram Button | Hologram Button | |
| Day 62 | Solar System Explorer | Solar System Explorer | |
| Day 63 | Image to Text App | Image to Text App | |
| Day 64 | Zomato-clone | Zomato-clone | |
| Day 65 | The Cube | The Cube | |
| Day 66 | Flask Authentication App | Flask Authentication App | |
| Day 67 | Blog-Website | Blog-Website | |
| Day 68 | 3d Rotating Card | 3d Rotating Card | |
| Day 69 | Spotify Clone Project | Spotify Clone Project | |
| Day 70 | Insect-Catch_Game | Insect-Catch_Game | |
| Day 71 | Quotely Laughs | Quotely Laughs | |
| Day 72 | Contact Book | Contact Book | |
| Day 73 | Candy_Crush_Game | Candy_Crush_Game | |
| Day 74 | Stock Profit Calculator | Stock Profit Calculator | |
| Day 75 | code-space-game project | code-space-game project | |
| Day 76 | animated searchbar | animated searchbar | |
| Day 77 | rock-paper-scissor-game project | rock-paper-scissor-game project | |
| Day 78 | npm package search | npm package search | |
| Day 79 | linkedin homepage clone using react | linkedin homepage clone using react | |
| Day-95 | TodoList in React-TS-Tailwind | TodoList in React-TS-Tailwind | to use this TodoList you need to first clone this repo -> open folder TodoList-React-TS-Tailwind -> npm i -> npm run dev -> open http://localhost:5173 -> see TodoList . that's it all set. |
Now, resolve your all doubts and communicate with our all contributors.
To get started with contributing to 100_days_100_Web Projects , please refer to our Contributing Guidelines.
Follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/100_days_100_web_project.git or Use Github desktop to directly clone it in your system -
Navigate to the project directory:
cd 100_days_100_Web Projects -
Install dependencies:
npm install
-
Running the Application:
Once you have installed the dependencies, you can run the application locally using:
npm run start
This command will start a development server and open the application in your default web browser on local host .
If you'd like to contribute to 100_days_100_Web Projects , please follow these guidelines:
- Fork the repository and clone it locally.
- Create a new branch for your feature or bug fix:
git checkout -b feature-name - Make your changes and test thoroughly.
- Commit your changes:
git commit -m "Brief description of your changes" - Push to the branch:
git push origin feature-name - Submit a pull request detailing your changes.
For any questions or issues, feel free to reach out to us through our disscusion or by opening an issue on GitHub.
Stay updated with the latest news and announcements:
Thanks goes to these wonderful people :