Advance CSS Grid – Build 4 Major Responsive Websites (2022)

Course Curriculum

Chapter 1: Mastering the basics of css grid

Lecture 1: Setting up project and enabling CSS gRid container

Lecture 2: Working with column in css grid

Lecture 3: Creating rows in css grid

Lecture 4: Grid gap: creating gutters in grid layout

Lecture 5: The fr unit

Lecture 6: Important note about %, auto and fr unit

Lecture 7: Super auto-fill and auto-fit

Lecture 8: Nesting grid

Lecture 9: Grid-template property

Chapter 2: CSS grid and Flexbox

Lecture 1: One-dimensional vs. two-dimensional layout

Lecture 2: Box alignment in Flexbox and CSS Grid

Lecture 3: Flexbox can css grid can't

Lecture 4: Flexbox and css grid together

Chapter 3: Auto-placement in CSS Grid Layout

Lecture 1: Grid auto rows and grid auto columns

Lecture 2: Grid auto flow

Lecture 3: The dense value

Chapter 4: Box alignment in CSS Grid Layout

Lecture 1: Grid item alignment: justify-items and align-items

Lecture 2: Grid alignment: justify-content and align-content

Lecture 3: Single grid item alignment: justify-self and align self

Lecture 4: Preview: responsive coming soon template

Lecture 5: Project: building responsive coming soon template

Lecture 6: Preview: building simple responsive image gallery

Lecture 7: Project- building simple responsive image gallery

Chapter 5: Line-based placement with CSS Grid

Lecture 1: Positioning items by line number

Lecture 2: The grid-column and grid-row shorthands

Lecture 3: Understanding default spans

Lecture 4: Grid area property

Lecture 5: Stretching an item across the grid & counting backward

Lecture 6: Using the span keyword

Chapter 6: Powerful grid template areas

Lecture 1: Understanding grid template areas

Lecture 2: Spanning into multiple cells

Lecture 3: Leaving cell empty

Lecture 4: Grid template property v2

Lecture 5: creating cards using css grid template area

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

Lecture 7: Responsive website project with grid template area and media query

Chapter 7: Layout using named grid lines

Lecture 1: naming grid lines

Lecture 2: Giving multiple names to your lines

Lecture 3: Implicit grid areas from named lines

Lecture 4: Implicit grid lines from grid areas

Lecture 5: Creating multiple lines using repeat function

Chapter 8: CSS Grid functions

Lecture 1: The repeat() function

Lecture 2: The minmax() function

Lecture 3: The fit-content() function

Chapter 9: CSS grids, logical values and writing modes

Lecture 1: Writing modes in css

Lecture 2: Writing mode in grid layout

Lecture 3: Writing mode and line based placement

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

Lecture 1: Introduction

Lecture 2: Project file setup

Lecture 3: Building transparent nav header

Lecture 4: Magic drawer and auto close.mp4

Lecture 5: Creating our main hero area

Lecture 6: Working with product section

Lecture 7: Creating vision-1 section

Lecture 8: Creating vision-2 section

Lecture 9: Creating service section and tags

Lecture 10: Adding feature section

Lecture 11: Adding brand section

Lecture 12: Adding blog section

Lecture 13: Robotics contact section

Lecture 14: Creating robotics footer

Lecture 15: Making it responsive in large and medium devices

Lecture 16: Making our robotics looks good in mobile devices

Lecture 17: Making sticky header

Lecture 18: Adding smoothy scroll

Lecture 19: Adding scroll-up button

Lecture 20: Adding some improvement

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

Lecture 1: Introduction

Lecture 2: Setting up project file

Lecture 3: Building main navbar

Lecture 4: Adding drawer

Lecture 5: Building our sidebar [featured news]

Lecture 6: Adding social widget

Lecture 7: Hero area and media

Lecture 8: Creating first row and first column

Lecture 9: Creating row-2 and column-2

Lecture 10: Creating footer

Lecture 11: Making our website responsive

Lecture 12: Making header sticky

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

Lecture 1: Introduction

Lecture 2: building fixed sidenav

Lecture 3: Creating main area

Lecture 4: About page

Lecture 5: Experience page

Lecture 6: Education page

Lecture 7: Skills page

Lecture 8: Intrest page

Lecture 9: Contact page