Prep 8: Flexbox and Holy Grail

Textbook Reading

• Web
  • 1.3 The Client-Server Model
  • 2.5 Web Browsers
• HTML/CSS
  • 6.5 Working with Color
  • 7.2 Flexbox Layout
  • CSS Flexbox Layout Guide
• JS
  • 10.4 Using Browser APIs
  • 10.5 “Third-Party Libraries”

Flexbox Froggy

• Flexbox Froggy is a game for learning CSS Flexbox.
• Complete levels 1–13 (or more if you would like).
• When you are finished, open the menu in the top center and take a screenshot.
• Submit your screenshot to Gradescope showing you have completed the first 13 levels.

Holy Grail Layout

• Implement the “Holy Grail” of web layouts as guided by Dr. Johnson.
• Notice this approach uses Flexbox (not Grid or Bootstrap).
• Take a screenshot of the final result in your web browser.
• Submit your screenshot to Gradescope showing you have completed the tutorial.