Skip to content

CS 343, Spring 2025

Prep 5: Flexbox Froggy

CS 343, Spring 2025

Home
Syllabus
Calendar
Help
Notes
Notes
- Week 1: File Publishing
  Week 1: File Publishing
- Week 2: HTML Structure
  Week 2: HTML Structure
- Week 3: Semantic HTML
  Week 3: Semantic HTML
- Week 4: CSS Presentation
  Week 4: CSS Presentation
- Week 5: CSS Layout
  Week 5: CSS Layout
  - Feb 18: Variables; Cascade
  - Prep 5: Flexbox Froggy Prep 5: Flexbox Froggy
    Table of contents
    
    Read
    
    Play
  - Feb 20: Layout and Flexbox
  - Lab 5: Flexbox Layout
- Week 6: Design Sketch
  Week 6: Design Sketch
- Week 7: Responsive
  Week 7: Responsive
  - Mar 04: Scope and Closure
  - Mar 06: Functional Programming
- Week 8: Frameworks
  Week 8: Frameworks
  - Mar 11: Asynchronous Execution
  - Mar 13: Fetch API and await
- Week 9: Form Validation
  Week 9: Form Validation
  - Mar 25: Cookies and Storage
  - Mar 27: Import/Export Files
- Week 10: Static Site
  Week 10: Static Site
  - Apr 01: TBD project related
  - Apr 03: Exam #2
- Week 11: Fetch and APIs
  Week 11: Fetch and APIs
  - Apr 08: Asynchronous Calls
  - Apr 10: JavaScript Promises
- Week 12: Persistence
  Week 12: Persistence
  - Apr 15: Data Visualization
  - Apr 17: Regular Expressions
- Week 13: Content Security
  Week 13: Content Security
  - Apr 22: Security Basics
  - Apr 24: CSP and CORS
- Week 14: Special Topics
  Week 14: Special Topics
  - Apr 29: TBD project related
  - May 01: Exam #3
- Week 15: Course Wrap-up
  Week 15: Course Wrap-up
  - May 06: Logistics; Wrap-Up
  - May 08: Final Project Demos

Prep 5: Flexbox Froggy

Due: Wednesday, Feb 19th

Read¶

4.5 The Cascade
4.8.2 CSS Variables
7.1 Older Approaches to Layout
7.2 Flexbox Layout
9.2 Modifying the DOM

Play¶

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.