The CSS Flexbox Guide: Build 5 Real Flexible Projects!

Name: The CSS Flexbox Guide: Build 5 Real Flexible Projects!
Rating: 4.8 (41 reviews)

Learn CSS Flexbox & Build 5 real world responsvie layouts using CSS3 Flexbox!

Created byIrfan Dayan

Last updated 6/2021

English

What you'll learn

CSS3 Flexbox & How it works
All the possible Flexbox properties
Flexbox with coding exercise
Build real world flexible layouts using Flexbox

Course content

6 sections • 35 lectures • 5h 36m total length

Welcome! & Know what's inside this course4:25
In this lecture, I give an introduction to this course!
Important Notes Before You Start!0:40
First Download Exercise Files0:06
Setting Up Tools3:28
In this lecture, we are going to take the very first step to setup our tools.

Introduction - CSS3 Flexbox1:13
In this section, we will get started with CSS3 Flexbox.
What is Flexbox?10:33
In this lecture, I’m going to discuss what is exactly CSS3 Flexbox.
Browser Support for Flexbox3:14
In this lecture, we take a look at current browser support for CSS Flexbox.
Let's Setup Exercise Files4:37
In this lecture, I’m going to get you setup with some starter files so we can start coding Flexbox layouts.
Your First Flexbox Layout!14:10
In this lecture, you are going to learn how to create your very first Flexbox layout.
Flexbox Properties Overview6:55
In this lecture, we are going to take an overview of all the possible properties of Flexbox layout module.

Introduction - Flex Container2:41
In this new section we are going to work on all the Flexbox properties that you can use on flex container.
display: flex; VS display: inline-flex;7:55
In this lecture, I want to show you, what’s the main difference between display flex; and display inline flex through an example.
Main-axis & Cross-axis4:21
In this lecture, I’m going to talk about the two axes of Flexbox. The main axis and the cross axis.
Flex Direction10:48
In this lecture, you are going to learn why flex direction is so important and how to set the flex direction for a flex container.
Reverse Flex Direction5:28
In this lecture, we are going to try the reverse values of flex direction property.
Flex wrap10:58
In this lecture, we learn to understand flex wrapping.
Reverse Flex wrap3:49
In this lecture, we are going to learn is reversing the flex wrap.
The shorthand 'flex-flow' Property3:05
In this lecture, we learn abut the shorthand 'flex-flow' property.
Justify Content19:47
In this lecture we start to learn about flexbox alignment properties and justify content is one of them.
Align Items16:40
In this lecture, we learn about align items property to align items along the cross axis.
Align Content15:52
In this lecture, we learn about align content property which allows you to align flex lines within the flex container.

Introduction - Flex Items2:03
In this section, we will be covering properties we use directly on flex items.
Order17:19
Inthis lecture, we are going to talk about flexbox ordering which is a way to move the order of elements without actually changing the html source order.
Align Self17:35
In this lecture, you will about the flexbox align-self which defines the alignment of individual flex item along the cross axis.
Flex Grow20:15
In this lecture, you will learn about flex-grow property which decides how much a flex item should grow, if there is an extra space.
Flex Shrink14:25
In this lecture, you will learn about flex-shrink which defines how much a flex item should shrink relative to other flex items if there is not enough space available.
Flex Basis14:35
In this lecture, you will learn about flex-basis. The flex basis specifies the initial main size of a flex item, before any growing and shrinking, before any available extra space is distributed between all of flex items.
The Shorthand 'flex' Property6:09
In this lecture we are going to learn about the shorthand flex property.

Introduction - Flexible Layouts1:21
In this section, we are going to build some real-world flexible layouts with the help of flexbox.
Vertical & Horizontal Centering12:21
In this lecture we are going to learn about CSS centering using Flexbox which is the best and the easiest way to center an element.
Responsive Image Grid15:11
In this lecture we are going to build a simple flexible image grid with the help of flexbox.
Equal Height Pricing Tables26:16
In this lecture we are going to build pricing tables with the help of flexbox.
Responsive Header27:43
In this lecture, we will be building a responsive header for a web page with the help of flex box.
Flexible Cards10:37
In this lecture, I’m going to show you how to build equal height flexible cards with the help of CSS flex box.

Requirements

Basic knowledge in HTML and CSS
Any code editor of your choice

Description

CSS Flexbox is a new layout module in CSS3 which is designed for laying out more complex site layouts easily and rapidly!

In this course, you will learn the CSS3 Flexbox from scratch and you will learn how to build real world flexible layouts with less and the easiest code using Flexbox.

In this course, we will start with the very basics of CSS3 Flexbox and then we will gradually learn more and more about CSS3 Flexbox. You will learn what is exactly Flexbox, why do you need it, what are the main components of Flexbox, we will discuss current browser support for Flexbox.

Then we will start working on flex container and we will take a detailed look at all the possible properties which can be used directly on flex container. You will also learn about the two axes of flexbox, the main axis and cross axis. We will also discuss the difference between display flex and display inline flex. And you will be learning all that with practical coding examples so you can understand flexbox module the right way.

We cover working on flex items. We will take a detailed look at all the possible properties which can be used directly on an individual flex item. Actually, you will learn about the sizing and flexibility of flex items. And of course, you will learn all that along with coding examples.

So once you learn the CSS3 Flexbox module then we will start building some real-world flexible layouts using flexbox.

You will learn about css centering using Flexbox.
I will show you how to build a simple flexible image grid with the help of flexbox. The image grid, we will build in course will look great on large screens as well as on small screens.
We will be building simple pricing tables with the help of flexbox. You will see, how with little CSS flexbox we design & align pricing tables.
We will be building a responsive header for a web page with the help of flexbox.
You will learn to build flexible cards using flexbox. We will be building these cards which will have equal height and they will look great on smaller screens; they will easily wrap on smaller screen if there is not enough space available.

By the end of this course, you will feel comfortable using Flexbox in your projects. By the end of this course, you will be a fully-fledged Flexbox developer. Thanks

Who this course is for:

Web developers eager about CSS3 Flexbox

The CSS Flexbox Guide: Build 5 Real Flexible Projects!

What you'll learn

Explore related topics

Course content

Getting Started!4 lectures • 9min

Let’s Get Started with Flexbox6 lectures • 41min

Working on Flex Container11 lectures • 1hr 41min

Working on Flex Items7 lectures • 1hr 32min

Building Flexible Layouts Using Flexbox6 lectures • 1hr 33min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: