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!

4.49 (2077 reviews)
Udemy
platform
English
language
Web Design
category
12,546
students
2 hours
content
Sep 2021
last update
$84.99
regular price

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

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 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.

Content

Welcome To The Flexbox Course!

How To Make The Most Of This Course

Let's Dive Right In: Learn The Flexbox Basics

What is Flexbox and Why Should I Use It?
What About Browser Support for Flexbox?
How Do I Use Flexbox?
Flexbox Principles
Quiz: Flexbox Basics

Styling Flex Containers

flex-direction - Creating Row & Column Layouts
Quiz: flex-direction
justify-content - Justifying Items Along the Main Axis
Quiz: justify-content
align-items - Aligning Items Along the Cross Axis
Quiz: align-items
flex-wrap - Multiple Rows & Wrapping Inside Flex Containers
Quiz: flex-wrap
align-content - Justifying Content Along the Cross Axis
Quiz: align-content

Designing Flex Items

order - Reordering Flex Items
align-self - Stubborn Children
flex-grow - Letting Children Grow
Quiz: flex-grow
flex-shrink - Shrinking Flex Items
Quiz: flex-shrink
flex-basis - Setting the Base Size
Quiz: flex-basis

Flexbox in Practice

Flexbox Grids: Creating Responsive Galleries #1 (Minimal Code)
Flexbox Grids: Creating Responsive Galleries #2 (Extra Flexibility)
Real Vertical Centering with Flexbox (no more vertical-align)
The Media Object Pattern
The Holy Grail Layout
Flexbox Cheat Sheet

Where to go from here...

A Quick Recap & What's Next
Bonus Lecture: Skyrocket Your Web Design Skills!

Screenshots

Complete Flexbox Course: Master CSS3 Flexbox for Good - Screenshot_01Complete Flexbox Course: Master CSS3 Flexbox for Good - Screenshot_02Complete Flexbox Course: Master CSS3 Flexbox for Good - Screenshot_03Complete Flexbox Course: Master CSS3 Flexbox for Good - Screenshot_04

Reviews

Amir
May 30, 2023
thanks for the course! for me that i was still using the pure css or even bootstrap this course was very helpful and the content was awesome and it saves me a lot of time and made to have the same behavior with less code
Luciano
April 9, 2023
I just finished the course on April/2023 and still a solid overview of CSS Flexbox. I think it's a great buy for someone that needs a refresher. And although the course was last updated on 9/2021, I believe it still pretty much current.
Sibusiso
April 3, 2023
Found the course to be concise and to the point. No theatrics or fancy coding, sweet and short. Concentration on value rather than duration and content.
Maho0009@hotmail.com
November 30, 2022
Clear explanations and examples. In short, this course was perfect for me because I needed to refresh in short timemy knowledge of CSS flex box realm. I highly recommend this short but comprehensive course.
Charles
November 29, 2022
I think the course is worth it just for the brilliant explanation of Flex Grow, when you start using different numbers for different flex items, it's really great. The course is short, focused and tight with no filler. On the whole I think it gives you a good generalised intro to flexbox and is well structured, but it's not very deep. After this, you have a good general sense of the possibilities of Flexbox, but it goes nowhere near making you into a master. But for what it is it's more worth taking this course than not.
Damian
November 21, 2022
This was very helpful. I won't say I became an expert, but it certainly helped clear the mystery. Thank you!
Ganesh
November 7, 2022
Thank you Peter. This is exactly I was looking for flexbox , crisp and insightful. Thank you for this again..
Rohan
September 29, 2022
The Author covered the basics of Flexbox very thoroughly with detailed and beautiful examples. I would recommend this course to others!
Brian
September 17, 2022
Great course, with very clear explanations, allowing the Student to grasp every concept of Flexbox in a short amount of time.
Joshua
September 12, 2022
Took this course to supplement another course on responsive CSS just to hone my understanding of FlexBox. This was a GREAT decision!
Sci
August 16, 2022
This was sooooo helpful. Thank you Peter. You are a clear communicator and your explanations were concise. I loved this course
Dean
August 9, 2022
The explanation of proportional growing and shrinking was weak IMO. I was unsure how to calculate exactly... I was expecting a formula to predict exactly the expected behavior. Seemed to be glossed over.
Jonatan
August 1, 2022
Great course! The teacher is an expert. I didn't choose 5 starts because I think for mastering something you need more practice and examples. But after that, really recommended!
Aleksander
July 30, 2022
All the concepts explained very well. Peter is straight to the point, there is no time wasted. The pace is adequate. Thank you!
Sascha
June 7, 2022
Slow introduction, and way too much blah blah. There is no point in referencing that Froggy game in each and every episode. Furthermore, there's no point in welcoming and saying goodbye to the viewer in a clip of 3-5 minutes. The entire course would be 45 minutes at max without all that unnecessary waffle. The content, however, is quite good. Thank you! The code samples are clear and simple, having the editor and browser side-by-side is also very useful. But, unfortunately, there is no flow in watching when the videos are interrupted by quizzes and a lot of chit-chat all the time. Better let a section play until the end, then to a single quit for all attributes that were introduced in that specific section.

Charts

Price

Complete Flexbox Course: Master CSS3 Flexbox for Good - Price chart

Rating

Complete Flexbox Course: Master CSS3 Flexbox for Good - Ratings chart

Enrollment distribution

Complete Flexbox Course: Master CSS3 Flexbox for Good - Distribution chart

Related Topics

1061202
udemy ID
1/4/2017
course created date
8/20/2019
course indexed date
Bot
course submited by