Web Development


How FlexBox and CSS Grid replaces CSS Floats? with Example

CSS Floats are dead! It's time you check this video and learn about FlexBox (the present) and CSS Grid (the future).

4.15 (36 reviews)


1 hour


Mar 2018

Last Update
Regular Price

What you will learn

Will be able to create layouts using CSS Floats, CSS FlexBox and CSS Grid

Will make you a powerful web designer/developer like a Front-End Developer on Steroids ;)

Ask me any doubts you have in my message box related to CSS and I will help :)


You can't be a professional web designer/developer without the power of FlexBox and CSS Grid with you. If you already know the basics of HTML and CSS, this course is for you to give insights on how FlexBox and CSS Grid works in CSS. Both, FlexBox and CSS Grid is used to create layouts and arranging blocks/divisions properly. So if you hate floats, you will love this course for sure. 

With the power of FlexBox and CSS Grid under your belt, you will be a UI/UX designer on steroids to design any kind of layout. Further, FlexBox also has support in React Native, if you are Mobile app developer.


  1. Creating layout using Float

  2. Creating layout using FlexBox

  3. Creating layout using CSS Grid

After completing the entire course if you have any doubts, feel free to ask me in my message box and I will help. If you are stuck in the middle of any project, feel free to ask me and I will do my best to troubleshoot.


How FlexBox and CSS Grid replaces CSS Floats? with Example
How FlexBox and CSS Grid replaces CSS Floats? with Example
How FlexBox and CSS Grid replaces CSS Floats? with Example
How FlexBox and CSS Grid replaces CSS Floats? with Example


Introduction to this Course

Introduction to CSS Floats, CSS FlexBox and CSS Grid

Why using CSS Floats is a Nightmare?

Creating the HTML Structure

HTML Structure for Layout using CSS Floats

Coding the CSS Part for the CSS Float Example

Creating the Header Part using CSS Floats

Creating the Content and the Footer Part using CSS Floats

Converting the Float Example into FlexBox

Creating the Entire Layout Replacing Floats with FlexBox

The CSS Grid Example : Powerful as the Hulk

Creating the Same Layout Using CSS Grid

Take a Small Quiz and Get Certificate

Get Certified by passing this Quiz


Amanat2 January 2021

It is a good course for an intermediate level but will be slightly difficult for beginners as flexbox and CSS grides are not described broadly. The instructor should have used a split-screen to show us how the code is changing the layout. Overall e good course.

Venkataramana27 March 2020

Very good explanations and concepts of floats, flex and grids by Abhilash. Now I have a better understanding and their advantages, disadvantages, etc., Its up to me now to apply these concepts in real world projects. Thank you, more courses with in-depth explanations expected from you. Cheers!!!

Tamlyn1 January 2019

This was a very useful course that helped me finally see side-by-side the differences between floats, FlexBox, and CSS Grid. I coded along with him, therefore I picked up on what was happening. As a bonus, I learned several useful Emmet tricks. The last lecture on CSS Grid was amazing!

Kotresh20 August 2018

I think the course give good idea on css floats, flex, and grid. But to dive deep into flex or grid, this is not advisable. Flex and Grid could have been explained in much more detail. It will be good if all the available properties are used or explained a little to use.

Trevor4 April 2018

The course was short and sweet and to the point. The question in the title of the course was answered and an example was provided, so I got everything that I expected from this course and more. It was very helpful to be shown how css layouts have evolved because it gives insight on the improvements of newer techniques and why css grid is "The Hulk".

Anju27 March 2018

Didn't know CSS Grid and FlexBox can be so powerful and flexible. Am using "float:left" for years and this is a great eye-opener. Will save many hours coding CSS stuff. Great course and well structured. Would have expected a few more examples.


Udemy ID


Course created date


Course Indexed date
Course Submitted by