5 hands-on exercises and 5 find-the-bug challenges for the Mobile First Design lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
One column by default, three from 700px up.
14px by default, 20px from 700px up.
Stack #grid in a column, switching to a row from 700px up.
12px of padding by default, 32px from 700px up.
Single column with 12px padding, becoming three columns with 32px from 700px.
The three-column layout is the base, so phones get it too.
An enhancement is guarded with min-width, not max-width.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceWith the layout only inside the query, phones get no layout at all.
The generous desktop padding should be the enhancement, not the default.
Phones should stack; the row belongs behind the breakpoint.