Prep 8: Grid, Git, and Responsive Design

Complete the following reading assignments and complete the two activities.

Reading

Textbook

• HTML/CSS FunWebDev
  • 6.5 Working with Color
  • 7.3 Grid Layout
  • 7.4 Responsive Design
• Git FunWebDev
  • 5.7.X Tools Insight: Version Control (pp. 228-234)
• Responsive Design++ MDN & Friends
  1. Implementing Responsive images in HTML
  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. Media Queries
     1. Media query fundamentals
     2. More media types

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 🥕

   • This is a modified version of the original that can export your progress.
   • You may complete the remaining levels if you want, but only levels 1–17 are required for this prep.

3. Once completed, open the menu and click “Export Progress”.

   • This will download a grid-garden-progress.json file.

Learn Git Branching 🌳

1. Read the version control section of the textbook first (5.7.X, pp. 228–234).

2. Then, complete the Introduction Sequence (levels 1–4) of Learn Git Branching: commits, branching, merging, and rebasing.

   • Click the “Levels” button, then choose “Introduction Sequence.”
   • Use the in-app “Show Solution” only as a last resort.

3. Once completed, open the level selector and take a screenshot showing that you’ve completed all four levels of the Introduction Sequence.

Submission

Upload your grid-garden-progress.json file and your Learn Git Branching screenshot to the corresponding Gradescope assignment.