Layout
Normal flow, then the tools that override it. Flexbox for lines of content, grid for rows and columns together, and positioning for the things that must step outside.
About 9 hours of study
Learning objectives
- Choose the right layout method
- Build navigation bars and page grids
- Place overlays and sticky elements
Lessons
- 1
Display and normal flow
How block and inline elements fill a page by default, how the display property changes that, the three ways of hiding things, and what floats are still good for.
- 2
Flexbox: laying things out in a line
Arrange items along a row or column, share out space, centre anything, and let items wrap, using the main and cross axes.
- 3
Grid: laying things out in two dimensions
Define rows and columns, place items across them, build whole page layouts with named areas, and create responsive card grids with no media queries.
- 4
Positioning and stacking
Take elements out of the normal flow to place badges, sticky headers and overlays, and understand why z-index sometimes seems to do nothing.
Module practice
- Turn a list into a menuEasy
- Hide each thing correctlyMedium
- Wrap text around a photoHard
- A row of buttonsEasy
- Centre anythingMedium
- A navigation bar and a wrapping card rowHard
- Three equal columnsEasy
- A featured item that spansMedium
- A whole page in named areasHard
- Pin a badge to a cornerEasy
- A header that stays visibleMedium
- A full-screen overlayHard