Practical CSS3 Flexbox Media Queries & CSS Grid Mastery

  • Categories Video Courses
  • Duration 02h
  • Total Enrolled 29
  • Last Update March 16, 2022


In the course, you will learn all the concepts of flexbox and media queries.

We will learn all the concepts with the help of code examples.

Following are the topics we will cover:

1.1-Installing VS Code and Server extension

1.2-Introduction to Flexbox

1.3-Setup index.html and style.css files

1.4- Reset margin padding box-sizing on universal operator

1.5-Styling the Boxes

1.6-Apply display flex on parent

1.7-Flex Direction row row-reverse column column-reverse

1.8-Flex grow shrink

2.1-Justify Content Flex Start

2.2-Justify Content Flex End

2.3-Justify Content Center

2.4-Justify Content Space-Around

2.5-Justify Content Space-Between

3.1-Why you should not use Float property

3.2-Align Item Flex End

3.3-Align Item Flex Start

3.4-Align Item Center

3.5-Flex Basis asme as Width on Flex Item

4.1-Responsivesness with Media Query

4.2-Flex Wrap Layout Creation

4.3-Styling the Flex layout

4.4-Making Screen Responsive with Flex Wrap

4.5-Enhancing the responsiveness

What Will I Learn?

  • You will learn about Responsive web design and development
  • You will learn all concepts of Flexbox and how to use them

Topics for this course

52 Lessons02h

Section 1: Introduction and Setup

Lecture 1: Course Overview1:56
Lecture 2: Installing VS Code and Server extension00:01:42
Lecture 3: Introduction to Flexbox1:41
Lecture 4: Setup index.html and style.css files00:01:44
Lecture 5: Reset margin padding box-sizing on universal operator00:03:01
Lecture 6: Styling the Boxes1:10

Section 2: Working with Flexbox

Section 3: Media Queries and Responsive Web Development

Section 4: Media Queries Breakpoint for different devices

Section 5: Git and Github

Section 6: CSS Grid

Section 7: Source code

Student Feedback


Total 1 Ratings

1 rating
0 rating
0 rating
0 rating
0 rating

I always feared responsiveness in CSS but no more after this course, awesome explanation and projects



  • No Programming Knowledge

Target Audience

  • Any one who wants to learn how to create responsive website