Coursera Plus Annual is 40% Off — Ends June 29.

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

Frontend Masters

CSS Grid & Flexbox for Responsive Layouts, v2

via Frontend Masters

Go to class Write review
Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More → Unihackers Ad

Launch Your Cybersecurity Career in 6 Months

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
Learn the essential CSS layout techniques for building responsive, beautiful web applications. You'll get hands-on practice using CSS Grid for two-dimensional, grid-based layouts and Flexbox for styling one-directional flow. You'll master using these techniques together along with responsive images to build real-world, responsive web layouts!

Syllabus

  • Introduction
  • Responsive Design Overview
  • Flexbox
  • Starting CSS Setup
  • Container Flexbox Properties Demo
  • Child Flexbox Properties Demo
  • Overview & Setup
  • Coding a Flexbox Grid System
  • Responsive Media Queries
  • Flexbox Grid System Exercise
  • Flexbox Grid System Solution
  • Text Overlay Effect with Flexbox
  • Flexbox Exercises Setup
  • Collections Practice
  • Mission Practice
  • Flexbox Footer Practice
  • Header & Navbar
  • Header & Navbar Styling for Desktop
  • Header & Navbar Styling for Tablet
  • Header & Navbar Styling for Mobile
  • Responsive Images Overview
  • Responsive Images Best Practices
  • srcset & sizes Demo
  • Banner Demo
  • Hero Demo
  • Final Flexbox Exercise
  • Final Flexbox Solution
  • Introducing CSS Grid
  • Line-Based CSS Grid Layout Demo
  • Rows & Columns Practice
  • Sizing Rows & Columns
  • Grid Layout with Span Notation Demo
  • Grid System with CSS Grid
  • Responsive Grid with CSS Grid
  • Figure & Figure Caption with CSS Grid
  • Combining Grid Cells & Animation
  • Mosaic Grid Exercise
  • Mosaic Grid Solution
  • Magazine-Style Layouts with Grid Template Areas
  • Card HTML Markup Practice
  • Card Layouts with Flexbox & Grid
  • Final CSS Grid Exercise
  • Final CSS Grid Solution
  • Wrapping Up

Taught by

Jen Kramer

Reviews

Start your review of CSS Grid & Flexbox for Responsive Layouts, v2

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.