Start here: the CSS layout path

Start with a readable single-column layout. A demonstration editing brief; supply your own evidence and details.

A young woman studying and writing notes at a desk — Photography for visual inspiration · Julio Lopez / Unsplash

Editorial focus

Start with a readable single-column layout.

The idea in plain language

Name the task before showing the code. Explain what the reader should be able to do at the end, and keep the first example small enough to understand without switching between several tools.

CSS layout · Lesson 1 of 6

What you will practise

Path: CSS layout
Approach: Read → try → review
Resources: On this page

Read the explanation before copying the example.
Change one part and describe what happened.
Use the keyboard to review the result.

A small example

.reading-layout {
  width: min(100% - 2rem, 44rem);
  margin-inline: auto;
}

Show a reflection prompt

Explain the example to a person who has not seen the code. Which part does the most useful work?

Try one change

Copy the small example, then alter one part. Describe the difference you observe. If the result is unexpected, return to the smallest working version and compare the change carefully.

Review what you made

Read the result without its decoration and navigate it with the keyboard. A clear structure and a useful explanation should survive when the optional enhancements are unavailable.

The learning desk

Make room for a new idea.

A notebook, a small example and the time to work through a question.

A lit candle next to an open notebook and laptop — Yen Vu / Unsplash

Desk with open book, laptop, and study materials — Yen Vu / Unsplash

Illustrative photography, not evidence of the sample project, recipe or reported event.