Challenge 1: Add a Below-the-Fold Image Fix — Possible Solution ==================================================================== Gallery photo WHICH TWO CHAPTERS' TECHNIQUES THIS COMBINES ------------------------------------------------- 1. Chapter 3 (CLS prevention): width="600" height="400" reserves the correct box for this image immediately, before it even starts downloading — preventing the exact "image pops in and shoves content down" problem that chapter identified as the single most common CLS cause. 2. Chapter 5 (lazy loading): loading="lazy" is CORRECTLY applied here specifically because this is described as a below-the-fold gallery image — exactly the case Chapter 5's own tip box says lazy loading is meant for, unlike the hero image in Step 2 of this capstone, which is above the fold and was correctly PRELOADED instead, never lazy-loaded. WHY THIS WORKS -------------- - Both fixes apply to the SAME element simultaneously without conflicting: reserving space (width/height) and deferring the actual fetch (loading="lazy") are independent, complementary techniques — one controls WHEN the image loads, the other controls how much space is reserved for it regardless of when it loads. - This is a direct contrast to the hero image handled in this capstone's Step 2: the hero image needed width/height PLUS a preload (to load it as early as possible, since it's above the fold and likely the LCP candidate), while this gallery image needs width/height PLUS lazy loading (to load it as LATE as reasonably possible, since it's below the fold and not needed until the user scrolls to it). Both images get the SAME CLS-prevention treatment; they get OPPOSITE loading-priority treatment, based entirely on their position relative to the fold — exactly the distinction Chapters 2 and 5 both established.