Udemy

Platform

English

Language

Web Design

Category

Ultimate CSS Grid Course: From Beginner to Advanced

Create CSS Grid layouts using the new grid system & use it together with CSS3 Flexbox and Sass for an amazing workflow

4.76 (579 reviews)

Students

2.5 hours

Content

Sep 2021

Last Update
Regular Price


What you will learn

Know and understand the CSS Grid specification

Create real-world grid layouts blazingly fast

Know in how far CSS Grid complements Flexbox

Understand even advanced concepts from the CSS Grid spec

Use all new properties defined for CSS grid layouts


Description

In this course, you'll...

  •  Learn how to use all CSS properties defined in the CSS Grid specification
  •  Complete several exercise sheets to apply your new skills and create your own layouts with CSS Grids
  •  Write concise and readable CSS code, even for complex layouts
  •  Sketch layout prototypes in no time using CSS grid layouts
  •  Learn the basics of how this complements Flexbox and can work in combination with Sass


What Students Say About My Web Design Courses

1) From my Flexbox course:

"Well explained. Efficient teaching. Great skill to learn for CSS. Already applying it to my code and saving time and headaches." - Shane
 
"Thanks to this course I've got the understanding that going to rework 70% of my current project just to optimize and even simplify the scripts and CSS.. time to wipe out few JS functions and referencing items =)"  - Dmitriy
 
"It just works. I was able to create most of a "holy grail" style, responsive layout with NO extra CSS, and convert an existing template, reducing the code by 90%, in less than two hours after completing this course"  - Paul
 
"Very clear and organized explanation about flexbox. It covers all you need to know about the topic. This is one of the few courses that claims to be "complete" and really is! Very well done! Thanks Peter."  - Fabio


2) From my Sass course:

"Great course! Very useful and detailed!"  - Vladislav
 
"This course provides an excellent in-depth look at how to get up and running using SASS/SCSS. I started with no experience using it and am now quite comfortable using it in all my projects. Highly recommended."  - Jerry
 
"Really good course. The instructor was very knowledgeable about SASS/SCSS and was able to provide explanations and examples that were relatively easy to follow assuming you have a pretty good understanding of CSS. Would definitely recommend the course to anyone who has a basic understanding of SASS/SCSS and wants to learn even more."  - John


What Else You Can Expect

As always, I'll answer all your questions inside the course to help you along the way.

There are many practice exercises included in this course for you to apply what you learn, along with my proposed solutions to look up on GitHub. So you'll get to apply and manifest your skills right away.

Remember there's a 30-day money-back guarantee so feel free to take a look inside the course with any risk. There are also several free preview lectures available for you to see if this course is for you.


Screenshots

Ultimate CSS Grid Course: From Beginner to Advanced
Ultimate CSS Grid Course: From Beginner to Advanced
Ultimate CSS Grid Course: From Beginner to Advanced
Ultimate CSS Grid Course: From Beginner to Advanced

Content

Introduction

Welcome to the CSS Grids Course!

What You'll Be Able to do After this Course

Intro to CSS Grid Layouts

What is CSS Grid?

Browser Support

Quick & Easy Set-Up

CSS Grid Terminology

Defining and Using CSS Grids

Intro

Enabling CSS Grid with display: grid

Defining the Grid: grid-template-rows & grid-template-columns

Arranging Grid Items: grid-row-start/end & grid-column-start/end

Spanning a Fixed Number of Rows or Columns: span

Naming Grid Lines

Defining Gutters: grid-row-gap & grid-column-gap

Source-Order Independence: order

Exercise Sheet 1: Apply What You Learned!

Using Grid Areas, Equal Sizes, repeat() & minmax()

Intro

Using Grid Areas: grid-area

Using Grid Areas: grid-template-area

Repeating Rows and Columns: repeat()

The fr Unit

Defining Minimum and Maximum Sizes: minmax()

Auto-Filling a Grid with Rows and Columns: repeat(auto-fill)

repeat(auto-fit)

Exercise Sheet 2: Apply What You Learned!

Justifying the Grid Container and Grid Items

Intro

