CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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