Web Development


Advance CSS Grid - Build 4 Major Responsive Websites (2021)

Learn everything about css grid with flexbox and build production ready English, arabic and chinese websites and more...

3.95 (35 reviews)


10.5 hours


Nov 2020

Last Update
Regular Price

What you will learn

Build complex web layout in just couple minutes.

You will be able to create almost any layout based system, Latin(LTR), Arabic(RTL), Han CJK (Vertical).


Web technology changing so rapidly. we see lots and lots of new tech and feature almost everyday. these new tech and feature here to make our life easier then ever before. just like CSS Grid.

CSS Grid is first truly CSS Grid layout feature designed to layout the web. this new fascinating feature of css is here to give almost all kind of tool and properties who can create most complex grid layout in just blink of an eye.

SO in this course this what exactly you gonna learn. you will learn CSS Grid from start to finish and bottom to top. just everything by building 4 major websites.

We will build..

  1. Robotics website
  2. Arabic website
  3. Resume website
  4. Chinese Webiste

apart form that you will learn everything with many small demo project.

Source file are included.. let's get started .



Advance CSS Grid - Build 4 Major Responsive Websites (2021)
Advance CSS Grid - Build 4 Major Responsive Websites (2021)
Advance CSS Grid - Build 4 Major Responsive Websites (2021)
Advance CSS Grid - Build 4 Major Responsive Websites (2021)


Mastering the basics of css grid

Setting up project and enabling CSS gRid container

Working with column in css grid

Creating rows in css grid

Grid gap: creating gutters in grid layout

The fr unit

Important note about %, auto and fr unit

Super auto-fill and auto-fit

Nesting grid

Grid-template property

CSS grid and Flexbox

One-dimensional vs. two-dimensional layout

Box alignment in Flexbox and CSS Grid

Flexbox can css grid can't

Flexbox and css grid together

Auto-placement in CSS Grid Layout

Grid auto rows and grid auto columns

Grid auto flow

The dense value

Box alignment in CSS Grid Layout

Grid item alignment: justify-items and align-items

Grid alignment: justify-content and align-content

Single grid item alignment: justify-self and align self

Preview: responsive coming soon template

Project: building responsive coming soon template

Preview: building simple responsive image gallery

Project- building simple responsive image gallery

Line-based placement with CSS Grid

Positioning items by line number

The grid-column and grid-row shorthands

Understanding default spans

Grid area property

Stretching an item across the grid & counting backward

Using the span keyword

Powerful grid template areas

Understanding grid template areas

Spanning into multiple cells

Leaving cell empty

Grid template property v2

creating cards using css grid template area

Project Demo: Real world project with grid template area and media query

Responsive website project with grid template area and media query

Layout using named grid lines

naming grid lines

Giving multiple names to your lines

Implicit grid areas from named lines

Implicit grid lines from grid areas

Creating multiple lines using repeat function

CSS Grid functions

The repeat() function

The minmax() function

The fit-content() function

CSS grids, logical values and writing modes

Writing modes in css

Writing mode in grid layout

Writing mode and line based placement

[Project] Robotics Website: Building Modern Website with MDL & CSS Grid


Project file setup

Building transparent nav header

Magic drawer and auto close.mp4

Creating our main hero area

Working with product section

Creating vision-1 section

Creating vision-2 section

Creating service section and tags

Adding feature section

Adding brand section

Adding blog section

Robotics contact section

Creating robotics footer

Making it responsive in large and medium devices

Making our robotics looks good in mobile devices

Making sticky header

Adding smoothy scroll

Adding scroll-up button

Adding some improvement

[Project] Urdunews Arabic Website: "Right to Left" Website with MDL & CSS Grid


Setting up project file

Building main navbar

Adding drawer

Building our sidebar [featured news]

Adding social widget

Hero area and media

Creating first row and first column

Creating row-2 and column-2

Creating footer

Making our website responsive

Making header sticky

[Project] Resume Website- Building Responsive Website with Bootstrap & CSS Grid


building fixed sidenav

Creating main area

About page

Experience page

Education page

Skills page

Intrest page

Contact page

Resolving few fixes

Making our project responsive

Adding smooth scroll

[Project] Chinese Website: Building "Top to Bottom" Website with CSS Grid


Setting up project file & building HTML Structure

Styling our chinese website

Last thought !!

Wrap Up


Araby21 March 2021

Thorough, well-prepared course with resources for learning and reference. Using Visual Studio Code with built-in live server simplifies the process of following along, experimenting, and viewing files. Learned a lot and appreciate the instructor’s upbeat and on-point presentation.

Enrique1 April 2019

Great material and good pace while going to each chapter. The only question I have is how to change the font color in the horizontal menu?

Misako3 July 2018

The course is nice because I can learn grid layout quickly. I like some advice on vs code, javascript pointedly. People who work in front-end development get helpful information as well.

Mazen23 June 2018

Excellent course to learn CSS Grid. Rahul is clear and thorough. The practice projects are great for reviewing the concepts introduced.

Arin16 May 2018

Solid overall tutorial, covered material I was looking for. I have base familiarity (just above beginner level) with CSS-Grid, Flexbox, Bootstrap, JavaScript. This tutorial covered the new grid properties with examples and showed a nice approach to bringing (the new) CSS-Grid, Flexbox, Bootstrap and JavaScript together. The tutorial fast pace, zero bullshit time covering the history/development of CSS-Grid or spending too much time trying to explain the new CSS Grid properties. Base knowledge of HTML, Flexbox Bootstrap and JavaScript is definitely needed, the tutorial is fast pace (pretty much zero hand holding) but does an EXCELLENT job of showing how to bring it all together. Another tutorial by Aarthi Elumalai "Complete CSS Grid Course..." makes a nice companion tutorial. It is a fast pace tutorial but she covers more by example on grid positioning properties with lots of examples.


Udemy ID


Course created date


Course Indexed date
Course Submitted by