Practice It: CSS Layout

Course details

In this course, instructor Julia Dyck shows you how to create responsive web layouts that adapt to any screen size and provide a seamless user experience. Join Julia as she shows you how to design modular layouts using CSS grids and Flexbox, and adapt them to different screen widths using media queries. She provides an introduction to the basics of grid layouts, explains how to make your layouts responsive, and then guides you through the creation of a three-column and a twelve column layout.

Concepts

Introduction

Creating responsive grid layouts
What you should know
Using GitHub Codespaces with this course

Introduction to Grid Layouts

Designing a grid layout
Defining grid elements
Working with advanced selectors
Grid vs. Flexbox
Try it - Create a basic grid layout
Check it - Create a basic grid layout

Making It Responsive

Using a mobile-first approach
Using media queries
Changing the layout
Making it accessible
Try it - Responsive grid design
Check it - Responsive grid design

Creating a Three-Column Layout

Designing a responsive layout with Flexbox
Try it - Designing a layout with Flexbox and Grid
Check it - Designing a three-column layout with Flexbox
Check it - Designing a three-column layout with Grid

Creating a Twelve-Column Layout

Twelve-column layout setup
Twelve-column layout for different viewports
Try it - Designing a twelve-column layout
Check it - Designing a twelve-column layout

Conclusion

Next steps - Advanced layouts and UX