Skip to content

README.md

Latest commit

 

History

History
104 lines (77 loc) · 4.15 KB

README.md

File metadata and controls

104 lines (77 loc) · 4.15 KB

30-Day HTML Challenge

Building one HTML/CSS/JS project every day for 30 days to sharpen frontend skills and grow my GitHub profile.

Progress HTML CSS JavaScript

About

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.

Progress Tracker

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

✅

Folder Structure

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)

Tech Stack

  • HTML5 — semantic markup, accessibility
  • CSS3 — animations, Grid, Flexbox, custom properties
  • Vanilla JavaScript — DOM, Web APIs, Canvas

No frameworks. No build tools. Just the fundamentals.

Daily Commit Convention

Each day I commit with this format:

Day 01 — Animated Hero Section Update
Day 02 — Responsive Nav Bar Update

Topics

html css javascript frontend portfolio 30-day-challenge web-development css-animations vanilla-js

*Started: 07/03/2026 ·