Advanced Responsive Layouts with CSS Flexbox
1h 49mAdvanced2015-07-30
Authors
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
The CSS Flexible Box Layout module (aka Flexbox) provides a simple solution to many of the design and layout problems web designers and developers have faced since the advent of CSS. Now that the module is becoming ready for the main stage, it's time to look at what we can do with it.
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
Learning objectives
Creating Flexbox-powered menus
Building a responsive card layout
Marking up and styling the holy grail layout
Changing displays
Showing and hiding the sidebar
Animating content
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
Learning objectives
Creating Flexbox-powered menus
Building a responsive card layout
Marking up and styling the holy grail layout
Changing displays
Showing and hiding the sidebar
Animating content
Skills covered
Responsive Web DesignCSSWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome
- 02 - How to use the exercise files
1. What Is Flexbox
- 03 - What is Flexbox
- 04 - Caveats when using Flexbox today
2. Flexbox-Powered Menus
- 05 - Exploring common menu layouts
- 06 - Marking up five types of menus
- 07 - Using Flexbox to control single-level menu layout
- 08 - Using Flexbox to control advanced menus
- 09 - Using Flexbox to control multilevel menus with dropdowns
- 10 - Creating a social media menu
- 11 - Using Flexbox to control multiple menus
3. Responsive Card Layouts
- 12 - Challenges with card layouts
- 13 - Marking up typical cards
- 14 - Using Flexbox to create a grid of cards
- 15 - Adding responsive breakpoints
- 16 - Solving the common anchor doesn't fill the card problem
4. Holy Grail Layout
- 17 - What is the holy grail layout
- 18 - Marking up the holy grail layout in HTML
- 19 - Styling the holy grail layout with Flexbox
- 20 - Changing the layout with Flexbox
5. Handing Control to the User
- 21 - Handing control to the user
- 22 - Sidebar position switching
- 23 - Changing from holy grail to vertical display
- 24 - Hiding and showing the sidebar
- 25 - Animating content
6. Putting It All Together
- 26 - Putting it all together
Next steps
- 27 - Thank you