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.
- 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
Skill Level Intermediate
(light orchestral music) - [Voiceover] Hi, I'm Morten Rand-Hendriksen, staff author here at lynda.com, and this is Advanced Responsive Layouts with CSS Flexbox. The CSS Flexible Box layout module or Flexbox, for short, is a new CSS module that will change the way we think about and lay out content on our websites forever. That sounds hyperbolic but once you see what it can do, I'm sure you'll agree with me. In this course, we'll use Flexbox to lay out several types of advanced responsive layouts, both for components and for whole pages, and showcase why this new CSS module is so important.
We'll start by creating a series of different menus with Flexbox. Then, we'll build a responsive, card-based layout with row-based, equal-height columns. We'll use Flexbox to solve the elusive problem of the Holy Grail layout. And finally, we'll tie together all the different components and build a fully responsive Holy Grail layout with card-based content, mixed-content menus, and interactive components that hand layout choices to the visitor. Flexbox is new technology that will change the way we design and build websites.
And with the right precautions, it's ready to use today. I'm here to show you how to do it right, so let's get cracking with Advanced Responsive Layouts with CSS Flexbox.