The Complete HTML & CSS Course
A zero-to-advanced HTML & CSS curriculum: from how the web works and your very first page, through semantic markup, the box model, modern layout with Flexbox and Grid, responsive design, animations, accessibility, and performance — finishing with real, portfolio-ready websites.
Phase 1 · Getting Started
How the web works, your first page, text, links, and media.
How the Web Works & Your First Page
Understand how the web works, what HTML, CSS, and JavaScript each do, and write your very first web page.
HTML Document Structure
The skeleton every HTML page shares — doctype, head, body, and essential metadata.
Text & Content Elements
Mark up real content — headings, paragraphs, emphasis, quotes, and entities.
Links & Navigation
Connect pages together with links — the feature that makes the web a web.
Images & Multimedia
Add images, audio, and video — with the right formats, alt text, and responsiveness.
Phase 2 · Structuring Content
Lists, tables, semantic HTML, forms, and accessibility.
Lists & Tables
Organize content into lists and present real data in accessible tables.
Semantic HTML
Use meaningful elements that describe your content — better for SEO, a11y, and you.
Forms & Inputs
Collect input from users with forms — the interactive heart of the web.
Form Validation & Accessibility
Validate input in the browser and make forms usable by everyone.
Phase 3 · CSS Fundamentals
Selectors, the cascade, typography, the box model, and backgrounds.
Introduction to CSS
Bring your pages to life with CSS — how to add it and how the cascade works.
Selectors, Specificity & the Cascade
Target exactly the elements you want, and understand which rule wins.
Colors, Units & Typography
Master color, sizing units, and beautiful, readable web typography.
The Box Model
The single most important CSS concept — how every element is sized and spaced.
Backgrounds, Borders & Shadows
Add visual depth with backgrounds, gradients, rounded corners, and shadows.
Phase 4 · Layout
Display, positioning, Flexbox, Grid, and responsive design.
Display & Normal Flow
Understand how the browser lays out elements by default before you take control.
Positioning
Place elements precisely with relative, absolute, fixed, and sticky positioning.
Flexbox
The modern way to build one-dimensional layouts, navbars, and perfectly centered content.
CSS Grid
Build powerful two-dimensional page layouts with the most capable layout system in CSS.
Responsive Design & Media Queries
Make your sites look great on every screen with a mobile-first, responsive approach.
Phase 5 · Modern CSS & Effects
Transitions, animations, custom properties, and modern selectors.
Transitions & Animations
Bring interfaces to life with smooth transitions, transforms, and keyframe animations.
Custom Properties & CSS Functions
Write DRY, themeable, fluid CSS with variables and functions like calc() and clamp().
Advanced Selectors & Pseudo-elements
Do more with less JavaScript using structural selectors and generated content.
Modern Layout Techniques
The latest CSS for intrinsic, resilient layouts — aspect-ratio, logical props, container queries.
Phase 6 · Professional Practices
Architecture, accessibility, performance, DevTools, and frameworks.
CSS Architecture & Methodologies
Keep CSS maintainable at scale with naming conventions, BEM, and utility approaches.
Accessibility (a11y) Deep Dive
Build websites everyone can use — the mark of a true professional.
Web Performance & Optimization
Make your sites fast — a better experience for users and search rankings.
DevTools, Debugging & Workflow
Master the browser's built-in tools and ship your site to the world for free.
Frameworks & Preprocessors Overview
See what's beyond plain CSS — Bootstrap, Tailwind, and Sass — and what to learn next.
Phase 7 · Portfolio
Build complete responsive websites and a portfolio.