Skip to main content

HTML Picture Element — exercises and bug fixes

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

    Add a picture element

    easy10 min

    Wrap an img in a picture element.

  2. 2

    Add a source

    easy10 min

    Add a source offering a WebP version.

  3. 3

    Swap art by viewport

    easy10 min

    Add a source that applies above 800px.

  4. 4

    Offer two resolutions

    easy10 min

    Use srcset with 1x and 2x candidates.

  5. 5

    Provide a full responsive image

    medium10 min

    Combine source, media and a fallback img.

Find the bug(5)

  1. 1

    Fix the picture with no img

    easy8 min

    A picture must contain a fallback img.

  2. 2

    Fix src used on source

    easy8 min

    A source uses srcset, not src.

  3. 3

    Fix the missing media query

    easy8 min

    Art direction needs a media condition.

  4. 4

    Fix the source outside the picture

    easy8 min

    A source only works inside a picture.

  5. 5

    Fix the missing alt on the fallback

    easy8 min

    The fallback image still needs alt text.

Ready to write the code?

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

Open the workspace