CSS Layout Techniques
Learn how to work with the common layout and positioning methods used in web design. Throughout the course we’ll build a layout using display methods, floats, positioning schemes, even Flexbox, the latest and most advanced CSS layout feature. We’ll cover the strengths and benefits of each method, along with common layout issues and how to solve them.
At the end of the course we’ll learn how to create a responsive grid system using many of the layout and positioning techniques covered.
Display Modes
Learn how the display property can be used to layout and align elements on the page. We’ll cover the block, inline and inline-block methods, along with a few tips on using the table and table-cell values to create vertically aligned content.
CSS Layout Techniques Overview – 1:14
Which CSS Reset Method Should I Use? – 8:27
Block vs. Inline Elements – 11:09
Inline-Block Formatting – 4:46
Table Display – 6:40
Column Layout with Inline-Block – 7:47
Float Layout
In this stage, we’ll layout the header, navigation, and columns using the float method. We’ll cover how floats work, the common layout “bugs” that occur when building with floats, and how to fix them.
Why Floats are Used in Web Design – 0:56
Creating a Horizontal Menu – 5:31
The Float Clearfix – 4:24
Floating Columns and Images – 7:30
Mobile First Layout – 7:11
Positioning Schemes
In this stage, we’ll learn how the absolute, relative, and fixed positioning schemes can be used to layout our content.
Relative Positioning – 4:24
Absolute Positioning – 7:00
Fixed Positioning – 3:33
Absolute Centering – 3:49
Flexbox Layout
In this stage, we’ll learn how to use the new CSS Flexbox feature in our layouts. We’ll also use Modernizr, a feature detection tool, to create fallbacks for browsers that do not support Flexbox.
Using Flexbox Today – 1:49
Build a Navigation with Flexbox – 6:03
Animating Flexbox – 5:01
Flexbox Columns – 4:04
Providing Fallbacks with Modernizr – 5:29
Grid Layout
In this stage, we’ll learn how grid layout works, and the components that make up a grid by building a fluid grid system.
Understanding Grids – 2:01
Creating Fluid Grid Columns – 5:01
Creating the Grid Container – 4:20
Testing our Grid – 8:17