CSS Grid: The Complete Guide
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
9 students enrolled

CSS Grid: The Complete Guide

Learn how to create and use CSS Grids
New
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
9 students enrolled
Created by Sergey Shtyrlov
Last updated 5/2020
English
English [Auto]
Current price: $16.99 Original price: $24.99 Discount: 32% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 7 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn about the structure of the CSS Grid and how to practically use it (columns, rows, gaps, minmax function, repeat function, explicit, implicit, auto-rows, auto-columns, auto-flow, fraction units, name lines, auto-fill, auto-fit, template areas, grid alignment, shorthand properties)
Course content
Expand all 43 lectures 06:05:06
+ Grid: Basics
21 lectures 02:25:27
Grid container
04:41
Grid track: Column
09:12
Grid track: Row
08:37
Grid fraction unit (fr)
06:17
Grid gaps
04:41
Grid repeat function
07:53
Grid column start, grid column end and the shorthand property
08:18
Grid row start, grid row end and the shorthand property
03:30
Grid minmax function
07:49
Grid name lines
11:38
Grid auto-fill
06:43
Grid: Difference between auto-fill and auto-fit
09:54
Grid auto rows
04:54
Grid auto columns
05:47
Grid: explicit vs implicit
10:28
Grid auto flow
08:46
Grid template areas
11:19
Inline-grid and Grid shorthand property
08:34
Welcome to the first assignment of the course! I have prepared for you a couple of questions on the Grid topic and, what is more important, a little project to practice.
Assignment 1
7 questions
Module conclusion
00:39
+ Grid: Alignment
10 lectures 44:37
Module introduction
01:01
Grid: justify-content
09:32
Grid: align-content
06:17
Grid: justify-items
04:40
Grid: align-items
04:50
Grid: justify-self
03:28
Grid: align-self
03:09
Grid: place-content, place-items, place-self
07:20
Grid: areas alignment
03:50
Welcome to the second assignment of the course. Here we will have a little practice with the alignment properties. I have prepared several questions for you to answer and some tasks to accomplish as well.
Assignment 2
3 questions
Module conclusion
00:30
+ Grid: Practice
8 lectures 02:09:09
Module introduction
00:34
Grid: Partners block
10:46
Grid: Navigation
11:18
Grid: FAQ block
12:27
Grid: Features list
16:00
Grid: Pricing plans
25:38
Grid: Places list with images and description
28:51
Grid: App tiles
23:35
+ Conclusion
1 lecture 03:00
Next steps and Course wrap up
03:00
Requirements
  • CSS Basics, HTML Basics
Description

What's this course about?

In this course you will learn how to create and use CSS Grids. We will cover all the main features and properties, learn how to align columns, rows and grid items inside a grid container and practice the usage of the CSS Grid in seven small projects.


More details please!

CSS Grid is a major latest addition to the CSS spec. In this course I will teach you about what is CSS Grid, how to create it, customise and build small projects with it.  At the end of the course you will have a solid understanding of the CSS Grid, what it is capable of and how to use it in your own projects.

We will start from scratch. First we will dive into Grid Basics and its main properties: what it is, what elements it is comprised of, how to create different kinds of grid, use multiple CSS functions and distance values with it, explore implicit with explicit grids and how to construct grid in a more visual ways.

Then we will explore the grid alignment properties. You will learn what alignment properties can be used inside a grid container. We will go through each property and its values individually, look at what they can do and how they affect a grid and its items.

Finally, we will create seven projects using the CSS Grid in conjunction with other CSS properties, so that you would be able to practice your skills in creating CSS Grids.

If you still haven't yet touched a topic of CSS Grid, then it is probably a high time to change this. Let’s get started!


What should you know to take the course?

CSS basics, HTML basics


What's inside?

Grid Basics:

  • What is CSS Grid

  • Grid container

  • Grid track: Column

  • Grid track: Row

  • Grid FR (fraction unit)

  • Grid gap

  • Grid repeat function

  • Grid column start/end, shorthand property

  • Grid row start/end, shorthand property

  • Grid minmax function

  • Grid name lines

  • Grid auto-fill/auto-fit and the difference between two

  • Grid auto rows

  • Grid auto columns

  • Grid explicit vs implicit

  • Grid auto flow

  • Grid template areas

  • Inline grid and grid shorthand property

Grid alignment:

  • justify-content

  • align-content

  • justify-items

  • align-items

  • justify-self

  • align-self

  • place properties

  • Grid areas alignment

Grid practice projects:

  • Partners block

  • Navigation

  • FAQ block

  • Features list

  • Pricing plans

  • Places list with images and description

  • App UI with tiles


Who is teaching you?

My name is Sergey Shtyrlov. I'm a frontend developer. I've been working in this sphere for almost 7 years and continue doing it today. I've published several course here on Udemy and people seem to like them. I hope this course will help you to master the CSS Grid as well!

Who this course is for:
  • You want to learn CSS Grid
  • You want to learn modern CSS techniques
  • You want to improve your knowledge of CSS