Responsive Layout

Offered By: LinkedIn Learning

Tags

Responsive Design Courses Computer Science Courses Web Development Courses Flexbox Courses HTML Courses Media Queries Courses CSS Grid 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

Mobile Web Development
Google via Udacity iDESWEB, Introducción al desarrollo web
Miríadax Information Design
University of California, San Diego via Coursera Advanced Styling with Responsive Design
University of Michigan via Coursera Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera