Learn CSS Grid from zero to mastery
What you will learn
☑ Learning CSS Grid from zero to mastery
☑ Learning CSS Grid Terminology
☑ Learning all CSS Grid properties, units and functions
☑ Difference between CSS Grid & CSS Flexbox
☑ How to apply CSS Grid easily for your basic and complex designs
☑ Apply all CSS Grid properties and concepts on practical project
Description
CSS grid is a new way for creating a 2 dimensional layout that gives you the ability to create any advanced web pages layout with an easy way and literally short lines of code.
This course targets all front-end developers or if you are a designer who is coding some HTML & CSS for creating pages/ components layout.
In this course we start from beginning to know :
-
The CSS grid terminology (which are the basis that will help you learn CSS grid easily).
Then Will cover all the css grid properties that gives us the ability of creating advanced and creative layouts. Such as:
-
Grid display properties
-
Grid-template- columns&rows
-
Grid units
-
Grid-gap
-
Grid-auto-flow
-
The explicit & implicit lines
-
naming the grid lines
-
the Repeat and Minmax functions
-
Ways of positioning the grid items
-
Grid items overlapping
-
The grid alignments
And each property you will learn by practice. As there is an exercise file for each explained property in this course, so you can apply it by yourself after each video.
Not only that!
We will apply all these css grid concepts and properties in a real project, which is designed specifically for this course. so you can apply all what you will learn by this course on real practical project.
The course is 100% free for limited time. So what you are waiting for? enroll now and see you there 🙂
English
Language
Content
Introduction
Welcome to the CSS Grid course
Course materials
Intro to CSS Grid
Is CSS Grid alternative for flexbox?
CSS Grid terminology
Grid display property
CSS Grid container properties
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
CSS Grid items properties
Positoning items with line numbers
positoning 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)
CSS Grid alignments
Alignment properties
Alignment properties – practical
place property
Project
Project overview and how to start
section 1 (header)
section 2
section 3
section 4
section 5