SUMMARY

[aubreywullschleger]

Grade: Meets expectations

Summary: Nice work on this project! I love your organized HTML, use of locally stored images, and your use of the <strong> element.

A couple things to work on here would be: 1. using descriptive alt attributes on your <img> elements and 2. using group selectors to make your CSS more concise.

Next, as a stretch goal, I challenge you to research and implement media queries to make your page totally responsive for all screen widths. This is a challenge I think you are ready for based on your work with this project! Here are a couple resources to get you started: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries and https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[MuyuanMa]

Media Queries for Standard Devices - Phones/handhelds, tablets, laptops, wearables and link for comprehensive repo

Using media queries

• to apply CSS style based on device type - print vs. screen, width, ambient light
• tool to build sites and apps robust enough to work on user hardware
  1. Target media types: "@media print {...}" or "@media screen, print {...}"
  2. Target media features "@media (hover: hover) { ... }" for mouse hover, "@media (max-width: 12450px) { ... }" for =< 12450px, "@media (color) { ... }" to any with color
  3. Has a references page link for more media feature examples
  4. Complex media queries with not, and, only, also see comma separated lists