Skip to main content

Mobile First Design — exercises and bug fixes

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.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Start with one column

    easy10 min

    One column by default, three from 700px up.

  2. 2

    Scale type upwards

    easy10 min

    14px by default, 20px from 700px up.

  3. 3

    Stack first, row later

    easy10 min

    Stack #grid in a column, switching to a row from 700px up.

  4. 4

    Grow the spacing

    easy10 min

    12px of padding by default, 32px from 700px up.

  5. 5

    Build a mobile-first block

    medium10 min

    Single column with 12px padding, becoming three columns with 32px from 700px.

Find the bug(5)

  1. 1

    Fix the desktop-first stylesheet

    easy8 min

    The three-column layout is the base, so phones get it too.

  2. 2

    Fix the enhancement reaching phones

    easy8 min

    An enhancement is guarded with min-width, not max-width.

  3. 3

    Fix the missing base rule

    easy8 min

    With the layout only inside the query, phones get no layout at all.

  4. 4

    Fix the oversized base spacing

    easy8 min

    The generous desktop padding should be the enhancement, not the default.

  5. 5

    Fix the row that should stack

    easy8 min

    Phones should stack; the row belongs behind the breakpoint.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace