Lectures > 7. CSS Layouts: Part 2

Today, we will be delving into another way to make layouts, using Flexbox. Sarah strongly suggests that you invest some time into doing the readings / exercises for both CSS Grid and Flexbox. 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 semester.

Today's Activities

For today, please do the following:

1. Download the Exercise Files

2. Complete the Assigned Readings

1. CSS Tricks: A Complete Guide to Flexbox.
2. Flexbox Froggy.
   Please try to complete at least the first 12 levels after class!
3. W3 Schools Flexbox Guide.

Optional Readings

1. When to use Flex versus CSS Grid?.
2. Media Queries (review).

3. Review the Slides

1. CSS Flexbox

4. Watch the Lecture Video(s)

5. Do the Flexbox Exercises

In class, you will try to build the following layouts using flexbox:

Task 1: Card

Style the card and center it horizontally and vertically.

Task 2: Cards for Desktop, Tablet, and Mobile

Use flexbox and media queries to adjust the layout for desktop, tablet, and mobile.

Task 3: Cards for Desktop, Tablet, and Mobile

[more practice] Use flexbox and media queries to adjust the layout for desktop, tablet, and mobile (a combo of tasks 1-2).

Task 4: Nav Bar

Use flexbox and other CSS properties to style the navigation bar.