CSS Grid Layout Tutorial Part H - CSS Tutorial for Beginners#19 - CSS Website Layout Tutorial

This tutorial is part H of the video series on CSS Grid Layout tutorials and this session talks about Grid Area Property. I have used the same code file that I used for the grid row property to make it easier for you to understand.
I have used shorthand in two ways for making the css grid areas. First way is Syntax as follows: grid-area{
row-start-line/column-start-line/row- end-line/column-end-line;
}
While using shorthand method, I only mention the values of the start and end row and column lines in the above syntax.

Another formula for the syntax would be :
grid-area{
row-start-line/span column/row- end-line/column-end-line;
}
In this shorthand, the only difference is that either one or two or more of the values could be shown as spanning the respective number of rows or columns rather than just mention start and end lines as shown above in the formula.
Towards the end of the video, I had a slip of tongue and mentioned this class as conclusion of grid row property instead of saying grid area property and I apologise for this . As you all know, we are all going through the turmoil of hectic home life due to covid-19 terror, so, may have done this mistake due to too many stress otherwise.
Nevertheless, I am safe and sound, and staying safe at home and also hope that you are also staying at home safe from the corona virus until this controlled restriction is lifted.
Remember to subscribe to this playlist to get more of the tutorials from the css grid layout tutorials that I will be publishing regularly for the entire grid series until the end. Thank you for watching this short tutorial. I am intentionally creating mini tutorials so that you are not stressed with long and tedious explanations and can understand easily and quickly!

For accessing the code please click here:
https://codepen.io/meeramenon07/pen/Z...
https://codepen.io/meeramenon07/pen/Z...

Subscribe for more such web development tutorials:    / @edtechbymeera  

Share this video with a friend:    • CSS Grid Layout Tutorial Part H - CSS Tuto...  

Watch next: CSS Full Course From Beginner to Expert Level :
   • CSS Full Course From Beginner to Expert Level  
#cssgrid #cssgridlayout
#edtechbymeera
#cssgridtutorial #cssgridlayouttutorial #CSSGridLayoutTutorial
Recommended Playlist: LEARN HTML5 FROM SCRATCH FULL COURSE FOR BEGINNERS
:    • LEARN HTML5 FROM SCRATCH FULL COURSE FOR B...  

Recommended Playlist: Javascript tutorial for absolute beginners:
   • JavaScript Tutorial for Beginners  

Bonus Playlist: Programming tips :
   • Learn Programming Tips For Beginners  

If you want to browse some projects to build : here are some projects Playlist:
   • Build html, css and JavaScript projects  

For business enquiries, please contact me at : meeramenon07@gmail.com

Let's connect on social media:
Facebook: edtech@edtech.meera
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
#edtechbymeera
#cssgridtutorial #csstutorialforbeginners #cssgridbasics
#cssgridlayout
#cssgrid
#CSSGridLayoutTutorial
#csstutorialforbeginners
#cssgridbasics