CSS from the ground up

A hands-on introduction to CSS, from your first rule to responsive layouts and a small design system: every idea comes with a page you can restyle and see change in the same editor, with a short quiz at the end of each chapter.

What You'll Learn

• Write rules that choose the right elements and win without a fight
• Use colour and units that scale with the reader’s settings
• Understand the box model, and stop guessing where the space went
• Set type that is comfortable to read at any width
• Lay out pages with flexbox and grid
• Make one page work on a phone and a desktop
• Give controls hover, focus and active states that answer back
• Keep a palette in custom properties, so a change happens in one place
• Write the modern rules — nesting, :has(), container queries — with no build step

Prerequisites

• Some HTML — the HTML course on this site, or any page you can open in an editor
• No design experience; every rule is explained where it is used

Course Content

1. 01
   How CSS works

   What CSS actually is, how a stylesheet connects to a page, and the shape every rule has: choose something, then say what it should look like.

   Beginner · 12 min read

   Not started
2. 02
   Selectors

   Choosing what to style: element names for the defaults, classes for the decisions, and the few combinators worth knowing.

   Beginner · 13 min read

   Not started
3. 03
   Colour and units

   Writing a colour three ways, measuring in units that scale, and the contrast rule that keeps text readable.

   Beginner · 14 min read

   Not started
4. 04
   The box model

   Every element is a box: content, padding, border, margin — and the one line that makes the arithmetic sane.

   Beginner · 14 min read

   Not started
5. 05
   Text and fonts

   A readable page is mostly four decisions: the font, the size, the line spacing and the width of the column.

   Beginner · 14 min read

   Not started
6. 06
   Flexbox

   One dimension, one line of CSS: lay things in a row or a column, spread them out, and space them evenly.

   Intermediate · 15 min read

   Not started
7. 07
   Grid

   Two dimensions at once: columns that tile on their own, rows that line up, and no widths to calculate.

   Intermediate · 15 min read

   Not started
8. 08
   Responsive design

   One page for every screen: fluid widths first, then a media query where the layout genuinely has to change.

   Intermediate · 15 min read

   Not started
9. 09
   States and interaction

   A page that answers back: hover, focus and active states, a visible focus ring, and motion that helps instead of distracting.

   Intermediate · 15 min read

   Not started
10. 10
    Custom properties

    Naming a value once and using it everywhere: the one change that turns a stylesheet into a system — and makes themes possible.

    Intermediate · 14 min read

    Not started
11. 11
    A stylesheet, end to end

    Everything at once: one plain page styled from nothing, against the checklist this course has built up.

    Advanced · 18 min read

    Not started
12. 12
    Nesting, :has() and container queries

    The three additions that changed how stylesheets are written: rules inside rules, a selector that sees what an element contains, and a component that answers to its own width.

    Advanced · 17 min read

    Not started