Complete Flexbox Course: Master CSS3 Flexbox for Good

About Complete Flexbox Course: Master CSS3 Flexbox for Good

After this course, you'll be able to use Flexbox to...

vertically align any element

create modern grids

take up remaining space

add spacing between elements

implement complete site layouts

and much more!

More goodies inside this course:

I'll answer all questions

you may have along the way to make sure you reach your learning goals

I've added

manual, high-quality captions (CC)

to this course

To see Flexbox in practice,

3 mini-projects

will manifest your skills and enable you to use Flexbox productively in future web design projects.

What Students Say About Me

(taken from various courses of mine) _Such a great course. second one for me with Peter Sommerhoff.a great Instructor, uses very easy way to explain the materials._ - Ahmed _I absolutely LOVE this course, it teaches everything you need in details and more! They really do listen to their students and answer as fast as the road runner. Thanks so much for posting your course and I am looking forward other courses!_ - Ana _Great course, Peter explained it thoroughly, and he answers any questions within a day._ - Dunja _The course covered the required information quickly and concisely without fluff or wasted motion. It provides sufficient pointers to additional information and documentation. I thought it was a good value._ - Robert I'm glad to have received such great reviews from my students -- and I'll do my best to provide _you_ with the best learning I can as well.

Check out the free preview videos below.

I look forward to seeing you inside :)

In this tutorial, you'll learn to use each and every Flexbox property:

Styling flex containers: 1. flex-direction 2. justify-content 3. align-items 4. flex-wrap 5. align-content Then individual flex items: 1. order 2. align-self 3. flex-grow 4. flex-shrink 5. flex-basis 6. flex At the end, we'll look at

real-world Flexbox examples

to see what kinds of layouts can be achieved: 1.

Simple grids with Flexbox

where all columns in a row have the same size 2.

More advanced Flexbox grids

where columns can have arbitrary sizes 3.

Vertical centering

to vertically align any element 4.

Media objects

, the popular OOCSS pattern 5.

The Holy Grail Layout

, a complete site layout with sidebars and sticky footer As a bonus, this course

includes a complete Flexbox Cheat Sheet

that you can use to recap all you've learned and to refer back to while using Flexbox. Additionally, I included the code for a

Flexbox demo showcase

-- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.