Mastery of Flexbox and Grid: 2 in 1 course for Flexbox&Grid

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: No more need of floating items

Chapter 2: === Welcome to Flexbox Section ===

Lecture 1: What is Flexbox

Lecture 2: Comparing the display values on individual items

Lecture 3: Comparing the display values on the parent

Chapter 3: Flexbox Properties of the parent (container)

Lecture 1: Understanding flex-direction and the two main axis

Lecture 2: Flex-wrap with row and row-reverse

Lecture 3: Flex-wrap with column

Lecture 4: Flex-flow property

Lecture 5: Justify-content on rows

Lecture 6: Justify-content on column

Lecture 7: Using margin:auto to separate flex items

Lecture 8: Align-items property for rows

Lecture 9: Align-items property for column

Lecture 10: Align-items for a row when each flex item has a height

Lecture 11: Align-content for rows

Lecture 12: Align-content for column

Chapter 4: Flex Gap

Lecture 1: Gap property for row

Lecture 2: Gap property for column

Chapter 5: Flexbox Layout Projects (With Row and Column)

Lecture 1: Flexbox Row Project – 2 equal columns in one row

Lecture 2: Flexbox Row Project – 3 equal columns in one row

Lecture 3: Flexbox Row Project – 1 and 4 equal columns in one row

Lecture 4: Flexbox Row Project – 5 equal columns in one row

Lecture 5: Flexbox Row Project – creating separate rows

Lecture 6: Flexbox Row Project – creating varying widths

Lecture 7: Flexbox Row Project – space between

Lecture 8: Flexbox Row Project – space between with varying widths

Lecture 9: Flexbox Row Project – restricted width design

Lecture 10: Flexbox Row Image gallery

Lecture 11: Column Challenge 1

Lecture 12: Flexbox Column Project – challenge 1 Solved

Lecture 13: Challenge 1 – Inserting contents into the column layout project

Lecture 14: Responsiveness of the contents inside the column layout

Lecture 15: Column Challenge 2

Lecture 16: Flexbox Column Project – challenge 2 Solved

Lecture 17: Challenge 2 – Inserting contents into the column layout project

Lecture 18: Responsiveness of the contents inside the column layout

Lecture 19: Column Challenge 3

Lecture 20: Flexbox Column Project – challenge 3 Solved

Lecture 21: Column Challenge 4

Lecture 22: Flexbox Column Project – challenge 4 Solved

Lecture 23: Column Challenge 5

Lecture 24: Flexbox Column Project – challenge 5 Solved

Lecture 25: Column Image Gallery Challenge

Lecture 26: Flexbox Column Image Gallery Project

Chapter 6: Nesting Flex Items

Lecture 1: Nesting flex items – rows

Lecture 2: Nesting flex items – columns

Chapter 7: A Flex Layout Project

Lecture 1: Flex Layout Project – part 1

Lecture 2: Flex Layout Project – part 2

Lecture 3: Responsiveness of Flex Layout Project

Chapter 8: Masonry Layout with flexbox

Lecture 1: Masonry Layout with flexbox – 3 Columns

Lecture 2: Masonry Layout with flexbox – 4 Columns

Lecture 3: Masonry Layout with gaps

Lecture 4: Image Gallery Masonry layout with flexbox

Chapter 9: Flexbox Properties of the flex items (child element)

Lecture 1: Order Property on Row – flex items

Lecture 2: Order Property on Column – flex items

Lecture 3: Flex-grow property on row – flex items

Lecture 4: Flex-grow property on column – flex items

Lecture 5: Flex-grow property on wrapped row and column – flex items

Lecture 6: Proportionality of flex-grow

Lecture 7: Flex-shrink Property on Row with % as flex-items width

Lecture 8: Flex-shrink Property on Row with pixels as flex-items width

Lecture 9: Flex-basis property

Lecture 10: Flex shorthand property

Lecture 11: Equal columns with flex basis

Lecture 12: Mixed columns with varying flex basis

Lecture 13: Align-self property

Lecture 14: Centering Flex Items Vertically and Horizontally

Lecture 15: A web Flex layout with flex grow

Chapter 10: === Welcome to CSS Grid Section ===

Lecture 1: Introduction To CSS Grid – display:grid

Chapter 11: Explicit Grid (Grid Container)

Lecture 1: Grid-template-columns

Lecture 2: Grid-template-rows

Chapter 12: Determining the grid track sizes

Lecture 1: Using length units (px, em, rem, etc) and percentages on track sizes

Lecture 2: Understanding percentages with grid-template-rows

Lecture 3: Using auto, min-content, max-content, fit-content, fit-content()

Lecture 4: Using the FR unit on track sizes

Lecture 5: Using the minmax() function on track sizes

Lecture 6: Using the repeat() function on track sizes

Chapter 13: Auto-fill versus Auto-fit

Lecture 1: Using auto-fit or auto-fill on track sizes

Lecture 2: Using auto-fit or auto-fill with minmax() on track sizes

Lecture 3: Creating a Responsive Grid Layout without media query

Chapter 14: grid-template and grid shorthand

Lecture 1: grid-template and grid shorthand properties

Chapter 15: Grid gap

Lecture 1: Gaps (Gutters) in grid layout

Chapter 16: Nesting Grid layout

Lecture 1: Nesting Grids – part 1