Responsive CSS: Flexbox and Grid

The most advanced and modern CSS course for responsive layout : master flexbox, CSS Grid, responsive design, and so much

4.40 (52 reviews)

Udemy

platform

English

language

Web Design

What you will learn

CSS Grid layouts: build a huge real-world project with CSS Grid

Flexbox layouts: build a huge real-world project with flexbox

CSS Grid Layout Introduction

CSS Grid Building with Rows & Columns

CSS Grid-Gap Tutorial

CSS Grid Items Positioning Tutorial

CSS Grid Items Spanning Tutorial

CSS Grid Lines Naming Tutorial

CSS Grid Area Naming Tutorial

CSS Grid Implicit & Explicit Grid Tutorial

CSS Grid Items Alignment Tutorial

CSS Grid Auto-Fill & Auto-Fit Tutorial

CSS Grid Fit-Content Tutorial

CSS Grid Order Property Tutorial

Overlapping Grid Items Tutorial

CSS Flexbox Introduction Tutorial

CSS Flexbox Flex-Direction Tutorial

CSS Flex-Wrap & Flex-Flow Tutorial

CSS Flexbox Justify-Content Tutorial

CSS Flexbox Align-Items Tutorial

CSS Flexbox Align-Content Tutorial

CSS Flexbox Align-Self Tutorial

CSS Flexbox Flex-Grow Tutorial

CSS Flexbox Flex-Basis Tutorial

CSS Flexbox with Margin Auto Tutorial

Why take this course?

If you want to learn how to create modern, beautiful and real-world websites using just pure CSS, then this is the right course for you.

This is the most up to date and extensive course regarding CSS Flexbox and CSS Grid,

In this course you will learn all about CSS Flexbox and how it incorporates into real-world websites. You will learn the fundamentals of UI web design and responsive web design along with best practices. We will take a deep dive into the topic of CSS Grid and all the nuts and bolts of it.

In this course we will teach all the topics in CSS grid and flexbox from the beginning.

So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website . And it will even look great on any computer, tablet, and smartphone.

What you'll learn:

CSS Grid layouts: build a huge real-world project with CSS Grid

Flexbox layouts: build a huge real-world project with flexbox

Who this course is for:

CSS developers who want to update their CSS skills to the most modern level

CSS developers who want to expand their toolset to flexbox, Grids

Front-end developers who want to finally understand how CSS works behind the scenes

Requirements:

Beginner level knowledge of HTML5 and CSS3 is required

Have a computer + internet connection

Screenshots

Responsive CSS: Flexbox and Grid - Screenshot_01

Responsive CSS: Flexbox and Grid - Screenshot_02

Responsive CSS: Flexbox and Grid - Screenshot_03

Responsive CSS: Flexbox and Grid - Screenshot_04

Reviews

Amine

May 7, 2023

It is a practical course, which is very well structured. It provides a lot of tips, how to combine different properties together to produce different behaviors. I would recommend this course.

Steve

August 29, 2022

Overall, this is an excellent course. It is compact and concise and the examples were easy to follow. The pace was nice and crisp. So, why not 5 stars? 1) Trivial - spelling errors on some slides 2) Small omission: flex-basis: auto; was not covered 3) Large Omission: after telling us there are 12 Flexbox properties, only 11 were covered. The property flex: (shorthand for grow, shrink & basis) was omitted. However, I can highly recommend the course.

Den

March 31, 2022

Thanks for the course. Definitely It's a very good course, It's completely beginners friendly course.

Brian

December 15, 2021

Well thought out although, at times the dependency on prior code in the lesson and then the result can be a little confusing. You may not see how the instructor got from point A to point B if you aren't following closely. I suppose that's one challenge with teaching CSS is that it is a very forgiving concept and allows you to do "bad" things. Still overall a good overview of grid and flex.

Shipra

October 30, 2021

thanks for this great course sir. recommendable course for CSS developers .Easy explanation with proper example

Charts

Price

Rating

Enrollment distribution

Responsive CSS: Flexbox and Grid - Distribution chart

Responsive CSS: Flexbox and Grid

What you will learn

CSS Grid layouts: build a huge real-world project with CSS Grid

Flexbox layouts: build a huge real-world project with flexbox

CSS Grid Layout Introduction

CSS Grid Building with Rows & Columns

CSS Grid-Gap Tutorial

CSS Grid Items Positioning Tutorial

CSS Grid Items Spanning Tutorial

CSS Grid Lines Naming Tutorial

CSS Grid Area Naming Tutorial

CSS Grid Implicit & Explicit Grid Tutorial

CSS Grid Items Alignment Tutorial

CSS Grid Auto-Fill & Auto-Fit Tutorial

CSS Grid Fit-Content Tutorial

CSS Grid Order Property Tutorial

Overlapping Grid Items Tutorial

CSS Flexbox Introduction Tutorial

CSS Flexbox Flex-Direction Tutorial

CSS Flex-Wrap & Flex-Flow Tutorial

CSS Flexbox Justify-Content Tutorial

CSS Flexbox Align-Items Tutorial

CSS Flexbox Align-Content Tutorial

CSS Flexbox Align-Self Tutorial

CSS Flexbox Flex-Grow Tutorial

CSS Flexbox Flex-Basis Tutorial

CSS Flexbox with Margin Auto Tutorial

Why take this course?

Screenshots

Reviews

Charts

Price

Rating

Enrollment distribution

Related Topics