Practical CSS3 Flexbox Media Queries & CSS Grid Mastery

Course Curriculum

Chapter 1: Introduction and Setup

Lecture 1: Course Overview

Lecture 2: Know Your Instructor & Get Help/Support

Lecture 3: Installing VS Code and Server extension

Lecture 4: Introduction to Flexbox

Lecture 5: Setup index.html and style.css files

Lecture 6: Reset margin padding box-sizing on universal operator

Lecture 7: Styling the Boxes

Chapter 2: Working with Flexbox

Lecture 1: Apply display flex on parent

Lecture 2: Flex Direction row row-reverse column column-reverse

Lecture 3: Flex grow shrink

Lecture 4: Justify Content Flex Start

Lecture 5: Justify Content Flex End

Lecture 6: Justify Content Center

Lecture 7: Justify Content Space-Around

Lecture 8: Justify Content Space-Between

Lecture 9: Why you should not use Float property

Lecture 10: Align Item Flex End

Lecture 11: Align Item Flex Start

Lecture 12: Align Item Center

Lecture 13: Flex Basis same as Width on Flex Item

Lecture 14: Responsivesness with Media Query

Lecture 15: Flex Wrap Layout Creation

Lecture 16: Styling the Flex layout

Lecture 17: Making Screen Responsive with Flex Wrap

Lecture 18: Enhancing the responsiveness

Chapter 3: Media Queries and Responsive Web Development

Lecture 1: What is meant by Responsiveness

Lecture 2: Example of Non_responsive website

Lecture 3: Creating HTML Skeleton for non-responsive website

Lecture 4: Styling the non responsive page

Chapter 4: Media Queries Breakpoint for different devices

Lecture 1: Different Device break points

Lecture 2: Make Responsive in device upto 768px

Lecture 3: Make Responsive for device width upto 468px

Lecture 4: Make Responsive for device width above 1024px

Lecture 5: Making Responsive between 769px and 1023px

Chapter 5: Git and Github

Lecture 1: Git and Github Part-1

Lecture 2: Git and Github Part-2

Lecture 3: Git and Github Part-3

Lecture 4: Git and Github Part-4

Chapter 6: CSS Grid

Lecture 1: Setup Html and Css Layout – Part-1

Lecture 2: Setup Html and Css Layout – Part-2

Lecture 3: Background color to boxes

Lecture 4: Display Grid with Rows and Columns

Lecture 5: Fractional unit for occupying full width

Lecture 6: Gap between row and column

Lecture 7: Short hand for template rows and columns

Lecture 8: Short hand for grid row and column gap

Lecture 9: Row and Column lines

Lecture 10: Moving Grid element position

Lecture 11: Shorthand for row and column and full width

Lecture 12: Auto Rows & Explicit and Implicit layout

Lecture 13: Responsive behavior only with css grid without media queries

Chapter 7: Source code

Lecture 1: Source code