Challenge 1: Fix an Image Causing Layout Shift — Possible Solution
====================================================================

<img src="banner.jpg" width="1200" height="400" alt="...">

WHY THIS WORKS
--------------
- Adding the width and height attributes directly to the <img> tag,
  matching the image's actual natural dimensions (1200×400), lets the
  browser calculate and reserve the correct aspect ratio for this
  image's box in the layout BEFORE the image file has even started
  downloading — purely from parsing the HTML attributes themselves.
- This directly targets the chapter's most common cause: without these
  attributes, the browser has no idea how tall this image's box should
  be, so it collapses that space to zero until the image loads and its
  real dimensions become known — at which point everything below it
  visibly jumps down. With width/height set, the space is already
  correctly reserved from the very first render, so nothing needs to
  move once the image actually arrives.
- An equally valid alternative (mentioned in the chapter for RESPONSIVE
  images specifically) would be:

    <img src="banner.jpg" alt="..." style="width: 100%; aspect-ratio: 1200 / 400;">

  This achieves the same reserved-space guarantee while allowing the
  image to scale fluidly with its container — useful when the image
  needs to be responsive rather than a fixed pixel size, while still
  giving the browser the correct PROPORTIONS to reserve space for
  immediately.