Schedule > 6. CSS Layouts

Readings

In this unit, we will explore three different techniques for creating responsive layouts: CSS Grid, Flex, and Media Queries. As you complete the in-class activities and tutorials that accompany this topic, please refer to these readings.

1. CSS Grid

• CSS Grid
• CSS Grid Garden
  Please try to complete at least the first 10 levels
• CSS Tricks: A Complete Guide to Grid
• Learn CSS Grid by Building 5 Layouts in 17 minutes

2. Flex

• Flexbox Froggy.
  Please try to complete at least the first 10 levels
• When to use Flex versus CSS Grid?
• CSS Tricks: A Complete Guide to Flexbox
• W3 Schools Flexbox Guide

3. Media Queries

• Media Queries

Slides

• Lecture 8: Creating Page Layouts w CSS Grid (Monday & Wednesday, 02/06 - 02/08)
• Lecture 9: Creating Page Layouts w CSS Flexbox (Monday, 02/13)

Videos

Videos will be published after class on Google Drive

Activities

• Lecture 8: Sample Files: Creating Page Layouts w CSS Grid (Monday, 02/06 - 02/08)
• Lecture 9: Sample Files: Creating Page Layouts w CSS Flexbox (Monday, 02/15)