Going further with CSS

Welcome to Going further with CSS. It assumes you have worked through An introduction to CSS and are comfortable with selectors, the box model, Flexbox and Grid basics, responsive media queries, and custom properties at a simple level.

The beginner series taught you how CSS works. These tutorials are about using it well on real layouts: controlling specificity on purpose, building components that respond to their container, fluid type and spacing that scales sensibly, and patterns that survive hand-off to another developer (or your future self).

We start with cascade layers and modern selectors, then move into container queries, logical properties, and layout debugging. Forms, motion preferences, and colour-scheme handling get proper attention – the sort of polish users notice even if they cannot name it.

Later tutorials cover CSS architecture (BEM, ITCSS, utility hybrids without picking a religion), working with compiled SCSS output, and DevTools workflows that save hours when something is mysteriously misaligned. Where the intro series already explains something clearly, we will link back rather than repeat it.

You do not need a framework for these tutorials. Plain CSS files in your editor are enough. Use whatever editor you like; the examples work the same in VS Code, Nova, or anything else that handles text files.

These tutorials end with two mini projects: a responsive marketing page and a dashboard shell (navigation, main content, aside). By then you should be able to take a layout brief, choose sensible tools, and write CSS you would not be embarrassed to hand to a colleague.

Work through the tutorials in order when you can. Each one builds on the last. If something from the intro series feels rusty – especially Flexbox, Grid, or the cascade – revisit that lesson first.