Building one HTML/CSS/JS project every day for 30 days to sharpen frontend skills and grow my GitHub profile.
This is a self-imposed 30-day coding challenge where I build one frontend project per day using only HTML, CSS, and Vanilla JavaScript — no frameworks, no libraries.
Each project lives in its own folder with a dedicated README and live GitHub Pages demo.
| Day | Challenge | Difficulty | Status | Live Demo |
|---|---|---|---|---|
| 01 | Animated Hero Section | Beginner | ✅ Todo | Demo |
| 02 | Responsive Nav Bar | Beginner | ✅ Todo | Demo |
| 03 | CSS Card Flip | Beginner | ✅ Todo | Demo |
| 04 | Custom Range Slider | Beginner | ✅ Todo | Demo |
| 05 | Dark / Light Mode Toggle | Beginner | ✅ Todo | Demo |
| 06 | Typewriter Text Effect | Beginner | ✅ Todo | Demo |
| 07 | Responsive Image Gallery | Intermediate | ✅ Todo | Demo |
| 08 | Interactive Pricing Table | Intermediate | ✅ Todo | Demo |
| 09 | Drag & Drop Todo List | Intermediate | ✅ Todo | Demo |
| 10 | Animated CSS Loader Pack | Beginner | ✅ Todo | Demo |
| 11 | Scroll-Triggered Animations | Intermediate | ✅ Todo | Demo |
| 12 | Multi-Step Form | Intermediate | ⬜ Todo | Demo |
| 13 | CSS-Only Accordion FAQ | Beginner | ⬜ Todo | Demo |
| 14 | Parallax Scrolling Page | Intermediate | ⬜ Todo | Demo |
| 15 | Glassmorphism Dashboard | Intermediate | ⬜ Todo | Demo |
| 16 | Animated SVG Icon Set | Intermediate | ⬜ Todo | Demo |
| 17 | Real-Time Character Counter | Beginner | ⬜ Todo | Demo |
| 18 | CSS Grid Layout Builder | Intermediate | ⬜ Todo | Demo |
| 19 | Smooth Page Transition SPA | Advanced | ⬜ Todo | Demo |
| 20 | CSS Art — Flat Scene | Intermediate | ⬜ Todo | Demo |
| 21 | Custom Video Player | Advanced | ⬜ Todo | Demo |
| 22 | Infinite Marquee / Ticker | Beginner | ⬜ Todo | Demo |
| 23 | 3D CSS Cube | Intermediate | ⬜ Todo | Demo |
| 24 | Accessible Modal System | Advanced | ⬜ Todo | Demo |
| 25 | Color Palette Generator | Intermediate | ⬜ Todo | Demo |
| 26 | Sticky Sidebar + TOC | Advanced | ⬜ Todo | Demo |
| 27 | Animated Number Counter | Intermediate | ⬜ Todo | Demo |
| 28 | Responsive Email Template | Advanced | ⬜ Todo | Demo |
| 29 | Canvas Particle System | Advanced | ⬜ Todo | Demo |
| 30 | Full Portfolio Page | Advanced | ⬜ Todo | Demo |
✅
30-day-html-challenge/
├── README.md ← You are here
├── day-01-animated-hero/
│ ├── index.html
│ ├── README.md
│ └── preview.png
├── day-02-responsive-navbar/
│ ├── index.html
│ ├── README.md
│ └── preview.png
└── ... (repeat for all 30 days)
- HTML5 — semantic markup, accessibility
- CSS3 — animations, Grid, Flexbox, custom properties
- Vanilla JavaScript — DOM, Web APIs, Canvas
No frameworks. No build tools. Just the fundamentals.
Each day I commit with this format:
Day 01 — Animated Hero Section Update
Day 02 — Responsive Nav Bar Update
html css javascript frontend portfolio 30-day-challenge web-development css-animations vanilla-js
*Started: 07/03/2026 ·