Lessons > 7. Creating Page Layouts w/CSS: Flex
Slides
Lecture Video(s)
- Recorded Lecture Video (50:59)
Readings
- When to use Flex versus CSS Grid?.
-
Flexbox Froggy.
Please try to complete at least the first 12 levels before class! - The Box Model (Review). CS 130 Course Website
- Flexbox. CS 130 Course Website
- Media Queries. CS 130 Course Website
Today, we will be delving into CSS layouts, which is arguably among the most difficult parts of this course. Sarah and the course staff strongly suggest that you invest some time into doing the readings / exercises this week. Putting in an investment early on will make you a much better designer / web programmer, and give you more power to instantiate your designs later in the quarter.
Box Model & Flexbox Exercises
In class, you will try to build the following layouts using flexbox:
Task 1: Card
Task 2: Cards for Desktop, Tablet, and Mobile
Task 3: Cards for Desktop, Tablet, and Mobile
Task 4: Nav Bar
