Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

CSS Layouts: From Float to Flexbox and Grid

Video Introducing this tutorial


Introduction
Welcome
What you should know
Using the exercise files

1. An Overview of Page Layouts
Layouts with HTML
Layouts with CSS
Browser support and CSS standards

2. Float, Display, and Position
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

3. Flexbox
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

4. Grid
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

Conclusion
Next steps and resources