Overview
-
Learn how to take full advantage of the capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive.
Syllabus
-
Introduction
- Welcome
- Using the exercise files
- Prerequisites
- Terminology
- Define a grid
- Grid lines and units
- Automatic grid item placement
- Manual grid item placement
- Named lines
- Grid areas
- Grid gap
- CSS Grid means rethinking web layouts
- Start your layouts with pen and paper
- A new approach to backward compatibility
- Accessibility first
- The challenge
- Overview of the starting point
- Check for grid support
- Create the main grid
- Position items on the grid
- Add a third column for wider viewports
- Breaking the grid
- Justify the grid inside the grid container
- Use white space to perform magic
- The challenge
- Overview of the starting point
- Check for grid support
- Create the shared grid
- Create columns and position grid items
- Make the grid responsive
- The challenge
- Overview of text-based card markup
- Create a grid for each card
- Position items on the grid
- Place the cards on a grid
- Overview of image-based card markup
- Using the grid to stack grid items
- Change the appearance of cards with flex
- Create different-sized grid items
- Create a complex magazine-style grid
- Different off-screen navigation options
- Off-screen to cover navigation overview
- Set up the main grid
- Position the navigation area on the grid
- Hide the navigation area off canvas
- Create a reveal effect using JavaScript
- Improve accessibility of off-screen navigation
- Overview of sliding navigation panel
- Create an overflowing grid
- Slide content in and out of the canvas
- Bonus: Animate the sliding effect
- What are responsive images?
- Now that we have CSS Grid, do I still need to learn Flexbox?
- What are CSS custom properties (variables)?
- How does the calc() function work?
- How does HSL work?
- Conclusion
