 Hi there, my friend and friends. Writing code is fun, right? I mean, that's hopefully why you got into web development in the first place. So when you're given a new project to work on, it's the very first thing you want to do. Of course, it's to write some code and start making things happen. But there's one mistake that a lot of web developers make, and especially beginners, and that's not planning things out enough before they start writing their code. Now I do talk about this from time to time, but I've never dedicated an actual video into a lot of that planning process. And I think for people that aren't used to doing that, it could be useful to look at it in depth. So that's exactly what we're going to be doing in this video. So I poked around a lot and I found this here and this is on frontendpractice.com, which is a fun site because it's looking at actual real world sites. And so when you're, you know, you have something to compare to and stuff. Now I do think the Starbucks one has changed slightly since when they put this together, but you can see you get some colors and a few little simple things to at least get you started with, which can be kind of, you know, a nice starting point. But I want to look at this layout and sort of the process. It's not the prettiest layout in the world, but it's one where there's a lot of good things we can learn in just like the thinking about process and the planning process when we're going over something like this. And so what I've done is I've downloaded the image and we're actually going to do this in paint. Now in the old days when I was working, what I would actually do is often actually print things off and sketch things out. I find that works really well, but doing it in paint or something like that can work. And plus it's easier for you to see what I'm doing on the screen here. And the first thing like you can do a quick run through and just look for things that are going to be like very simple things to set up. And one of the first things that I like to do is just look at the typography and see if there's anything weird going on or if there's a lot of consistency going on. And so in this case, I can see the typography is actually really consistent, right? It looks like it's the same font is being used everywhere at the font sizes look consistent. Like this one is, we'll go with like red, this obvious, I guess that's my h1, it's the title of the page. Then we have a paragraph paragraph, the button that's there, if I come further down, this would probably be an h2. And then I have a, this one's a little bit smaller than the other ones that were up there. So that is something to pay attention to. But we have this slightly smaller font there. These would probably be my h3s. So we have those all these are the same right here. Another h2, again, this one here, this one here, they look like they're the same. So you just start getting like this consistency, sorry for the bad typing, there might be a few like this one's a bit smaller, but it's definitely bigger than this. So just like you find these things to start setting up your font sizes. And it's really going to help you out. And again, you might see that there's two or three different fonts used. So you create classes or like different things that are going to help you with that. And you set all of that up early on. And the amount of like layout stuff that type has an influence on, I always like having typography set up early on to begin with. So that's one of the reasons why I like looking at typography first. And it just helps sort of set the tone of how things are going to progress from there. I guess we'll just go with another color because I don't think I can quick erase with a blue. Because then the next thing I start doing is like layout stuff. And this part, you know, obviously we have our navigation and a few other things like that, but 10, again, the font is the same bold font size. And again, you right now we have the bold font size going on, but you often you'll get like, you know, you might have a bold, a light, medium, whatever. So you also another thing to look for with fonts here, the layout, this part's kind of like unique in that it's just this little part by itself, that doesn't really seem to repeat itself. But then we get to this section, this section has the center text. And then we get, I'm going to do this really rough, but then we get three columns here. And again, it's all centered. So I could even put like on this section, and I was looking at this and going, well, this is a section. And this one, the whole, the whole thing is centered text. So I could do a text line centered across this and, you know, put that on the parent and everything in there gets centered. And I'm good to go. Then I have this section. And also I like looking at colors. So here I see like, this is a white background color, my body's background can stay white. I have this lighter green and a darker green. And we just seem to rotate between those. Oh, we have this one here too. So I might have some utility classes set up to do those. Well, I'm going through, as I said, a little bit. I'm not planning this one out. I want to sort of go through the thought process and the things that I'm looking for here. So sorry, if it's a little bit scatter shot. But here again, I can see this is probably centered. Here I have something with like a display flex on it or something to get the columns going on. Over here, I have two columns. And another thing we're going to see by drawing boxes on stuff. You can sort of get a few things that will start coming up. But I'll circle back to that in a second. But here it's not centered because this is all left aligned text that's here. So I know some text is left aligned. You know, we have the left align at the top as well. Then I can come here. Well, this section is basically identical to this one. So what's the difference? This section here, we have a number on each one of them. This section over here, we have these images. And this is the type of thing where a lot of beginners make mistakes. Because it's two different sections, they treat it completely different from one another. But the exact same CSS for the two of them would work for both. Other than maybe if this is like a numbered list where you're styling up something a little fancy for the numbers. But like the layout is identical. So I could create, you know, anything I do here, I could just copy and paste it basically down here, and then just change the content. I don't need any new classes for anything happening here other than those little numbers, however you want to create those. Everything else is the same. Okay, here we have links that are in the text. And then down here, the links are after the text. That's like the big difference. You just make a new paragraph, throw your link in that instead, right? So like there's not, it's just changing of content. And finding these types of things, these repeating patterns is so important. And it makes your life, this is where you really save a lot of time. And you also make projects more maintainable, because they're very similar. If you did need to make a change, you make a change to that one class or whatever it is, it's going to update both sections at the same time. That's probably what you're going to want to do anyway. Design is always about consistency. And there's, if it's a good design, there's going to be consistency throughout the design. It's finding that consistency and making that work in your CSS, that is really going to, you know, come through and help you out a lot. And then there's this section, which is kind of interesting because well, here we have that centered text thing again. So like on this section, I could have a header that has text centered on it. So having like a text center, you know, this one, it's the entire thing, but having something like a utility class to do centered texts could really be useful on a project like this. And then here, I could do it for the whole section. Here I could do it for the whole section. But then down here, I'd only have it on this header section over here, or the header of the section, whereas down here, obviously, I'm not doing it. And then down here, this one's obviously a little bit more unique. But again, the typography is all the same. We're not, we have the same font sizes, same font weights, all of those things that were in the project earlier. So the only thing different here is the layout. You don't have to do any new classes, anything new for the text itself, which is, you know, pretty useful. And again, saving time because I see people that will have, you know, section four heading class section for each three class or whatever it is, every section along the way, because they go from top to bottom without looking at anything else. And they're giving different classes to everything. So really, really try to avoid doing that. Here you definitely need to come up with something a little bit more, you know, this is definitely custom. It's not centered. All the other sections were centered. This one is set up on the left side. So we have to come up with like a special container or something just to hold this to give. And then I probably have one big container like that. And then looking at this, then I get my three columns in it. And then here we have this part, because you have the underline that's coming on it, but then I get my three columns. And then here it's still three columns, even though the content here is empty. So I would still be setting up my one class for all of this. You know, I have the one container, and then I have a three column thing set up in there. And then a three column thing. And then here I have a three column thing as well, just with an empty third part to it. And for that, I'd probably use display grid and not display flex, even though it's three columns. And they're just going next to one another. Whereas, you know, a lot of time people will think, well, the flex, it's 1D and then grid is 2D. But something like this here, this actually makes sense for grid, right? Because first of all, I do three separate ones, just it would make the border much easier to do, especially because actually the border goes all the way out. So that's also another thing to look at there. I don't know if there's an easy way to erase all the stuff I drew here. If I don't think so, I'm not used to paint. But, you know, having everything maintained here, but the borders going all the way across is one of those things you go, oh, if you didn't think that, and you just did what I said with one container going the whole way. And then you realize that you sort of have to change your approach later on, which can be a little bit annoying. So here again, I would have my grid set up. And the reason I'd go with grid is just because it would be much easier to have this empty cell over here, right? Because you're just setting up the grid, you set it up for three columns, and then if you just don't have that third piece of content, it's fine. It just doesn't use that third cell. But this would still live in that space. And this is why, especially early on, I like drawing stuff. Because when I draw that line down here, like when I did that line that's right here, that's where I sort of all of a sudden noticed that I have these that are breaking out the side. So later on, you might feel like drawing things is wasting your time. But whether it's opening up in paint or printing it off, if you don't mind printing things and like writing on it and taking notes, that's what I sort of like about printing it off early on is I would have it like lines coming off into my margins. And I'd be writing the heading levels and different stuff. So I could see that and see, okay, like these eight things are like that. So it just made it a little bit easier to have it on pen and paper. But if you don't have it, obviously, you can do all of that online, there's probably better tools out there for marking things up like I'm doing now. Right. So just to give that some thought. Now, the other thing that I mentioned that I want to circle back to is again, this area is kind of its own thing, we just have a little box that has a max width on it, you might even have a br here, you might have to because the is a tap is probably always going to fill in this part here. So having some sort of break would be important for that heading. If not, you'd have to have three different widths. It's going to be annoying. But everywhere else here, we have this really wide container. And the other thing is I am sort of looking at this is one big wide container, even though this is centered over here, just because like this is a short line of text with that center aligned, it doesn't need to have something with a width on it. Because if the text got longer than the text we get longer. Right. But this is sort of my wide container right here. So we need something with a max width on it. It's going to center content, but it lets it get pretty big. Then when I get down to this section, they're a lot smaller. This one, I could probably do the sit like have the same container for both of these and have this as my narrow arrow. Just because the way I see myself designing something like this, I'd probably just have a display flex and then an align item justify item center. So it just sits in the middle. So it's a little bit like having your center text here. Even if it has more room to live, it's squishing down and it's living in the middle. So I'm not so worried about like the widths and stuff. And I guess as the page got narrower here, if we hit that, no, this container might have a bit more function to it. But that's sort of how I see that is having a narrow container here and having a wider container there, then that same wide container could be used here. Right. Wide. Right there. And then what else down here, this is, I guess, actually, if we look at this, I could be wrong. And this is again, if we look, it's we can keep both of those on the screen. This does look like it lines up. And again, most designers, if it's a good designer, they're going to have consistency within their designs. They're not just going to put in random stuff all over the place. That can happen. I've seen designs where there's consistency in a lot of places, but inconsistencies and widths and stuff like that, which can be annoying. But since those look the same, this could be my narrow container again here, just so I don't have to worry so much about like where these line breaks are. Right. So that's my narrow container. And then this is my left aligned weird grid thing. It's by itself, it's its own thing. That's fine. That's going to happen. And so this is just one of those things here where you just have to custom style something and it's different from everything else. And that's fine. Maybe we could reuse the three column class thing we did here to create the stuff down here, not 100% sure it's something you could try and see if it works or not. But you know, it's it's it is one of those things. And even here, just like, you know, I didn't look at it, but we sort of I've been doing a lot of the bigger picture layout. And because there's not a lot of smaller stuff, there's I guess this thing right here and everything. But I do find looking at the bigger picture of like how am I organizing my page helps. And then you sort of start like, okay, now I'm on this, I have my three columns set up what's happening inside those three columns. And then I get this other like two column thing here. Maybe I just use a display flex with a gap on it. And that does it perfectly. If I'm doing that, then I have like a div for my text and I have my image here, right? So nice and simple for that. A flex probably is a bit easier here, just because of how it's set up. But you could probably use grid or flex for something like this would work perfectly fine. And then maybe you decide later that you want to switch from one to the other. It's not the end of the world, but just knowing, okay, I have these little components that need to have like a small and a big actually maybe grid is easier because of that. You just set your two column widths and you're sort of fine. But yeah, just different a few different things to think about. But just like breaking things down as much as possible before you write any CSS is going to go a really long way. And honestly, I know it can feel really printing something off can feel really strange or just coming through on a document like this and just marking it up and drawing scribbles all over it can sometimes feel like you're you just want to be coding. That's what you want to be doing. But like having your list of colors and having your list of font setup before you write anything setting those up, then as custom properties, your font sizes, your font weights, all of those things early on, then coming back through going through case. Here's my big layout pieces. Here's the smaller things. And here's the one offs the bottom thing. I'm not going to worry too much about that until I actually need to code that one thing up. I could have just a few things set up really for this and have almost all of it done, and then come back through and okay, now I need to do something special for this area. And now I need to do something special for this area. But a lot of the other stuff, it's pretty fast and pretty easy because we have these reusable things. I don't have to write new code for it. I'm just setting it all up. And then I'm ready to go. And if you're still watching this, I am going to assume that you're relatively new to web development. And I hope this gives you a bit of an idea of how you can get started with your projects. And it's sort of a better planning stages because it really does make the difference. But often also when we're doing our projects, it can be hard to know where to actually start writing the code as well. And so if you are struggling with the CSS side of things as well, when you're trying to make your layouts happen, I have a video right here that might help you out. And with that, I would like to say a very big thank you to my enablers of awesome Johnny Simon, Michael and Tim as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.