5.00(1)

Practical CSS3 Flexbox Media Queries & CSS Grid Mastery

by Ranjan Pandey
Course level: Beginner
Share:

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

Description

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

Lecture 7: Apply display flex on parent00:02:31

Lecture 8: Flex Direction row row-reverse column column-reverse00:02:01

Lecture 9: Flex grow shrink00:03:27

Lecture 10: Justify Content Flex Start00:02:59

Lecture 11: Justify Content Flex End00:01:02

Lecture 12: Justify Content Center00:01:31

Lecture 13: Justify Content Space-Around00:00:49

Lecture 14: Justify Content Space-Between00:00:48

Lecture 15: Why you should not use Float property00:01:33

Lecture 16: Align Item Flex End00:00:23

Lecture 17: Align Item Flex Start00:01:45

Lecture 18: Align Item Center00:00:36

Lecture 19: Flex Basis same as Width on Flex Item00:00:51

Lecture 20: Responsivesness with Media Query00:02:14

Lecture 21: Flex Wrap Layout Creation00:02:20

Lecture 22: Styling the Flex layout00:02:50

Lecture 23: Making Screen Responsive with Flex Wrap00:01:58

Lecture 24: Enhancing the responsiveness00:01:09

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

5.0

Total 1 Ratings

1 rating

0 rating

Gabor Kalmar

3 years ago

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

$3.99

Requirements

No Programming Knowledge

Target Audience

Any one who wants to learn how to create responsive website

Practical CSS3 Flexbox Media Queries & CSS Grid Mastery

Description

What Will I Learn?

Topics for this course

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

Lecture 7: Apply display flex on parent00:02:31

Lecture 8: Flex Direction row row-reverse column column-reverse00:02:01

Lecture 9: Flex grow shrink00:03:27

Lecture 9: Flex grow shrink00:03:27

Lecture 10: Justify Content Flex Start00:02:59

Lecture 11: Justify Content Flex End00:01:02

Lecture 12: Justify Content Center00:01:31

Lecture 13: Justify Content Space-Around00:00:49

Lecture 14: Justify Content Space-Between00:00:48

Lecture 15: Why you should not use Float property00:01:33

Lecture 16: Align Item Flex End00:00:23

Lecture 17: Align Item Flex Start00:01:45

Lecture 18: Align Item Center00:00:36

Lecture 19: Flex Basis same as Width on Flex Item00:00:51

Lecture 20: Responsivesness with Media Query00:02:14

Lecture 21: Flex Wrap Layout Creation00:02:20

Lecture 22: Styling the Flex layout00:02:50

Lecture 23: Making Screen Responsive with Flex Wrap00:01:58

Lecture 24: Enhancing the responsiveness00:01:09

Section 3: Media Queries and Responsive Web Development

Lecture 25: What is meant by Responsiveness00:01:37

Lecture 26: Example of Non_responsive website00:02:51

Lecture 27: Creating HTML Skeleton for non-responsive website00:03:07

Lecture 28: Styling the non responsive page00:07:04

Section 4: Media Queries Breakpoint for different devices

Lecture 29: Different Device break points00:01:49

Lecture 30: Make Responsive in device upto 768px00:05:06

Lecture 31: Make Responsive for device width upto 468px00:03:03

Lecture 32: Make Responsive for device width above 1024px00:02:28

Lecture 33: Making Responsive between 769px and 1023px00:03:04

Section 5: Git and Github

Lecture 34: Git and Github Part-100:01:19

Lecture 35: Git and Github Part-200:01:36

Lecture 36: Git and Github Part-300:03:12

Lecture 37: Git and Github Part-400:06:11

Section 6: CSS Grid

Lecture 38: Setup Html and Css Layout – Part-100:01:41

Lecture 39: Setup Html and Css Layout – Part-200:03:38

Lecture 40: Background color to boxes00:01:55

Lecture 41: Display Grid with Rows and Columns00:04:15

Lecture 42: Fractional unit for occupying full width00:03:18

Lecture 43: Gap between row and column00:01:45

Lecture 44: Short hand for template rows and columns00:03:54

Lecture 45: Short hand for grid row and column gap00:00:35

Lecture 46: Row and Column lines00:02:15

Lecture 47: Moving Grid element position00:03:04

Lecture 48: Shorthand for row and column and full width00:03:33

Lecture 49: Auto Rows & Explicit and Implicit layout00:02:42

Lecture 50: Responsive behavior only with css grid without media queries00:02:22

Section 7: Source code

Lecture 51: Source code00:00:00

Student Feedback

Login

Requirements

Tags

Target Audience

About Us

Quick Links

Company Details

Contact Us

Login