CSS: Advanced Layouts with Grid (2017)

Course details

CSS layouts are becoming less of a puzzle. After decades of hacking CSS to make multicolumn layouts, the CSS Grid Layout module makes page layout predictable. In this course, take a step back from traditional layout models, and learn how to take full advantage of the new capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive. Join Morten Rand-Hendriksen as he walks through how to create full-bleed layouts, multicolumn layouts, and advanced card-based layouts. He demonstrates how to create dynamic responsive grids that adjust to their available viewport space.

Learning objectives
Defining a grid
Grid lines and units
Automatic and manual grid item placement
Planning for grid layouts
Starting your layouts with pen and paper
Multicolumn layouts
Full-bleed single column layouts
Making the grid responsive
Various card layouts
Accessible off-screen navigation layouts

Concepts

0. Introduction

01 - Welcome
02 - Using the exercise files
03 - Prerequisites

1. CSS Grid - Core Principles

04 - Terminology
05 - Define a grid
06 - Grid lines and units
07 - Automatic grid item placement
08 - Manual grid item placement
09 - Named lines
10 - Grid areas
11 - Grid gap

2. Planning for Grid Layouts

12 - CSS Grid means rethinking web layouts
13 - Start your layouts with pen and paper
14 - A new approach to backward compatibility
15 - Accessibility first

3. Multi-Column Layout

16 - The challenge
17 - Overview of the starting point
18 - Check for grid support
19 - Create the main grid
20 - Position items on the grid
21 - Add a third column for wider viewports
22 - Breaking the grid
23 - Justify the grid inside the grid container
24 - Use white space to perform magic

4. Full-Bleed Single Column Layout

25 - The challenge
26 - Overview of the starting point
27 - Check for grid support
28 - Create the shared grid
29 - Create columns and position grid items
30 - Make the grid responsive

5. Various Card Layouts

31 - The challenge
32 - Overview of text-based card markup
33 - Create a grid for each card
34 - Position items on the grid
35 - Place the cards on a grid
36 - Overview of image-based card markup
37 - Using the grid to stack grid items
38 - Change the appearance of cards with flex
39 - Create different-sized grid items
40 - Create a complex magazine-style grid

6. Accessible Off-Screen Navigation Layouts

41 - Different off-screen navigation options
42 - Off-screen to cover navigation overview
43 - Set up the main grid
44 - Position the navigation area on the grid
45 - Hide the navigation area off canvas
46 - Create a reveal effect using JavaScript
47 - Improve accessibility of off-screen navigation
48 - Overview of sliding navigation panel
49 - Create an overflowing grid
50 - Slide content in and out of the canvas
51 - Bonus - Animate the sliding effect

7. Bonus Chapter - Ask the Instructor

52 - What are responsive images
53 - Now that we have CSS Grid, do I still need to learn Flexbox
54 - What are CSS custom properties (variables)
55 - How does the calc() function work
56 - How does HSL work

Thank You

57 - Conclusion