Responsive Web Design with CSS

Turn a simple page into a real site: tidy cards, a proper header, galleries that line up, and layouts that rearrange themselves for phones. Ten-minute lessons on a live page.

by Teyro

100 lessons
5 units
19h 15m
Up to 1,450 XP

I wrote this one myself. Start now and I'll count your streak from lesson one.

What you'll learn

Space and size elements with the box model
Reuse styles with classes and understand which rule wins
Line things up in rows and columns with Flexbox
Build galleries and grids with CSS Grid
Make layouts that work on phones first, with media queries

Course path

5 units · 100 lessons

Everything is a box11 min · InteractiveFree+10 XP
Room inside the box11 min · InteractiveFree+10 XP
Four layers of every box12 min · InteractiveFree+10 XP
One number, two or four11 min · InteractiveFree+10 XP
Checkpoint: the first real card12 min · InteractiveFree+20 XP
Space you didn't ask for11 min · InteractiveFree+10 XP
When browsers disagreed about boxes12 min · InteractiveFree+10 XP
Too wide for Ama's phone11 min · InteractiveFree+10 XP
The card that won't fit11 min · InteractiveFree+10 XP
Checkpoint: Ama stops scrolling12 min · InteractiveFree+20 XP
The neon border phase11 min · InteractiveFree+10 XP
Anatomy of a beat card11 min · InteractiveFree+10 XP
Why won't my link get bigger?11 min · InteractiveFree+10 XP
Find the invisible box12 min · InteractiveFree+10 XP
Checkpoint: Efua's one word12 min · InteractiveFree+20 XP
Boxes: myth or fact?11 min · InteractiveFree+10 XP
Ama's thumb keeps missing11 min · InteractiveFree+10 XP
A column down the middle12 min · InteractiveFree+10 XP
The whole layout, box by box11 min · InteractiveFree+10 XP
Chapter Challenge: Mensah Beats v1.115 min · InteractiveFree+20 XP
Unit 1 chestFinish every lesson in this unit+50 XP

Only three of them11 min · Interactive
Copy-paste vs one class11 min · Interactive
Your first real class12 min · Interactive
Two labels on one card11 min · Interactive
Checkpoint: the poster three12 min · Interactive
Class or id?11 min · Interactive
How the browser picks a winner12 min · Interactive
Counting specificity11 min · Interactive
The specificity war11 min · Interactive
Checkpoint: no more guessing12 min · Interactive
When the names lie11 min · Interactive
One base, many cards11 min · Interactive
What gets passed down11 min · Interactive
Switch the site to classes12 min · Interactive
Checkpoint: beats and gigs12 min · Interactive
Classes: myth or fact?11 min · Interactive
The snippet that took over11 min · Interactive
Your page gets classes12 min · Interactive
A stylesheet you can change11 min · Interactive
Chapter Challenge: Mensah Beats v1.215 min · Interactive
Unit 2 chestFinish every lesson in this unit+50 XP

Teyro Original · Chapter 1 free, then Teyro Pro

All courses

Coding · Intermediate