YoVDO

Advanced Responsive Layouts with CSS Flexbox

Offered By: LinkedIn Learning

Tags

Flexbox Courses User Interface Design Courses Responsive Web Design Courses

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
1. What Is Flexbox?
  • What is Flexbox?
  • Caveats when using Flexbox today
2. Flexbox-Powered Menus
  • 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
3. Responsive Card Layouts
  • 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
4. Holy Grail Layout
  • 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
5. Handing Control to the User
  • Handing control to the user
  • Sidebar position switching
  • Changing from holy grail to vertical display
  • Hiding and showing the sidebar
  • Animating content
6. Putting It All Together
  • Putting it all together
Next steps
  • Thank you

Taught by

Morten Rand-Hendriksen

Related Courses

Responsive Web Design Fundamentals
Google via Udacity
Introduction to Bootstrap - A Tutorial
Microsoft via edX
Responsive Images
Udacity
Responsive Website Basics: Code with HTML, CSS, and JavaScript
University of London International Programmes via Coursera
Responsive Web Design
University of London International Programmes via Coursera