Mar 04: Grid and Bootstrap

Learning Objectives

After today's class, you should be able to:

• Describe concepts of CSS grid layout: rows/columns, gaps, lines, etc.
• Compare and contrast CSS properties for Grid (2D) and Flexbox (1D).
• Use Bootstrap classes to create a responsive, mobile-first grid layout.

Lesson Outline

Debrief [10 min]

• Exam 1 solution – see Canvas Files

Part A [25 min]

• 18_Grid-Bootstrap.pdf – courtesy Dr. Kirkpatrick
  • Live Editor – CSS 5 Grid Layout
  • W3Schools tutorial: CSS Grid Layout Module

Part B [25 min]

• Bootstrap Quick Start
  • Other tutorials: W3Schools / Tutorial Republic

Planning [15 min]

• Project 1: Design Sketch – due March 10th
  • New example sketch and narrative
  • Also have a lab due this week