■■ 7-Day HTML & CSS Learning Plan
Day 1 – HTML Deep Dive
● Semantic structure & best practices
● Learn: Semantic tags, forms, tables, accessibility
● Do: Recreate a simple article/news webpage layout
● Resources: MDN HTML Guide, FreeCodeCamp HTML
Day 2 – CSS Fundamentals
● Selectors, the box model, and text styling
● Learn: CSS syntax, classes vs IDs, box model
● Do: Style your Day 1 webpage with fonts, borders, and shadows
● Resources: MDN CSS Basics, CSS Tricks Selectors Guide
Day 3 – Layout with Flexbox
● Modern layout control with Flexbox
● Learn: justify-content, align-items, flex-wrap
● Do: Build a responsive navbar and card grid
● Resources: Flexbox Froggy, CSS Tricks Flexbox Guide
Day 4 – CSS Grid
● Structured, advanced layouts
● Learn: grid-template-columns, grid-gap, areas
● Do: Rebuild your Day 1 layout using CSS Grid
● Resources: Grid Garden, CSS Tricks Grid Guide
Day 5 – Responsive Design
● Make layouts mobile-friendly
● Learn: media queries, relative units, responsive images
● Do: Make one of your previous projects mobile-friendly
● Resources: MDN Responsive Design, FreeCodeCamp Projects
Day 6 – Mini Project: Portfolio Website
● Combine everything learned
● Build: Hero, About, and Contact sections
● Use: Flexbox, Grid, Responsive design, Google Fonts
Day 7 – Polish & Extra Features
● Finishing touches
● Learn: Transitions, hover effects, CSS variables
● Do: Add animations and validate HTML/CSS
● Resources: W3C Validator
■ Bonus Tips
• Use VS Code + Live Server for instant preview.
• Inspect other websites using browser developer tools to learn layout tricks.
• Save your work on GitHub Pages or Netlify to share your portfolio online.
Keep building and experimenting — practice is the fastest way to master HTML & CSS!
