Learn CSS Flexbox Practically

Create a Page with Recipe Cards

3.35 (84 reviews)


1 hour


Jan 2019

Last Update
Regular Price

What you will learn

What is flexbox module

How to manage items at container level

How to manage items at items level

How to create basic layouts, using flexboxes


This class is about learning how flexboxes work.
Did you hear about them before?

It's a module, that has roots at Mozilla. It's a big timesaver for Frontend developers.
You'll never want to create an HTML page without flexboxes after this course.

We'll learn only basic things. Specification mostly.

All CSS properties related to flexboxes. 
And we'll have a set of easy practical lessons.
For each practice lesson, I advise you to recreate an example from scratch(no copy-paste) by your hands.

Be aware, that this course touching only flexbox basics, so you need to know HTML and CSS. 


Github- if you ok to share your code with other - My current pick
Bitbucket - if you want to have a free storage

Google drive or Dropbox - if you just want to save your code at cloud

You can also use Codesandbox or other online editors.
For practice lessons, I'll use CodePen.

But I'm sure - for your project, you'll decide to use a code editor.

Code editors
Sublime - I use it around 6 years. small size and everything important
Atom because it's backed by the GitHub team and it also has a Github sync.

If you want to save your project tasks, you can use Trello

If you want to have some flexbox practice, you can check this game: flexboxfroggy

For flexbox prefixing please google "flexbox prefixes SASS"


Learn CSS Flexbox Practically
Learn CSS Flexbox Practically
Learn CSS Flexbox Practically
Learn CSS Flexbox Practically


Introduction, Parent Properties

Intro to flexboxes. Flexbox Axis

Parent Properties. display, flex-direction, flex-wrap, flex-flow

Practice lesson. display:flex

Practice lesson. flex-direction

Practice lesson. flex-wrap

Parent properties. justify-content

Practice lesson. justify-content

Practice lesson. justify-content

Practice lesson. justify-content

Practice lesson. justify-content

Parent properties. align-content

Properties for children

Properties for children. order, flex-grow

Practice lesson. order

Practice lesson. order

Practice lesson. flex-grow

Properties for children. flex-shrink, flex-basis

Practice lesson. flex-shrink

Properties for children. flex, align-self

Practice lesson. Holy Grail layout

Browsers support

Flexbox prefixing

Class project


Nirav24 June 2019

Very practical example, simple explanation! I have attended many CSS tutorials on Youtube, but this is by far the best. CSS is easy to use but difficult to explain / understand for first timers. Instructor has done quite hard work in covering all possible scenarios and recording them. Keep creating more!

Ivan14 June 2019

Very hard to follow tutorial. CSS is hard to read because of small font-size and poor contrast and is in Sass format. No starter files are given. If you are a watch-and-nod type of guy, you'll probably like it. Otherwise it's somewhat painful to follow along.


6/8/2020100% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by