 Hello, my friend and friends. You've just been handed a Figma file or maybe even just a static JPEG or PNG or something like that. And you've been told to turn that design into a working website. And that can be really tricky. And the biggest hangup that most people run into early on is trying to figure out how they're going to make the layouts work. And so in this video, I wanna focus less on how I would actually code something and more on the thought process that goes into breaking a layout down. And I'm gonna use this example from Frontend Mentor because it's a small simple layout that actually has a lot of different pieces to it and sort of things that we need to think about along the way. And I really wanna give you the tools not necessarily to create this one specific layout but to be able to think about things in the way that's gonna work for any layout. And actually, I'll also show you an exercise at the end that you can do just to make sure like you're thinking about things the right way. A little bit that's like a fun just practice that you can do that can go really fast. But I think it's really useful to break down layouts and try to build them because you run into problems that don't work and then you end up learning new things and you can go from there. The most important piece of advice I can have is if you're given a layout like this is don't just start writing it, you know, coding it up. And obviously we can get like the colors, the font sizes, things like that. They're not difficult. It's the layout that's usually the hangups or where people have the hangups or trouble. And so what I would recommend and I used to tell this to my students when I was in the classroom like even print off the page and draw boxes around stuff. Of course, you don't need to print it. I'm in Figma here. I have the pen tool. I can draw stuff. So I'm gonna do some drawing and try not to make this too messy. But the very first thing I would actually recommend you do is try and maybe what we'll do is actually I was gonna use the pen tool and we'll probably well but I'm gonna come in with the rectangle tool here for now. And what I would recommend is like draw a box around everything. So here like this is a W but it's by itself. This is its own element. And I'm just gonna reduce the opacity to like a 50% or maybe 75, just so I can still see. And then, you know, I'm gonna alt drag that over. And if you're not in Figma, you have a JPEG you just drawing tools and like any app you can use a free one online. It really doesn't matter. But I have like a box of content there. Over here, I have this, right? This is just a box of stuff here. And there's other things inside of that. Don't worry about that so much. Just try and look at like bigger picture layout trying to put a box around everything. So like here there's this image going all the way across. So that's a box that goes there. And then I have this text on the left here. And then so that's its own box that's right there. Then I have another box right over here. And one nice thing with this is you can actually start to seeing like, you know what, how big should things be? Like, is it 50, 50, is it 60, 40? Start getting a bit of an idea of like the layout itself as well. And then, you know, down here I obviously have these three columns that are all coming. And again, I'm just alt dragging to copy these boxes. So if you are in Figma and you can just Figma's free, right? You can make a free Figma account. And just if you have just a static JPEG, you bring it in, you can draw boxes on it there as well. It doesn't really matter how you go about it, but we just want to draw boxes to sort of get like a bigger picture of where everything is. And then once I've done that, like here if I just bring up like 100% opacity, I can sort of see like, without worrying about the content itself, I can just be like, okay, I have this sort of rough layout that I have. And this right now could even be super useful to look at because we're not worried about like, especially when you have text and other pieces that are in there, sometimes it can be hard to understand and sort of like group things or know where all the different things are. Cause like, if I look in here, there's there is some stuff going on and there's like a smaller layout going on in there. Or especially within these ones down here, right? There's two columns in there. And I find that can sometimes distract us. Whereas if I just look at it like this, I can start getting a better idea of how I might organize all of my content when it comes to when I'm writing my HTML to get it all under control. And so the first thing that I noticed just looking at it like this is like, and there is a mobile, I'm zooming out, we have a mobile view. I'll circle back to that in a second or in a little bit, but we're focusing on desktop and I'll explain why. Even if I would code this up mobile first or mostly mobile first, I would still do this with the desktop design. But the first thing is let's come in and just take like a reddish color here for now. And notice how everything, can I make straight lines? Oh, I can. If I hold shift down, I can make a straight line. That's nice. So you'll notice like everything is sort of contained off the side of the page, right? We have these limitations there. So right away, I know that I probably want to create something that's going to have a max width on it. So in this case, I could do this section by section, but I could just have one big thing. I have no backgrounds that are spilling out the sides. I just have this big block where everything is in. A lot of layouts will be a bit more complex. You might have each section and each section has a max width with like a background that's full size. So in those situations, things you have to adapt, but this idea of drawing boxes around everything will really highlight the areas where you need these types of things. So I have that area that has the max width on it. Then I'm gonna sort of start looking through and like how do I have to organize things to make this type of thing work? And since we're not looking at what's underneath, let's just make them darker so we can see everything a little bit more clearly. And so now I wanna try and understand like how would I actually build this layout and what are the different pieces that are gonna be because I need to organize these boxes, right? Cause if I put a logo and then I put a navigation, well that's gonna wanna go underneath, right? Things in HTML wanna stack. So I need to organize things and then either use a display flex or display grid to get them to be an actual layout instead of just everything stacking on top of one another. So that means here, well, I have this two column area. I don't have to worry about anything underneath it cause looking at this, I have a box here, a box here and then I have other content after. So that means let's go back to my pen tool and let's grab maybe an orange color just to separate. And that means like here, I know, I have this content here that needs to come in and I need something here that's going to make this two columns. Doesn't really matter what, but I'm just sort of highlighting, okay, I need something here that's gonna split my content up. I'll worry about how I'm gonna do that or maybe you're in your head, you're already saying I'm gonna use display flex or I'm gonna use grid. I would use flex for this with justify content space between but I'm really not worried about that. I'm just worried about going, okay, this is a piece of my layout that has two columns. Now what's the next one? Well, I see a few areas. This is the easier one down at the bottom and so I can come and highlight that. This one obviously is gonna need to be three columns. So I just have that nice and clear. I have that one group of content. So I know I need some sort of parent element that's gonna have those three things inside that will each be one column each. Perfect, okay, so that's another piece of layout that's kind of understood and simplified for me. Here it gets a little bit trickier and this is one of the reasons I pick this layout because we do have like these two columns right here. I just need to be on a layer that's above everything. So yeah, we have these two columns right here, right, for these two boxes, but then we also end up having this area here where this is stretching down and this is where I like drawing boxes because sometimes this is just text and all the background colors are the same and it's a little bit less obvious. So by having and just seeing, I have a box here going all the way down. Well, that means I sort of, if we go back to my pen tool, I have this area and let's use a different color just to sort of make sure we know we're working on something different. We'll go with like a blue. So for here, I see that like there's a column coming, you know, I have to have that. So I need to have this area sort of defined as one block around here and then I can have that other column that's coming down across on this side. And that can even help me a little bit because I can see over here, like if we look at this area right there, this is like, that one's like two thirds, right? And two thirds very messy. And then if I look at that side over on this one, this side's the other one third. And so, okay, that just helps me, I'm gonna have to find a way to have two thirds and a sidebar that's one third. And then inside of this two thirds that we have there and my layers keep going lower down. So this is getting a little bit frustrating, but then over here, if we go back to the pencil tool, here I have this area and let's change colors again just because we're sort of looking at a sub layout. And then I have this area here that's gonna need to have, you know, two columns inside of that blue box as well. And I sort of start seeing sort of like maybe some patterns and some ideas. And so like the main point of that now is when I start writing the code for this, I can easily come through and start basically planning on that. And so now let's say I'm ready to go into VS Code and I probably want a bit more planned out at this stage, but let's say I came in here. First of all, just if you're in VS Code and you do an exclamation point, you can just hit Tab and it's gonna put in like the boilerplate starter here. So you don't have to write all of this, which can be handy. But if we come in here and we look, right, I said right now we have that red box. So there I might come in and just say I have a wrapper, you could call that container as well. So I have that area that's gonna be around the entire site. This is what's gonna be setting that max width so it doesn't take up all the room. Then I can look in here and then while I have that orange area that's all the way across the top and that orange area needs to get split into two. So then I just need to think about that a little bit. So in this case, I could actually just say display flex on my header and give that the two columns that I need just if I content space between and it would work. In this layout that would work, but I don't wanna be teaching how to make this layout like I said, I wanna be focused on the thought process going into it. So if we had a header that had a background color going the whole way across, well then I'd probably have my header, which would get a background color on it. And then we'd have to have the wrapper inside there. And then because my wrapper is inside of there, right? So we have that nested, then I would have to have something here inside of there that would have the display flex. And that's why when you just look at a layout, you don't think about all the different pieces that can go in there necessarily. And that's why I like drawing everything out because sometimes you can simplify things a little bit or sometimes things just need a few extra layers. But in this case, we could just do that. And in here, let's say class is equal to primary header because I do think it would be worth having that just in case you had a headers in articles or other things. So this is the one that might have your display flex on it or maybe you have utility classes or whatever, but you're something in here that's setting those up. And then I'm not going to do the whole thing, but then you'd have your logo here and then you'd have a nav that would come and be your nav right there. Then we'd come down to over here with the rest of this content. Now it would be a good idea, that's my header. So I'd probably want to have a main going with all the main content. And I do think in this case, the main would be everything here. And that's just so I have proper semantics coming on it. But then I have that blue area, right? So in the blue area, I have this side here and I have this sidebar that's on that side. So to be able to do that, you need something to be able to create that layout. So maybe you have your main with sidebar and that gives you the two thirds on one side and the one third on the other side. And then here you have your main content plus you have a sidebar. And maybe the sidebar is not a div, it's in a side or something like that. It really depends on the layout and the content and everything. So I don't want to go too deep into the semantics of it, I have this is my blue box on that side and then the sidebar is the blue box that's coming on this side right here. And then there's more content in there and I'm going to address that. But then obviously even within this main content going inside, like I just said, we would, we had this area here. So we had that image across the top and then we had this two column part there. So that means here I would need to have that image that could go all the way across the top. And then I would need something for those two columns. So call one and then the call two. And I need a way to do that. And there's a few different ways I could approach it. I could be thinking, well, I'm going to use Flexbox because I want two columns. So in that case, you would need to have a parent around those two that could use Flexbox and turn them into individual columns. Or maybe you see it using grid and then your main content is setting up the grid and you can just get that content within the grid cells that you need. But as long as you've drawn these boxes, there's not really a right or wrong approach there but you know you need these two columns coming here and that's the most important piece because then you have the div for each one of those to be able to make that happen. And then I know that outside of that main with content with sidebar area, I need something that's going to be three columns. So maybe we come down still inside the main and here we can just do like a three columns div or something like that. And then once again, we just have the call one, the call two and lastly the call three that comes inside of that. And it's sort of giving us this like big picture of our layout and just all the different, the bigger picture pieces that we're going to need. And then from there, we can drill in deeper on the different things that are happening there. But just big picturing it, it's really going to go a long way. And then from there, you definitely do need to dive in and start looking at, okay, what are the different things that are going? So maybe that's you delete these and you can keep the other boxes if you want because we, you know, but I can delete those or I could lower the opacity and I can start looking at what the different pieces inside each one of these sections are for my navigation. I see each one of these as an individual piece. So I'm going to need to display flex in there. I'm going to come and look here, nothing too complicated. As I said, I have these two columns. So I just put the content I need in each one and it should be fine. Then I come over and I look on this side and okay, well, there's a little bit more going on here because even though this is just one piece here, I do have like individual little pieces that are in there. There's not really any layout going on, but I do need like this is a box. This is its own little box. And each one of those is probably a link of some sort because it looks like it's like a new site or something. I'm not just doing like an H3 paragraph, H3 paragraph, H3 paragraph, but I'm probably doing like a list here even. And then each one of these list items has the H3 and a paragraph and then there's a border bottom or something like that. So I'm looking, now I'm drilling down and looking at the smaller pieces. Same thing down here. I'm starting to look at this and I go, okay, well, now that I have the bigger picture, how can I do this one little piece that's in here? And I see, okay, I have two columns and then on this side, I have this just regular flow content. So I have a big font size heading and then just a regular paragraph, but I need something that's gonna create the two columns that I have here. But already they're organized together within that column, right? So I had my call one. So then now I'm thinking about, okay, what's the smaller layout pieces that I might need within that column one? So if we did, I won't even, or we could do it really fast. We have the call one, whatever, I wouldn't call it call one. I probably just have it as a column or even like a card or something like that. Don't name them call one, call two, call three, because if they're all gonna have the same layout, keep the same class name for them. And then right in there, I'd probably just have my image and then after the image, I'd probably have a div that has the content and then so here I could say content. So the image, which would go on the left and then I have this div that has all the content on the right side. And then I could either again use grid or flex box to try and make that layout actually happen. And again, the reason I'm saying not to call it call one, call two and call three is because the layout for each one of them is the same. The content inside will change, right? The image for each one of these is different, but the width of each, you know, the image is always the same size, the headings, everything here is the same. So I don't need a call one, call two, call three. I just need a card or a call or whatever, something that's organizing this in from this content effectively. So naming things is always the hardest part in CSS, but if things all look the same, don't number them. They're just one piece really that we repeat and change the content of. And one thing I want to mention before I move on to the last tip I have for practicing this, because when you're doing this early on, you probably will make mistakes or you might pick grid instead of flex box and realize maybe the other one would have been a better choice. Don't stress too much about that side of things though, because making those mistakes is what's gonna help you because you're gonna, okay, I should have used this instead and you build up that experience and it gets easier. But I did want to address why I wasn't focused at all in the mobile version. And it's because the desktop version normally is much more complex. So if I looked at this version, everything just stacks because that's what happens at mobile. I read, you know, it's one piece after the other. So there's no actual thinking of the layout that has to go into it. So even if I'm planning to build like style things up and build my layout to the mobile first approach, I wouldn't wanna look at the mobile layout first because I wouldn't be prepared to add the complexity in. I need the structure to be set up. So when I need that, like these two columns, I just use a media query and that one div that wasn't becomes two columns. But if I didn't have those two separate pieces, you know, if I had one box, if this green box wasn't two separate divs, but it was just one big div and I did a display flex, well, then I'd get three columns because there'd be three pieces of content here or here it would become a complete mess. So I always wanna look at the desktop version to plan everything, to make sure everything is organized in a way that can make sense. And then I can start coding things up and then adding the complexity through media queries or through other sort of more intrinsic design approaches, but don't worry about that so much. Just focus on how you can organize your layout and then building it up from there. And I said I had another tip for you. So my other tip is actually to go on existing websites. And the nice thing with this is you can get like immediate feedback. The one thing is there's a bit of a caveat with this is like sometimes existing websites aren't well built. So, or if it's an older site, it might use things like floats, which are scary and you don't wanna use today. But the advantage of going on this is this has already been built and hopefully by a professionals who know what they're doing. So you could just take like a screenshot of it and go through the same exercise if you wanted to or you could just sort of go through and like visually tell yourself and like try and how would you organize all of this? And there's some complexities going on here because again, here we have this big area or we have the navigation obviously across the top. But then here I have this big area with that main area and a sidebar. So I have those two columns. But then within there, even within this part, then I have two columns here. So I sort of have this bit of content in that. I come down, well here we have a different piece. So this is sort of all part of that same column but in this side I have these breaking apart. Here's three columns, here's two columns but each of these two columns has these pieces next to them. So these are broken up into two columns as well. And you're gonna go through this and go through this thought process and trying to see how you would just visual or when you're visualizing it, how you think you would do it and then use right click and you inspect it and you see how they did it, right? So you can start all the way at the higher level and I can get all the way to here. And I can actually see in it they're using flex. So I can turn on the flex inspector here. It's just a little tag that's there. I'll zoom in to see. You can see it a little more clearly but I can see I have that main area or here's the container, right? That's holding everything and stopping it from getting too wide. Then I can see that they're using a display flex here to make the two columns. Cool. And then I can come in and I can actually see in there or let's go inside this column and I can find this div. And then in that div I can go through. I find that there we go, there's the other flex that's making the two columns that I have here. And I can visualize it and go through it that way. And I can see in this case they're using flex everywhere. Another thing I would also suggest is if ever you come across a website you're just browsing around and you see a layout and you go, wait, how did they do that? Take a first try and guess. Don't just look at what they did but try and guess what it was like we were just talking about. But then, see if you're right or not. Cause here it's a really interesting layout on Stephanie Echols modern CSS.dev which if you don't know about I would definitely recommend. Where we have this like header area with the title and the date but it's lining up with this content that's down here. But then we have this which is also lining up with this the other way, right? So like this is vertically aligned. This is horizontally aligned when you look at those two and you might be going, well, how would you do that? And I have a few different ideas and I'm not sure exactly how Stephanie actually accomplished this. And that's one of the fun things with CSS is there's sometimes different ways of doing it. And then you go and right click and you inspect and you can find out exactly how they did it. So here we have a simple container that has probably the max width on it, right? That's it. There we go. We have the width on there that's holding it. And then we have the margin left and right of auto to stick it right in the middle. Nothing too complicated and that's perfect. But then how do we do it down here? Okay, well then we can just go to this next part and we'll look at that, that's set up with grid. And this is a trick actually, I like a lot with grid where you can get the middle column to pretty much match of a regular wrapper or container. And so this is always going to match anything that's just sort of floating around on its own. But then because it's grid, I do have the ability to place things in those extra areas on the side. And so you go, oh, that's really cool. And if you're not 100% sure how it works, you could just make a really simple example of this type of thing where you try and recreate it. You have their code here at reference to try and build it up a little bit. Or you could just remember like, oh, there's a way with a grid of doing that. You're aware of it. You might not even know exactly how it's working. But then if ever you have that idea in your head, so if ever you do need to use it or something comes up, you might just get that little spark going, wait, I know this is possible. Let me try and remember how we could do it and then try and figure out sort of the technical side of things from there. But by looking at examples of existing websites, it really just helps you break things down. And especially with the grid and flex inspectors that we have now, it also makes it so much easier just because we can actually literally visualize like the different pieces that are going on with all the lines and everything, whether it's flex or grid. So for me, that's really fantastic and makes our life a lot easier when we're trying to break down layouts. And just going back really fast to here, because one thing I did do is I talked a lot about flex or grid and I'll figure that out later. And you might be going, Kevin, tell me which one to use. And so in this case, I don't wanna focus on like the technical code side as much as the organization side of things. But there are definitely things that flex is better at and things that grid is better at. And if you'd like to know a bit more of my thought process into how I choose between which one by leaning into the strengths, including code examples of like why each one I find is better for different situations and then how I use the knowledge of that to be able to pick which one I'm using. Well, of course I've covered that in a video already, which you can find right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome, Johnny, Tim, Simon, Michael, Andrew and web on demand as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.