Build Modern Web Layouts With CSS Flexbox

Build Modern Web Layouts With CSS Flexbox


Get a hands-on, in-depth look at building CSS Flexbox layouts

Product Description

Once upon a time building functional, responsive web layouts required hacking, lots of JavaScript, and more than a few CSS floats. Then came Flexbox, a layout mode for CSS that got rid of all the headaches. This online course will get you up to speed on the latest version, introduce you to new and even better features, and help you get to grips with Flexbox in a hands-on, practical way.

Create and Manage CSS Flexbox Layouts

  • Take an in-depth look at building CSS Flexbox layouts
  • Build intricate layouts with minimal code, quickly and easily
  • Develop flexible, responsive layouts without code hacking or media queries
  • Control flex spacing, alignments, and positioning
  • Gain a new perspective on CSS and web development

Learn Fundamental Flexbox Concepts

This course is intended for those who have a working knowledge of HTML and CSS, and who are comfortable coding by hand and navigating through code. With an emphasis on in-depth, hands-on training, you’ll learn the latest techniques for building and managing functional CSS-based web layouts.

To start off, you’ll be introduced to fundamental Flexbox concepts and terminology, as well as the other essential knowledge you’ll need to know before going further. From there, the lessons get progressively more hands-on and challenging. You’ll cover flex containers, flow axis directions, flex widths, axis spacing and alignment, establishing element flexibility, working with nested flex containers, and more. Each section includes a practical exercise to put your skills to the test and a quiz to help compound your knowledge.

If you want to push your HTML, CSS and web design skills further, if you want to learn the latest in CSS web layout techniques, or if you just want to know the secret to building responsive, mobile layouts with minimal code, then this online course is a must.

About Flexbox

Flexbox, or the CSS Flexible Box, is a layout mode in CSS that allows designers to build and manage website layouts quickly and easily. Arrange each page element and test on different screen sizes (i.e. desktop, mobile, tablet) and display devices to ensure your code behaves accordingly. It was created to replace float and table layout hacks, making life much easier for designers and developers everywhere.

What am I going to get from this course?

  • Get a hands-on, in-depth look at building CSS Flexbox layouts.
  • See how you can quickly and easily build even intricate layouts with minimal code.
  • Create flexible, responsive layouts without the need for code hacking or media queries.

Who is the target audience?

  • This course is suited for students wanting to push their HTML, CSS, and web design skills further.
  • This course is ideal for users who want to discover the latest techniques for building responsive, mobile layouts with minimal code.
  • This course is perfect for web designers who want to learn the latest CSS web layout techniques.
  • This course is targeted towards those who want a hands-on approach to learning CSS Flexbox.


  • M1 - Course Introduction
  • M2 - Introduction
  • M2 – Understanding Flexbox Improved Web Layouts
  • M2 – Flexbox Terminology
  • M2 – Current Browser Support For Flexbox
  • M2 – Tools We'll Need
  • M2 – Section 2 Summary
  • M3 - Section 3 Introduction
  • M3 – Creating Our First Flex Container
  • M3 – Understanding Flexbox Flow Axis Directions
  • M3 – Setting Flow Directions
  • M3 – Understanding Flex Widths
  • M3 – Controlling How Child Flex Items Wrap
  • M3 – Shorthand For Faster Coding
  • M3 – Section 3 Summary
  • M4 - Section 4 Introduction
  • M4 – Main Axis Spacing & Alignment
  • M4 – Vertical Spacing & Alignment
  • M4 – How Margins Are Impacted By Spacing & Aligning
  • M4 – Cross Axis Spacing And Alignment
  • M4 – Controlling Alignment Of Individual Flex-Item
  • M4 – Handling Spacing With Wrapped Flex-Items
  • M4 – Controlling Flex Item Order
  • M4 - Section Summary
  • M5 - Section Introduction
  • M5 – Establishing A Flexible Starting Point
  • M5 – Determining How Flex Items Will Increase In Size
  • M5 – Determining How Flex Items Will Shrink In Size
  • M5 – Using Flex Shortcode
  • M5 - Section Summary
  • M6 - Section Introduction
  • M6 – Getting Set Up For Nested Containers
  • M6 – Wrapping Nested Child Flex-Items
  • M6 – Setting Nested Child Flex-Items To Scale
  • M6 – Setting Nested Child Flex-Item Display Order
  • M6 – Exercise
  • M6 – Exercise Solution
  • M6 - Section Summary
  • M7 - Resources
  • M7 - Closing Message

Course Requirements

Students should have a basic understanding of HTML and CSS, and be comfortable coding by hand and navigating through code.


Register | Lost your password?