Skip to main content

HTML Images — exercises and bug fixes

6 hands-on exercises and 5 find-the-bug challenges for the HTML Images 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(6)

  1. 1

    Create an accessible image figure

    easy15 min

    Improve the image by adding the exact alternative text “HTML and CSS workspace”. Then place it inside a figure and add a figcaption.

    • Place the image inside a figure
    • Add the requested alternative text
    • Add a figcaption inside the figure
  2. 2

    Add an image

    easy10 min

    Add an img pointing at /logo.png.

  3. 3

    Describe the image

    easy10 min

    Give the image meaningful alt text.

  4. 4

    Mark a decorative image

    easy10 min

    Use an empty alt for a purely decorative image.

  5. 5

    Reserve the space

    easy10 min

    Add width and height so the layout does not shift.

  6. 6

    Lazy-load an image

    medium10 min

    Defer loading of a below-the-fold image.

Find the bug(5)

  1. 1

    Fix the missing alt

    easy8 min

    Screen readers announce the filename without alt text.

  2. 2

    Fix the wrong source attribute

    easy8 min

    Images use src, not href.

  3. 3

    Fix the redundant alt text

    easy8 min

    Alt text should not start with "image of".

  4. 4

    Fix the div with a background image

    easy8 min

    Content images belong in an img element.

  5. 5

    Fix the eager offscreen image

    easy8 min

    A below-the-fold image should lazy-load.

Ready to write the code?

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

Open the workspace