Complete beginner-friendly guide to HTML and CSS — from tags and selectors to layouts, animations, and interview prep.

flowchart TB
    Start[Start Here 🚀] --> HTML[01. HTML Basics<br/>Tags, Semantics, Forms]
    HTML --> CSS[02. CSS Basics<br/>Selectors, Box Model, Colors]
    CSS --> Layout[03. Layout<br/>Flexbox, Grid, Responsive]
    Layout --> Advanced[04. Advanced CSS<br/>Animations, Variables, Accessiblity]
    Advanced --> Interview[05. Interview Prep<br/>Common Q&A]

    style Start fill:#7c3aed,color:#fff
    style HTML fill:#3b82f6,color:#fff
    style CSS fill:#059669,color:#fff
    style Layout fill:#06b6d4,color:#fff
    style Advanced fill:#f59e0b,color:#fff
    style Interview fill:#ef4444,color:#fff

• What is HTML? — Tags, elements, attributes, page skeleton
• Semantic HTML — Header, nav, main, article, footer
• Text & Links — Headings, paragraphs, lists, anchors, images
• Forms & Inputs — Inputs, labels, validation, buttons
• Tables & Media — Tables, audio/video, iframes

• CSS Syntax & Selectors — Rules, selectors, specificity, cascade
• Colors, Units & Typography — px/em/rem/%, fonts, text styling
• The Box Model — Content, padding, border, margin
• Display & Positioning — Block/inline, position, z-index

• Flexbox — Axes, justify/align, wrapping
• Grid — Rows, columns, areas
• Responsive Design — Media queries, mobile-first, fluid units

• Transitions & Animations — CSS transitions, keyframes
• Variables & Modern CSS — Custom properties, clamp(), container queries
• Accessibility — Alt text, ARIA, keyboard nav, contrast
• Best Practices — BEM naming, organization, common mistakes

• Interview Questions — Common HTML/CSS questions with answers