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

CSS Grid & Flexbox for Responsive Layouts, v2

via Frontend Masters

Overview

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

Never Stop Learning.

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