Justifying Items Horizontally: justify-items

Aligning Items Vertically: align-items

Justifying the Container: justify-content

Aligning the Container: align-content

Overriding Alignments: justify-self & align-self

Exercise Sheet 3: Apply What You Learned!

The Implicit Grid and Grid Flow

Intro

The Implicit Grid: grid-auto-rows & grid-auto-columns

Flow for the Implicit Grid: grid-auto-flow

Shorthand When Using "grid"

Exercise Sheet 4: Apply What You Learned!

Advanced CSS Grids

Intro

Overlapping Grid Items

Nested Grids

CSS Grid and Absolute Positioning I

CSS Grid and Absolute Positioning II

CSS Grids in Practice

Intro

Layout Prototyping I

Coming Soon...

Bonus

Bonus Lecture


Reviews

P
Peter11 September 2020

It seems that the instructor at time of making this course did not fully mastered the concepts himself. The errors in the course have not been corrected and there seem to be quite some questions not answered by the author. Maybe Udemy should start a cleanup policy for abandoned courses.

S
Steve9 May 2020

This instructor is awesome!! He's one of the best I've seen. In all the time I've been learning on the web (maybe 3 or 4 years) ....I've seen maybe 2 or 3 others that are this good. Don't lose this instructor...he's awesome!!

B
Brian1 May 2020

This was a great refresher for me into using the grid layout system of CSS. I stumbled through it on my own for one of my own personal sites, not really understanding it completely. Now I have what I need to continue building my own websites for personal and customer use.

A
Albert3 October 2019

This is a great course and the instructor is fantastic! I learnt a concept that I never thought I could (Styling)! Kudos to Peter for being a great instructor and having great flow of material!

S
Samuel25 August 2019

Learn't quite a lot but this course seems fairly dated now and section 8 has been "coming soon" for what looks like over a year now, so appears to be abandoned, but definitely worth it.

D
Dennis20 August 2019

This would have a higher rating if the course was complete. The coming soon slide promises responsive website using CSS grid which I'm eager to learn. The preceding lectures were very informative but to leave students hanging at the end isn't right.

D
Daniel24 July 2019

Easy to learn, had no experience with CSS grid at beginning. Now comfortable with implementing on upcoming contracts.

L
Lina13 June 2019

The course has a great content, everything is explained very well, the only thing that irritates is that videos become blurry very often.

U
Udemy22 April 2019

The course itself is great. The only issue is the closed captioning. I use it to "hear better" - I am hearing impaired. But it is terrible. CSS is variably written as CSSA, DSS, CSA, Access; Grid comes out as grit, gritz, etc. There are lots of errors. It's distracting.

J
Jon16 April 2019

I was a little disappointed in this course. Through it you can learn some basics about how to assemble grids and manipulate them to some extent. I feel the course could use more information on when and where to use grids. Also, some of the items I was expecting in the course are listed under the "coming soon" lecture. The instructor is fairly good presenting but doesn't stop to explain critical aspects at certain times.

T
Thiago1 March 2019

Lowering my review in Dec 2019... Looks like this course was abandoned. An entire section about layout with the grid specification was expected, but there is not a word about it. I´lll willingly change my review as soon as the promised content be delivered.

R
Roliver19 February 2019

This course explain clearly how to use all of these important tools, it's a good course !Recommended!

R
Rene15 February 2019

Overall a good course. It gives a good basic understanding of grids and how they work. The instructor seems very knowledgeable and enthusiastic which shows in the lessons. If you want to learn about grid take the course.

R
Richard30 December 2018

Amazing course - easy to understand and the future of CSS period! Well explained in a methodical manner, from the fundamental foundations of Grid CSS all the way through to edge use cases. Great course which will give you a great understanding and command over CSS Grid - excellent 10/10

D
Daniel18 December 2018

This is exactly what I was looking for, good material for beginners. Unfortunately it seems that the instructor has stopped making videos for this course. The final section is incomplete with question about it's completion going back to a year ago.


1222864

Udemy ID

5/20/2017

Course created date

11/22/2019

Course Indexed date
Bot
Course Submitted by