Summary
Keywords
Full Transcript
Starter Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-31_css-grid/starter-code Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-31_css-grid/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp 📖 Chapters 00:00 - Introduction 00:59 - Download the Starter Code and Open in VS Code 01:11 - Quick Overview 04:09 - What is Grid Property in CSS? 07:46 - Columns vs Rows in CSS Grid 12:55 - Give Some Content and Styling to CSS Grid Items 15:49 - What Happens to All The Elements inside CSS Grid? 14:20 - Playing Around Grid Items 29:48 - Understand CSS Grid in Depth 32:37 - “grid-column-start” vs “grid-row-start” in CSS Grid 40:57 - “grid-column-end” vs “grid-row-end” in CSS Grid 42:22 - Playing Around Grid Lines 46:25 - Quick Assignment - 1 46:59 - Solution 1 50:48 - Magic of “span” Property in CSS Grid 56:24 - Quick Recap 57:24 - Handle Multiple Elements with CSS Grid 57:30 - How to Handle Multiple Elements inside CSS Grid? 01:02:02 - Row Gap vs Column Gap in CSS Grid 01:07:40 - Quick Assignment - 2 01:08:00 - Solution 2 01:10:15 - Playing Around CSS Grid! 01:14:27 - Keep On Learning and Playing Around Grid 01:16:03 - Practice More on CSS Grid Garden 01:16:50 - Use “percentage” Unit in CSS Grid 01:19:25 - Use “fr” Unit in CSS Grid 01:25:00 - 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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
