Prep 7: Grid, Responsive, and Arrays

Complete the following reading assignments and complete the two activities.

Reading

Textbook

• HTML/CSS FunWebDev
  • 7.3 Grid Layout
  • 7.4 Responsive Design
• JS FunWebDev
  • 10.1 Array Functions
• Git FunWebDev
  • 5.7.X Tools Insight: Version Control (pp. 228-234)
• Responsive Design++ MDN & Friends
  1. Implementing Responsive images in HTML
     1. esp. resolution switching via srcset (more at srcset) and art direction with <picture>
  2. Flow-relative presentation with CSS Logical Properties and Values
     1. Understanding Logical Properties and Values
     2. MDN’s CSS Logical Properties and Values
  3. MOAR Media Queries
     1. media-type (e.g. print from MDN)
     2. preferences media-features (e.g. color-scheme for light/dark mode, contrast, and reduced-motion)

Grid Garden

1. First, open up the css-tricks Grid Layout Guide for reference.

   • This is going to be your best friend whenever you need to use grid!

2. Then, complete levels 1–17 of Grid Garden 🥕

   • You may complete the remaining levels if you want, but only levels 1–17 are required for this prep.

3. Once completed, expand the level selector and take a screenshot, showing that you’ve completed levels 1–17.

4. Submission: Upload your screenshot to the corresponding Gradescope assignment.

Order Up!

1. First, open up the MDN: Array (methods and examples) for reference.

   • You’ll want to look specifically at filter(), map(), and reduce().

2. Then, complete all 20 levels of Order Up! 👩‍🍳

   • This is a fun¹ game made in-house by Dr. Wang² to help you learn and practice these fundamental higher-order array methods.

3. Once completed, in the menu, click on “Export Progress”.

   • This will download an order-up-progress.json file.

4. Submission: Upload your order-up-progress.json file to the corresponding Gradescope assignment.

---

1. Disclaimer: may not actually be fun 🤷 - hopefully you find it fun, but to each their own ↩

2. Find any bugs? Send a screenshot and description of the issue to wangid@jmu.edu ↩