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
Scrimba Ad

Get 20% off all career paths from fullstack to AI

Learn More → Corporate Finance Institute Ad

Learn Excel & Financial Modeling the Way Finance Teams Actually Use Them

Learn More →

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
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.