Wrap an image — practice exercise

What you'll be asked to do

1. 1.Wrap an imageexercise · easy · 10 min

   Put an img inside a picture element.

   Passes when: Put an img inside a picture element.

2. 2.Offer a wide versionexercise · easy · 10 min · practice plan

   Add a source used on wide screens.

   Passes when: Add a source used on wide screens.

3. 3.Offer a modern formatexercise · easy · 10 min · practice plan

   Add a source with a type so newer browsers use it.

   Passes when: Add a source with a type so newer browsers use it.

4. 4.Two sourcesexercise · easy · 10 min · practice plan

   Provide two sources before the fallback image.

   Passes when: Provide two sources before the fallback image.

5. 5.A complete responsive pictureexercise · medium · 10 min · practice plan

   Two sources and a described fallback image.

   Passes when: Two sources and a described fallback image.

6. 6.Fix the picture with no imagebug fix · easy · 8 min

   A picture must end with an img fallback.

   Passes when: A picture must end with an img fallback.

7. 7.Fix the media query in the wrong attributebug fix · easy · 8 min · practice plan

   Screen conditions go in media.

   Passes when: Screen conditions go in media.

8. 8.Fix the format hint missingbug fix · easy · 8 min · practice plan

   A format-based source needs its type.

   Passes when: A format-based source needs its type.

9. 9.Fix the missing second sourcebug fix · easy · 8 min · practice plan

   Only one screen size was catered for.

   Passes when: Only one screen size was catered for.

10. 10.Fix the fallback with no alt textbug fix · easy · 8 min · practice plan

    The img inside a picture still needs alt text.

    Passes when: The img inside a picture still needs alt text.

Between them these tasks cover Art direction, srcset and Responsive images.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.