Schedule > 7. 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
Slides
- Lecture 10: Creating Page Layouts w CSS Flexbox (Wednesday, 02/21)
- Lecture 11: Creating Page Layouts w CSS Grid (Monday, 02/26)
Videos
Videos will be published after class on Google Drive
Activities
- Lecture 10: Sample Files: Creating Page Layouts w CSS Flexbox (Wednesday, 02/21)
- Lecture 11: Sample Files: Creating Page Layouts w CSS Grid (Monday, 02/26)