HTML & CSS · Beginner

Responsive Web Design

Fifty-six lessons of real HTML and CSS: semantic markup, the box model, flexbox, grid, media queries, accessible components and a finished responsive page.

56 steps, written for someone starting from zero: the lessons plus a checkpoint quiz task after every ten. Each lesson opens with a starting point you have to change, not the finished answer. Work through it in order and you finish with a program you wrote yourself — the kind of thing you can show in an interview, not a certificate you bought.

56 tasks 6 sections 0 done

Start task 1

HTML foundations

1 Your first heading HTML & CSS —
2 Paragraphs and line breaks HTML & CSS —
3 Lists that scan HTML & CSS —
4 Links people actually use HTML & CSS —
5 Images with alt text HTML & CSS —
6 Semantic sections HTML & CSS —
7 Forms and inputs HTML & CSS —
8 Simple tables HTML & CSS —
9 Comments and tidy structure Concept —
10 Build a small page HTML & CSS —

CSS styling

11 Colour and contrast HTML & CSS —
12 Type that reads well HTML & CSS —
13 The box model HTML & CSS —
14 Margin and spacing rhythm HTML & CSS —
15 Borders and rounded corners HTML & CSS —
16 Flexbox in one line HTML & CSS —
17 Aligning flex children HTML & CSS —
18 A simple grid HTML & CSS —
19 Hover and focus states HTML & CSS —
20 Style small page HTML & CSS —

Layouts and responsiveness

21 Relative units HTML & CSS —
22 A centred container HTML & CSS —
23 Mobile-first media query HTML & CSS —
24 clamp() for fluid headings HTML & CSS —
25 Responsive images HTML & CSS —
26 Sticky header HTML & CSS —
27 A navigation row HTML & CSS —
28 Hiding and showing content HTML & CSS —
29 Footer layout HTML & CSS —
30 Build the responsive page HTML & CSS —

Components

31 The button HTML & CSS —
32 The course card HTML & CSS —
33 The hero HTML & CSS —
34 Badges and chips HTML & CSS —
35 Styling a form HTML & CSS —
36 Styling a table HTML & CSS —
37 Notices HTML & CSS —
38 Breadcrumbs HTML & CSS —
39 Design tokens with custom properties HTML & CSS —
40 Build a component page HTML & CSS —

Accessibility and polish

41 Alt text that helps HTML & CSS —
42 Labels and help text HTML & CSS —
43 Focus never disappears HTML & CSS —
44 Contrast you can measure Concept —
45 Respect reduced motion HTML & CSS —
46 Skip to content HTML & CSS —
47 ARIA only when needed Concept —
48 Landmarks Concept —
49 Images and performance HTML & CSS —
50 Ship your page HTML & CSS —

Capstone: a real page

51 Lay out a page with semantic tags HTML & CSS —
52 Build an accessible form HTML & CSS —
53 Show a photo with a caption HTML & CSS —
54 Make a data table readable HTML & CSS —
55 Answer questions with details/summary HTML & CSS —
56 Give the page a proper head HTML & CSS —

Final exam and certificate

Twenty questions from the whole track. Pass mark is 60%. Retakes are free and the best score is the one printed on your certificate.

Create a free account to take the exam