CSS Grid Layout Tutorial Part I - CSS Tutorial for Beginners#20 - CSS Website Layout Tutorial

This CSS Grid Layout tutorial makes use of the Css grid template area property to show you you can use this property to create web layout templates and create website layout using these grid templates very easily using minimum coding .
You can create a website layout very easily and quickly with this css grid area template property.
First, create the container div and then fill it with the items that you can name according to the parts respectively. In this tutorial, I am naming the parts as Header, Nav, Main and the footer named as item1, item2, item3 and item4 respectively. After creating the div container with the above items, I proceed to the CSS to style the four items.

In the css file, I style the items individually by targeting the item1, item2, item3 and item4 respectively. By indicating the name that you allocate for the different areas following the naming convention as mentioned above depending on where you are placing the items in the website. By using the grid-template-areas property, you can create the required number of columns and rows as shown in the code. The columns are written with a space between each column and within open and closed inverted commas. When you finish the columns for the row, skip to the next line to start the columns for the next row and so on until you finish all the rows and columns. In this case, there are 6 columns in each row and a total of 3 rows.
This is a very fun and easy to create a quick web template. I will be continuing with this topic in the next tutorial. Subscribe to this channel so that you don’t miss any of the lessons in this interesting CSS Grid series.

The full code source is available at :https://jsitor.com/NN39pFXaC
Share this video with your friends who are eager to learn the css grid layout : https://youtu.be/HP8CinRrXkc

Subscribe for more such web development tutorials: https://www.youtube.com/channel/UCzsmG59Td5XqzZwipgJ0qJg/?sub_confirmation=1

Watch next: CSS Full Course From Beginner to Expert Level :
https://www.youtube.com/playlist?list=PLvsacu9cyzexCd_0c45vI0X7KdoxRBY18

Recommended Playlist: LEARN HTML5 FROM SCRATCH FULL COURSE FOR BEGINNERS
: https://www.youtube.com/playlist?list=PLvsacu9cyzexKRSGOKYrND5bt1-N81a0K

Recommended Playlist: Javascript tutorial for absolute beginners:
https://www.youtube.com/playlist?list=PLvsacu9cyzeyn-eCUlvJJGGfndsvbUZWS

Bonus Playlist: Programming tips :
https://www.youtube.com/playlist?list=PLvsacu9cyzezbH-FKS9wrd4C1ZV2fbBvj

#cssgrid #cssgridlayout
#edtechbymeera
#cssgridtutorial #cssgridlayouttutorial #CSSGridLayoutTutorial

If you want to browse some projects to build : here are some projects Playlist:
https://www.youtube.com/playlist?list=PLvsacu9cyzexxwVbfCXvPyq6hHw-8m4By

For business enquiries, please contact me at : [email protected]

Let's connect on social media:
Facebook: [email protected]
Pinterest: edtechbymeera
Twitter: @EdtechByMeera
Keep staying focused on your web developer's journey while I take you through your knowledge sharing journey from a novice to a ninja.


#cssgridlayout #cssgridlayouttutorial #cssgridtutorial #csstutorialforbeginners #cssgridbasics
#cssgridlayout
#cssgrid
#CSSGridLayoutTutorial
#csstutorialforbeginners
#cssgridbasics