Advanced Responsive Layouts with CSS Flexbox

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.

Topics include:

• 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

About the Author

Morten Rand-Hendriksen is a web designer and developer.

Morten has a passion for clean design, standards-based code, and open-source software like WordPress. He has published several books, articles, and videos on these topics and is a popular speaker at conferences. Running a small boutique-style digital media company, he divides his time evenly between building web solutions and teaching others how to do things right and get the most out of the web. Morten grew up in Norway and made Canada his home in 2002.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Intermediate
• Video Duration: 1h 48m
• Instructor: Morten Rand-Hendriksen