Learn CSS Grid with Wes Bos! In this course, you will learn about starter files and tooling setup, fundamentals of CSS Grid, dev tools, implicit vs explicit tracks, grid-auto flow, sizing tracks, the repeat() function, sizing grid items, placing grid items, spanning and placing Cardio, auto-fit and auto-fill, using minmax() for responsive grids, grid template areas, naming lines, grid-auto-flow dense block fitting, alignment and centering, reordering grid items, nesting grid with album layout exercise, image gallery exercise, Flexbox vs CSS Grid, re-creating CodePen exercise, Bootstrappy grid with CSS variables exercise, responsive website exercise, full bleed blog layout exercise, and much more.
Overview
Syllabus
CSS Grid Course! Welcome — 1 of 25.
CSS GRID: Starter Files and Tooling Setup — 2 of 25.
CSS GRID: Fundamentals — 3 of 25.
CSS GRID: Dev Tools — 4 of 25.
CSS GRID: Implicit vs Explicit Tracks — 5 of 25.
CSS GRID: grid-auto-flow Explained — 6 of 25.
CSS GRID: Sizing tracks in CSS Grid — 7 of 25.
CSS GRID: The repeat() function — 8 of 25.
CSS GRID: Sizing Grid Items — 9 of 25.
CSS GRID: Placing Grid Items — 10 of 25.
CSS GRID: Spanning and Placing Cardio — 11 of 25.
CSS GRID: auto-fit and auto-fill — 12 of 25.
CSS GRID: Using minmax() for Responsive Grids — 13 of 25.
CSS GRID: Grid Template Areas — 14 of 25.
CSS GRID: Naming Lines in CSS Grid — 15 of 25.
CSS GRID: grid-auto-flow dense Block Fitting — 16 of 25.
CSS GRID: Alignment + Centering — 17 of 25.
CSS GRID: Re-ordering Grid Items — 18 of 25.
CSS GRID: Nesting Grid with Album Layout Exercise — 19 of 25.
CSS GRID: Image Gallery Exercise — 20 of 25.
Flexbox vs CSS Grid — 21 of 25.
CSS GRID: Re-creating Codepen Exercise — 22 of 25.
CSS GRID: Bootstrappy Grid with CSS Variables Exercise — 23 of 25.
CSS GRID: Responisve Website Exercise — 24 of 25.
CSS GRID: Full Bleed Blog Layout Exercise — 25 of 25.
CSS Grid in 45 Minutes!.
Taught by
Wes Bos
