CSS Grid & Flexbox for Responsive Layouts, v2

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!

• 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