Overview
-
Floats are fading away fast. Learn how to make the jump from floats to Flexbox and Grid to more efficiently create page layouts with CSS.
Syllabus
-
Introduction
- Welcome
- What you should know
- Using the exercise files
- Layouts with HTML
- Layouts with CSS
- Browser support and CSS standards
- Inline and block elements
- The box model properties
- The display property
- The box model and layouts
- The float property
- Clearing floats
- Setting up your project
- Exercise: Build a layout with float
- Position: Relative and absolute
- Position: Fixed, sticky, and static
- Getting started with Flexbox
- Orientation with flex-direction and flex-wrap
- Flexible sizing
- Sizing multiple flex items
- The order property
- Nesting flex containers
- Exercise: Build a layout with Flexbox
- Exercise: Build a layout with Flexbox
- Grid vs. Flexbox
- Grid, grid systems, and CSS Grid
- Create a basic Grid layout
- Columns, rows, and gutters with Grid
- Positioning with Grid
- Exercise: Build a layout with Grid
- Firefox Grid Inspector
- Next steps and resources
