Overview
-
Learn how to use the CSS Flexible Box Layout module (aka Flexbox) to create advanced responsive layouts.
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
