Week 12 · Web foundations

CSS: style, the box model and responsive layout

Last week's page had good bones but looked like a 1995 document. Today you give it a design — colours, spacing, cards — and make it look good on a phone, because most people in Kenya will open your site on a phone.

Web development90 minutesIntermediateLevel 1 module

In this lesson you will

Tick them off as you read. This is a preview check-list.

Link a stylesheet and write rules with selectors, properties and values
Use the box model (content, padding, border, margin) to space elements
Lay out cards with CSS grid and make the page responsive with a media query
Check the page on a phone-sized screen and for readable colour contrast

Your check-list0 of 4

Ticks here aren't saved until you sign in.

The full lesson is for enrolled students

Enrolled students get the complete notes: essential theory, key terms, a step-by-step practical walkthrough, an independent challenge, check-your-understanding questions and the take-home task.

CSS: style, the box model and responsive layout

In this lesson you will

Keep track of your learning

The full lesson is for enrolled students

This lesson is waiting for you