Practical Css3 Flexbox Media Queries & Css Grid Mastery

Learn to build responsive websites with the help of CSS3 Flexbox, CSS Grid, Media Queries & how to use Git and Github

What you'll learn
You will learn about Responsive web design and development
You will learn all concepts of Flexbox and how to use them
You will learn the concepts of Media Queries and how to use them
You will learn CSS Grid and how to use it for responsive web design
You will learn to use HTML and CSS3
You will learn the basics of Git and Github, commit your code to github
You will learn to use Visual Studio Code editor and related extension
Requirements
No Programming Knowledge
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 extension1.2-Introduction to Flexbox1.3-Setup index.html and style.css files1.4- Reset margin padding box-sizing on universal operator1.5-Styling the Boxes1.6-Apply display flex on parent1.7-Flex Direction row row-reverse column column-reverse1.8-Flex grow shrink2.1-Justify Content Flex Start2.2-Justify Content Flex End2.3-Justify Content Center2.4-Justify Content Space-Around2.5-Justify Content Space-Between3.1-Why you should not use Float property3.2-Align Item Flex End3.3-Align Item Flex Start3.4-Align Item Center3.5-Flex Basis same as Width on Flex Item4.1-Responsivesness with Media Query4.2-Flex Wrap Layout Creation4.3-Styling the Flex layout4.4-Making Screen Responsive with Flex Wrap4.5-Enhancing the responsiveness1.1-What is meant by Responsiveness1.2-Example Non_responsive website1.3-Creating HTML Skeleton for non-responsive website1.4-Styling the non responsive page2.1-Different Device break points2.2-Make Responsive in device upto 768px2.3-Make Responsive for device width upto 468px2.4-Make Responsive for device width above 1024px2.5-Making Responsive between 769px and 1023pxCreating account on GithubInstalling Git bashCreating github token and connecting from localUsing git commands to commit and push our local codeYou will get the complete source code

Overview

Section 1: Introduction and Setup

Lecture 1 Course Overview

Lecture 2 Installing VS Code and Server extension

Lecture 3 Introduction to Flexbox

Lecture 4 Setup index.html and style.css files

Lecture 5 Reset margin padding box-sizing on universal operator

Lecture 6 Styling the Boxes

Section 2: Working with Flexbox

Lecture 7 Apply display flex on parent

Lecture 8 Flex Direction row row-reverse column column-reverse

Lecture 9 Flex grow shrink

Lecture 10 Justify Content Flex Start

Lecture 11 Justify Content Flex End

Lecture 12 Justify Content Center

Lecture 13 Justify Content Space-Around

Lecture 14 Justify Content Space-Between

Lecture 15 Why you should not use Float property

Lecture 16 Align Item Flex End

Lecture 17 Align Item Flex Start

Lecture 18 Align Item Center

Lecture 19 Flex Basis same as Width on Flex Item

Lecture 20 Responsivesness with Media Query

Lecture 21 Flex Wrap Layout Creation

Lecture 22 Styling the Flex layout

Lecture 23 Making Screen Responsive with Flex Wrap

Lecture 24 Enhancing the responsiveness

Section 3: Media Queries and Responsive Web Development

Lecture 25 What is meant by Responsiveness

Lecture 26 Example of Non_responsive website

Lecture 27 Creating HTML Skeleton for non-responsive website

Lecture 28 Styling the non responsive page

Section 4: Media Queries Breakpoint for different devices

Lecture 29 Different Device break points

Lecture 30 Make Responsive in device upto 768px

Lecture 31 Make Responsive for device width upto 468px

Lecture 32 Make Responsive for device width above 1024px

Lecture 33 Making Responsive between 769px and 1023px

Section 5: Git and Github

Lecture 34 Git and Github Part-1

Lecture 35 Git and Github Part-2

Lecture 36 Git and Github Part-3

Lecture 37 Git and Github Part-4

Section 6: CSS Grid

Lecture 38 Setup Html and Css Layout - Part-1

Lecture 39 Setup Html and Css Layout - Part-2

Lecture 40 Background color to boxes

Lecture 41 Display Grid with Rows and Columns

Lecture 42 Fractional unit for occupying full width

Lecture 43 Gap between row and column

Lecture 44 Short hand for template rows and columns

Lecture 45 Short hand for grid row and column gap

Lecture 46 Row and Column lines

Lecture 47 Moving Grid element position

Lecture 48 Shorthand for row and column and full width

Lecture 49 Auto Rows & Explicit and Implicit layout

Lecture 50 Responsive behavior only with css grid without media queries

Section 7: Source code

Lecture 51 Source code

Any one who wants to learn how to create responsive website