Review the core concepts of the CSS box model, including techniques such as styling text and images, floating content, using display properties, and positioning elements.
Overview
Syllabus
Introduction
- Making sense of the CSS Box Model
- Displaying information through the web
- The web is made of boxes
- Designing with boxes
- Understanding the basics of type
- Change the type, change the box
- Text flow in the box
- What is the CSS Box Model?
- Changing the contents within the box
- Understanding the display porperty
- Sidebar: Images are inline elements
- Position is everything
- Floating and clearing content
- Using the clearfix
- Pseudo elements: Making the browser hallucinate
- Modern layout modules
- Flex: Content-based layouts
- Flex in depth
- Grid: Layout-based layouts
- Grid in depth
- Shapes
- Going further with CSS and web standards
Taught by
Morten Rand-Hendriksen
