Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Language
English
Taught by
Pamch Tutor | M.EdTech | MCE
Rating
4 views
Course Overview
2 in 1 course to master Flexbox and Grid. Build Responsive Front-End Web Layouts using CSS Flexbox, CSS Grid and CSS.
This course is designed to make you a world class front-end web designer with CSS Grid and Flexbox as 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 people are saying about this course:
"I feel fulfilled" - Gana K.
"Amazing flex and grid course" - Yousef D.
"...This was an important course for me, because I've done a bunch of other HTML courses, but I haven't learned how to create a website layout properly. What's the point of learning about fonts, images, links, if you can't layout a responsive web page? I encourage anyone learning HTML for this to be your first course. I'm confident moving forward with my learning journey." - Tim A.
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 layout with flex and 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 gallery with 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 fonts as 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 Content
- 10 section(s)
- 161 lecture(s)
- Section 1 Introduction
- Section 2 === Welcome to Flexbox Section ===
- Section 3 Flexbox Properties of the parent (container)
- Section 4 Flex Gap
- Section 5 Flexbox Layout Projects (With Row)
- Section 6 Nesting Flex Items
- Section 7 A Flex Layout Project
- Section 8 Masonry Layout with flexbox
- Section 9 Flexbox Properties of the flex items (child element)
- Section 10 === Welcome to CSS Grid Section ===
What You’ll 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
Reviews
-
LLuc Anysz
The teacher's native accent is heavy and difficult to follow. The teacher could have used an external ccs file rather the online method, this would make things easier to follow.
-
KKyle Underwood
Wow, thank you for the course. This a very in-depth coverage of the Flexbox and Grid components.
-
EEuflates Celestino de Lima
Excelente, parabéns pelo conteúdo. Fácil prático e compreensivo para qualquer pessoa, mesmo que não entenda inglês. Euflates.
-
YYousef Dawood
Amazing flex and grid course
