By the end of this course, you will be able to
How to exploit the properties of CSS Grid to create advanced layouts, together with how to use the software to produce various basic and complex designs.
Whether CSS Grid is interchangeable with Flexbox and the differences between both of them, along with getting well versed in the former’s related jargon and terminology.
How to name the grid lines, align and organize your elements, and position multiple grid items, together with how to apply the aforementioned and more in a real project.
Course details
- 1 h 45 m/25 lessons
- Last updated: 3/4/2022
- 1 learning resources
- Course completion certificate
Course Content
Is CSS Grid alternative for flexbox?
CSS Grid terminology
Grid display property
Is CSS Grid alternative for flexbox?
CSS Grid terminology
Grid display property
Setting columns and rows
CSS Grid gap
Implicit and Explicit tracks
How to use minmax function
ِAuto-fill vs Auto-fit
Grid-auto-flow property
Positioning items with line numbers
Positioning items with span
Filling empty cells automatically
Grid template area (part 1)
Grid template area (part 2)
Implicit grid lines
Explicit grid lines (part 1)
Explicit grid lines (part 2)
Alignment properties
Place property
Project Overview
Create Header Section
Create Overlapped Section
Create Features Section
Create Gallery Section
Create Articles Section
About this course
Many people confuse good user experience with useful content, when in fact a good user experience should be synonymous with many other things, especially good design. To put it another way, if you are not to organize your content and showcase it in a simple, eye-friendly, and decent manner, then your best efforts are in vain. With that said, this training course is designed to get you acquainted with a powerful two-dimensional layout system; CSS Grid. Not only will it help you create well-built web layouts, but also deliver your product in the best way possible.
Course requirements and prerequisites
There are no requirements for this course. Your interest in the topic and your commitment to learning are all you need to achieve the utmost benefit from this course.
Mentor
Hesham Khaled
Frontend developer
97 Learners
1 Course