Responsive images and SVG assignment

8.2. Responsive images and SVG assignment#

Exercise 8.2

Learn how to do the following:

Use the <picture> element to create a responsive image with art direction.
Use an <img> with srcset and size attributes to serve different image sizes for different screen widths.
Use Dev Tools find images that are loading too slowly, and then learn to optimize them.
Load an SVG image with <img>.
Use inline SVGs and create a <symbol> to easily reuse your inline SVG.

Before beginning this assignment, read

Be aware of (meaning you don’t have to read and understand it all, but it’s good to know in case you need to reference it later)

CSS Tricks A Guide to the responsive images syntax in HTML – it has helpful info for beginners, but also some more advanced information.

Review:

How to code SVG icons by hand - pro tip: set the viewbox to 120,120 so you can use whole numbers instead of decimals like in the tutorial

Tip

Find helpful links and demos on Responsive Images and SVG

Rubric

Requirement	Points
Repo passes all automated tests, including validating and proofing. A description of the pretests is in the assignment README file. Validator and proofer (2pts each) and 25 pretests (2pts each)	54
HTML Only No CSS or HTML style tags are used. If you use even one `<br>` tag you will receive a 0 on the assignment. This requirement is to help you appreciate CSS :D	6
Hero `<picture>` functional `<picture>` element correctly loads each image at the set breakpoints. Images are sized and cropped according to assignment specifications given in assignment README.	10
`<img>` with srcset and sizes functional `<img>` element correctly loads each image at the set breakpoints. Images are identical, except for sizes, which are explained in the assignment specifications given in assignment README.	10
GitHub About info Include a description and link to your web page in the About section of your repo.	5