Table of Contents

The table of contents for all three courses is listed below. You can get started with CSS Basics for free today. Buy access to study the layout courses - CSS Layout Fundamentals and CSS Layout Advanced - here.

Buying the complete package gives you access to over 200 minutes of video, all the CodePen starting points to follow along, plus lesson text and our Slack Community.

CSS Basics

• CSS Selectors
  • Basic Selectors
  • Combinators
  • Attribute Selectors
  • Pseudo-class Selectors
  • Pseudo-element Selectors
  • Selectors Usage Tips
• Length Units
  • Absolute Units
  • Relative Units
  • Viewport Percentage Units

CSS Layout Fundamentals

• Introduction
  • Get Started
• The Box Model
  • The Standard CSS Box Model
  • The Alternate Box Model
  • Padding
  • Borders
  • Margins
• Positioning
  • Position
  • Relative Positioning
  • Absolute Positioning
  • Fixed Positioning
  • Sticky Positioning
• Stacking Content
  • Stacking Content
  • Controlling the Stack
• Floats
  • Float Basics
  • Using Floats in Layout
  • Adding a Footer to a Floated Layout
  • Float Clearing Methods
  • Building a Simple Floated Navigation Bar
• The Display Property
  • Introduction to the Display Property
  • Creating a larger “Hit Area” on a Link
  • Display inline-block
  • Table Values for Display
• Getting Started with Flexbox
  • Introducing Flexbox
  • The `align-items` property
  • The `justify-content` property
  • Controlling wrapping with `flex-wrap`
  • Ordering Flex Items with the `order` Property
• Getting Started with Grid Layout
  • Defining a Grid
  • Using the Firefox Grid Inspector
  • The fr unit
  • minmax()
  • Auto Placement
  • Line-based Placement
  • Named Lines
  • Grid Template Areas
  • The difference between Grid and previous layout options
• Responsive Design
  • Getting Started with Responsive Design
  • Media Queries
  • Responsive Images
  • Flexible Grids
  • Using calc()
  • Which Method Should You Use for Your Responsive Layout?
• Browser Support
  • Browser Support
  • Accessibility
  • Vendor Prefixes
  • Using New CSS as an Enhancement
  • Testing cross-browser
• Debugging CSS Layout Issues
  • Debugging CSS Layout Issues
  • Creating Reduced Test Cases
  • Using Browser Tools
  • Searching and Asking For Help

Advanced CSS Layout

• Multiple Column Layout
  • Introduction to Multiple-column Layout
  • Column Gutters and Rules
  • Images and Spanning across columns
  • A Card Layout using Multiple-Column Layout
• Advanced Flexbox
  • The Flex Properties
  • Flex Items and Auto Margins
  • A Flexbox Pricing Example
• CSS Shapes
  • Introducing CSS Shapes
  • CSS Shapes: the inset() function
  • CSS Shapes: The circle() Function
  • CSS Shapes: The ellipse() Function
  • CSS Shapes: The polygon() function
  • CSS Shapes: Shapes from the Alpha Channel
  • CSS Shapes: Shapes from the Reference Box
• CSS Grid Layout
  • CSS Grid Layout
  • CSS Grid: the fr unit
  • CSS Grid: line-based, responsive layout
  • CSS Grid Layout: Named Grid Lines
  • CSS Grid Layout: Named Grid Areas
  • CSS Grid Layout: a flexible 12 column grid system
  • CSS Grid Layout: a layout using our 12 column system
  • CSS Grid Layout: grid auto-placement
  • CSS Grid Layout: UI example for auto-placement
  • CSS Grid Layout: Repeat Notation
  • CSS Grid Layout: auto-fill and auto-fit
  • What size is 1fr really?
  • Content Sizing Keywords
• Box Alignment
  • Box Alignment: the align-items property
  • Box Alignment: the justify-items property
  • Box Alignment: the align-self property
  • Box Alignment: the justify-self property
• Other interesting new things
  • Using display: contents
  • CSS Exclusions: a demonstration of exclusions
  • CSS Regions: a demonstration of Regions and Grid
• Keeping up to date
  • Keeping your skills up to date