Mastery of Flexbox and Grid: 2 in 1 course for Flexbox&Grid
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!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024