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!
Overview
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
