Video Lessons

Step-by-step instructional videos on CSS Grid

- Download and extract the images.zip file used in these lessons. The file will expand into an "images" folder. Place the folder into the same folder as the HTML files you create.

Lesson 1 - CSS Grid Basics

This video covers the basics of CSS grid, including grid's properties, a new unit called the "fractional unit" (fr), grid lines, grid areas, nested grids, justification and alignment, overlapping, and making white space.
Duration: 1 hour, 10 minutes, 24 seconds
Watch: MP4 | YouTube

Lesson 2 - Auto-Fit and Auto-Fill: Responsive Sites without Media Queries

This video lesson contains an overview of CSS Grid's auto-fit and auto-fill keywords and how they are used to make a responsive page without media queries.
Duration: 50 minutes, 34 seconds
Watch: MP4 | YouTube

Lesson 3 - Making a Page with "Panes"

This video shows step-by-step how to use CSS Grid to make a page with multiple panes or panels where some of the panes use fixed background images in a parallax scrolling effect.
Duration: 1 hour, 13 minutes, 04 seconds
Watch: MP4 | YouTube

Lesson 4 - Images and Video at 100 Viewport Height and Width

Step-by-step tutorial on using CSS Grid to make pages take up 100% of the viewport. The video shows how to use both an image and a video to fill the viewport.
Duration: 41 minutes, 46 seconds
Watch: MP4 | YouTube