Learn how to design responsive layouts with HTML and CSS, including the latest standards: Flexbox and Grid.
Overview
Syllabus
Introduction
- Go cross-platform with responsive design
- What you should know
- Viewport
- Required CSS
- Display property
- Positioning
- Floats
- Units
- Responsive design
- Media queries
- Flexbox and Grid
- Accessibility
- Browser support
- Intro to CSS Grid
- Defining rows and columns
- Grid gap
- Sizing rows and columns
- Placing grid items
- Grid alignment overview
- Aligning tracks
- Aligning grid items within tracks
- Aligning individual grid items
- Variable columns
- Grid template areas
- Naming grid lines
- Ordering grid items
- Grid flow and implicit tracks
- Challenge: The rainbow box
- Solution: The rainbow box
- Defining a flexbox container
- Direction
- Wrapping
- Ordering flex items
- Flexbox alignment overview
- Aligning items on main axis
- Aligning items on cross axis
- Aligning lines on cross axis
- Aligning individual flex items
- Distributing space to flex items
- Challenge: Floats to flexbox
- Solution: Floats to flexbox
- Centering content
- 3-column layout with grid areas, part 1
- 3-column layout with grid areas, part 2
- 3-column layout with flexbox
- 12-column layout setup
- 12-column layout for medium viewports
- 12-column layout for wide viewports
- Next steps
Taught by
Clarissa Peterson
