Advanced CSS Grid Course

Name: Advanced CSS Grid Course
Rating: 4.6 (7 reviews)

Discover how to build modern and complex applications with CSS Grid, just like popular apps

Created byMohamad Salman

Last updated 12/2024

English

What you'll learn

Learn responsive design: Create websites and apps that look great on any device
Discover advanced CSS Grid techniques for creating websites and apps with expertise
You'll have the skills to create applications professionally and in a modern way.
Build 2 impressive and impactful projects for your portfolio to attract any potential clients
Practical Application: Gain not just theoretical knowledge but also hands-on experience by working on real projects.
Build a strong theoretical foundation.
Learn how to use Flexbox layout alongside CSS Grid.
Learn advanced properties like max-content, min-content, minmax, auto-fill, auto-fit, and much more for creating complex grid layouts.

Course content

4 sections • 40 lectures • 6h 28m total length

Please download the Course Materials0:32
My Setup2:35
Chill and Code0:07

Introduction to CSS Grid3:29
Building Your Initial Grid Foundations19:05
Getting Familiar with the fr Unit5:00
Placing Grid Items8:47
Spanning Grid Items8:04
Defining Names for Grid Lines11:13
Defining Names for Grid Areas6:23
Discover how to name grid areas with grid template areas, assign row and cell names, and use grid area to position items, including using a dot to denote empty cells.
Implicit Grids vs. Explicit Grids2:33
Styling the Implicit Grids7:47
Learn to style implicit grids in css grid layouts by using grid-auto-rows for height and grid-auto-flow: columns for width, contrasting with explicit grids defined by item sizes.
Aligning Grid Items5:33
Aligning Tracks8:16
Working with min-content and max-content8:00
Using minmax() function6:51
Learn the minmax() function to size grid items with min and max constraints in CSS grid. See how pixel ranges, max-content, and min-content determine layout based on container width.
Making the Most of auto-fit and auto-fill4:49
Explore auto-fill and auto-fit in CSS grid, learning how container width and 100px column size determine the number of columns and how empty columns behave.
When to Use CSS Grid and When Not To3:51
CSS Grid Properties: An Overview of Values and Settings

Project Overview and Setup4:21
Explore building a CSS grid driven dashboard setup in Visual Studio Code, including header, stats cards, and a sidebar, with flexbox where needed, and downloading course materials from GitHub.
Building the Sidebar21:09
Develop a dashboard layout by building a blue sidebar and a white main container using css grid, including html structure, grid templates, and centered icons.
Planning our Grid Items22:25
Building the Dashboard Header20:06
Building the Visitors, Customers and Orders Display12:30
Learn to build a three-box visitors, customers, and orders display using flexbox, with curved indicators, numbered metrics, shadows, rounded borders, and coordinated colors for a clean dashboard.
Building the Earnings Circle20:10
Building the VISA CARD and TRANSACTIONS Showcase24:14
Building the Earnings Statistics7:25
Building the Spent Time Statistics10:09
Building the User Post Profile14:27

Project Overview3:51
Planning our Grid Items15:50
Building the Header - Part 112:15
Building the Header - Part 212:02
Building the Sidebar12:10
Building the Gallery Header & Naming Gallery Areas10:13
Building the Gallery Images18:09
Building the Gallery Footer8:26
Responsive Design - Part14:38
Responsive Design - Part212:43
Responsive Design - Part37:58
Complete the responsive design section by finishing a css grid project, implementing a circular search icon with flexbox alignment and media queries for small screen adaptation.

Requirements

Basics of HTML and CSS

Description

Welcome to 'Master CSS Grid with 2 Beautiful Projects,' an exciting course designed to supercharge your CSS Grid skills! Whether you're just getting started or have CSS Grid experience, get ready to take your abilities to the next level.

We begin with the basics to ensure everyone can follow along. But that's just the start of the adventure. As we progress, you'll dive into advanced CSS Grid techniques that even seasoned developers will appreciate.

Here's the real thrill:

You'll have the chance to craft two impressive projects. These aren't just ordinary exercises; they're portfolio gems that will showcase your CSS Grid prowess. Imagine confidently designing advanced layouts for your applications, just like the ones you've admired.

And here's the cherry on top:

Do you want to create modern and complex applications like popular apps? Are you ready to learn CSS Grid and build stunning applications? By the end, you'll be able to design applications that look just as great as the ones you admire.

Here's an added bonus:

you'll also learn how to create responsive designs. So, not only will you be able to craft modern and complex applications, but you'll also acquire the skills to make them look fantastic on various devices.

Who this course is for:

Developers who want to create modern and complex layouts for their applications

Advanced CSS Grid Course

What you'll learn

Explore related topics

Course content

First Step3 lectures • 3min

Mastering CSS Grid: From Beginner to Expert16 lectures • 1hr 50min

Dashboard Project: Applying CSS Grid10 lectures • 2hr 37min

Delvofy Project: Responsive Design with CSS Grid11 lectures • 1hr 58min

Requirements

Description

Who this course is for: