Скачать с ютуб PB101: L09 - Creating Common Page Layouts With CSS Grid в хорошем качестве

PB101: L09 - Creating Common Page Layouts With CSS Grid

Good news! It's time to actually start page-building! Remember the "everything is a box" lesson? Well, now you'll learn how to position those boxes in a typical page layout fashion. Here's the secret: Most websites mix and match the same basic layouts. They're not as fancy as they might seem at first glance! Here's the second secret: These layouts are super easy to create with CSS Grid. We don't even have to dive deep on Grid yet – surface-level grid concepts will get us really far! So, grab a drink and block out the next hour or so. I will teach you the basics of CSS Grid, and then we will build a real-world example page. Your homework is to build the same page as soon as you finish this training! ** MY TOOLS ** 🔥 AutomaticCSS (ACSS) - https://automaticcss.com 🔥 Frames - https://getframes.io See all my recommended tools here: https://geary.co/tools/ ** INNER CIRCLE ** Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back. ⭕ In-depth design & dev trainings ⭕ Business, sales, & marketing trainings ⭕ Agency resources & downloadables ⭕ Vibrant, quality community with zero toxicity ⭕ ...and much more! Learn more and join here: https://geary.co/inner-circle/ ** SOCIAL ** 👉 FB -   / marketingkev   👉 LinkedIn -   / kevingeary   ** CHAPTERS ** 0:00 Intro 2:23 Why Grid is Superior to Flexbox 5:39 Grid vs Flexbox (Equal Columns) 15:48 Basic Layouts With Fractional Units 18:21 The minmax Function 23:22 Easy Equal Columns With the Repeat Function 27:30 Grid vs Flex (Repeating Layouts) 30:08 Real-World Page Layout (Messagely) 33:14 Hero Section 50:24 Features 56:27 Talking Points 1:05:46 CTA Section 1:07:55 Wrap-Up