[Deploy Status](https://github.com/karthikbilaspur/100Days100Projects/actions) [Live Site](https://karthikbilaspur.github.io/100Days100Projects/) [GitHub stars](https://github.com/karthikbilaspur/100Days100Projects/stargazers)
One project a day. For 100 days. Mastering frontend, one commit at a time.
[Use This Template](https://github.com/karthikbilaspur/100Days100Projects/generate)
This is my public #100DaysOfCode challenge repo. Every folder here is a standalone HTML, CSS, JS project built from scratch to understand core web concepts and modern UI patterns.
| Metric | Value |
|---|---|
| Total Projects | 80+ |
| Tech Stack | JavaScript 47.8%, CSS 31.4%, HTML 19.7% |
| Also Used | TypeScript, React, Vue, SCSS, Bootstrap 5 |
| Total Commits | 163+ |
| Automation | GitHub Pages via static.yml |
| Status | Active. Upgrading old projects weekly |
Clone and run any project in 30 seconds. Most need zero setup.
git clone https://github.com/karthikbilaspur/100Days100Projects.git
cd 100Days100Projects/PomodoroTimer
# Open index.html with Live Server or directly in browserFor React/Vue apps inside /my-react-app, /my-qui-app:
cd my-react-app
npm install && npm startAll projects are auto-deployed via GitHub Actions. Click any Demo link to try it live.
Legend
🎮 Game | 🛠️ Tool | 🎨 UI/Animation | 🌐 API | ⚙️ Web Concept | 📱 App
| # | Project | Type | Key Concepts | Demo |
|---|---|---|---|---|
| 1 | Snake | 🎮 | Canvas API, Game Loop | Demo |
| 2 | MemoryGame | 🎮 | Shuffling, Card Flip Logic | Demo |
| 3 | Tic_Tac_Toe | 🎮 | Game Logic, 2D Arrays | Demo |
| 4 | Rock_Paper_Scissors | 🎮 | Conditional Logic | Demo |
| 5 | Guess_The_Number | 🎮 | DOM Manipulation, Random | Demo |
| 6 | Simon Says | 🎮 | Pattern Memory, Audio | Demo |
| 7 | PixelBattle | 🎮 | Canvas, Multiplayer Concept | Demo |
| # | Project | Type | Key Concepts | Demo |
|---|---|---|---|---|
| 8 | PomodoroTimer | 🛠️ | setInterval, Notifications | Demo |
| 9 | Password Generator | 🛠️ | Math.random, Checkbox Logic | Demo |
| 10 | Quiz_App | 🛠️ | Array Methods, State | Demo |
| 11 | Scientific Calculator | 🛠️ | eval(), Complex Logic | Demo |
| 12 | CodeDown-Timer | 🛠️ | Date Object, Countdown | Demo |
| 13 | Gradient-Generator | 🛠️ | CSS Gradients, Copy to Clipboard | Demo |
| 14 | ThemeDisplay | 🎨 | Dark/Light Mode Toggle | Demo |
| 15 | Drawing_App | 🛠️ | Canvas API, Mouse Events | Demo |
| 16 | Drink_Water | 🛠️ | Tracker UI, localStorage | Demo |
| 17 | Notesapp | 🛠️ | CRUD, localStorage | Demo |
| # | Project | Type | Key Concepts | Demo |
|---|---|---|---|---|
| 18 | 3DBoxes | 🎨 | CSS 3D Transforms, Grid | Demo |
| 19 | Accordion & Dropdown Menu | 🎨 | Event Delegation | Demo |
| 20 | Expanding-Cards | 🎨 | Flexbox, Transitions | Demo |
| 21 | Rotating-Navigation-Animation | 🎨 | Transform Origin, CSS Vars | Demo |
| 22 | Scroll_Animations | 🎨 | IntersectionObserver API | Demo |
| 23 | ProgressSteps | 🎨 | CSS Custom Properties | Demo |
| 24 | Split_Landing_Page | 🎨 | Hover Effects, ::before | Demo |
| 25 | ButtonRippleEffect | 🎨 | Mouse Events, CSS Circles | Demo |
| 26 | Form-Wave | 🎨 | Input Animation, Labels | Demo |
| 27 | Testimonial_Box_Switcher | 🎨 | setInterval, Fade Effect | Demo |
| 28 | Content-Placeholder | 🎨 | Skeleton Screens, Loading UI | Demo |
| 29 | Backgroundslider | 🎨 | CSS Background, Transitions | Demo |
| 30 | Hoverboard | 🎨 | Mouseover, Random Colors | Demo |
| # | Project | Type | Key Concepts | Demo |
|---|---|---|---|---|
| 31 | Pokedex | 🌐 | Fetch API, PokeAPI | Demo |
| 32 | Movie-App | 🌐 | TMDb API, Search | Demo |
| 33 | NewsFeed | 🌐 | News API, Card UI | Demo |
| 34 | WebStorage | ⚙️ | localStorage, sessionStorage | Demo |
| 35 | WebWorker | ⚙️ | Dedicated Workers, postMessage | Demo |
| 36 | WebSockets | ⚙️ | ws, Real-time Communication | Demo |
| 37 | ChatBotInterface | ⚙️ | UI for Chat, WebSocket Ready | Demo |
| # | Project | Type | Key Concepts | Demo | | --- | --- | --- | | 38 | ProfilePage | 📱 | Personal Portfolio Layout | Demo | | 39 | ResumeWebsite | 📱 | Single Page Resume | Demo | | 40 | Ecommece | 📱 | Product Grid, Cart UI | Demo | | 41 | Awesome_Product_Landing_Page | 📱 | Landing Page, CTA | Demo | | 42 | SinglePage | 📱 | SPA Concepts | Demo |
...and 40+ more. See all folders in repo. This table covers the main ones. I used your folder names exactly from the screenshots.
Note: Some folder names have typos like Scitenfic Calculator and Ecommece. Fixing them will break the demo links above, so update both if you rename.
This repo uses static.yml to auto-deploy every project to GitHub Pages on push to main.
Live Site: https://karthikbilaspur.github.io/100Days100Projects/
Check the Actions tab for deployment status.
Based on commit history:
- Added screenshots and demo videos to most projects
- Enhanced code for readability and modern JS practices
- Added individual README.md files to complex projects
static.ymladded for auto-deployment
- Want to do your own 100 days? Use this as a template.
- Found a bug or have a project idea? Open an issue.
- PRs for optimizations are welcome.
Karthik V | @karthikbilaspur
If this repo helps you, a star ⭐️ is the best way to say thanks.
MIT License. See LICENSE for details.
---
root. Want me to write you a nice landing page that auto-lists all projects?
Your repo is actually looking really solid. The `static.yml` + live demos will make it stand out a lot for recruiters.