Skip to main content

HTML Responsive Design — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Responsive 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

    Let images scale down

    easy10 min

    Add a class so the image can shrink with its container.

  2. 2

    Make an image responsive

    easy10 min

    Add srcset with two widths and a sizes hint.

  3. 3

    Swap art by width

    easy10 min

    Use picture with a media-conditioned source.

  4. 4

    Use a semantic wrapper

    easy10 min

    Wrap the page content in a main element.

  5. 5

    Build a responsive header

    medium10 min

    Combine a semantic header, nav and a fluid logo image.

Find the bug(5)

  1. 1

    Fix the image that cannot shrink

    easy8 min

    A fixed pixel width stops the image scaling on small screens.

  2. 2

    Fix the fixed-width wrapper

    easy8 min

    A hard-coded container width defeats responsiveness.

  3. 3

    Fix the fixed image width

    easy8 min

    A hard-coded width attribute stops the image scaling down.

  4. 4

    Fix the nav built from spans

    easy8 min

    Navigation entries should be real links inside a nav.

  5. 5

    Fix the div wrapper

    easy8 min

    The main content should use the main element.

Ready to write the code?

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

Open the workspace