Day 2

2.2 Lesson Plan: CSS Grids and Media Queries

Overview

Today is going to be all about the fundamentals of CSS Grids. We will talk about display: grid, grid-template-areas and how to build out grid columns and rows, giving students the ability to code two-dimensional layouts.

Learning Objectives

By the end of class today, you will be able to:

  1. Design and code basic grids using CSS Grid.
  2. Build layouts by positioning elements inside grids.
  3. Create a complex layout by nesting HTML elements inside of a grid.
  4. Write media queries in code to create a responsive grid layout.

Slides