Let images scale down — practice exercise

What you'll be asked to do

1. 1.Let images scale downexercise · easy · 10 min

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

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

2. 2.Make an image responsiveexercise · easy · 10 min · practice plan

   Add srcset with two widths and a sizes hint.

   Passes when: Add srcset with two widths and a sizes hint.

3. 3.Swap art by widthexercise · easy · 10 min · practice plan

   Use picture with a media-conditioned source.

   Passes when: Use picture with a media-conditioned source.

4. 4.Use a semantic wrapperexercise · easy · 10 min · practice plan

   Wrap the page content in a main element.

   Passes when: Wrap the page content in a main element.

5. 5.Build a responsive headerexercise · medium · 10 min · practice plan

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

   Passes when: Combine a semantic header, nav and a fluid logo image.

6. 6.Fix the image that cannot shrinkbug fix · easy · 8 min

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

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

7. 7.Fix the fixed-width wrapperbug fix · easy · 8 min · practice plan

   A hard-coded container width defeats responsiveness.

   Passes when: A hard-coded container width defeats responsiveness.

8. 8.Fix the fixed image widthbug fix · easy · 8 min · practice plan

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

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

9. 9.Fix the nav built from spansbug fix · easy · 8 min · practice plan

   Navigation entries should be real links inside a nav.

   Passes when: Navigation entries should be real links inside a nav.

10. 10.Fix the div wrapperbug fix · easy · 8 min · practice plan

    The main content should use the main element.

    Passes when: The main content should use the main element.

Between them these tasks cover viewport meta, Responsive images and Fluid markup.

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