A. Presentation on responsive images: <picture>, srcset, sizes, responsive background images.

B. Jen will demonstrate ResponsiveBreakpoints.com, which generates a suite of images and srcset/sizes code to use on your page.

She will also demonstrate the banner demo inside the site.

REMEMBER: <picture> means YOU decide which image displays when. srcset/sizes means the BROWSER decides - and it doesn't always decide what you think it should!

C. To our page, add a "featured print" and a "hero banner" section of the web page using the starting graphic and the screenshots provided.

Starting graphics include hero.png and too-cool.jpg. You will need to create additional versions of these images and write the code to include them in the site.

SUGGESTED: Use <picture> for the hero banner and srcset/sizes for the featured print.