Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
Learn how to use the CSS Flexible Box Layout module (aka Flexbox) to create advanced responsive layouts.
PowerBI Data Analyst - Create visualizations and dashboards from scratch
Learn the Skills Netflix, Meta, and Capital One Actually Hire For
Overview
Syllabus
Introduction
- Welcome
- How to use the exercise files
- What is Flexbox?
- Caveats when using Flexbox today
- Exploring common menu layouts
- Marking up five types of menus
- Using Flexbox to control single-level menu layout
- Using Flexbox to control advanced menus
- Using Flexbox to control multilevel menus with dropdowns
- Creating a social media menu
- Using Flexbox to control multiple menus
- Challenges with card layouts
- Marking up typical cards
- Using Flexbox to create a grid of cards
- Adding responsive breakpoints
- Solving the common "anchor doesn't fill the card" problem
- What is the holy grail layout?
- Marking up the holy grail layout in HTML
- Styling the holy grail layout with Flexbox
- Changing the layout with Flexbox
- Handing control to the user
- Sidebar position switching
- Changing from holy grail to vertical display
- Hiding and showing the sidebar
- Animating content
- Putting it all together
- Thank you
Taught by
Morten Rand-Hendriksen
Related Courses
Related Articles
-
Learn AI, Data Science & Business — Earn Certificates That Get You Hired
-
Best CSS Layout Courses for 2026
-
14 Best User Experience (UX) Courses for 2026 (Free & Paid)
-
11 Best Figma Courses for 2026 (Free & Paid): Create Collaborative Designs
-
Online Visual Arts: Learn From Pros Who Worked at Disney, Pixar, Blizzard
-
10 Best Typography Courses for 2026: Bringing Life to Fonts
