Practical CSS3 Flexbox Media Queries & CSS Grid Mastery

Practical CSS3 Flexbox Media Queries & CSS Grid Mastery

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

Language: english

Note: 4.4/5 (70 notes) 11,581 students

Instructor(s): Obify Consulting

Last update: 2022-03-05

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 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 same 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

1.1-What is meant by Responsiveness

1.2-Example Non_responsive website

1.3-Creating HTML Skeleton for non-responsive website

1.4-Styling the non responsive page

2.1-Different Device break points

2.2-Make Responsive in device upto 768px

2.3-Make Responsive for device width upto 468px

2.4-Make Responsive for device width above 1024px

2.5-Making Responsive between 769px and 1023px

Creating account on Github

Installing Git bash

Creating github token and connecting from local

Using git commands to commit and push our local code

You will get the complete source code

 

Who this course is for

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

 

Course content

  • Introduction and Setup
    • Course Overview
    • Installing VS Code and Server extension
    • Introduction to Flexbox
    • Setup index.html and style.css files
    • Reset margin padding box-sizing on universal operator
    • Styling the Boxes
  • Working with Flexbox
    • Apply display flex on parent
    • Flex Direction row row-reverse column column-reverse
    • Flex grow shrink
    • Justify Content Flex Start
    • Justify Content Flex End
    • Justify Content Center
    • Justify Content Space-Around
    • Justify Content Space-Between
    • Why you should not use Float property
    • Align Item Flex End
    • Align Item Flex Start
    • Align Item Center
    • Flex Basis same as Width on Flex Item
    • Responsivesness with Media Query
    • Flex Wrap Layout Creation
    • Styling the Flex layout
    • Making Screen Responsive with Flex Wrap
    • Enhancing the responsiveness
  • Media Queries and Responsive Web Development
    • What is meant by Responsiveness
    • Example of Non_responsive website
    • Creating HTML Skeleton for non-responsive website
    • Styling the non responsive page
  • Media Queries Breakpoint for different devices
    • Different Device break points
    • Make Responsive in device upto 768px
    • Make Responsive for device width upto 468px
    • Make Responsive for device width above 1024px
    • Making Responsive between 769px and 1023px
  • Git and Github
    • Git and Github Part-1
    • Git and Github Part-2
    • Git and Github Part-3
    • Git and Github Part-4
  • CSS Grid
    • Setup Html and Css Layout – Part-1
    • Setup Html and Css Layout – Part-2
    • Background color to boxes
    • Display Grid with Rows and Columns
    • Fractional unit for occupying full width
    • Gap between row and column
    • Short hand for template rows and columns
    • Short hand for grid row and column gap
    • Row and Column lines
    • Moving Grid element position
    • Shorthand for row and column and full width
    • Auto Rows & Explicit and Implicit layout
    • Responsive behavior only with css grid without media queries
  • Source code
    • Source code

 

Practical CSS3 Flexbox Media Queries & CSS Grid MasteryPractical CSS3 Flexbox Media Queries & CSS Grid Mastery

Time remaining or 901 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate