1-Month Web Development Study Plan (HTML + CSS + JavaScript)
This is a structured 30-day study plan to learn HTML, CSS, and JavaScript from scratch to
advanced level. The plan is divided into 4 weeks with projects at the end of each week.
Spending 2–4 hours per day is recommended.
Week 1 – HTML Foundations (Days 1–7)
Goal: Build strong structure skills.
- Day 1–2: Learn HTML structure (doctype, head, body), headings, paragraphs, lists, links,
images
- Day 3: Forms (input, button, textarea, select), attributes (id, class, name, placeholder)
- Day 4: Semantic tags (header, nav, section, article, footer), tables & media (video, audio,
iframe)
- Day 5–6: Accessibility basics (alt, labels, ARIA roles), metadata (SEO basics: meta
description, title tags)
- Day 7 – Project: Build a Personal Resume Webpage (with sections like About, Skills,
Contact)
Week 2 – CSS Styling (Days 8–14)
Goal: Learn styling + responsive design.
- Day 8–9: CSS basics (colors, units, box model), typography (fonts, line-height, spacing)
- Day 10: CSS selectors (class, id, descendant, pseudo-classes), position (relative, absolute,
fixed)
- Day 11: Flexbox (containers, alignment, justify-content)
- Day 12: CSS Grid (rows, columns, grid areas)
- Day 13: Transitions & animations, media queries (responsive design)
- Day 14 – Project: Build a Responsive Landing Page (like a product or portfolio page)
Week 3 – JavaScript Basics (Days 15–21)
Goal: Add interactivity.
- Day 15–16: Variables, data types, operators; conditionals (if, switch); loops (for, while)
- Day 17: Functions (normal + arrow), arrays & objects
- Day 18–19: DOM Manipulation (querySelector, getElementById), events (onclick,
addEventListener)
- Day 20: LocalStorage & JSON, basic form validation
- Day 21 – Project: Build a To-Do List App (add, delete, mark tasks done)
Week 4 – Advanced JavaScript + Final Projects (Days 22–30)
Goal: Make real projects & use APIs.
- Day 22: ES6 features (template literals, spread/rest, destructuring)
- Day 23–24: Async JavaScript (Promises, async/await), Fetch API (call a public API)
- Day 25: Event bubbling & delegation, error handling (try/catch)
- Day 26–27 – Project: Build a Weather App (fetch weather API & show data)
- Day 28–29 – Project: Build a Quiz App (score system, questions from JSON/API)
- Day 30 – Capstone Project: Portfolio Website with Projects Showcase (resume, landing
page, to-do app, weather app)
Outcome After 1 Month
- Solid understanding of HTML, CSS, and JS fundamentals
- At least 4 real projects to showcase on GitHub
- A portfolio website to display your skills
