The Ultimate CSS Flexbox Course

From a complete beginner to a flexbox CSS master

Created byGilad Tsur Mayer

Last updated 1/2018

English

What you'll learn

Deep knowledge about the in and outs of how Flexbox works
Know all the building blocks of flexbox
Know all about Flexbox flex container properties
Vertically align any element with Flexbox
Create Responsive Galleries with a few line of Flexbox
Create Holy Grail Layout with easy!
and much much more.. !

Course content

7 sections • 21 lectures • 1h 26m total length

Course Introduction1:27
Master flexbox quickly in the ultimate css flexbox course by learning all its building blocks and applying real-world examples, including the media object pattern, responsive galleries, and the holy grail.
20,000 ft. Bird View of the Flexbox Course4:08
Provide a 20,000-foot overview of flexbox, covering why and what to use it for, browser support, concepts, container vs items, and patterns like holy grail, responsive gallery, and media object.
Flexbox : The What & Why4:26
Flexbox reinforces the box model to simplify layout and responsiveness, solving floats and complex patterns like the Holy Grail header with sidebars and responsive galleries.
Introduction for flexbox
Flexbox Browser Support1:53
Assess flexbox browser support using caniuse.com, observe that most browsers fully support flexbox, with IE offering partial support; Chrome, Chrome for Android, and iOS Safari show solid compatibility.

Flexbox flexbox-direction4:52
Discover how flex-direction defines the main axis and cross axis, turning layout from horizontal to vertical and controlling the start, end, and order of items in a flex container.
Flexbox flex-wrap3:55
Explore flex-wrap in the ultimate css flexbox course, observe how flex items wrap to new lines, learn wrap-reverse, and understand how the default behavior prevents wrapping until it is enabled.
Flexbox flex-flow2:15
Discover how the flex-flow shorthand combines flex-direction and flex-wrap to write more compact flexbox rules, improving readability on large projects, even if not required to memorize.
Flexbox justify-content4:32
learn how flexbox justifies content by distributing the available space along the main axis, using options like center, flex-start, space-between, and space-around; see how direction (row or column) changes the effect.
Flexbox align-items2:52
Flexbox Container's Properties

Flexbox align-self2:49
Explore how to use align-self to override the flex container for a single flex item, centering or stretching that item while its siblings remain unchanged.
More Flexbox Item's Properties12:12
Master flex grow, flex shrink, and flex basis to control how items share space, and use the flex shorthand to combine them along the main axis.
Flexbox order3:35
Flexbox Item's Properties Quiz

The Media Object Pattern Solved with Flexbox10:16
This lecture demonstrates solving the media object pattern with flexbox by arranging an image box beside a content container and switching flex direction.
Responsive Gallery with Flexbox4:06
The Holy Grail Solved with Flexbox7:51
Build the holy grail layout with flexbox by applying display:flex, flex-direction: column, and flex-grow to the content container between header, footer, and sidebars.

Requirements

Basic HTML & CSS

Description

In this course I will lead you through from a complete N00b, to a flexbox master!

You will know how to understand deeply how flexbox works (things that won't tell you in any other course or tutorial),

you will know how to manipulate stubborn HTML elements,

and you will also code along with me, and meet REAL WORLD examples, and how to solve them with flexbox.

you will learn how to set a flexbox container properties such as:

Flexbox flex-direction
Flexbox align-items
Flexbox justify-content
Flexbox flex-wrap
and more!

You will also learn how to set a flexbox items properties such as :

Flexbox align-self
Flexbox grow
Flexbox shrink
and many more!

I carefully combined lots of pop quiz, tests, and Cheetsheet, and also have a showcase so you could show-off your skills, and even learn from one another.

I am extremely pumped and eager to respond to your questions. and I will love to hear what you think!

I look forward to meet you inside!

Who this course is for:

Web developers and web designers who wants to improve their frontend skills
Designers who wants to align faster in CSS
You want to keep up with the latest technology and web standards.

The Ultimate CSS Flexbox Course

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 12min

Course "Technicality" Stuff2 lectures • 3min

Flexbox Basics2 lectures • 8min

Flexbox Container's Properties5 lectures • 18min

Flexbox Item's Properties3 lectures • 19min

Real World Examples3 lectures • 22min

You have made it! Now what ?2 lectures • 4min

Requirements

Description

Who this course is for: