Sick new hero design punches way above its weight!

Sick new hero design punches way above its weight! 🔗 **Source:** [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) > [!note]+ Document Notes > tags: [css-grid, flexbox, web-design, responsive-design] > author: [MISSING] > source: YouTube > reference: https://www.youtube.com/watch?v=eKIiUaHnvlQ > date created: 2024-12-19 14:30 > > # 🏷️ Title: Sick new hero design punches way above its weight! >  ## 🧰 Action Inbox - [H1] Create 2x2 CSS grid with uneven rows for hero layout — 00:00-02:30 #css-grid - [H2] Use grid positioning to achieve overlapping elements — 05:23-08:45 #layout - [H3] Implement responsive breakpoints with media queries — 15:30-22:00 #responsive ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Video Source](https://www.youtube.com/watch?v=eKIiUaHnvlQ) ## 📝 Summary - Tutorial demonstrates building a complex hero layout with overlapping elements using CSS Grid - Combines CSS Grid for positioning with Flexbox for component alignment - Covers responsive design implementation with multiple breakpoints - Uses GenerateBlocks WordPress page builder for practical implementation - Shows how grid positioning allows precise control over overlapping content ## 📖 Main Content The video teaches how to create a sophisticated hero section layout that features overlapping elements using CSS Grid. The design includes main content, a large image, and stat cards that overlap the image in an aesthetically pleasing way. The instructor explains the grid system conceptually before implementing it practically, showing how to use grid line numbers for precise positioning. The tutorial also covers making the layout fully responsive using media queries and combining CSS Grid with Flexbox where appropriate. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/eKIiUaHnvlQ?t=0) — [H1] Project overview and grid planning - Key idea: Complex overlapping layouts can be simplified using CSS Grid - Evidence: "A layout like this really lends itself to using CSS grid" #### ⏱️ [02:30](https://youtu.be/eKIiUaHnvlQ?t=150) — [H2] Grid structure breakdown - Key idea: 2x2 grid with uneven row heights handles the layout - Evidence: "What we have here is essentially a 2x2 grid. We have two columns running on the left and right and then two rows" #### ⏱️ [04:15](https://youtu.be/eKIiUaHnvlQ?t=255) — [H3] Grid positioning strategy - Key idea: Grid line numbers control precise element placement - Evidence: "Our image needs to span from column 2 to column 3... from row one and go all the way down to row three" #### ⏱️ [06:30](https://youtu.be/eKIiUaHnvlQ?t=390) — [H1] Building the HTML structure - Key idea: Three main containers handle content, image, and overlapping elements - Evidence: "We're going to need three boxes... main content... image wrapper... CTA plus stat cards" #### ⏱️ [09:45](https://youtu.be/eKIiUaHnvlQ?t=585) — [H2] Styling stat cards component - Key idea: Flexbox handles internal card layout and spacing - Evidence: "Change this to a display of flex so I can get these items next to each other" #### ⏱️ [12:20](https://youtu.be/eKIiUaHnvlQ?t=740) — [H3] Implementing CSS Grid layout - Key idea: Grid template creates the foundation for positioning - Evidence: "We're going to change this to a display of grid... use our little helper here for the two column grid" #### ⏱️ [13:45](https://youtu.be/eKIiUaHnvlQ?t=825) — [H1] Grid positioning implementation - Key idea: Explicit grid positioning creates overlapping effects - Evidence: "Image wrapper... grid column 2 to three... rows 1 to 3... stat cards... column 1 to three... rows 2 to 3" #### ⏱️ [15:30](https://youtu.be/eKIiUaHnvlQ?t=930) — [H2] Adding spacing and padding - Key idea: Padding controls element spacing without affecting grid alignment - Evidence: "120 of right just to push it away from that image... 24 from the right and 24 from the bottom" #### ⏱️ [17:00](https://youtu.be/eKIiUaHnvlQ?t=1020) — [H3] First responsive breakpoint - Key idea: 1130px breakpoint prevents collision between elements - Evidence: "We can see it actually collides around the 1100 mark... set our media query maybe here around 11:30" #### ⏱️ [18:45](https://youtu.be/eKIiUaHnvlQ?t=1125) — [H1] Stacking elements at medium screens - Key idea: Flex direction column-reverse reorders content appropriately - Evidence: "Change this flex direction to column... column reverse... button should go below these stack cards" #### ⏱️ [20:30](https://youtu.be/eKIiUaHnvlQ?t=1230) — [H2] Single column grid at 1000px - Key idea: Grid changes to single column with explicit row positioning - Evidence: "Change this to a one column grid... main content 1 over 2... image wrapper 2 over 3... stack cards 3 over 4" #### ⏱️ [22:15](https://youtu.be/eKIiUaHnvlQ?t=1335) — [H3] Card wrapping at 820px breakpoint - Key idea: Flex wrap prevents text breaking to multiple lines - Evidence: "Allow all these cards to wrap... flex wrap and choose wrap... change this down to maybe two rim" #### ⏱️ [23:30](https://youtu.be/eKIiUaHnvlQ?t=1410) — [H1] Final mobile adjustments - Key idea: Square aspect ratio improves image prominence on mobile - Evidence: "Change an aspect ratio... one over one just so the image is a big square" #### ⏱️ [24:45](https://youtu.be/eKIiUaHnvlQ?t=1485) — [H2] Grid vs Flexbox philosophy - Key idea: Both CSS Grid and Flexbox have specific strengths for different use cases - Evidence: "They both have their strengths and weaknesses... CSS grid made it really nice to overlap things... stack cards work better when using flexbox" ## 📚 References - [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) - [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) - [GenerateBlocks](https://generateblocks.com/) ## 🗣️ Paraphrase - Complex overlapping layouts become manageable when broken down into a simple 2x2 CSS Grid structure - Grid line positioning allows precise control over how elements span columns and rows to create overlaps - Responsive design requires multiple breakpoints with different layout strategies for each screen size - Combining CSS Grid for positioning with Flexbox for alignment provides the most flexible solution ## 📰 Newsletter This week's design spotlight showcases an elegant solution for complex hero layouts using CSS Grid! The tutorial demonstrates how a seemingly complicated overlapping design breaks down into a simple 2x2 grid structure, making it accessible for WordPress developers at any skill level. Key takeaways include using grid line numbers for precise positioning, implementing responsive breakpoints that prevent element collisions, and knowing when to combine CSS Grid with Flexbox for optimal results. The practical GenerateBlocks implementation makes this immediately applicable to client projects. Resources: [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/), [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), [GenerateBlocks Documentation](https://docs.generateblocks.com/) ## ✅ Action Items #### WordPress - Core: Evaluate grid layout support in block editor themes - Themes: Review theme grid implementation patterns and responsive strategies - Design: Create grid layout component library for block themes #### Community - Contributors: Document CSS Grid best practices for WordPress themes - Maintainers: Establish grid layout standards for block patterns ## 🧪 Hypotheses - CSS Grid adoption increases when developers see practical overlapping layout examples - Combining Grid and Flexbox reduces development time compared to using either alone - Multiple responsive breakpoints prevent layout collisions better than single breakpoints - Visual grid planning improves implementation accuracy and reduces debugging time ### 📊 Methodology - A/B test grid vs flexbox-only implementations measuring development time - User testing on responsive breakpoint effectiveness across devices - Survey developers on CSS Grid confidence before/after practical tutorials ### ❓ Questions - How does CSS Grid browser support impact adoption in WordPress themes? - What's the optimal number of responsive breakpoints for complex layouts? - How can WordPress block patterns better leverage CSS Grid capabilities? ### 🔮 Future Research - CSS Subgrid implementation patterns for WordPress themes - Container query integration with CSS Grid for component-level responsiveness - Performance impact of complex grid layouts on WordPress sites ### 💡 Implications - Practice: Developers can create more sophisticated layouts without complex positioning hacks - Education: Visual grid planning should precede code implementation in training materials - Funding: Advanced CSS features require ongoing education budget allocation ### 🧠 Learning Styles Assessment Reading level estimate: 8.5 (Flesch-Kincaid Grade Level) #### 👀 Visual learners - Present: Grid overlay diagrams, numbered grid lines, visual breakdowns - Improve: Interactive grid visualizer, color-coded grid areas #### 🔊 Aural learners - Present: Step-by-step verbal explanations, reasoning for each decision - Improve: Audio-only version focusing on CSS concepts #### 🗣️ Verbal learners - Present: Clear terminology definitions, analogies to physical layouts - Improve: Glossary of grid terms, comparison table Grid vs Flexbox #### 🧩 Kinesthetic learners - Present: Hands-on building exercise, live code demonstration - Improve: Downloadable starter files, practice exercises with variations #### 🧠 Logical learners - Present: Grid line numbering system, systematic breakpoint approach - Improve: Decision tree for grid vs flexbox choice, responsive strategy flowchart #### 🧑‍🤝‍🧑 Social learners - Present: Comments section engagement, shared project showcase - Improve: Community challenges, peer code review sessions #### 🧘‍♀️ Solitary learners - Present: Complete tutorial that can be followed independently - Improve: Self-assessment checklist, troubleshooting guide #### 🌿 Naturalistic learners - Present: Organic layout evolution through breakpoints - Improve: Layout ecosystem metaphors, natural spacing relationships ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive element names - Improve: ARIA labels for grid regions, landmark roles #### Keyboard navigation - Present: Standard tab order through interactive elements - Improve: Focus management in overlapping content areas #### Contrast and readability - Present: High contrast code examples, clear visual hierarchy - Improve: Dark mode code examples, larger font options #### Text resizing and reflow - Present: Responsive design accommodates text scaling - Improve: Test layout at 200% zoom explicitly #### Media and captions - Present: Video tutorial with clear visual demonstrations - Improve: Closed captions, transcript with timestamps #### Forms and interactions - Present: Clear button styling and hover states - Improve: Focus indicators for all interactive elements ### 🌍 DEIB Assessment #### Cultural breadth - Present: Generic "Richmond" location example - Improve: Multiple city examples from different regions #### Inclusive language - Present: Technical terms clearly explained, neutral tone - Improve: Avoid idioms like "punches above its weight" #### Neurodiversity support - Present: Step-by-step structure, clear progression - Improve: Section summaries, progress indicators #### Representation - Present: Focuses on technical implementation - Improve: Include diverse use cases beyond tourism sites #### Psychological safety - Present: Encouraging tone, acknowledges learning curve - Improve: Explicit "no stupid questions" messaging ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Grid system principles correctly applied to specific layout - Inductive strength: Responsive patterns generalized from specific breakpoint issues - Causal reasoning: Clear cause-effect between grid positioning and overlapping results - Analogical strength: Grid lines compared to physical layout constraints #### Fallacies - Appeal to popularity: "Grid videos have been really well-received" - popularity doesn't prove effectiveness - False dilemma: Grid vs Flexbox framed as either/or when combination is often best #### Tone of voice - Overall tone: Educational and encouraging, demonstrates concepts clearly with practical examples ### 🛡️ DARVO Analysis - Deny: No concerning content identified - Attack: No attacking behavior present - Reverse victim/offender: No relevant dynamics present - Emotional cues and rhetoric: Positive, educational tone throughout ## 🎯 Conclusion This tutorial effectively demonstrates that complex overlapping layouts become manageable when approached systematically through CSS Grid. The combination of visual planning, practical implementation, and responsive considerations provides a complete framework for building sophisticated hero sections. The key insight is that understanding both CSS Grid and Flexbox strengths allows developers to choose the right tool for each specific layout challenge, resulting in cleaner, more maintainable code. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] CSS Grid enables complex overlapping layouts > [!quote] [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed 2024-12-19. > "A layout like this really lends itself to using CSS grid" Demonstrates practical application of grid for overlapping hero elements. [view highlight](https://youtu.be/eKIiUaHnvlQ?t=0#H1) #xref #articleseed ID:rw_001 ### [H2] Grid line positioning provides precise control > [!quote] [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) > "Our image needs to span from column 2 to column 3 and from row one to row three" Shows how numbered grid lines enable exact element placement. [view highlight](https://youtu.be/eKIiUaHnvlQ?t=255#H2) #xref ID:rw_002 ### [H3] Responsive breakpoints prevent layout collisions > [!quote] [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) > "We can see it collides around the 1100 mark, so we'll set our media query at 11:30" Strategic breakpoint selection maintains layout integrity across devices. [view highlight](https://youtu.be/ --- ## Full Transcript [00:00] I just started designing a new project [00:02] for a client, and when I came up with [00:03] this hero layout, I was really excited [00:05] about how it turned out, but a little [00:07] bit worried about exactly how I would [00:09] build it. There's some overlapping [00:11] pieces here and some interesting things [00:13] that I don't see in every single [00:14] project. A layout like this really lends [00:17] itself to using CSS grid, and in the [00:19] last few grid videos I've done, they've [00:21] been really wellreceived. So, I thought [00:22] we'd break this layout down today to [00:24] talk about how we can make this into its [00:26] most simplistic form, lay out this grid, [00:29] and then figure out how to place [00:30] everything inside the cells we need to [00:32] to get that cool overlapping effect. I [00:35] think it's a pretty neat little trick, [00:36] and you'll learn a few things along the [00:37] way. So, if that sounds interesting to [00:39] you, then stick around and let's get [00:40] started. So, we'll just kind of ignore [00:42] the header for now. We're not going to [00:43] worry about that in this demo. What [00:45] we're really focused on is this hero [00:46] section. So you can see we have this [00:49] main content over here on the left. [00:51] Underneath it we have a CTA, this [00:53] explore Richmond button and a row of [00:56] stat cards that kind of overlap the [00:58] image that's over on the right hand [01:00] side. So if we overlay a possible grid [01:03] on top of this, what we have here is [01:05] essentially a 2x two grid. We have two [01:08] columns running on the left and right [01:10] and then two rows, one on the top and [01:12] one on the bottom. Now the columns are [01:14] even. They're just split 50/50 right [01:16] down the middle of the screen, but the [01:18] rows are actually different heights. [01:19] This top row is quite a bit bigger than [01:21] the bottom row, even though this bottom [01:23] row has quite a bit of padding in [01:24] between the cards and the top and bottom [01:27] of its constraints. So, if we look at [01:29] each individual piece here, we have this [01:32] main content that kind of goes in the [01:33] top left. It doesn't overlap anything. [01:35] So, we can put it in the first column [01:38] and the first row. Now, the image goes [01:40] next to it. It doesn't overlap columns [01:43] here, but it does overlap rows. The [01:45] image is going to span from the [01:46] beginning to the end of the second [01:48] column. And it's going to span all the [01:50] way from the top of the first row to the [01:52] bottom of the second row. And then we [01:55] bring in the stack cards, which are [01:56] going to span the entire width. So from [01:58] the start of the first column to the end [02:00] of the first column, but it's only going [02:02] to span one row, which is the second row [02:04] in here. So we want it to start at that [02:05] second row line and finish at the third. [02:08] This way we can get our image and stack [02:10] cards to overlap just the way we want [02:12] it. If we go back to our drawing here, [02:14] we have our columns and our rows. The [02:16] columns are numbered starting with one [02:18] all the way on the left hand side. The [02:21] next one is two and then the end of this [02:23] second column is three. So it can be a [02:25] little bit confusing when you're dealing [02:26] with column two to say to go to three, [02:29] but we're counting the start of each one [02:31] of these lines. The same thing happens [02:33] with the rows, but here we start at the [02:35] top and then work our way down. So since [02:37] we have two rows, we have these grid [02:39] lines 1 2 and three. So in order to [02:42] place this content, we need to think [02:44] about what grid cells everything needs [02:45] to live in. Our main content here can go [02:48] from 1 to two and from one to two on the [02:51] rows, which is what it's going to do by [02:53] default. Our image, however, needs to [02:55] span from column 2 to column 3. So it [02:58] starts on this second column here and [03:00] goes all the way to the end. And then [03:02] for the rows, it needs to start at row [03:04] one and go all the way down to row three [03:07] so that it can expand to the bottom of [03:08] our grid. And finally, this CTA row, [03:12] it's going to start at row two and go to [03:14] row three. And it's also going to start [03:16] from column one and go over to column 3. [03:19] Of course, this is just a lot of talk [03:21] about theory, but I wanted to set this [03:22] up so you could see what I was doing [03:24] once I got into the builder. And [03:26] hopefully then it will all start to [03:27] click. So, let's go ahead and jump [03:29] inside generate blocks now and start to [03:30] build some of this out. Now, I don't [03:32] have any kind of framework installed [03:34] here, but I do have a few little helpers [03:36] like my little section reusable block [03:38] that we'll reuse throughout this. We [03:40] have a button class as well, but for the [03:42] most part, I'm going to be doing all of [03:43] this from scratch. So, we have our [03:45] section with our inner wrapper. Of [03:46] course, the inner wrapper is just [03:48] constraining our content width. And [03:50] inside of it, essentially, we're going [03:51] to need three boxes. This first one [03:53] here, we'll go ahead and rename. This is [03:55] going to be our main content. I'm just [03:56] going to label these the same as I did [03:58] inside of Figma. This is going to be our [04:00] image wrapper. And then here at this [04:03] last container, we'll rename that. [04:05] That's going to be our CTA plus our stat [04:07] cards. [04:10] Now, inside of this main content, we [04:12] know that we're going to need a [04:13] headline, which is just going to say [04:15] choose a city that lets you breathe. I'm [04:17] going to go ahead and change this to an [04:18] H1. We also had a little highlight on [04:20] the word breathe here, so I'm going to [04:22] go ahead and do that. Of course, this [04:23] isn't a full site, so I should be [04:25] putting classes on all these things. But [04:27] for the point of demo, I'm just going to [04:28] do this on the default generate blocks [04:30] classes since this isn't going to expand [04:32] to anything bigger in this site. Now, [04:34] under that, we're going to need a text [04:36] block. And I'll just paste in the text [04:38] from our Figma drawing. I want to make [04:40] sure to go ahead and get rid of the [04:41] bottom margin that comes on those [04:43] paragraphs. So, we can go ahead and snug [04:45] things up there. Now, next, inside this [04:47] image wrapper, I want to go ahead and [04:49] put an image. We'll grab the image I [04:51] already have in my media library. I do [04:53] want to make sure to change the display [04:55] of that to block. If not, there's a [04:56] little bit of margin at the bottom of [04:58] this that kind of gets in the way. And [05:00] then I just want to make sure to set the [05:02] width and height both to 100%. Because [05:05] I'm going to want this to always fill up [05:06] that container. [05:08] And then inside of our stack cards, [05:10] we're going to have two containers in [05:11] here as well. The first one is going to [05:13] be our button wrapper. So I'll just go [05:15] ahead and put a button in here. Now, you [05:17] don't necessarily need to put this [05:18] button inside of a container. It could [05:20] just be directly inside the stack cards [05:22] wrapper, but just in case I ever want to [05:24] put something else in here, I have that [05:25] option and it's not really hurting [05:27] anything. So, in here, this is going to [05:29] say explore Richmond, Virginia. And like [05:32] I said, I already have a class set up [05:34] for my buttons here. So, I'm just going [05:36] to go ahead and add that so we don't [05:37] have to style that button completely [05:38] from scratch. [05:40] Now, inside this wrapper, this is what's [05:42] going to hold all my stat cards. I'm [05:44] going to have my individual stat card [05:46] here. I'll go ahead and rename this stat [05:48] card. And for our container, I'm going [05:51] to rename this stat card wrapper. Now, [05:55] for these stat cards, since there's [05:57] going to be multiple of them, I'm going [05:58] to go ahead and give this a class [06:00] because it is going to help us inside [06:01] this demo. So, we'll just call this stat [06:03] card. Go ahead and create that class. [06:07] And then inside of here, I want to set [06:08] some of that styling. So, it had a white [06:10] background. [06:11] It had about 24 pixels of padding on the [06:13] top and 40 on the left and right. We'll [06:16] go into our border radius and we're [06:19] going to change this to 40 pixels of [06:20] border radius. And while we're here, [06:23] let's go ahead and go into our [06:24] typography and set that text alignment [06:26] to center. And now we can go ahead and [06:28] add a paragraph here. This first one [06:30] said 7 miles. And then another paragraph [06:33] underneath it. Go ahead and make sure to [06:35] use the generate blocks text block as [06:37] well. We probably want to put classes on [06:39] these as well. So, this is going to be [06:41] stat card [06:43] description. [06:45] Go ahead and save that. We want to make [06:48] sure to get rid of that bottom margin on [06:50] it. And this is going to be our stat [06:52] card double title. Go ahead and create [06:56] that as well. And I think we're going to [06:58] make this quite a bit bigger. So, let's [07:00] do something like three rim. We'll [07:02] change the text color to the blue from [07:04] our palette. And then we'll make sure to [07:05] get rid of the bottom margin there as [07:07] well. I think that's a good start at [07:09] least. So, I'm going to go ahead and [07:10] duplicate this twice. And I'll go ahead [07:12] and fill in the rest of this content. [07:14] So, I've done a little bit of mix of [07:16] just putting content in and styling. [07:18] This is probably the most styled, so [07:19] we'll just stay with that for now. Here [07:21] on the stack card wrapper, I do want to [07:23] go ahead and change this to a display of [07:25] flex so I can get these items next to [07:26] each other. We'll go ahead and give this [07:28] a column gap of 16 pixels. Eventually, [07:31] I'm going to need a row gap, too. So, [07:32] I'll go ahead and put it on here now, [07:34] even though it's not going to really [07:35] affect things. Now, in our stats, our [07:39] CTA and stats card wrapper, let's go [07:41] ahead and change that to flex as well. I [07:44] want to change the alignment to center [07:45] just to center align that button. And [07:47] then I'm going to change the justify [07:48] content to space between. That's just [07:50] going to allow us to have the button [07:52] wrapper over here on the left and then [07:53] the stack card wrappers pushed all the [07:55] way to the right. All right, we're [07:57] getting a little bit closer now. Let's [07:59] go back to our image wrapper. And I know [08:01] I want to put a big border radius on [08:02] this. I think it was 48 pixels inside my [08:04] drawing. And I'm just going to go ahead [08:06] and set that overflow to clip on both [08:08] the X and Y axis. That's just going to [08:11] make sure that it gives us a border [08:13] radius on that image since the container [08:15] that's holding the image is kind of [08:17] clipping that off of there. And then I [08:19] don't think we need to do anything else [08:20] to our main wrapper here. So let's go [08:22] ahead and start to get this grid set up. [08:24] To do that, I'm going to go to the [08:26] wrapper. We're going to change this to a [08:27] display of grid. And then inside of our [08:29] grid layout, I'm just going to use our [08:31] little helper here for the two column [08:33] grid. That's going to be a good start [08:35] for us. Now, as far as the rows, we do [08:37] have two rows here that we're going to [08:39] be working with. But by default, the [08:41] grid template columns is really set up [08:42] to be auto, even though you don't see [08:44] that. And that's just going to allow [08:46] each one of the rows to be the size of [08:48] the content inside of it. I just [08:50] mentioned this because you don't want to [08:51] put one FR 1 FR here. That's going to [08:54] make both of these rows the same height, [08:56] which really isn't what we want in this [08:57] situation because our top row is bigger [09:00] than our smaller row. So, we'll just get [09:01] rid of that and leave it blank. And [09:03] that's a good starting place for us. But [09:05] now we need to start placing everything [09:06] on the grid. If we go to our image [09:09] wrapper here, we'll go inside of layout [09:11] and then grid layout. And we can go down [09:13] to our grid column. If we remember back [09:15] to our Figma drawing, this was going to [09:17] span columns 2 to three. And it was [09:19] going to spans row 1 2 3, which is going [09:22] to allow it to overlap here. Now, for [09:25] our stat cards, we're going to go into [09:27] that same box here, and under grid [09:28] column, we're going to do one to three, [09:30] which is going to allow it to span all [09:32] the way across. And then rows two over [09:35] three, which is going to have it overlap [09:37] on top of that image. So, if I click off [09:39] of everything now, it looks quite a bit [09:41] better. I didn't explicitly tell this [09:43] main content where to live. That's [09:45] working okay right now, but just to be [09:47] safe, I'm going to go ahead and tell [09:48] this to live in grid column 1 over2 and [09:50] grid row 1 over2 just so nothing gets [09:53] out of alignment. So now we're a lot [09:55] closer to that layout. But of course, we [09:57] need to work with some of that spacing [09:58] here. If we go back to our Figma drawing [10:00] here, we can see that there's actually a [10:02] little bit of padding on top of this [10:04] heading and below this text. And then of [10:06] course, these stack cards don't go all [10:08] the way to the corner here. They have a [10:09] little bit of space over on the right [10:11] and the bottom. So, let's go ahead and [10:13] take care of those things. I'm going to [10:15] grab our main content wrapper here. [10:17] We're going to go inside of our spacing. [10:19] I'm going to give this maybe 60 pixels [10:21] of top padding, maybe 120 of right just [10:25] to push it away from that image. I do [10:26] want the image to take up half of the [10:28] container, which is why I'm not using [10:29] gap here because that would evenly push [10:32] these things away from each other. And [10:34] then we'll do 60 pixels at the bottom [10:35] just to give a little bit of space at [10:37] the bottom here. Now, for our stack [10:40] cards, I'm going to use the same trick [10:41] here, just by using padding. So, we'll [10:43] go in here to our spacing, and we wanted [10:45] 24 from the right and 24 from the [10:47] bottom, which will just make sure that [10:49] those stack cards don't go all the way [10:51] to the bottom of the image. They just [10:52] have a little bit of reveal next to [10:54] them. So, at this point, we're pretty [10:55] close to this desktop layout. So, let's [10:57] go ahead and save these changes and go [10:59] preview things on the front end. [11:01] Everything looks pretty good here on [11:03] desktop. I would be pretty happy with [11:04] this layout as is. But as we go into the [11:07] inspector and start looking at things [11:09] responsively, we're definitely going to [11:10] run into some problems. The first one [11:12] here is that we have a collision in our [11:14] stack card and CTA wrapper. Once these [11:17] collide here, everything breaks to [11:18] multiple lines and it looks pretty [11:20] terrible. And eventually, I don't think [11:22] we want this main content next to this [11:24] image because everything's getting so [11:26] skinny. We're going to want that stuff [11:27] to stack on top of each other. Now, as [11:30] we get even smaller, this problem just [11:32] gets worse and things start overflowing. [11:34] So, let's just start here where that [11:35] first collision happens. If we go in [11:38] here, we can see it actually collides [11:39] around the 1100 mark, but I don't even [11:41] want them getting that close. We could [11:44] fix that with some gap inside that [11:45] wrapper, but I think we can just go [11:47] ahead and set our media query maybe here [11:49] around 11:30. That would give us a good [11:51] place to go ahead and change this layout [11:53] so that these things never get close to [11:55] colliding. So, I'm going to go ahead and [11:57] copy this 11:30 to my clipboard. And [11:59] we'll go back into the editor. And what [12:01] I want to do is work on this CTA and [12:03] stats card wrapper here. So I'm going to [12:05] go ahead and go into my media queries [12:07] and we're going to type in at media. [12:09] Open our parenthesis and then we're [12:11] going to type in max hyphen width. Paste [12:13] in that pixel value. Write pixels next [12:16] to it and go ahead and close those [12:17] parenthesis and hit create. Now [12:19] unfortunately we're not previewing at [12:21] this break point. So we're going to have [12:23] to use our imagination as we set all of [12:25] this up. But we can go check things on [12:27] the front end as well. Basically, what I [12:29] want to do here is change this flex [12:31] direction to column, which is going to [12:33] stack this button and these stack cards [12:35] on top of each other. Let's just take [12:37] this step by step. I'll go ahead and [12:39] save that there. Refresh it. And now we [12:41] can see that these things are stacked on [12:43] top of each other. But I think the CTA [12:45] should actually go below these stack [12:47] cards. So instead of just column, let's [12:49] do this column reverse. We also had a [12:52] problem with these two things being [12:53] right next to each other. So let's just [12:55] make sure that they have a row gap here. [12:57] We'll do something like 16 pixels since [12:59] I have 16 pixels in between each one of [13:01] these stack cards. Again, let's just go [13:04] ahead and save those changes. Now, we [13:06] can see the button is below the stack [13:07] cards, which I like. But I think I want [13:09] these stack cards to go ahead and fill [13:11] up the entire width. And I want this [13:13] button to be over here on the left hand [13:15] side. So, let's go back in here into our [13:18] sizing. I'm going to make sure that this [13:20] entire wrapper spans a 100% of the [13:23] width. and we'll go into our layout [13:25] alignment and set all the align items to [13:28] left. That should go ahead and fix those [13:30] things. So, let's just go ahead and [13:32] refresh now. I think that looks pretty [13:34] good. And I like that these stack cards [13:35] don't actually fill the entire width. [13:37] They just kind of overlap. I think [13:38] that's a nice little nod to the desktop [13:40] layout where things overlap as well. I [13:42] think the only thing I don't like is [13:43] this gap here. I think that's too small. [13:45] We should probably go with something [13:46] bigger. So, let's just go back into that [13:49] gap. Maybe we'll change it to 24. That [13:51] still might not be enough, but it'll [13:52] give us a better look. Okay, I'm pretty [13:55] happy with this for the 11:30 break [13:57] point, but let's see where our next [13:58] problem comes into place. We don't [14:00] really have any collisions here, but I [14:02] think things are just getting too skinny [14:03] for this to be a two column layout. So, [14:05] we need to figure out where we want this [14:07] to break. I think it's okay right here. [14:10] I don't absolutely hate it. Even though [14:11] we could tighten up that spacing, [14:13] there's just going to be so few people [14:14] viewing this on a tablet that I don't [14:16] stress over this too much. I think it's [14:18] okay, but not perfect. But I think once [14:20] we get down here, it's starting to just [14:22] get too skinny. So, let's just pick a [14:25] break point. I'm going to say this is [14:27] 977. Let's just say a th00and. So, I'll [14:29] put a th00and in here. And let's choose [14:31] that for when we want this to stack into [14:33] a single column. So, we'll go back into [14:36] our editor here. We're going to go into [14:38] the wrapper. And again, I'm going to go [14:40] ahead and create a media query by doing [14:42] at media, open our parenthesis, and do [14:44] max width. and then we'll type in 1,00 [14:49] pixels and go ahead and close our [14:51] parenthesis here. Now, right now, this [14:54] is still using display grid even though [14:56] we're seeing default in here. It's just [14:57] being inherited down. So, all we need to [15:00] do is go into this grid layout and [15:01] change this to a one column grid. That's [15:04] not going to fix things because we have [15:06] children of this grid spanning multiple [15:08] rows and multiple columns. So, let's [15:10] just make sure that nothing is spanning [15:11] more than one column since our grid is [15:13] only one column wide. Now, this main [15:16] content is 1 over2, so we're okay. This [15:19] image wrapper is 2 over3. We want to go [15:21] ahead and change that back to 1 over [15:23] two, just so it doesn't go past the [15:25] amount of width we have. Same thing for [15:28] our stack cards here. I just want to [15:29] make sure that that's set to 1 over two. [15:32] That should fix all the horizontal [15:34] stuff, but obviously we have a problem [15:35] with things overlapping now since some [15:37] of these things are set to be on the [15:39] same grid row. So, let's go ahead and go [15:41] back into our main content. We want this [15:43] to be the first thing. So, it's going to [15:45] be 1 over two. We'll go into our image [15:47] wrapper and we'll do this two over [15:49] three. So, it goes below that text. And [15:52] then for our stack cards, we'll make [15:53] sure that this is three over four, which [15:56] will just put it below our image there. [15:59] Again, let's just go ahead and save [16:01] those changes and see how things are [16:02] looking. Now, I think this single column [16:04] looks quite a bit better, but we do have [16:06] that padding on the top and bottom of [16:08] our main content as well as on the [16:10] right. So, let's go ahead and fix that [16:12] while we're still working inside this [16:14] media query. We'll go back in here to [16:16] our spacing and change this all back to [16:18] zero. Of course, we're going to want [16:20] some gaps between these things. So, [16:21] we'll go into that wrapper and we'll do [16:23] a row gap of maybe 24. Actually, I think [16:26] something like 32 pixels might look a [16:28] little bit better. Again, let's just go [16:30] ahead and save those changes and see how [16:31] we're doing. I think at this point, I do [16:34] want all these cards to span the entire [16:36] width. So, we'll go in here to our stat [16:38] card. And luckily, we put a class on it. [16:40] I should be able to just go in here and [16:41] do a flex grow of one. Go ahead and save [16:44] those changes. Refresh here on the front [16:47] end. That's still not filling up all [16:49] that space. So, let's see what is not [16:50] being able to expand. We'll make sure [16:52] that this flex div is also allowed to go [16:55] 100%. And now our stack cards are able [16:57] to span that entire width. You can see [17:00] they're not quite going to the edge [17:01] here. And that's because the padding we [17:03] had on that stack card wrapper. So, [17:05] let's make sure we're inside that CTA [17:07] and stack cards. We'll go inside of the [17:09] spacing and let's change that bottom [17:11] padding and right padding to zero. [17:13] Again, go ahead, save those changes and [17:15] refresh on the front end. And I think [17:17] we're looking pretty good at this 1,000 [17:19] break point. So, let's just keep [17:21] shrinking things down and see where they [17:22] break again. And here you'll see that [17:25] our headlines inside of our stack card [17:27] start to go to two lines and break, [17:29] which looks kind of funky. So, I think [17:30] there's two things I want to do here. [17:32] One, I think these headings can just be [17:34] smaller at this point. And two, I think [17:36] we could make these stack cards kind of [17:38] wrap so that they never break onto two [17:40] lines. So, let's see exactly where this [17:43] happens. If I go ahead and stretch this [17:45] up, we're okay here at 821. [17:48] But when we get down to 8:19, things [17:50] start to break. Just to make it an even [17:52] number, I'm going to go ahead and copy [17:53] that 820 to my clipboard. We'll go to [17:56] our stat card wrapper. And again, we're [17:58] going to go ahead and create a media [17:59] query by doing at media. Open our [18:02] parenthesis max width. [18:05] paste in that 820 pixels and go ahead [18:07] and create that. Now, what we want to do [18:10] first here is just allow all these cards [18:12] to wrap. So, I'm just going to go here [18:14] onto flex wrap and choose wrap. And then [18:17] for our stack card titles, we'll go [18:19] ahead and go into that class as well. [18:21] And I'm going to change this down to [18:22] maybe two rim just to make it a little [18:24] bit more proportionate. Again, we'll go [18:26] ahead and save those changes. Refresh [18:28] here. And now, I think these titles look [18:30] a little bit more appropriate. So, let's [18:32] go ahead and shrink things down. And we [18:34] can see our flex wrap is working nicely [18:36] once these titles would go onto two [18:38] lines. Instead, it's just wrapping these [18:40] boxes. So, we get a bigger box down here [18:42] at the bottom, which I think is a nice [18:43] kind of bento looking layout. Go ahead [18:45] and keep scrunching things down here. [18:48] And eventually, we get to where all of [18:49] these stack on top of each other, which [18:51] is totally fine with me. The only thing [18:53] I don't love about this is that the [18:54] image is kind of short here. Since we [18:56] don't have much width to work with, the [18:58] image just looks a little bit too small. [19:00] So, I think I want to affect that once [19:02] these stack cards break into a single [19:04] column, which happens right around here. [19:06] That is right around the 485 mark. I'm [19:08] going to go ahead and copy that to my [19:10] clipboard. We're going to go back to [19:11] this image wrapper again. Another media [19:14] query at media max width. Paste in that [19:18] 485 pixels. Go ahead and create that. [19:22] And then for this image wrapper, all I'm [19:24] going to do to that is change an aspect [19:26] ratio. I'm going to do this one over one [19:28] just so the image is a big square. here. [19:30] I think that's going to look a little [19:31] bit better in our layout. Again, I'll [19:33] refresh here. And now the image is more [19:35] substantial and takes up a little bit [19:37] more room. So, these stat cards don't [19:38] take up so much emphasis on the page. [19:41] And here, everything should shrink down [19:43] nicely. And now we have a fully [19:44] responsive layout of this hero section. [19:47] I just find it so funny when people want [19:48] to argue about what's better, flex or [19:50] grid. And as you can see from a demo [19:52] like this, they both have their [19:53] strengths and weaknesses. We had to use [19:55] a combination of CSS grid and flexbox to [19:57] accommodate everything we needed inside [19:59] this layout. While CSS grid made it [20:02] really nice to be able to overlap things [20:03] and keep things exactly in place where [20:05] we needed them to. Things like our stack [20:07] cards just work a whole lot better when [20:08] you're using flexbox. So understanding [20:10] both of these display properties is [20:12] really the key to being able to build [20:14] out all the layouts you want. Hopefully [20:15] you learned something in today's video. [20:17] I would love to know what your favorite [20:18] part of this was. So make sure to leave [20:20] me a comment down below. And if you want [20:21] to make sure to catch the next one, then [20:23] hit subscribe and we'll see you  ## 📺 Video ![](https://www.youtube.com/watch?v=eKIiUaHnvlQ) --- # 📝 Full Notes (Deep-Read Analysis) # 🏷️ Title: Sick new hero design punches way above its weight! ## 🧰 Action Inbox - [H1] Create 2x2 CSS grid with uneven rows for hero layout — 00:00-02:30 #css-grid - [H2] Use grid positioning to achieve overlapping elements — 05:23-08:45 #layout - [H3] Implement responsive breakpoints with media queries — 15:30-22:00 #responsive ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Video Source](https://www.youtube.com/watch?v=eKIiUaHnvlQ) ## 📝 Summary - Tutorial demonstrates building a complex hero layout with overlapping elements using CSS Grid - Combines CSS Grid for positioning with Flexbox for component alignment - Covers responsive design implementation with multiple breakpoints - Uses GenerateBlocks WordPress page builder for practical implementation - Shows how grid positioning allows precise control over overlapping content ## 📖 Main Content The video teaches how to create a sophisticated hero section layout that features overlapping elements using CSS Grid. The design includes main content, a large image, and stat cards that overlap the image in an aesthetically pleasing way. The instructor explains the grid system conceptually before implementing it practically, showing how to use grid line numbers for precise positioning. The tutorial also covers making the layout fully responsive using media queries and combining CSS Grid with Flexbox where appropriate. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/eKIiUaHnvlQ?t=0) — [H1] Project overview and grid planning - Key idea: Complex overlapping layouts can be simplified using CSS Grid - Evidence: "A layout like this really lends itself to using CSS grid" #### ⏱️ [02:30](https://youtu.be/eKIiUaHnvlQ?t=150) — [H2] Grid structure breakdown - Key idea: 2x2 grid with uneven row heights handles the layout - Evidence: "What we have here is essentially a 2x2 grid. We have two columns running on the left and right and then two rows" #### ⏱️ [04:15](https://youtu.be/eKIiUaHnvlQ?t=255) — [H3] Grid positioning strategy - Key idea: Grid line numbers control precise element placement - Evidence: "Our image needs to span from column 2 to column 3... from row one and go all the way down to row three" #### ⏱️ [06:30](https://youtu.be/eKIiUaHnvlQ?t=390) — [H1] Building the HTML structure - Key idea: Three main containers handle content, image, and overlapping elements - Evidence: "We're going to need three boxes... main content... image wrapper... CTA plus stat cards" #### ⏱️ [09:45](https://youtu.be/eKIiUaHnvlQ?t=585) — [H2] Styling stat cards component - Key idea: Flexbox handles internal card layout and spacing - Evidence: "Change this to a display of flex so I can get these items next to each other" #### ⏱️ [12:20](https://youtu.be/eKIiUaHnvlQ?t=740) — [H3] Implementing CSS Grid layout - Key idea: Grid template creates the foundation for positioning - Evidence: "We're going to change this to a display of grid... use our little helper here for the two column grid" #### ⏱️ [13:45](https://youtu.be/eKIiUaHnvlQ?t=825) — [H1] Grid positioning implementation - Key idea: Explicit grid positioning creates overlapping effects - Evidence: "Image wrapper... grid column 2 to three... rows 1 to 3... stat cards... column 1 to three... rows 2 to 3" #### ⏱️ [15:30](https://youtu.be/eKIiUaHnvlQ?t=930) — [H2] Adding spacing and padding - Key idea: Padding controls element spacing without affecting grid alignment - Evidence: "120 of right just to push it away from that image... 24 from the right and 24 from the bottom" #### ⏱️ [17:00](https://youtu.be/eKIiUaHnvlQ?t=1020) — [H3] First responsive breakpoint - Key idea: 1130px breakpoint prevents collision between elements - Evidence: "We can see it actually collides around the 1100 mark... set our media query maybe here around 11:30" #### ⏱️ [18:45](https://youtu.be/eKIiUaHnvlQ?t=1125) — [H1] Stacking elements at medium screens - Key idea: Flex direction column-reverse reorders content appropriately - Evidence: "Change this flex direction to column... column reverse... button should go below these stack cards" #### ⏱️ [20:30](https://youtu.be/eKIiUaHnvlQ?t=1230) — [H2] Single column grid at 1000px - Key idea: Grid changes to single column with explicit row positioning - Evidence: "Change this to a one column grid... main content 1 over 2... image wrapper 2 over 3... stack cards 3 over 4" #### ⏱️ [22:15](https://youtu.be/eKIiUaHnvlQ?t=1335) — [H3] Card wrapping at 820px breakpoint - Key idea: Flex wrap prevents text breaking to multiple lines - Evidence: "Allow all these cards to wrap... flex wrap and choose wrap... change this down to maybe two rim" #### ⏱️ [23:30](https://youtu.be/eKIiUaHnvlQ?t=1410) — [H1] Final mobile adjustments - Key idea: Square aspect ratio improves image prominence on mobile - Evidence: "Change an aspect ratio... one over one just so the image is a big square" #### ⏱️ [24:45](https://youtu.be/eKIiUaHnvlQ?t=1485) — [H2] Grid vs Flexbox philosophy - Key idea: Both CSS Grid and Flexbox have specific strengths for different use cases - Evidence: "They both have their strengths and weaknesses... CSS grid made it really nice to overlap things... stack cards work better when using flexbox" ## 📚 References - [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) - [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) - [GenerateBlocks](https://generateblocks.com/) ## 🗣️ Paraphrase - Complex overlapping layouts become manageable when broken down into a simple 2x2 CSS Grid structure - Grid line positioning allows precise control over how elements span columns and rows to create overlaps - Responsive design requires multiple breakpoints with different layout strategies for each screen size - Combining CSS Grid for positioning with Flexbox for alignment provides the most flexible solution ## 📰 Newsletter This week's design spotlight showcases an elegant solution for complex hero layouts using CSS Grid! The tutorial demonstrates how a seemingly complicated overlapping design breaks down into a simple 2x2 grid structure, making it accessible for WordPress developers at any skill level. Key takeaways include using grid line numbers for precise positioning, implementing responsive breakpoints that prevent element collisions, and knowing when to combine CSS Grid with Flexbox for optimal results. The practical GenerateBlocks implementation makes this immediately applicable to client projects. Resources: [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/), [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), [GenerateBlocks Documentation](https://docs.generateblocks.com/) ## ✅ Action Items #### WordPress - Core: Evaluate grid layout support in block editor themes - Themes: Review theme grid implementation patterns and responsive strategies - Design: Create grid layout component library for block themes #### Community - Contributors: Document CSS Grid best practices for WordPress themes - Maintainers: Establish grid layout standards for block patterns ## 🧪 Hypotheses - CSS Grid adoption increases when developers see practical overlapping layout examples - Combining Grid and Flexbox reduces development time compared to using either alone - Multiple responsive breakpoints prevent layout collisions better than single breakpoints - Visual grid planning improves implementation accuracy and reduces debugging time ### 📊 Methodology - A/B test grid vs flexbox-only implementations measuring development time - User testing on responsive breakpoint effectiveness across devices - Survey developers on CSS Grid confidence before/after practical tutorials ### ❓ Questions - How does CSS Grid browser support impact adoption in WordPress themes? - What's the optimal number of responsive breakpoints for complex layouts? - How can WordPress block patterns better leverage CSS Grid capabilities? ### 🔮 Future Research - CSS Subgrid implementation patterns for WordPress themes - Container query integration with CSS Grid for component-level responsiveness - Performance impact of complex grid layouts on WordPress sites ### 💡 Implications - Practice: Developers can create more sophisticated layouts without complex positioning hacks - Education: Visual grid planning should precede code implementation in training materials - Funding: Advanced CSS features require ongoing education budget allocation ### 🧠 Learning Styles Assessment Reading level estimate: 8.5 (Flesch-Kincaid Grade Level) #### 👀 Visual learners - Present: Grid overlay diagrams, numbered grid lines, visual breakdowns - Improve: Interactive grid visualizer, color-coded grid areas #### 🔊 Aural learners - Present: Step-by-step verbal explanations, reasoning for each decision - Improve: Audio-only version focusing on CSS concepts #### 🗣️ Verbal learners - Present: Clear terminology definitions, analogies to physical layouts - Improve: Glossary of grid terms, comparison table Grid vs Flexbox #### 🧩 Kinesthetic learners - Present: Hands-on building exercise, live code demonstration - Improve: Downloadable starter files, practice exercises with variations #### 🧠 Logical learners - Present: Grid line numbering system, systematic breakpoint approach - Improve: Decision tree for grid vs flexbox choice, responsive strategy flowchart #### 🧑‍🤝‍🧑 Social learners - Present: Comments section engagement, shared project showcase - Improve: Community challenges, peer code review sessions #### 🧘‍♀️ Solitary learners - Present: Complete tutorial that can be followed independently - Improve: Self-assessment checklist, troubleshooting guide #### 🌿 Naturalistic learners - Present: Organic layout evolution through breakpoints - Improve: Layout ecosystem metaphors, natural spacing relationships ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive element names - Improve: ARIA labels for grid regions, landmark roles #### Keyboard navigation - Present: Standard tab order through interactive elements - Improve: Focus management in overlapping content areas #### Contrast and readability - Present: High contrast code examples, clear visual hierarchy - Improve: Dark mode code examples, larger font options #### Text resizing and reflow - Present: Responsive design accommodates text scaling - Improve: Test layout at 200% zoom explicitly #### Media and captions - Present: Video tutorial with clear visual demonstrations - Improve: Closed captions, transcript with timestamps #### Forms and interactions - Present: Clear button styling and hover states - Improve: Focus indicators for all interactive elements ### 🌍 DEIB Assessment #### Cultural breadth - Present: Generic "Richmond" location example - Improve: Multiple city examples from different regions #### Inclusive language - Present: Technical terms clearly explained, neutral tone - Improve: Avoid idioms like "punches above its weight" #### Neurodiversity support - Present: Step-by-step structure, clear progression - Improve: Section summaries, progress indicators #### Representation - Present: Focuses on technical implementation - Improve: Include diverse use cases beyond tourism sites #### Psychological safety - Present: Encouraging tone, acknowledges learning curve - Improve: Explicit "no stupid questions" messaging ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Grid system principles correctly applied to specific layout - Inductive strength: Responsive patterns generalized from specific breakpoint issues - Causal reasoning: Clear cause-effect between grid positioning and overlapping results - Analogical strength: Grid lines compared to physical layout constraints #### Fallacies - Appeal to popularity: "Grid videos have been really well-received" - popularity doesn't prove effectiveness - False dilemma: Grid vs Flexbox framed as either/or when combination is often best #### Tone of voice - Overall tone: Educational and encouraging, demonstrates concepts clearly with practical examples ### 🛡️ DARVO Analysis - Deny: No concerning content identified - Attack: No attacking behavior present - Reverse victim/offender: No relevant dynamics present - Emotional cues and rhetoric: Positive, educational tone throughout ## 🎯 Conclusion This tutorial effectively demonstrates that complex overlapping layouts become manageable when approached systematically through CSS Grid. The combination of visual planning, practical implementation, and responsive considerations provides a complete framework for building sophisticated hero sections. The key insight is that understanding both CSS Grid and Flexbox strengths allows developers to choose the right tool for each specific layout challenge, resulting in cleaner, more maintainable code. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] CSS Grid enables complex overlapping layouts > [!quote] [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed 2024-12-19. > "A layout like this really lends itself to using CSS grid" Demonstrates practical application of grid for overlapping hero elements. [view highlight](https://youtu.be/eKIiUaHnvlQ?t=0#H1) #xref #articleseed ID:rw_001 ### [H2] Grid line positioning provides precise control > [!quote] [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) > "Our image needs to span from column 2 to column 3 and from row one to row three" Shows how numbered grid lines enable exact element placement. [view highlight](https://youtu.be/eKIiUaHnvlQ?t=255#H2) #xref ID:rw_002 ### [H3] Responsive breakpoints prevent layout collisions > [!quote] [Sick new hero design punches way above its weight!](https://www.youtube.com/watch?v=eKIiUaHnvlQ) > "We can see it collides around the 1100 mark, so we'll set our media query at 11:30" Strategic breakpoint selection maintains layout integrity across devices. [view highlight](https://youtu.be/ --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=eKIiUaHnvlQ)* **[00:00]** I just started designing a new project for a client, and when I came up with this hero layout, I was really excited about how it turned out, but a little bit worried about exactly how I would build it. There's some overlapping pieces here and some interesting things that I don't see in every single project. A layout like this really lends itself to using CSS grid, and in the last few grid videos I've done, they've been really wellreceived. So, I thought we'd break this layout down today to talk about how we can make this into its most simplistic form, lay out this grid, and then figure out how to place **[00:30]** everything inside the cells we need to to get that cool overlapping effect. I think it's a pretty neat little trick, and you'll learn a few things along the way. So, if that sounds interesting to you, then stick around and let's get started. So, we'll just kind of ignore the header for now. We're not going to worry about that in this demo. What we're really focused on is this hero section. So you can see we have this main content over here on the left. Underneath it we have a CTA, this explore Richmond button and a row of stat cards that kind of overlap the image that's over on the right hand side. So if we overlay a possible grid **[01:03]** on top of this, what we have here is essentially a 2x two grid. We have two columns running on the left and right and then two rows, one on the top and one on the bottom. Now the columns are even. They're just split 50/50 right down the middle of the screen, but the rows are actually different heights. This top row is quite a bit bigger than the bottom row, even though this bottom row has quite a bit of padding in between the cards and the top and bottom of its constraints. So, if we look at each individual piece here, we have this main content that kind of goes in the **[01:33]** top left. It doesn't overlap anything. So, we can put it in the first column and the first row. Now, the image goes next to it. It doesn't overlap columns here, but it does overlap rows. The image is going to span from the beginning to the end of the second column. And it's going to span all the way from the top of the first row to the bottom of the second row. And then we bring in the stack cards, which are going to span the entire width. So from the start of the first column to the end of the first column, but it's only going to span one row, which is the second row **[02:04]** in here. So we want it to start at that second row line and finish at the third. This way we can get our image and stack cards to overlap just the way we want it. If we go back to our drawing here, we have our columns and our rows. The columns are numbered starting with one all the way on the left hand side. The next one is two and then the end of this second column is three. So it can be a little bit confusing when you're dealing with column two to say to go to three, but we're counting the start of each one of these lines. The same thing happens with the rows, but here we start at the **[02:35]** top and then work our way down. So since we have two rows, we have these grid lines 1 2 and three. So in order to place this content, we need to think about what grid cells everything needs to live in. Our main content here can go from 1 to two and from one to two on the rows, which is what it's going to do by default. Our image, however, needs to span from column 2 to column 3. So it starts on this second column here and goes all the way to the end. And then for the rows, it needs to start at row one and go all the way down to row three **[03:07]** so that it can expand to the bottom of our grid. And finally, this CTA row, it's going to start at row two and go to row three. And it's also going to start from column one and go over to column 3. Of course, this is just a lot of talk about theory, but I wanted to set this up so you could see what I was doing once I got into the builder. And hopefully then it will all start to click. So, let's go ahead and jump inside generate blocks now and start to build some of this out. Now, I don't have any kind of framework installed here, but I do have a few little helpers like my little section reusable block **[03:38]** that we'll reuse throughout this. We have a button class as well, but for the most part, I'm going to be doing all of this from scratch. So, we have our section with our inner wrapper. Of course, the inner wrapper is just constraining our content width. And inside of it, essentially, we're going to need three boxes. This first one here, we'll go ahead and rename. This is going to be our main content. I'm just going to label these the same as I did inside of Figma. This is going to be our image wrapper. And then here at this last container, we'll rename that. That's going to be our CTA plus our stat cards. **[04:10]** Now, inside of this main content, we know that we're going to need a headline, which is just going to say choose a city that lets you breathe. I'm going to go ahead and change this to an H1. We also had a little highlight on the word breathe here, so I'm going to go ahead and do that. Of course, this isn't a full site, so I should be putting classes on all these things. But for the point of demo, I'm just going to do this on the default generate blocks classes since this isn't going to expand to anything bigger in this site. Now, under that, we're going to need a text block. And I'll just paste in the text from our Figma drawing. I want to make **[04:40]** sure to go ahead and get rid of the bottom margin that comes on those paragraphs. So, we can go ahead and snug things up there. Now, next, inside this image wrapper, I want to go ahead and put an image. We'll grab the image I already have in my media library. I do want to make sure to change the display of that to block. If not, there's a little bit of margin at the bottom of this that kind of gets in the way. And then I just want to make sure to set the width and height both to 100%. Because I'm going to want this to always fill up that container. And then inside of our stack cards, we're going to have two containers in **[05:11]** here as well. The first one is going to be our button wrapper. So I'll just go ahead and put a button in here. Now, you don't necessarily need to put this button inside of a container. It could just be directly inside the stack cards wrapper, but just in case I ever want to put something else in here, I have that option and it's not really hurting anything. So, in here, this is going to say explore Richmond, Virginia. And like I said, I already have a class set up for my buttons here. So, I'm just going to go ahead and add that so we don't have to style that button completely from scratch. Now, inside this wrapper, this is what's **[05:42]** going to hold all my stat cards. I'm going to have my individual stat card here. I'll go ahead and rename this stat card. And for our container, I'm going to rename this stat card wrapper. Now, for these stat cards, since there's going to be multiple of them, I'm going to go ahead and give this a class because it is going to help us inside this demo. So, we'll just call this stat card. Go ahead and create that class. And then inside of here, I want to set some of that styling. So, it had a white background. It had about 24 pixels of padding on the **[06:13]** top and 40 on the left and right. We'll go into our border radius and we're going to change this to 40 pixels of border radius. And while we're here, let's go ahead and go into our typography and set that text alignment to center. And now we can go ahead and add a paragraph here. This first one said 7 miles. And then another paragraph underneath it. Go ahead and make sure to use the generate blocks text block as well. We probably want to put classes on these as well. So, this is going to be stat card description. **[06:45]** Go ahead and save that. We want to make sure to get rid of that bottom margin on it. And this is going to be our stat card double title. Go ahead and create that as well. And I think we're going to make this quite a bit bigger. So, let's do something like three rim. We'll change the text color to the blue from our palette. And then we'll make sure to get rid of the bottom margin there as well. I think that's a good start at least. So, I'm going to go ahead and duplicate this twice. And I'll go ahead and fill in the rest of this content. So, I've done a little bit of mix of **[07:16]** just putting content in and styling. This is probably the most styled, so we'll just stay with that for now. Here on the stack card wrapper, I do want to go ahead and change this to a display of flex so I can get these items next to each other. We'll go ahead and give this a column gap of 16 pixels. Eventually, I'm going to need a row gap, too. So, I'll go ahead and put it on here now, even though it's not going to really affect things. Now, in our stats, our CTA and stats card wrapper, let's go ahead and change that to flex as well. I want to change the alignment to center just to center align that button. And **[07:47]** then I'm going to change the justify content to space between. That's just going to allow us to have the button wrapper over here on the left and then the stack card wrappers pushed all the way to the right. All right, we're getting a little bit closer now. Let's go back to our image wrapper. And I know I want to put a big border radius on this. I think it was 48 pixels inside my drawing. And I'm just going to go ahead and set that overflow to clip on both the X and Y axis. That's just going to make sure that it gives us a border radius on that image since the container that's holding the image is kind of clipping that off of there. And then I **[08:19]** don't think we need to do anything else to our main wrapper here. So let's go ahead and start to get this grid set up. To do that, I'm going to go to the wrapper. We're going to change this to a display of grid. And then inside of our grid layout, I'm just going to use our little helper here for the two column grid. That's going to be a good start for us. Now, as far as the rows, we do have two rows here that we're going to be working with. But by default, the grid template columns is really set up to be auto, even though you don't see that. And that's just going to allow each one of the rows to be the size of the content inside of it. I just **[08:50]** mentioned this because you don't want to put one FR 1 FR here. That's going to make both of these rows the same height, which really isn't what we want in this situation because our top row is bigger than our smaller row. So, we'll just get rid of that and leave it blank. And that's a good starting place for us. But now we need to start placing everything on the grid. If we go to our image wrapper here, we'll go inside of layout and then grid layout. And we can go down to our grid column. If we remember back to our Figma drawing, this was going to span columns 2 to three. And it was going to spans row 1 2 3, which is going **[09:22]** to allow it to overlap here. Now, for our stat cards, we're going to go into that same box here, and under grid column, we're going to do one to three, which is going to allow it to span all the way across. And then rows two over three, which is going to have it overlap on top of that image. So, if I click off of everything now, it looks quite a bit better. I didn't explicitly tell this main content where to live. That's working okay right now, but just to be safe, I'm going to go ahead and tell this to live in grid column 1 over2 and grid row 1 over2 just so nothing gets **[09:53]** out of alignment. So now we're a lot closer to that layout. But of course, we need to work with some of that spacing here. If we go back to our Figma drawing here, we can see that there's actually a little bit of padding on top of this heading and below this text. And then of course, these stack cards don't go all the way to the corner here. They have a little bit of space over on the right and the bottom. So, let's go ahead and take care of those things. I'm going to grab our main content wrapper here. We're going to go inside of our spacing. I'm going to give this maybe 60 pixels of top padding, maybe 120 of right just **[10:25]** to push it away from that image. I do want the image to take up half of the container, which is why I'm not using gap here because that would evenly push these things away from each other. And then we'll do 60 pixels at the bottom just to give a little bit of space at the bottom here. Now, for our stack cards, I'm going to use the same trick here, just by using padding. So, we'll go in here to our spacing, and we wanted 24 from the right and 24 from the bottom, which will just make sure that those stack cards don't go all the way to the bottom of the image. They just have a little bit of reveal next to them. So, at this point, we're pretty **[10:55]** close to this desktop layout. So, let's go ahead and save these changes and go preview things on the front end. Everything looks pretty good here on desktop. I would be pretty happy with this layout as is. But as we go into the inspector and start looking at things responsively, we're definitely going to run into some problems. The first one here is that we have a collision in our stack card and CTA wrapper. Once these collide here, everything breaks to multiple lines and it looks pretty terrible. And eventually, I don't think we want this main content next to this image because everything's getting so **[11:26]** skinny. We're going to want that stuff to stack on top of each other. Now, as we get even smaller, this problem just gets worse and things start overflowing. So, let's just start here where that first collision happens. If we go in here, we can see it actually collides around the 1100 mark, but I don't even want them getting that close. We could fix that with some gap inside that wrapper, but I think we can just go ahead and set our media query maybe here around 11:30. That would give us a good place to go ahead and change this layout so that these things never get close to colliding. So, I'm going to go ahead and **[11:57]** copy this 11:30 to my clipboard. And we'll go back into the editor. And what I want to do is work on this CTA and stats card wrapper here. So I'm going to go ahead and go into my media queries and we're going to type in at media. Open our parenthesis and then we're going to type in max hyphen width. Paste in that pixel value. Write pixels next to it and go ahead and close those parenthesis and hit create. Now unfortunately we're not previewing at this break point. So we're going to have to use our imagination as we set all of this up. But we can go check things on the front end as well. Basically, what I **[12:29]** want to do here is change this flex direction to column, which is going to stack this button and these stack cards on top of each other. Let's just take this step by step. I'll go ahead and save that there. Refresh it. And now we can see that these things are stacked on top of each other. But I think the CTA should actually go below these stack cards. So instead of just column, let's do this column reverse. We also had a problem with these two things being right next to each other. So let's just make sure that they have a row gap here. We'll do something like 16 pixels since **[12:59]** I have 16 pixels in between each one of these stack cards. Again, let's just go ahead and save those changes. Now, we can see the button is below the stack cards, which I like. But I think I want these stack cards to go ahead and fill up the entire width. And I want this button to be over here on the left hand side. So, let's go back in here into our sizing. I'm going to make sure that this entire wrapper spans a 100% of the width. and we'll go into our layout alignment and set all the align items to left. That should go ahead and fix those **[13:30]** things. So, let's just go ahead and refresh now. I think that looks pretty good. And I like that these stack cards don't actually fill the entire width. They just kind of overlap. I think that's a nice little nod to the desktop layout where things overlap as well. I think the only thing I don't like is this gap here. I think that's too small. We should probably go with something bigger. So, let's just go back into that gap. Maybe we'll change it to 24. That still might not be enough, but it'll give us a better look. Okay, I'm pretty happy with this for the 11:30 break point, but let's see where our next problem comes into place. We don't really have any collisions here, but I **[14:02]** think things are just getting too skinny for this to be a two column layout. So, we need to figure out where we want this to break. I think it's okay right here. I don't absolutely hate it. Even though we could tighten up that spacing, there's just going to be so few people viewing this on a tablet that I don't stress over this too much. I think it's okay, but not perfect. But I think once we get down here, it's starting to just get too skinny. So, let's just pick a break point. I'm going to say this is 977. Let's just say a th00and. So, I'll put a th00and in here. And let's choose that for when we want this to stack into **[14:33]** a single column. So, we'll go back into our editor here. We're going to go into the wrapper. And again, I'm going to go ahead and create a media query by doing at media, open our parenthesis, and do max width. and then we'll type in 1,00 pixels and go ahead and close our parenthesis here. Now, right now, this is still using display grid even though we're seeing default in here. It's just being inherited down. So, all we need to do is go into this grid layout and change this to a one column grid. That's **[15:04]** not going to fix things because we have children of this grid spanning multiple rows and multiple columns. So, let's just make sure that nothing is spanning more than one column since our grid is only one column wide. Now, this main content is 1 over2, so we're okay. This image wrapper is 2 over3. We want to go ahead and change that back to 1 over two, just so it doesn't go past the amount of width we have. Same thing for our stack cards here. I just want to make sure that that's set to 1 over two. That should fix all the horizontal stuff, but obviously we have a problem **[15:35]** with things overlapping now since some of these things are set to be on the same grid row. So, let's go ahead and go back into our main content. We want this to be the first thing. So, it's going to be 1 over two. We'll go into our image wrapper and we'll do this two over three. So, it goes below that text. And then for our stack cards, we'll make sure that this is three over four, which will just put it below our image there. Again, let's just go ahead and save those changes and see how things are looking. Now, I think this single column looks quite a bit better, but we do have **[16:06]** that padding on the top and bottom of our main content as well as on the right. So, let's go ahead and fix that while we're still working inside this media query. We'll go back in here to our spacing and change this all back to zero. Of course, we're going to want some gaps between these things. So, we'll go into that wrapper and we'll do a row gap of maybe 24. Actually, I think something like 32 pixels might look a little bit better. Again, let's just go ahead and save those changes and see how we're doing. I think at this point, I do want all these cards to span the entire width. So, we'll go in here to our stat **[16:38]** card. And luckily, we put a class on it. I should be able to just go in here and do a flex grow of one. Go ahead and save those changes. Refresh here on the front end. That's still not filling up all that space. So, let's see what is not being able to expand. We'll make sure that this flex div is also allowed to go 100%. And now our stack cards are able to span that entire width. You can see they're not quite going to the edge here. And that's because the padding we had on that stack card wrapper. So, let's make sure we're inside that CTA and stack cards. We'll go inside of the **[17:09]** spacing and let's change that bottom padding and right padding to zero. Again, go ahead, save those changes and refresh on the front end. And I think we're looking pretty good at this 1,000 break point. So, let's just keep shrinking things down and see where they break again. And here you'll see that our headlines inside of our stack card start to go to two lines and break, which looks kind of funky. So, I think there's two things I want to do here. One, I think these headings can just be smaller at this point. And two, I think we could make these stack cards kind of wrap so that they never break onto two **[17:40]** lines. So, let's see exactly where this happens. If I go ahead and stretch this up, we're okay here at 821. But when we get down to 8:19, things start to break. Just to make it an even number, I'm going to go ahead and copy that 820 to my clipboard. We'll go to our stat card wrapper. And again, we're going to go ahead and create a media query by doing at media. Open our parenthesis max width. paste in that 820 pixels and go ahead and create that. Now, what we want to do **[18:10]** first here is just allow all these cards to wrap. So, I'm just going to go here onto flex wrap and choose wrap. And then for our stack card titles, we'll go ahead and go into that class as well. And I'm going to change this down to maybe two rim just to make it a little bit more proportionate. Again, we'll go ahead and save those changes. Refresh here. And now, I think these titles look a little bit more appropriate. So, let's go ahead and shrink things down. And we can see our flex wrap is working nicely once these titles would go onto two lines. Instead, it's just wrapping these boxes. So, we get a bigger box down here **[18:42]** at the bottom, which I think is a nice kind of bento looking layout. Go ahead and keep scrunching things down here. And eventually, we get to where all of these stack on top of each other, which is totally fine with me. The only thing I don't love about this is that the image is kind of short here. Since we don't have much width to work with, the image just looks a little bit too small. So, I think I want to affect that once these stack cards break into a single column, which happens right around here. That is right around the 485 mark. I'm going to go ahead and copy that to my clipboard. We're going to go back to this image wrapper again. Another media **[19:14]** query at media max width. Paste in that 485 pixels. Go ahead and create that. And then for this image wrapper, all I'm going to do to that is change an aspect ratio. I'm going to do this one over one just so the image is a big square. here. I think that's going to look a little bit better in our layout. Again, I'll refresh here. And now the image is more substantial and takes up a little bit more room. So, these stat cards don't take up so much emphasis on the page. And here, everything should shrink down nicely. And now we have a fully **[19:44]** responsive layout of this hero section. I just find it so funny when people want to argue about what's better, flex or grid. And as you can see from a demo like this, they both have their strengths and weaknesses. We had to use a combination of CSS grid and flexbox to accommodate everything we needed inside this layout. While CSS grid made it really nice to be able to overlap things and keep things exactly in place where we needed them to. Things like our stack cards just work a whole lot better when you're using flexbox. So understanding both of these display properties is really the key to being able to build out all the layouts you want. Hopefully **[20:15]** you learned something in today's video. I would love to know what your favorite part of this was. So make sure to leave me a comment down below. And if you want to make sure to catch the next one, then hit subscribe and we'll see you