Advanced Responsive Layouts with CSS Flexbox
Offered By: LinkedIn Learning
Course Description
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
Taught by
Morten Rand-Hendriksen
Related Courses
Intro to the Design of Everyday ThingsUdacity Android. Programación de Aplicaciones
Miríadax Programming Mobile Applications for Android Handheld Systems: Part 1
University of Maryland, College Park via Coursera Mobile and Ubiquitous Computing
Georgia Institute of Technology via Coursera Android: Introducción a la Programación
Universitat Politècnica de València via edX