The Complete Flexbox Tutorial: Learn CSS3 Flexbox in 2018 (Udemy.com)

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!

( 290 Reviews )

Created by: Peter Sommerhoff

Produced in 2018

What you will 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

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 94 / 100

Course Description

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 other 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:

flex-direction
justify-content
align-items
flex-wrap
align-content

Then individual flex items:

order
align-self
flex-grow
flex-shrink
flex-basis
flex

At 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 size
More advanced Flexbox grids where columns can have arbitrary sizes
Vertical centering to vertically align any element
Media objects, the popular OOCSS pattern
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.Who this course is for:

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

Time: 2h

Instructor Details

Peter Sommerhoff

4.7 Rating
290 Reviews

Hi, it's Peter, glad you made it here! If you're anything like me, you want to always keep learning, master new skills, and ultimately achieve your life goals -- whether that's a well-paying career, traveling the world, working from the comfort of your home, or sharing your expertise with and helping other people.
Does that sound like you? Then make sure to enroll in one my courses and learn about awesome programming languages, software design, productivity, or anything else you're interested in!
I feel honored for every student I have and will make sure you have a great learning experience. You can always ask me personally if you get stuck or have anything at all I can help you with.
So please check out my courses below and I'll see you there!

Kotlin for Beginners: Learn Programming With Kotlin

Kotlin for Beginners: Learn Programming With Kotlin (2021)
4.4 (239 Reviews)

- Provider: Udemy
- Time: 6.5h

$11.99

Kotlin for Android & Java Developers: Clean Code on Android

Kotlin for Android & Java Developers: Clean Code on Android (2021)
4.6 (197 Reviews)

- Provider: Udemy
- Time: 9h

$11.99

Ultimate CSS Grid Course: From Beginner to Advanced

Ultimate CSS Grid Course: From Beginner to Advanced (2021)
4.3 (108 Reviews)

- Provider: Udemy
- Time: 2.5h

$11.99

All courses by Peter Sommerhoff

More css courses

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox) (2021)
4.9 (50 Reviews)

- Provider: Udemy
- Time: 11.5h

$11.99

Step By Step HTML and CSS course for beginners

Step By Step HTML and CSS course for beginners (2017)
4.9 (50 Reviews)

- Provider: Udemy
- Time: 4h

$11.99

The Complete HTML and CSS Course For Beginners

The Complete HTML and CSS Course For Beginners (2017)
4.9 (49 Reviews)

- Provider: Udemy
- Time: 3h

$11.99

Web Design: Wireframes to Prototypes
4.9 (25 Reviews)

- Provider: Coursera
- Time: 29h

Free

Modern HTML & CSS From The Beginning (Including Sass)

Modern HTML & CSS From The Beginning (Including Sass) (2021)
4.8 (412 Reviews)

- Provider: Udemy
- Time: 21h

$11.99

Materialize CSS From Scratch With 5 Projects

Materialize CSS From Scratch With 5 Projects (2018)
4.8 (361 Reviews)

- Provider: Udemy
- Time: 10.5h

$11.99

All css courses

Reviews

4.7

290 total reviews

5 star 4 star 3 star 2 star 1 star

Write a Review

By Michel Sakkas on 11/14/2020

From section 5, coding along was not working. Did some properties change since four years ago? Despite this fact, it is quite a good course.

By Peter Kitonga on 11/7/2020

Peter is great at explaining the various concepts/properties of flexbox and has great examples to back it up. I really loved the showcase provided by him which help solidify visualizing what the different properties can do. I loved going through the course content with him and learned a great deal about flexbox. I will definitely apply it in my designs to come.

By Tyler on 10/26/2020

Horrible fast explanations on difficult concepts

By Freilin Manzano aez on 10/17/2020

excellent course

By Chandu NANGA on 10/4/2020

A good course to understand the flexbox...And cheat sheet provided is very handy...

By Jaya Korupolu on 9/26/2020

nice

By SUHAYB ALGHUTAYMIL on 9/22/2020

I got a better understanding of flexbox, this course is good for complete flex box beginner.

By Gil Aguilar on 9/17/2020

Loved the examples and the cheat sheet at the end of the course. Really great class that had serious thought in demonstrating key concepts. Highly recommended.

By Ruben Lopez on 9/11/2020

Amazing course. I have watched it twice and every time I learn something new. The instructor is direct and stays on subject. He is easy to understand and the layout of the course is well organized. Im a full stack developer and needed a course to brush my flex skills and this course was the perfect addition to my toolbox. Thank you.

By Yavdhesh Sanchihar on 8/1/2020

By David Kanwisher on 7/27/2020

Great course. I feel pretty confident already in flexbox layouts but I enjoyed the refresher specifically on flex-basis/grow/shrink and the difference between align-items and align-content. I'm not ready to give the course 5 stars as I feel like the lessons are unnecessarily made confusing by defaulting to reversed items when introducing newer concepts and there is a lingering float style that I'm sure is not helpful to beginners. I think the course could use 1 quick pass of edits to be a 5 star program, but overall great instruction.

By Eyal Cohen on 7/19/2020