YoVDO

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

Web Development
Udacity
Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
Web-Technologien
openHPI
iDESWEB, Introducción al desarrollo web
Miríadax