Lectures > 6. CSS Layouts: Part 1

Today we will be reviewing CSS Grid in order to instantiate some common layouts. Please complete the readings before coming to class. We will be reviewing the “Learn CSS Grid by Building 5 Layouts in 17 minutes” video / exercises in class:

Today's Activities

For today, please do the following:

1. Download the Exercise Files

2. Complete the Assigned Readings

1. CSS Grid.
2. Media Queries.
3. Learn CSS Grid by Building 5 Layouts in 17 minutes.

Optional Readings

1. CSS Tricks: A Complete Guide to Grid.
2. CSS Grid Garden.

3. Review the Slides

1. Creating Page Layouts with CSS Grid

4. Watch the Lecture Video(s)

5. Do the CSS Grid Exercises

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

Task 1: Pancake Stack

Task 2: Simple 12-Column Grid Layout

Task 3: Responsive Layout Using Grid Template Areas

Attribution Information: This activity was taken from Free Code Camp’s Resources: https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/