In this tutorial, we will build 5 layouts (which are 5 tasks) with CSS Grid, and at the end of the tutorial, you will be ready to use CSS Grid in your next projects.

If you want to code along, be sure to download the resources:

Download Resources: https://devchallenges.io/learn/tutorial/css-grid

__________ πŸ”– Tutorial Structure __________

[00:00] - Introduction
[00:29] - Project walkthrough
[01:05] - Task 1: Pancake Stack
[02:12] - Task 2: Simple 12 Columns Grid Layout
[05:03] - Task 3.1: Responsive Layout using 12 Columns Grid
[09:56] - Task 3.2: Responsive Layout using grid-template-areas
[14:20] - Task 4: Responsive Layout Without Media Query
[16:09] - Task 5: 12 x 12 Chess Grid
[17:54] - Happy Coding

#css #web-development #programming #developer

Learn CSS Grid by Building 5 Layouts in 17 Minutes | CSS Grid 2021
2.30 GEEK