Mastering Css Grid With 2 Beautiful Projects

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

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.

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.Throughout the course, we'll include theory lessons to simplify complex CSS Grid concepts and provide a deeper understanding.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.

Overview

Section 1: First Step

Lecture 1 Please download the Course Materials

Lecture 2 My Setup

Section 2: Mastering CSS Grid: From Beginner to Expert

Lecture 3 Introduction to CSS Grid

Lecture 4 Building Your Initial Grid Foundations

Lecture 5 Getting Familiar with the fr Unit

Lecture 6 Placing Grid Items

Lecture 7 Spanning Grid Items

Lecture 8 Defining Names for Grid Lines

Lecture 9 Defining Names for Grid Areas

Lecture 10 Implicit Grids vs. Explicit Grids

Lecture 11 Styling the Implicit Grids

Lecture 12 Aligning Grid Items

Lecture 13 Aligning Tracks

Lecture 14 Working with min-content and max-content

Lecture 15 Using minmax() function

Lecture 16 Making the Most of auto-fit and auto-fill

Lecture 17 When to Use CSS Grid and When Not To

Lecture 18 CSS Grid Properties: An Overview of Values and Settings

Section 3: Dashboard Project: Applying CSS Grid

Lecture 19 Project Overview and Setup

Lecture 20 Building the Sidebar

Lecture 21 Planning our Grid Items

Lecture 22 Building the Dashboard Header

Lecture 23 Building the Visitors, Customers and Orders Display

Lecture 24 Building the Earnings Circle

Lecture 25 Building the VISA CARD and TRANSACTIONS Showcase

Lecture 26 Building the Earnings Statistics

Lecture 27 Building the Spent Time Statistics

Lecture 28 Building the User Post Profile

Section 4: Delvofy Project: Responsive Design with CSS Grid

Lecture 29 Project Overview

Lecture 30 Planning our Grid Items

Lecture 31 Building the Header - Part 1

Lecture 32 Building the Header - Part 2

Lecture 33 Building the Sidebar

Lecture 34 Building the Gallery Header & Naming Gallery Areas

Lecture 35 Building the Gallery Images

Lecture 36 Building the Gallery Footer

Lecture 37 Responsive Design - Part1

Lecture 38 Responsive Design - Part2

Lecture 39 Responsive Design - Part3

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