CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

Learn CSS from selectors and the box model to Flexbox, Grid, animations and modern features. For beginners styling real web pages.

Start course →

What you'll learn

  • Write selectors and understand the cascade and specificity.
  • Apply the box model, positioning, Flexbox and Grid to build layouts.
  • Style colours, typography, backgrounds and shadows.
  • Make pages responsive with media queries, fluid images and container queries.
  • Add transitions and animations, use custom properties and organize CSS with BEM and layers.

Syllabus

Module 1: Getting Started

  1. What is CSS?
  2. CSS Syntax

Module 2: Selectors

  1. Basic Selectors
  2. Combinators
  3. Pseudo-classes & Pseudo-elements

Module 3: The Box Model

  1. The Box Model
  2. Display & Box Sizing

Module 4: Positioning & Layout

  1. The position Property
  2. Float & Z-Index

Module 5: Flexbox

  1. Flex Container
  2. Flex Items
  3. Common Flex Patterns

Module 6: Grid

  1. Grid Basics
  2. Common Grid Patterns

Module 7: Visual Styling

  1. Colors & Units
  2. Typography
  3. Backgrounds, Borders & Shadows

Module 8: Responsive Design

  1. Media Queries & Mobile-First
  2. Responsive Images

Module 9: Motion

  1. Transitions & Transform
  2. Keyframe Animations

Module 10: The Cascade

  1. Specificity
  2. Inheritance & the Cascade
  3. CSS Custom Properties (Variables)
  4. Cascade Layers & Container Queries

Module 11: Architecture & Tooling

  1. BEM Naming Convention
  2. Sass/SCSS at a Glance
  3. Modern Selectors & Native Nesting

Module 12: Common Patterns

  1. Centering Techniques
  2. Sticky Footer & Card Layouts