CSS Layout Basics

Getting Started with CSS Layout

This stage covers layout tips and techniques used by web designers. You'll learn about CSS resets, layout wrappers, creating a sticky footer, and more. 9 steps

• What to Expect 1:37
• CSS Reset with Normalize 5:24
• Creating a Layout Wrapper 3:27
• Why Vertical Margins Collapse 3:42
• Centering Page Content and Creating a Full-width Header 4:48
• Layout Wrapper Challenge 2 objectives
• Using a Mobile First Approach 6:32
• Creating a Sticky Footer 5:12
• Getting Started with CSS Layout Review 6 questions

Controlling Layout with CSS Display Modes

Learn to control elements in your layout using common CSS display modes like block, inline, and inline-block. Understanding the differences between these display settings will help take your CSS layouts to the next level. 7 steps

• Positioning Elements Side-By-Side with Inline Display 7:29
• Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding 5:12
• Removing Gaps Between Inline and Inline-Block Elements 2:57
• CSS Display Modes Challenge 3 objectives
• The Column Layout Challenge 1:04
• The Column Layout Challenge Solution 3:59
• CSS Display Modes 6 questions

Page Layout with the Float Property

Learn how to use the float property for positioning and layout. You'll also learn about the default browser quirks you'll face when using floats and how to prevent them. 8 steps

• How Floats Work 1:31
• Wrapping Text Around Images with Floats 5:03
• Creating a Horizontal Navigation with Floats 5:07
• Clearing and Containing Floats 6:40
• Float Property Review 5 questions
• The Float Challenge 1:22
• The Float Challenge Solution 4:41
• Footer Layout with Floats 4 objectives

CSS Layout Project

Now it's time to challenge your new layout skills and put them to use by completing a CSS layout project. 5 steps

• Introducing the Project 4:17
• Creating and Styling the Layout Containers 5:22
• Adding Media Queries for Large Screens 2:50
• Column Layout with Media Queries 4:33
• CSS Layout Review 5 questions

Positioning Page Content

Now that you know the basics of CSS layout, it's time to learn another important CSS layout technique. In this stage, you'll learn to position elements anywhere on the page with relative, absolute, and fixed positioning. 7 steps

• How Absolute Positioning Works 5:36
• Positioning Elements Relative to Other Elements 3:46
• Create an Image Caption with Absolute Positioning 5:38
• CSS Positioning Challenge 3 objectives
• Fixed Positioning 4:34
• How Z-index Works 5:41
• Positioning Page Content 7 questions