Responsive Layout

Offered By: LinkedIn Learning

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Flexbox Courses HTML Courses Responsive Design Courses Media Queries Courses

Course Description

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

Related Courses

Software as a Service
University of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX