Complete Flexbox Course Master CSS3 Flexbox for Good

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!
Complete Flexbox Course Master CSS3 Flexbox for Good
File Size :
640.22 MB
Total length :
2h 5m



Peter Sommerhoff


Last update




Complete Flexbox Course Master CSS3 Flexbox for Good

What you’ll learn

Use CSS Flexbox confidently to create modern layouts
Create web site designs more effectively
Write high-quality and reusable CSS code
Vertically align any element
Take up the remaining space in a container
Beautiful responsive galleries with Flexbox
Implement the so-called Holy Grail Layout

Complete Flexbox Course Master CSS3 Flexbox for Good


Basic HTML & CSS
Using a code editor


After this course, you’ll be able to use Flexbox to…vertically align any elementcreate modern gridstake up remaining spaceadd spacing between elementsimplement complete site layoutsand 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 goalsI’ve added manual, high-quality captions (CC) to this courseTo 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.- AhmedI 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!- AnaGreat course, Peter explained it thoroughly, and he answers any questions within a day.- DunjaThe 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.- RobertI’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:flex-directionjustify-contentalign-itemsflex-wrapalign-contentThen individual flex items:orderalign-selfflex-growflex-shrinkflex-basisflexAt the end, we’ll look at real-world Flexbox examples to see what kinds of layouts can be achieved:Simple grids with Flexbox where all columns in a row have the same sizeMore advanced Flexbox grids where columns can have arbitrary sizesVertical centering to vertically align any elementMedia objects, the popular OOCSS patternThe Holy Grail Layout, a complete site layout with sidebars and sticky footerAs 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.


Section 1: Welcome To The Flexbox Course!

Lecture 1 How To Make The Most Of This Course

Section 2: Let’s Dive Right In: Learn The Flexbox Basics

Lecture 2 What is Flexbox and Why Should I Use It?

Lecture 3 What About Browser Support for Flexbox?

Lecture 4 How Do I Use Flexbox?

Lecture 5 Flexbox Principles

Section 3: Styling Flex Containers

Lecture 6 flex-direction – Creating Row & Column Layouts

Lecture 7 justify-content – Justifying Items Along the Main Axis

Lecture 8 align-items – Aligning Items Along the Cross Axis

Lecture 9 flex-wrap – Multiple Rows & Wrapping Inside Flex Containers

Lecture 10 align-content – Justifying Content Along the Cross Axis

Section 4: Designing Flex Items

Lecture 11 order – Reordering Flex Items

Lecture 12 align-self – Stubborn Children

Lecture 13 flex-grow – Letting Children Grow

Lecture 14 flex-shrink – Shrinking Flex Items

Lecture 15 flex-basis – Setting the Base Size

Section 5: Flexbox in Practice

Lecture 16 Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)

Lecture 17 Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)

Lecture 18 Real Vertical Centering with Flexbox (no more vertical-align)

Lecture 19 The Media Object Pattern

Lecture 20 The Holy Grail Layout

Lecture 21 Flexbox Cheat Sheet

Section 6: Where to go from here…

Lecture 22 A Quick Recap & What’s Next

Lecture 23 Bonus: Reach Your Full Potential As A Software Developer

Web designers and developers who want to improve their frontend skills,Designers who want to increase their productivity,Anyone who wants to keep up with newest developments in web standards

Course Information:

Udemy | English | 2h 5m | 640.22 MB
Created by: Peter Sommerhoff

You Can See More Courses in the Design >> Greetings from

New Courses

Scroll to Top