Web design cheat sheet

HTML structure

HTML supplies document structure and meaning. Choose elements that express the content’s role.

A heading, a link and a button have different purposes.

CSS layout

CSS controls presentation. Flexbox is useful for one-dimensional arrangements; Grid organises rows and columns.

Choose layout rules that adapt when text wraps.

Responsive design

A responsive layout adapts to available space and user settings. Fixed heights can clip translated or enlarged text.

Test narrow screens as well as long labels.

Accessible interaction

Controls need meaningful names, visible focus and keyboard operation. Colour alone should not carry the full meaning.

A button label should describe its action.

Semantic HTML

Choose elements for their meaning and built-in behaviour. Links navigate; buttons perform actions; labels identify form controls. Correct structure also helps assistive technology interpret the page.

Use a button for opening a panel and an anchor with href for moving to another page.

The box model

Rendered size includes content, padding and borders. With border-box sizing, the declared width includes padding and borders; margins remain outside.

A 240 px content-box with 20 px padding on both sides and 2 px borders is 284 px wide.

Flexible layouts

Use flexible tracks, wrapping and content-driven breakpoints. A responsive page must work with long text and zoom, rather than only with a few device presets.

minmax(0, 1fr) allows a grid track to shrink instead of forcing long content beyond the viewport.

Focus and keyboard use

Interactive controls need an accessible name, a visible focus state and a logical keyboard order. Opening a modal also requires appropriate focus containment and a way to dismiss it.

An icon-only search button still needs a meaningful accessible name.

Worked example: fluid columns

For two equal columns inside 900 px with one 24 px gap, the available track width is 900 − 24 = 876 px. Each column receives 438 px before any additional container padding.

Subtract gaps and container padding before comparing a design’s column widths.

Common mistake: visual order fixes structure

CSS can move content visually without changing reading or keyboard order. Keep the document order meaningful before rearranging the layout.

A form that looks ordered on a desktop must still make sense when read linearly.

Check your understanding

Which element should navigate to a different page?

An anchor with a valid href. A button is appropriate for an action in the current interface.

Curriculum connections

Sources