Responsive Layout

2h 33mIntermediate2018-10-24

Authors

Clarissa Peterson

Developer, Author, and Speaker, specializing in UX and design strategy

Course details

Responsive design demands that websites adapt to the device they are displayed on. Responsive layout is key, and HTML and CSS now offer features that make it easier than ever to create layouts that will work well on a wide range of devices and screen sizes. In this course, Clarissa Peterson covers the basics of designing responsive website layouts with the latest standards, including CSS Flexbox and Grid. Review the basics, such as working with the position and float properties to adjust the location of elements on screen, and discover how to use media queries to proactively update your layout. Then dive into CSS Grid, including aligning and ordering items within the grid, and find out to work flexbox containers. Finally, learn to build a 12-column design that combines Grid and Flexbox in one layout.
Learning objectives
What is responsive design?
The responsive page structure
Accessibility and responsive design
Using media queries
Designing with CSS Grid
Designing with CSS Flexbox

Skills covered

Responsive Web DesignHTMLWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

01 - Go cross-platform with responsive design
02 - What you should know

1. Basic Page Structure

03 - Viewport
04 - Required CSS
05 - Display property
06 - Positioning
07 - Floats
08 - Units

2. Responsive Layout

09 - Responsive design
10 - Media queries
11 - Flexbox and Grid
12 - Accessibility
13 - Browser support

3. Grid Layout

14 - Intro to CSS Grid
15 - Defining rows and columns
16 - Grid gap
17 - Sizing rows and columns
18 - Placing grid items
19 - Grid alignment overview
20 - Aligning tracks
21 - Aligning grid items within tracks
22 - Aligning individual grid items
23 - Variable columns
24 - Grid template areas
25 - Naming grid lines
26 - Ordering grid items
27 - Grid flow and implicit tracks
28 - Challenge - The rainbow box
29 - Solution - The rainbow box

4. Flexbox

30 - Defining a flexbox container
31 - Direction
32 - Wrapping
33 - Ordering flex items
34 - Flexbox alignment overview
35 - Aligning items on main axis
36 - Aligning items on cross axis
37 - Aligning lines on cross axis
38 - Aligning individual flex items
39 - Distributing space to flex items
40 - Challenge - Floats to flexbox
41 - Solution - Floats to flexbox

5. Layout Design

42 - Centering content
43 - 3-column layout with grid areas, part 1
44 - 3-column layout with grid areas, part 2
45 - 3-column layout with flexbox
46 - 12-column layout setup
47 - 12-column layout for medium viewports
48 - 12-column layout for wide viewports

Conclusion

49 - Next steps