• views: 129
• date: 9 March 2025
• posted by: 0nelove

A course designed to give you an overview in using CSS Grid to design your HTML webpages

What you'll learn
An overview of Grid
How to use various properties that apply to a parent grid container
How to use various properties that apply to a child grid item
How to use the principles of Grid to design a HTML webpage

Requirements
Basic understanding of HTML and CSS.
A web browser is required. We will use Google Chrome and will frequently make use of the Chrome Dev Tools.
A coding editor is required. We will use VS Code with the Live Server plugin.

Description
This course is aimed to help you elevate your HTML webpage designs by applying many of the properties provided by the Grid layout model. In this course we will explore both the properties that can be applied to a parent grid container and the properties that can be applied to a child grid item.The Parent Grid container properties that will be addressed include:Grid Template Columns - Learn how to declare explicit columns within your grid using this propertyGrid Template Rows - Learn how to declare explicit rows within your grid using this propertyGrid Auto Rows - Understand how to generate implicit rows using this propertyGrid Auto Columns - Understand how to generate implicit columns using this propertyGrid Auto Flow - Learn how to use this property to control the flow of the gridGrid Column Gap - Learn how to use this property to add gaps between the columns within a gridGrid Row Gap - Learn how to use this property to add gaps between the rows within a gridGrid Gap - Understand how to use this property shorthand to define a gap between the rows and columns within a gridGrid Template Areas - Discover how to declare areas within your grid layoutGrid Template - Discover the shorthand to apply grid-template-rows, grid-template columns and grid-template-areas propertyGrid – Discover the shorthand to apply all of the implicit and explicit properties in a single declarationJustify Items - Understand how to position the grid items horizontally within a grid cellAlign Items - Understand how to position the grid items vertically within a grid cellPlace Items - Discover the shorthand for applying justify-items and align-items properties in a single declarationJustify Content - Learn how to position the columns horizontally within the grid containerAlign Content - Learn how to position the rows vertically within the grid containerPlace Content - Discover the shorthand to apply the justify-content and align-content properties in a single declarationThe Child Flex Item properties that will be addressed include:Grid Column Start And End - Discover how to size grid items by specifying a grid column start and grid column end valueGrid Row Start And End - Discover how to size grid items by specifying a grid row start and grid row end valueGrid Row/Grid Column - Explore the shorthand properties grid row and grid columnGrid Area - Learn how to use this property to define the grid item location and sizeJustify Self – Understand how to use this property to self align a grid item horizontally within a grid cellAlign Self – Understand how to use this property to self align a grid item vertically within a grid cellOrder – Learn how to use this property for controlling the ordering of the grid items within a gridThis course will also address the MATH involved when using properties like grid-template-columns and grid-template-rows so you know precisely how the track sizes you define for these properties will effect the size of your grid items.

Who this course is for
Developers who wish to expand their CSS knowledge by learning CSS Grid
Developers who would like to design their HTML webpages uing the CSS Grid layout model
Homepage



   
   
   

Forex Trading

Crypto Trading. 20 USD Bonus after KYC

We need your support!
Make a donation to help us stay online
        
Bitcoin (BTC)
bc1q08g9d22cxkawsjlf8etuek2pc9n2a3hs4cdrld
	
Bitcoin Cash (BCH)
qqvwexzhvgauxq2apgc4j0ewvcak6hh6lsnzmvtkem

Ethereum (ETH)
0xb55513D2c91A6e3c497621644ec99e206CDaf239

Litecoin (LTC)
ltc1qt6g2trfv9tjs4qj68sqc4uf0ukvc9jpnsyt59u

USDT (ERC20)
0xb55513D2c91A6e3c497621644ec99e206CDaf239

USDT (TRC20)
TYdPNrz7v1P9riWBWZ317oBgJueheGjATm

0 1 2 3 4 5

| Print version |

	Information
		Users of GUESTS are not allowed to comment this publication.