CSS Layout Basics

Learn to work with common layout and positioning methods used in web design. In this course, you'll get hands-on practice with basic CSS layout techniques like display modes and floats.

You'll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.

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.

  • What to Expect1:37
  • CSS Reset with Normalize5:24
  • Creating a Layout Wrapper3:27
  • Why Vertical Margins Collapse3:42
  • Centering Page Content and Creating a Full-width Header4:48
  • Layout Wrapper Challenge2 objectives
  • Using a Mobile First Approach6:32
  • Creating a Sticky Footer5:12
  • Getting Started with CSS Layout Review6 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.

  • Positioning Elements Side-By-Side with Inline Display7:29
  • Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding5:12
  • Removing Gaps Between Inline and Inline-Block Elements2:57
  • CSS Display Modes Challenge3 objectives
  • The Column Layout Challenge1:04
  • The Column Layout Challenge Solution3:59
  • CSS Display Modes6 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.

  • How Floats Work1:31
  • Wrapping Text Around Images with Floats5:03
  • Creating a Horizontal Navigation with Floats5:07
  • Clearing and Containing Floats6:40
  • Float Property Review5 questions
  • The Float Challenge1:22
  • The Float Challenge Solution4:41
  • Footer Layout with Floats4 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.

  • Introducing the Project4:17
  • Creating and Styling the Layout Containers5:22
  • Adding Media Queries for Large Screens2:50
  • Column Layout with Media Queries4:33
  • CSS Layout Review5 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.

  • How Absolute Positioning Works5:36
  • Positioning Elements Relative to Other Elements3:46
  • Create an Image Caption with Absolute Positioning5:38
  • CSS Positioning Challenge3 objectives
  • Fixed Positioning4:34
  • How Z-index Works5:41
  • Positioning Page Content7 questions

results matching ""

    No results matching ""