English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 46m | 247 MB
For decades, CSS developers fiddled with floats to create flexible layouts that worked across browsers. But their brilliant hack had a lot of downsides. The latest generation of CSS specs offers a better and vastly more intuitive set of tools, but moving from floats to Grid, Flexbox, or both means adjusting how you think. In this course, Christina Truong guides you though this process, from initial concepts to complete conversion, highlighting the different ways to create page layouts with modern CSS. Explore how to work with the display and float properties; use relative, absolute, and fixed positioning for laying out components; create basic Grid and Flexbox layouts; and more.
Topics include:
- Layouts with HTML and CSS
- Using the display and float properties
- Using relative and absolute positioning
- Building page layouts with Flexbox
- How Grid differs from Flexbox
- Creating a basic Grid layout
- Positioning with Grid
Table of Contents
1 Welcome
2 What you should know
3 Using the exercise files
4 Layouts with HTML
5 Layouts with CSS
6 Browser support and CSS standards
7 Inline and block elements
8 The box model properties
9 The display property
10 The box model and layouts
11 The float property
12 Clearing floats
13 Setting up your project
14 Exercise Build a layout with float
15 Position Relative and absolute
16 Position Fixed, sticky, and static
17 Getting started with Flexbox
18 Orientation with flex-direction and flex-wrap
19 Flexible sizing
20 Sizing multiple flex items
21 The order property
22 Nesting flex containers
23 Exercise Build a layout with Flexbox
24 Exercise Build a layout with Flexbox
25 Grid vs. Flexbox
26 Grid, grid systems, and CSS Grid
27 Create a basic Grid layout
28 Columns, rows, and gutters with Grid
29 Positioning with Grid
30 Exercise Build a layout with Grid
31 Firefox Grid Inspector
32 Next steps and resources
Resolve the captcha to access the links!