Command Palette

Search for a command to run...

Hectal

CSS · how every web page looks

Make it look right,
on every screen.

Start from zero: you only need the basics of HTML, and every word is explained in plain English. You will learn how the browser decides which styles win, the box model, units and colours, typography, positioning, Flexbox, Grid, responsive design, transitions and animation, and modern CSS like nesting, :has() and container queries. Every example is live, and every phase ends with exercises your browser checks automatically.

Start from zero The full roadmap
Phases
12
Topics
73
Hours
31
Diagrams
91
Exercises
504

By the end you can

What this course makes you able to do

  • Predict which rule wins: the cascade, specificity, inheritance and layers
  • Control every box: sizing, spacing, borders, backgrounds and overflow
  • Build any layout with Flexbox and Grid, and know which to choose
  • Make pages responsive with media queries, fluid type and container queries
  • Add transitions and animations that are smooth and respect reduced motion
  • Organise, theme and debug real-world CSS, and answer CSS interview questions

Beginner → Advanced

The curriculum, by level

Beginner
  1. 0Start Here: What CSS Is4 topics · ~2 h
  2. 1Selectors6 topics · ~2 h
  3. 2The Cascade, Specificity and Inheritance5 topics · ~2 h
  4. 3Values, Units and Colours7 topics · ~3 h
  5. 4Text and Typography6 topics · ~2 h
  6. 5The Box Model8 topics · ~3 h
Intermediate
  1. 6Positioning and Layout Basics5 topics · ~2 h
  2. 7Flexbox5 topics · ~2 h
  3. 8CSS Grid6 topics · ~3 h
  4. 9Responsive Design7 topics · ~3 h
Advanced
  1. 10Effects, Transitions and Animation6 topics · ~3 h
  2. 11Modern CSS and Architecture8 topics · ~3 h

Where should I start?

Pick a path for your goal

Complete beginner

You know a little HTML. Start here: every word is explained.

  1. 10 · Start Here: What CSS Is
  2. 21 · Selectors
  3. 32 · The Cascade, Specificity and Inheritance
  4. 43 · Values, Units and Colours
  5. 55 · The Box Model

Layout and responsive

You can style text; now build real page layouts.

  1. 15 · The Box Model
  2. 26 · Positioning and Layout Basics
  3. 37 · Flexbox
  4. 48 · CSS Grid
  5. 59 · Responsive Design

Advanced and interviews

You write CSS daily and want depth and modern features.

  1. 12 · The Cascade, Specificity and Inheritance
  2. 210 · Effects, Transitions and Animation
  3. 311 · Modern CSS and Architecture