Day 1

2.1 Lesson Plan: CSS Flexbox and the Flexible Box Model

Overview

Today’s focus is on positioning elements in HTML documents. Students will learn how to use and apply CSS Flexbox to create rows, columns, and automatically responsive child elements in HTML documents, creating one-dimensional layouts.

In 2.2, students learn about CSS Grids, giving them the ability to code two-dimensional layouts.

Learning Objectives

By the end of class today, students will:

  1. Create CSS Flexbox containers and set them to display as a row or a column.
  2. Position CSS Flexbox items inside containers to create clean and fluid layouts.
  3. Nest CSS Flexbox containers to control the elements contained inside them.
  4. Apply CSS Flexbox skills in a coding activity called Jake’s Eatery.

Slides