Prep 6: 7.3-7.4

Read

1. FunWebDev Chapter 7.3, 7.4 (CSS Grid and Responsive Design).

Activities

We have some fun exercises this week that will let you practice your CSS layout skills with flexbox and CSS Grid.

1. Implement the “Holy Grail” of web layouts as guided by Dr. Johnson and submit a screenshot of the final result running in your web browser.
2. Implement the MDN’s “Holy Grail” 🚨 NOTE: the linked MDN page has several interesting examples on it, but we’re linking here specifically only to one section of that page, the one with the heading, “A responsive layout with 1 to 3 fluid columns using grid-template-areas”
   1. take a screenshot with a viewport width < 500px
      • this should show your browser’s URL bar and all, but should look like the left-most third of this image
   2. take a screenshot with a viewport width >= 500px and < 700px
      • this should show your browser’s URL bar and all, but should look like the center third of this image
   3. take a screenshot with a viewport width >= 700px
      • this should show your browser’s URL bar and all, but should look like the right-most third of this image

If you didn’t earlier in the semester, you may find it helpful to now enable rulers in the firefox dev tools.