Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Responsive Layout

via LinkedIn Learning

Go to class Write review

Details

Go to class

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

2-3 hours
Sessions

On-Demand

Found in

Overview

Learn how to design responsive layouts with HTML and CSS, including the latest standards: Flexbox and Grid.

Syllabus

Introduction

Go cross-platform with responsive design
What you should know

1. Basic Page Structure

Viewport
Required CSS
Display property
Positioning
Floats
Units

2. Responsive Layout

Responsive design
Media queries
Flexbox and Grid
Accessibility
Browser support

3. Grid Layout

Intro to CSS Grid
Defining rows and columns
Grid gap
Sizing rows and columns
Placing grid items
Grid alignment overview
Aligning tracks
Aligning grid items within tracks
Aligning individual grid items
Variable columns
Grid template areas
Naming grid lines
Ordering grid items
Grid flow and implicit tracks
Challenge: The rainbow box
Solution: The rainbow box

4. Flexbox

Defining a flexbox container
Direction
Wrapping
Ordering flex items
Flexbox alignment overview
Aligning items on main axis
Aligning items on cross axis
Aligning lines on cross axis
Aligning individual flex items
Distributing space to flex items
Challenge: Floats to flexbox
Solution: Floats to flexbox

5. Layout Design

Centering content
3-column layout with grid areas, part 1
3-column layout with grid areas, part 2
3-column layout with flexbox
12-column layout setup
12-column layout for medium viewports
12-column layout for wide viewports

Conclusion

Next steps

Taught by

Clarissa Peterson

Reviews

4.7 rating at LinkedIn Learning based on 239 ratings

Start your review of Responsive Layout