Skillshare - CSS Grid for Beginners Theory and Practice Free Download

Skillshare – CSS Grid for Beginners Theory and Practice-ViGOROUS
English | Size: 2.13 GB
Category: Tutorial

Hi there!
My name is Sergey Shtyrlov. I’m currently working as a Frontend Developer and do various courses on web development.

In this course you will learn how to create and use CSS Grids. We will cover all the main features and properties, learn how to align columns, rows and grid items inside a grid container and practice the usage of the CSS Grid in seven small projects.

This course is for beginners. If you know HTML and CSS basics, then you are good to go.

We will start right from the beginning and will continuously build our knowledge step by step.

First we will dive into Grid Basics and its main properties: what it is, what elements it is comprised of, how to create different kinds of grid, use multiple CSS functions and distance values with it, explore implicit with explicit grids and how to construct grid in a more visual ways.

Then we will explore the grid alignment properties. You will learn what alignment properties can be used inside a grid container. We will go through each property and its values individually, look at what they can do and how they affect a grid and its items.

Finally, we will create seven projects using the CSS Grid in conjunction with other CSS properties, so that you would be able to practice your skills in creating CSS Grids.

Overall, the main goal of the course is to teach you how to create and use CSS Grids effectively, so that after taking the course you would be able to easily use CSS Grids in your own projects and work.

If you still haven’t yet touched a topic of CSS Grid, then it is probably a high time to change this.

Let’s get started!

What’s inside?

Grid Basics:

What is CSS Grid
Grid container
Grid track: Column
Grid track: Row
Grid FR (fraction unit)
Grid gap
Grid repeat function
Grid column start/end, shorthand property
Grid row start/end, shorthand property
Grid minmax function
Grid name lines
Grid auto-fill/auto-fit and the difference between two
Grid auto rows
Grid auto columns
Grid explicit vs implicit
Grid auto flow
Grid template areas
Inline grid and grid shorthand property
Grid alignment:

justify-content
align-content
justify-items
align-items
justify-self
align-self
place properties
Grid areas alignment
Grid practice projects:

Partners block
Navigation
FAQ block
Features list
Pricing plans
Places list with images and description
App UI screen with tiles
There are exercise files available so that you can follow along with me in the videos. The course also comes with the assignments so that you could practice the skills you have learned.
Skillshare.CSS.Grid.for.Beginners.Theory.and.Practice-ViGOROUS