CSS Notes

Project: A Documentation Site

Sidebar navigation, an on this page menu, code blocks that scroll, a search box and deep links that survive a sticky header. The hardest layout to get...

HTML

Project: A Resume Page

A document with real structure: dated entries, an experience timeline, skills grouped by category, and a print stylesheet that produces a usable PDF.

HTML

Colour, Contrast and Motion

Contrast ratios that meet the guidelines, never relying on colour alone, and honouring the reduced motion preference. Mostly CSS, entirely part of the...

HTML

Responsive Design Starts in the Markup

The viewport tag, flexible images, relative units and the mobile first habit. Half of responsive design is decided before a single media query is writ...

HTML

Writing Markup That CSS Can Lay Out

Grid and flexbox changed what markup a layout needs. Fewer wrappers, source order that matches reading order, and the reorder trap that breaks keyboar...

HTML

CSS Selectors Your Markup Makes Possible

The structure you write decides which selectors are available. Attribute selectors, sibling combinators and structural pseudo classes can replace a su...

HTML

The class and id Attributes

Two ways to name an element, with different rules and different jobs. Choosing correctly makes a stylesheet maintainable and stops the specificity war...

HTML

Three Ways to Attach CSS, and When Each Is Right

External, internal and inline styles. One of them is the answer almost always, and knowing why the other two exist is what tells you when to break the...

HTML

div and span: When Nothing Else Fits

Two elements with no meaning at all, and that is the point. Learn what they are for, why they are not a failure, and how to know you have too many.

HTML

Responsive Tables on Small Screens

A table with eight columns cannot fit on a phone. Four patterns that keep the data usable, and the trade off each one makes.

HTML

Block Level and Inline Elements

The oldest distinction in HTML layout: block boxes stack down the page and fill the width, inline boxes sit inside a line of text. It also decides whi...