Practice It: CSS Layout
1h 53mIntermediate2023-08-21
Authors
Julia Dyck
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.
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
Concepts
0. Introduction
- 01 - Creating responsive grid layouts
- 02 - What you should know
- 03 - Using GitHub Codespaces with this course
1. Introduction to Grid Layouts
- 04 - Designing a grid layout
- 05 - Defining grid elements
- 06 - Working with advanced selectors
- 07 - Grid vs. Flexbox
- 08 - Try it - Create a basic grid layout
- 09 - Check it - Create a basic grid layout
2. Making It Responsive
- 10 - Using a mobile-first approach
- 11 - Using media queries
- 12 - Changing the layout
- 13 - Making it accessible
- 14 - Try it - Responsive grid design
- 15 - Check it - Responsive grid design
3. Creating a Three-Column Layout
- 16 - Designing a responsive layout with Flexbox
- 17 - Try it - Designing a layout with Flexbox and Grid
- 18 - Check it - Designing a three-column layout with Flexbox
- 19 - Check it - Designing a three-column layout with Grid
4. Creating a Twelve-Column Layout
- 20 - Twelve-column layout setup
- 21 - Twelve-column layout for different viewports
- 22 - Try it - Designing a twelve-column layout
- 23 - Check it - Designing a twelve-column layout
Conclusion
- 24 - Next steps - Advanced layouts and UX