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

LinkedIn Learning

Responsive Layout

via LinkedIn Learning

Overview

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

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.

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

Reviews

Start your review of Responsive Layout

Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free