Summary
Keywords
Full Transcript
Starter Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-34_grid-areas/starter-code Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-34_grid-areas/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp Grid Template Areas are much more useful when we are making larger responsive layout. In this video we will see what are grid-template-areas and how can we use it to make our life easier. 📖 Chapters 00:00 - Introduction 01:21 - Download the Starter Code 01:40 - What is “grid-template-areas” in CSS Grid? 07:15 - How to use “grid-column” and “grid-row” to Get the Desired Result? 14:00 - Use “grid-auto-column” 20:25 - Use Media Queries to Make It Responsive 24:34 - Make the Previous Project Using “grid-template-area” 25:12 - Open the Last Project 26:14 - Quick Assignment 1 27:49 - Solution 36:35 - Quick Overview 38:18 - Practice on Frontend Mentor 38:50 - Link to Frontend Mentor Practice Solution Video 41:25 - Conclusion If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below. Social Media 🌐 Linkedin: https://www.linkedin.com/in/anurag-singh-web-developer/ 🌐 Instagram: https://www.instagram.com/procodrr/ 🌐 Twitter: https://twitter.com/anuragsinghbam 🌐 Telegram: https://t.me/+bq8CBsPL3Wc1MjU1 🌐 Discord: https://discord.gg/dMe9mer9B3 🌐 Portfolio: https://anuragsinghbam.com/ Music by geoffharvey from Pixabay
