Mastery of Flexbox and Grid- 2 in 1 course for FlexboxGrid

Mastery of Flexbox and Grid: 2 in 1 course for Flexbox&Grid, available at $19.99, has an average rating of 4.56, with 175 lectures, based on 9 reviews, and has 136 subscribers.

You will learn about You will learn how to create various layout styles with CSS Grid and Flexbox You will be able to create grid layouts using grid-template-areas You will learn how to create equal and unequal columns/rows using both CSS Grid and Flexbox You will be skilled on how to design MASONRY layout with flex and grid You will learn how to use the fractional unit (fr) in CSS Grid You will master how to create flex layouts with flex-basis You will be skilled on how to work with implicit grid and explicit grid You will learn how to use the CSS Media Query to make your web design mobile friendly and responsive. You will learn how to create image gallery and video gallery with CSS Grid and Flexbox You will be able to align and justify grid items and flex items You will learn the difference between auto-fill & auto-fit in Grid You will master how to use arbitrary grid line names in Grid You will be able to work with ALL flexbox properties and ALL Grid properties step by step You will creatively create the same web layout using flexbox and using grid This course is ideal for individuals who are This flexbox and grid course is for those who intend to be an expert in the craft of flexbox and CSS Grid layouts from absolute beginner to absolute professional or Creative minds who has a basic knowledge of pure CSS It is particularly useful for This flexbox and grid course is for those who intend to be an expert in the craft of flexbox and CSS Grid layouts from absolute beginner to absolute professional or Creative minds who has a basic knowledge of pure CSS.

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

Summary

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

Price: $19.99

Average Rating: 4.56

Number of Lectures: 175

Number of Published Lectures: 175

Number of Curriculum Items: 175

Number of Published Curriculum Objects: 175

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

You will learn how to create various layout styles with CSS Grid and Flexbox

You will be able to create grid layouts using grid-template-areas

You will learn how to create equal and unequal columns/rows using both CSS Grid and Flexbox

You will be skilled on how to design MASONRY layout with flex and grid

You will learn how to use the fractional unit (fr) in CSS Grid

You will master how to create flex layouts with flex-basis

You will be skilled on how to work with implicit grid and explicit grid

You will learn how to use the CSS Media Query to make your web design mobile friendly and responsive.

You will learn how to create image gallery and video gallery with CSS Grid and Flexbox

You will be able to align and justify grid items and flex items

You will learn the difference between auto-fill & auto-fit in Grid

You will master how to use arbitrary grid line names in Grid

You will be able to work with ALL flexbox properties and ALL Grid properties step by step

You will creatively create the same web layout using flexbox and using grid

Who Should Attend

This flexbox and grid course is for those who intend to be an expert in the craft of flexbox and CSS Grid layouts from absolute beginner to absolute professional

Creative minds who has a basic knowledge of pure CSS

Target Audiences

This flexbox and grid course is for those who intend to be an expert in the craft of flexbox and CSS Grid layouts from absolute beginner to absolute professional

Creative minds who has a basic knowledge of pure CSS

This course is designed to make you a world class front-end web designerwith CSS Grid and Flexboxas your tool. With the skills you will gather from this course, you can proudly create any website layout design from start to finish. It is an assurance because this Flexbox and CSS Grid course is modern, premium, adequately explained and well structured.

What you will learn.

You will be able to work with ALL flexbox properties and ALL Grid properties step by step

You will learn how to create various layout designs with CSS Grid and Flexbox

You will learn how to use the fractional unit (fr) in CSS Grid

You will be able to create responsive grid layouts using grid-template-areas

You will be skilled on how to design masonry layoutwith flexand grid

You will be skilled on how to work with implicit grid and explicit grid

You will learn the difference between auto-fill & auto-fit in Grid

You will be able to align and justify grid items and flex items

You will learn how to create image gallery and video gallerywith CSS Grid and Flexbox

You will learn how to create equal and unequal columns/rows using both CSS Grid and Flexbox

You will master how to use arbitrary grid line names in Grid

You will be able to create navigation menus and mega menus.You will learn how to add images and videos to mega menus

You will be creative with how to use the CSS Media Query to make your web design mobile friendly and responsive. This means mobile-first approach.

You will learn how to import font awesome in order to incorporate it in your design

You will thoroughly learn how to import Google fontsas part of your font family

You will be able to apply some CSS properties to your layout design such as margin, padding, position, border properties, etc.

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

Instructors

Pamch Tutor M.Ed
Educational Technologist | Bestselling Trainer | M.Ed

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 1 votes

4 stars: 3 votes

5 stars: 5 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!