 Hi there my friend and friends. If you're relatively new to HTML and CSS or just web development in general, one of the most important things to do is to practice by building out projects. But one of the hardest things to do is first of all finding projects, but then also actually getting started with them because I know what it's like. You open up the design and you're staring at it and you want to start writing some code and you just have no idea where to start. So today I'm going to be creating this relatively simple layout, which is a challenge from front end mentor with the challenge linked down below if you'd like to follow along with me. Now one thing I'm going to do a little bit different is instead of simply telling you every step that I would take to go through this to actually make it, I'm going to explain things as much as possible, including my thought process and how I'm trying to like tackle some of the problems with this because unlike most tutorials, I've never actually made this layout ahead of time. So I'm going to need to break things down and think about them a little bit as I go through all of it. So if you do want to follow along, what you want to do is click on the challenge. Again, it is linked down below and that should bring you to a page that looks like this where you can download the starter code. I have a premium account so I can also download a figment or sketch file, but I'm not going to do that. I'm just going to go with what you can get on a free account, which is the starter code as well as the design files themselves and a little bit of extra information as we'll see. And then once you've downloaded them, we're going to open up your editor of choice. I'm using VS code right here. And what we're going to do or what I'm going to do is I'm going to go to file and I'm going to choose open folder. Now, once I do that, I can go and navigate and find the folder that I've downloaded. You will have to unzip it first though, because when you download from front end mentor, it does give you a zip. And we're going to do a select folder right there. And then what that does is it gives me this and the handy thing with this, we zoom in a little bit to make some font sizes bigger. You can see I can see all of my files here inside of VS code. For me, it is right here for you. It's probably on the left side of your editor rather than the right. Because that's where the panel usually is here. But I like having it on my right side. So other than that though, there is nothing different. And let's jump right in here and you can see we have an HTML file that just has all of the text written out for us basically and nothing else too much. We also, if we come in, we have a style guide that we're going to use a little bit of, especially to grab our colors from. Though if you are in Windows, I'll show you another option that you can have. They only tell us our font size for the sort of base font size that we're going to be dealing with. So we don't know what our headings are, but it's really not a big deal. And you can see here, they also tell us that it's using the pop ins font family with the two four and 600 weights. And we also have our images right there. And we have the desktop design that the larger one there as well as the mobile design right there. So let's get this started. We can jump back over to our index file here. And one thing they don't do is provide any other files in all of this. So the first thing I'm going to do because we're going to need it is create a style dot CSS file right there. And then we can come back over to here and I want to link over to that. And what I'm going to do is because I'm in VS code, it comes with Emmett installed. So I'm actually going to write link, and then put a colon and just put CSS and hit either tab or return will auto fill that for me. So I don't have to write it out myself. And in doing that, we now are linked to my style dot CSS. Now it didn't know that I was calling it style dot CSS. It doesn't see this file. That's just the default that it calls it. So I just did that on purpose. So if you have named your CSS file something else, you just come here and change the file name or if you need to go into a different path or anything like that, just make sure that you're linking to it the way you need to. And while we're here, I'm also just going to delete the attribution. I think we're attributing front end mentor enough by using their project and mentioning them throughout this video. So I'm going to delete the attribute or the attribution from there. I do have prettier installed. So it did change the spacing and the formatting on everything for me as well. It's not going to be a big deal for as we go through this though, it does make it a little bit more of a challenge, but I'll grab the text where I'm not too worried about that what I am going to do those I'm going to open this design up here in a just in my regular Windows editing software, whatever, what I don't even know what they call it anymore. Whatever, I just opened it in my computer. And we have this is the layout for the desktop. And then if I go here, this is the layout that we're going to be building for mobile. And in general, I do like looking at both of them before I actually start doing anything, because I have to figure out a few things. And of course, with this project, for the most part, one of the reasons I chose it is it's very straightforward. So like maybe you, you know, you look at this top bit and you can probably do that pretty easily. It's not nothing too complicated there where a text align center does most of what you would need. Each one of these individual cards, there's nothing too fancy going on with those. So maybe you can create those pretty easily, you can actually also create three columns, you know how to do that. So for the most part, you know everything you need to do, but there's a couple of tricky things, how are we going to offset these downwards a little bit. And that's something we're going to definitely be talking about. And you want to plan that ahead of time a little bit, because the way you write your HTML will be influenced by how you might be setting things up when you start doing your CSS. So when I see this, I'm just hitting the edit button here, so I can draw some lines because I like drawing on my layouts when I'm doing them. So here we go. And just go into the markup. And the reason I want to do that is, as I said, here we have sort of this area right here, right, that we have. And the easy thing to see in here is that we have three columns. But when we look at this, there's a few things we need to figure out is like here's let's just say this is number one, we always left to right in general, right? And then we get to this one, which is number two. And then is this one going to be my third one? Or is this one going to be my third one? And start thinking about this stuff before you start writing any code, because you sort of need to decide that when you get to it. And of course, you can make changes, you run into problems, you might have to fix something you did and move things around. But the easiest way to sort of know the general flow that things should probably be in is to, of course, look at the mobile design. Because when we look at the mobile design, we can just see it's one, two, three, four, right? They all mobile design is always the easiest thing. They all stack. So it sort of shows us the order we're going to be putting this in our HTML, we can change the order if we're using grid or flex. It's not that hard to do. But in general, I like to try avoiding that unless there's no alternative. And I just have to do it. So without changing the order, that means this one should be my third one. And then this one should be my fourth one, because that's how it is at the mobile view. So that does mean that maybe what I could do is just make three columns using Flexbox like this and organize it. So the first column only is one in a minute. The second column has two items. And then the last one over here has that one last one. Of course, if I do it with Flexbox, then I have to figure out, you know, how am I going to push these down? There's different ways that we could do that. We'll have to think about that a little bit. The other option that we could take is instead of using Flexbox, you could come in and you could use grid. Grid would definitely be a little bit more complex to set up. So it could be which which of the two do you feel like you should be practicing which one skills do you want to level up on a little bit? Because this is I think one of those situations where you could come up with a good justification for either Flexbox or grid. But if I did do a grid here, I'd probably need to set things up. So I'd be dividing things this way. And of course, there's a division here as well. And it gets a little bit more complex. So I've decided in my head which one I'm going to use. But ideally, at one point here, if you're following along with this, try and make some of these decisions on your own. I'm going to leave a few of these things a little bit opened for you know, because there are different ways to solve these. So think about how you would do this as we're going through the video a little bit. The important thing right now is I know one, two, three, and four. So I'm going to start with that. And then we'll sort of come in with the structure maybe a little bit later. But for the moment, I'm going to move this onto the side here just so I can see it and keep it in view because I like being able to look at my layout when I write my HTML. So we can come in here and we don't have to do too much. But one thing, you know, this, this sort of is my header area, I guess. So I'm going to try and use some semantic HTML along the way here. So I am using Emmett, you can just write header and hit tab. And it brings that in for me. One thing we'll notice here is this area is fairly narrow. And if we come and take a look at this screen size, in general, we don't have to worry about it. But we definitely everything does fall within like sort of a specific width here. There's a few different ways that we could handle this type of behavior, but I want to keep it as simple as possible here. So again, if you have a different way that you would approach it than I'm going to here, that's completely fine. But I think what I'm just going to do is have my header up there, then I'm going to do a dot wrapper. And you might also hear of a wrapper, people will call these containers as well. I used to call my container, I've switched to calling it wrapper, just because we have something in CSS called container queries now, where sometimes you might want to define a container and if you had a utility class or something for it, you would just make sense to call that a container. So I've switched to calling these wrappers. And I'm also going to come in here and I'm going to do a it's going to be a wrapper and narrow. And this is the BEM naming convention. It's not something I use as much as I used to, but it's super, super common. So I'm going to use it for this video. So I have my wrapper, and then I'm going to make the wrapper be a narrower one than usual, just in my CSS with that name on there. And then we can come here and say that I have an H one reliable efficient delivery powered by technology. I personally think that's like one sentence when I look at it. So just because it's two lines, the first line is light and the second line is bold here. For me, that's reliable, efficient delivery powered by technology. The capitalization on it doesn't really fit with that, but it still feels like one sentence. I'm just going to grab the text from the front end mentor that they provided us. I'm just going to drag the bit that I want up into here. And so we have the reliable efficient delivery powered by technology and I had word wrap off there and I turned it on if you want to be able to do that it is an alt Z and alt Z will turn on and off your word wrap. So reliable efficient delivery. And then here what I'm going to do is I'm just going to do a span and say powered by technology. And this span will set the bold font weight on it. And potentially if we have to, you know, you could also come in here, I guess with a BR if you feel like you need to have the line break. I don't think we're going to need to bother with that. But if you put one, nothing wrong with that whatsoever. The one thing you wouldn't want to do here. And the other reason actually I just want to sit on this for a second because people make a lot of mistakes when they're doing headings. So I do want to mention that it's important that you don't have this wouldn't be like an H one and an H two reliable efficient delivery as an H one powered by technology as an H two doesn't really make sense because an H two should be a section underneath your H one. It's a lot like how chapters work in a book where you have or think of like a textbook, right? We have a chapter and then you have subsections under it. The H one would be your chapter and then the H two would be one of the sections within that larger heading. So reliable efficient delivery. Maybe could be the H one and then the powered by technology bit I guess could be a paragraph underneath that but that doesn't really make very much sense to me. So that's just another reason why I'm coming in with an H one around the entire thing. Just going to clean that up a little bit and then we do need to get this entire paragraph right here. So here I can just come in do a paragraph and bring that in. I just copied and pasted it this time instead of dragging it on over. And there we go. We have the paragraph that follows and that's going to be our bit of text that is right there. And next we want to go down into now this this area down here right where we have our grid. So because we finished off this header here what I'm going to do is we're going to come down and I'm going to do my main and I just did type main there and hit tab because as I said I'm using Emmett really fast. If I do that that would work. If I just do a dot wrapper and hit tab that's going to bring a class of wrapper because of the dot and maybe you have say a section that has a I don't know a name and then you would get the ID because I used a hashtag there. I'm not going to deep dive how it works in this video but just to slow that down a little bit just in case it was going a bit fast for anybody. If you do want to learn more about how Emmett works I have covered that in a previous video that goes a lot more in depth and shows you a lot of ways you can speed up your working. So I'll put a link there should be a card popping up and there'll be a link in the description to that one. But we definitely do want to have a wrapper here and I'm not going to create a narrow wrapper it's going to sort of be my default wrapper. So I'm just going to leave that one like that and not have any other modifiers or changes that that one would make. Because as I said this one's going to be wider whereas that one on the top right we needed that one to be the narrow narrower one right there. Now there's a few different ways that you could approach this next part but one thing that's important with it is so I could add more classes to my wrapper or I could I could have this be more of my entire layout. So this could be a completely different name or I could come on here and add a second class to here that would just sort of I guess be like my grid or whatever we're going to call it grid layout or layout or anything. I just tend not to like having my wrapper do more than one thing there are times where it could be useful. So if you want to go that route no problem at all if that's how you think you're envisioning it it probably wouldn't cause any problems and you'd have a little bit less devs and everything in your html and that probably be a good thing but I tend to like having this do that one thing and do that one thing really well and then worry about the other stuff that's going to be inside. This has the job of holding my content and preventing it from getting too big and then that other content will go in here. It's just sort of my mental model around how I use my wrappers. Now we can come inside of here and we need to make that decision and I said you know left this up to you a little bit on which way you would do it and I'm actually going to explore both options because I want to show them both to you. I prefer grid my first instinct for this is definitely to go grid but because of that I sort of want to do the flexbox option so we're going to do that and then I'll quickly show you the grid alternative just so you can sort of make up your mind but if it wasn't going to be in a video I would just go grid and not worry about it but if you chose flexbox it's perfectly valid because I'm going to go that route too sometimes one is better than the other but in this case I think either one would be fine so in my wrapper I'm going to call it my layout grid and we're going to go in there I come up with names like this even if I use flex the word grid doesn't necessarily mean it has to be a grid right and I guess the one downside actually if this was only being done with grid and this is one of the reasons I like it is I could come in and I'm going to call all of these cards so actually I said I wouldn't do any more emit but I'm going to do card times four and I'm going to put the four cards in there so it's card star four and then hit tab or return and I could do a I could do this for my layout and it would work perfectly fine and I wouldn't have any issues if we want to go the flexbox route we have to come in and do a little bit more work because here we sort of need this extra area for that so what it tends to end up being is we end up with column times three and these don't actually need to have names on them really but I'll put that there just to make it obvious what it's doing and then in my first one I have a card I'm going to copy that my second one ends up with having two cards and then my third one here are my yeah my third column has the fourth card in it so it looks something like that and one of the reasons I think that I prefer using grid for these types of layouts is just so I don't need these extra things to help control my layout but nothing wrong with it especially because we're doing a one two three four that way if it was a one two three four and this was the last one it would be a lot trickier to do with flexbox without playing with order and even then I don't I think it would just become a little bit of a nightmare so yeah let's go the flexbox route and do it this way and now let's come in the first card here and let's zoom in a little bit on what we actually need in here and actually I think what we have to do is I'm going to cancel all my changes on there so I can actually zoom in a little bit and see what the card looks like and now this is actually an interesting thing because in our card I wasn't going to do this but I'm going to take a screenshot of this just so we're only looking at my individual card here and the reason I want to do that is because I wouldn't be able to draw on this and I couldn't zoom in on it before and take a screenshot you can draw all over them and this is really straightforward but there is another decision that has to be made here so we have this layout and this is the nice thing with this is we have four cards but we only have one real decision because we have our card there which will be an element then I'm going to have this which is going to be my h2s and this is where you might look at it and go like this would should be like an h3 or I don't know what because you're looking at the you know this is a big font size and then these are small ones should never skip heading levels you have an h1 then the next one has to be an h2 so we're going in with our h2s so that's going to be my h2 this here is going to be a regular paragraph I don't even have to do anything up here we just throw this the bar there if you're wondering about it we'll do that as a border color and then I get this guy and this is where the interesting thing comes in because how do we get it to be on the right side over here and this is again one of those little things that we sort of have to decide as we're working on a layout just like before where everything here was pretty straightforward but how do we create that weird layout now I have to look at this smaller little layout and figure out how is this guy going to get all the way over there there's different ways that we could do this so once again I want you to think about this a little bit decide how you might try and do it and I'll give you my solution when we actually start writing the css for that bit uh because I think mine I like my solution for this one or how's this I think it's going to work because again I haven't done this but I've done that type of thing enough times to be pretty confident that it will work uh so there as I said we need to have an h2 after my h2 we're gonna have a picture a picture I put a p so I said picture we have a paragraph and after the paragraph we're going to have the image uh in this case and this is really important because we have alt text right all images should have alt text on them even if you want to don't have any it should be blank it should be a blank one and you shouldn't omit it you have to have the alt attribute on there in this case though I actually will leave them blank because I don't feel like the images are actually providing any extra context or information to what's happening here some people like using alt text or seo purposes it's not really what it's for if it's decorational it's decorational that's it we want to treat this as something that is there for accessibility reasons so if somebody's using a screen reader they know what it is here they're going to get supervisor monitors activity to identify project roadblocks magnifying glass doesn't help right you don't want you don't need to describe this it's decorational only it's a little extra visual clue but it doesn't actually add context or information or anything right to to the user so in my opinion these are all going to be left blank now all of the four cards that we're going to be creating here have the exact same layout just with different images and different text they're all going to follow this so I'm going to speed things up and just skip ahead to once I filled all of that out and there we go I have them all in place so I just brought my text in and I put the links to my or the paths to my images to link to each one of them and now the next thing I'm going to do is I want to see what I have in the browser obviously that makes my life a lot easier and I have an extension installed that I'm going to put a link to in the description but it's called live server I'm just going to click the button that it comes with that adds the go live another way that you can get this to work is to right click on the thing and just do an open with live server once you have installed the extension for it and that would also work and with that done here is what we get where everything we need is in place but now we need to start writing some CSS to actually make it look the way we need it to so for this part I'm actually going to just shrink this down a little bit just so we can keep the design on screen and keep the final thing on screen and then of course keep my code over on this side so I'm just going to rearrange my windows and be right back awesome so we're ready to go and the first thing I usually like to do is bring in all the fonts and colors and all of those different things that I'm going to need so I'm actually going to jump on over to Google Fonts here because we need to get poppins so we're going to write that in poppins and there it is so I can click on it from here and then you could download the whole family and you could actually self host this if you want to if you want to know about self hosting Google Fonts I've done a video on that in the past and I'll link to it in a card floating up above my head somewhere and in this case the if we go back to the design system that we had here which is the style guide I should call it we needed the 200 400 and 600 so I'm just going to come select the 200 the 400 and then the 600 over here and then they've they always change the layout so if you're watching this in the future this will probably be different but now they have a little shopping cart icon that I can go to and if I scroll down again they want us to download them now because I think self hosting Google Fonts is becoming much more popular but for today I'm just going to hit the copy button that's right here and then in my HTML will come all the way up to the top and I'm just going to link it right here actually just before my file there is a whole bunch of stuff as you can see when we do this you want to have it all part of this is for performance and stuff so we're going to include all of the stuff that Google is giving us there and then we're going to come and grab my CSS option font family declaration right there and we need to have that so I'm going to paste it at the top in a comment for now just so I can easily reference it after and the other thing that we need to do is grab the colors so if we come back to here we see that we list they list out a few colors but we actually have some other ones that are in here so I mentioned I'm going to show you a cool trick to be able to get those or a tool I should say but I'm still going to copy these ones over and paste them in just so I can easily reference them and then we can get started on this and start putting things together a little bit so the first thing I'm going to do is anything like this I always put in my root as custom properties just because it makes my life a lot easier if you haven't used custom properties before that's completely fine they're very easy to use and you'll be able to follow along perfectly fine with them I think but I will include a link once again to another video that does dive more into it and the first thing I want to do is actually take this font family here as a custom property I'm just going to call it font family sas that's how I name it it's a Saucera font this project doesn't really need it because we only have a one font it just makes it easy to change if ever we need to change it by having it up here again you could just call this font family you can have a different name or because we only have a one font we only have to declare it in one place you don't actually need this to be a custom property but when you start getting into larger projects I think that it's a good habit to have so I'm going to include that there the font weights we also have so because we have a two was it a two or four and a six I think which are kind of interesting so I'm guessing this is the two at the top this is the six and then I'm these are six and I'm guessing that most of them are using the 400 so usually if you do a font weight right so if I say body font weight most of the time 400 is like your regular most of the time if you do a bold it would actually be a 700 whereas in this case you want a 600 and then we also have that 200 which is like our light one so what I like to do is name them so I like doing a font weight and then I'm going to say light and it's my 200 my font weight normal or regular or whatever you want to call it is going to be my 400 and then my font weight bold is going to be my 600 and this is handy because most of the time that's actually a 700 but because this design is a little bit different you're not having to remember was it a six was it a seven you just always use your font weight bold maybe some projects that would be 800 doesn't matter because you just have that one name to always remember so that's how I like to do that for my font weights I also do the same thing for my font sizes we're going to have to just sort of eyeball those right so font sizes I do on a numbering system font size we're going to do 400 is always my sort of default in this case they did 15 pixels so I'm actually going to say one rem because you generally don't want to have font sizes smaller than that though I guess we want to match this as closely as possible just because you're perfectionist and so if we do want to go that route it ends up being a zero point it's 9375 rem and always do font sizes in rem please not in pixels I know it's easier you want to use pixels in other places that's fine just for accessibility reasons it's always best for your font sizes to always be in rem and the default there we are doing a base 16 I know it's a little bit tricky it takes some getting used to you open up your calculator right 15 divide by 16 gives you this number and you're good to go the other ones were eyeballing so I'm just going to guess a couple and we can always change them as we go so my biggest font size is always my 900 my numbering system here is based completely on the idea of font weights which I call light normal and bold but they have that numbering system where 400 is your normal and then higher up becomes bolder and vice versa so this would be my biggest font size it looks maybe like a 2.5 rem I'm just guessing we're going to have a font size 500 because it's going to be a little bit bigger right so we have a four a five will be these guys so that one's maybe a 1.25 rem we're going to throw it together and see from there how well it matches everything and I think those are the only ones or you know what this one looks bigger than those ones though right if we zoom in on that a little bit yeah so this is probably the 15 that actually might be okay for there and then we're also going to have a we'll do a font size 600 which can be like a 1.625 rem these are just numbers that I'm used to using in projects which is why I'm using them if you're again if you're not used to using rem you get into the habit you start knowing sort of the connection between rem and pixel values and you're good to go so and again we're just sort of going to be eyeballing it all along our way here anyway as for the colors we're going to do a color very dark blue grayish blue and very light gray the very dark blue is clearly this one the grayish blue is probably this text here I'm not sure what the very light gray is okay so let's just say I'm going to call it color neutral 900 which is my darkest color and it's going to be a neutral it's I know it's dark blue but it's probably okay and we'll see and there we go that's a pretty neutral color to me so that's perfect our next one is this one so let's just see what that one that's going to be my color neutral neutral I'm going to do that one as an 800 I don't know I'm following that same system the lighter we get the the lower the number oh that's pretty light okay that's going to be 400 and then what's this one going to be that's a very light color if that's our text color we're going to modify that color neutral 100 again we're going to paste oh no this is yeah this is going to be almost white perfect okay that's probably just the background color then that's my guess um but of course so that's these three that they gave us the poppins we're okay with we can delete that we need these bars that are at the top and they didn't tell us what those colors were so I'm using a tool called windows power toys which I'm going to link down below it has all sorts of stuff if you saw before is window snapping things into place I'm using it for that if I do a windows shift see I get a color picker and I can get anything on my screen that I want so I'm just going to come here and it's hard to get this little bar because it's kind of narrow I can just zoom in with my mouse wheel and get exactly the piece that I want and it opens this handy little pop-up right here so I can grab it in HSL which is fantastic and so I'm just going to do color I'm just going to call them what they are because I don't want to try and name these I'm going to grab the eye picker right here zoom in on the red you get the picture I'll go through these next ones we'll cut ahead color red while I get the other two there we go we have all my colors in place I tend not to like going teal red blue yellow but in this case it sort of fits if you wanted something that's more like meaningful rather than just calling them what they are you'd see often like a yellow would be warning this would be error blue would be success and teal would be or would no sorry teal would be the success and then this would you know you have different like sort of state names that these colors would fit well into but we don't really have state here so it feels kind of weird to be using it that way so whatever we're going to keep our keep things easy we don't have any shades or other things to worry about larger projects sometimes having names like this can be a little bit awkward because the color changes and then it's called yellow and you're you have a blue color all of a sudden it's weird but for something simple like this let's not over to think it and yeah that sort of has set the stage for us but we want to have a little bit more in here so a few things that are handy is first of all our box sizing and I don't think we're going to have any pseudo elements coming in here but it's very common just to have this with our box sizing border box especially because I'm using a flex box I don't think actually we're going to this might it's not as essential as it used to be but it's one of those things that you might as well do on every project another thing you'll often see is star and doing a margin of zero and a padding of zero in a lot of projects I actually do use that I think in this case I don't need to so I'm not going to put it another thing that I see is like we have our sbgs that currently are pretty small so they're not really getting in the way or anything like that so I'm not going to reset my image sizes but generally I'd have my max width on my images of a hundred percent with a display block just to prevent any weirdness from happening but we really don't need it in this project I'm trying to think if there's anything else that I'm concerned about not really so let's come in on the html and on this I'm going to set my font related properties I used to actually just set all of this on the body because you have to do because one actually in this case once again we don't really need it but it's just such a you know we always do this a margin of zero on the body to get rid of that default margin because we never really want it so because I was already doing this I was always putting my font related properties here as well but there's more and more css units that are coming that rely on root declarations for font stuff that I'm starting to put all of my font related things here so on here we're going to do the font family and in this case it's poppins how it's my font stack whatever we don't have to worry about it we have custom properties set up so I just have to do ff and because I'm here inside of vs code it knows that I want that so it autocompletes it for me and we have poppins coming in fantastic the other one we're going to do is my font weight which would be my var font weight and then you can see I just have those to choose from fantastic and I think normal is the one we want so probably don't have to declare it but I often do anyway for that one the other one here we're going to do is our line height and I'm going to do a 1.7 and just see once we start doing our layout we're going to see a little bit but the line height looks very spaced out on a few of these things so I'm going to set it to there now one thing with line heights is it looks good for your body text and small font sizes but it will not work well on larger font sizes so these I'm going to set a line height to 1.1 especially for this one here once it breaks onto two lines that's going to be kind of important to have that set up we might have to adjust that I don't know if 1.1 is the right thing but I'm just sort of setting the stage going with the flow a little bit and looking at my design looking here I realized I forgot to declare my color so let's set the color here which would be my var color neutral 900 I would believe and this is where I'm actually not sure and let's they see how we have the different cut this is definitely darker and that's a lighter one so this is where you sort of have to decide I think I guess here we're going to do our 400 it's going to be so light I might change this is probably not passing an accessibility thing and I'll talk more about that a little bit after but I'll leave that there and then we'll just come on all my headings here and say that the color on those is my darker color and the reason I'm doing it that way around is I would just assume that if this project were to get bigger and stuff that the headings would generally be the one that stand out and any new other elements that I come in with would probably you know if I had a span that wasn't inside a paragraph for example it would probably still be the lighter color and other stuff so I'm sort of assuming that's the base color for the project and then the headings are the ones that are going to be darker so we just rely on inheritance I set the the main color that's going to be used everywhere here and then I overwrite it where I need to overwrite it awesome so now there's a couple of little things we're going to do we have that wrapper that we wanted to create I don't know how wide this is at all we could measure it I guess there's probably ways of doing that with some sort of I don't know if there's rulers in in stuff but we're eyeballing this we just have a jpeg their fault for only giving us a jpeg if ever the designer does only give you one so you just sort of eyeball it the best you can one way you can do that is just to make sure your zoom level is at 100% so it right right under my head I'll move out of the way a little bit you can see there's a little it's telling me the zoom is at 100% so that means if this is at 100% and this is at 100% that they should match each other so on that wrapper let's start with a margin inline of auto and if you haven't seen margin inline before it's the inline is a logical property but it's basically saying the left and the right margin only so it's not affecting the top and the bottom it could be if you change writing modes so you're in a vertical writing mode things would change but let's not overthink it it's our left and our right margin and here let's set a max width and what will the max width be and this is the part where I'm just going to guess that it's about 800 pixels too big 600 and actually I should be doing the bottom one this is our narrow one but since I'm already here the points I think it's probably wow they went really narrow here let's do a 550 that looks pretty close may not be perfect but it's good enough for what we're going to be doing I'm going to copy this because that one should be for our wrapper narrow and I'm going to talk a little bit about this in a second but we'll put that max width there and this one of course is the much wider one which is probably closer to 1200 no it's not that big 900 960 a lot of designs go 960 11 that's not bad I'm just basing it on this side it's basically lining up with what I have there I could get much more accurate and try and make sure but I'm close enough when I'm trying to base it on jpeg close enough is I'm pretty happy with it so the reason this is working we see the narrow one working here and then the the other one working in the other section is just relying on the cascade this is saying it's a max width of 1100 and then this one is coming after and saying ah but if it's a wrapper narrow I actually want this on it and we're very much relying on the cascade because if I were to move this up to here and hit save you can see it breaks the whole thing because now I'm saying it's this oh no but any wrapper should be this one so just if you do create modifier classes like this it's very important that they come afterward and so we'll save that just quickly to move code up and down if I hold alt I can just push my arrow keys and it moves it up and down within vs code that's how I did that all right so that's not bad I guess now we can get into the more specific areas so let's come and we want to look at this part first because why not we're at the top so we'll sort of go section by section um our way through this and this reliable efficient delivery powered by technology my font size is a little bit smaller than I think I need it to be and I'm actually wondering if that one on the top is a little bit bigger or not I'm not a hundred percent sure but what we're going to do I'm just trying to think I'm going to grab my entire header and whenever I'm doing anything I like relying on the cascade as much as possible so here is my entire header so I want to go okay everything in here needs to be this is center aligned this is center aligned so don't overthink it don't do it on everyone even if you're using something like tailwind maybe you're following along something like this using tailwind uh don't overthink it right don't you don't have to put a center align on this one and a center there you can just put it on the header itself and it's going to work so header text align of center and hit save and everything inside the header becomes text text aligned centered um then my space here is not terrible actually I'm going to leave that alone it looks like my width is actually basically spot on so I'm going to leave that alone and I guess that just means the problem is it's stuck really close to the top of my page whereas here we have a lot of space and we need a bigger gap there so here I did a margin inline I mentioned that was my left and my right I'm going to come on here and do a margin block and block is your block direction so it's going to be your top and your bottom and I'm going to do four probably bigger than that we'll go in with a six maybe it's actually bigger on the top than on the bottom but I'm going to go with a six and probably just leave it at that um because it's close enough gives me the space on the top and the bottom that I need uh and actually one thing if you are really new and you're having a little bit of trouble with layouts and visualizing layouts one thing I would recommend is using things like borders and just saying like a border two pixels solid red just so you can actually see like where am I adding you can see I've added that margin there and then we've added margin underneath so here if I came on my main and I did a border of five pixels solid lime let's say we can see okay I added the margin is pushing away at the top here and it's pushing this extra space down there and I've created this gap over here so just throw borders on stuff randomly especially if you're having trouble visualizing stuff because everything is a box but when it all shares the same background color it can be really hard to see what you're doing so there's no harm background colors are often really useful or borders or anything just to help you visualize everything that's happening so now we get to the interesting bit and this is where you have a bit of a decision to make actually do I worry about the layout and then make the piece inside of it or do I do the piece and then worry about the layout that it's fitting into and if you do things properly it shouldn't really matter one way or the other ideally things that are set up for layout purposes should control your layout regardless of what's going inside of them and vice versa if I need three equal columns I should be able to set that up and plug anything in there so we're going to start with the bigger layout and work our way in but if you styled up the cards and then put them into the layout afterward there's no problem there whatsoever so let's come down here and I'm not putting any comments in here just really fast if this was a bigger project I would but we're gonna end up with not very much success so I'm not worrying about comments as we go through here but let's come in and let's just remind ourselves because I'm old now and I forget how I name things I called it layout grid so we're gonna come here and call it layout grid or call it we're gonna use that name so we can actually style it up and as I said we were going to use a display of flex and that should give us three columns magical and there is one thing with flex and this is one thing that's a little bit annoying with flex in my opinion so I don't want to phrase this in the wrong way it's not an annoying thing with flex it's an annoying thing with creating controllable layouts with flex flex is flexible and so one thing you might notice here is that these are actually different widths right I think it's for me I see it because here like the line is ending here and then this one is much longer but again let's just come in and say that's our calls right so if I say call and do a border three pixels solid and let's go with a different color we'll do dodger blue because why not there we go quite clearly they're different sizes so what's the solution to this how do we get them to be the same you might have seen several different ones again this is one of the reasons I get a little bit annoyed with flex is because we need to take this extra step if we're doing a layout with it flex is amazing I use it for lots of stuff but the the solution is to grab these calls here the call and to do a flex one on them or a width 100% or anything that's going to make them all behave in the same way so I'm going to come here and what I usually do because I know this is doing my display flex I just say anything that's a direct child is going to get a in this case we'll do the flex one trick which makes them all the same this is just meaning that the flex basis is all set to the same thing which is actually a zero and then they have a flex grow of one and they're filling up the space needed doesn't really matter too much why I guess but we we can see that that's working you could just as easily put that on your call the reason I like doing it with this so every direct descendant of my layout grid is just because I find it a bit easier for when I'm writing my html I do a layout grid I throw stuff in there and I know it's going to be the right size whichever way you prefer doing it if you want that to be your call that's fine just sort of handcuffs you a little bit and that you have to use the call class when you're using it but again that's not a big deal as long as you're following that design pattern now we quite clearly need some space in between these and I'm going to show you an interesting trick here this is a beginner video we're definitely getting into so far I think it's beginner this is like maybe slightly beyond beginner and I'm going to go into something that's like the next stage and it's something that I want you to remember and it's sort of the thing that CSS grew up a lot recently and one of the things that have enabled that is custom properties people like doing all their custom properties in the root and then they're just good to go but sometimes it's good to have custom properties in other places it's going to seem a little bit strange at first but you're going to see why I did this and on my layout grid I'm going to do my gap here is a custom property it looks pretty big actually so I'm going to say that it's too REM and then I'm going to configure and say that my gap is my var gap and this might seem really silly but we're going to do it anyway right because you're going well Kevin completely pointless right the reason I'm doing this is because we need to have a space here between these two how can we do that well if we're using Flexbox the way we're using it right now I need to be able to say that this has a margin on the bottom probably so let's go and set that up a little bit I'm not going to do all my card styling yet but I like being able to visualize things like I said so for now let's just do padding it looks pretty big so we'll do that same to REM on there and for now background of I don't know we'll come in with a bit of a light color so we'll just do an EFEF and we'll actually get them to look a little bit better after but again I like just throwing random background colors on things or different things at times just so I can visualize what's actually happening and just for video purposes I am going to make this a little bit darker so let's use the color picker here and just do something like that so yeah I don't want these two cards touching one another so we will need a way to select this card here and add the margin on the bottom of it and there are a number of different ways that we could do this one of the ways that we could actually do it and it could be useful because we need these to be centered anyway so what I could do is on these columns instead of having borders on them we're going to take that off and I'm going to throw a display of flex on the individual columns I want to do that kind of weird because now these go next to each other oh that's kind of awkward and then I'm going to come here and I'm going to do okay I want the flex and I'm going to do a flex direction of column so by doing that then it switches things back to exactly how we had them and this always feels a bit weird and actually I would argue that if this is the step that you're doing the easier solution is just to do a display grid there if you just want to keep everything stacked anyway you can see it's changed things a little bit but in the end our solution is going to be the same so it's really up to you which one you would prefer doing and actually because of that I'm going to leave this as a grid because we just want to create and add this extra space here and I could select this first card and add a margin to it and if that's the path that you went you got it right because it worked the reason that I like this solution is because I'm going to need to center these vertically anyway so I need either a flex or a grid on my columns just to make that part of life easier so to do that if I need that anyway I can add a gap here as well so I can come in with a gap and I could come in and just say gap to rem and it's going to add that space there but we created this custom property and this is where it's useful because custom properties are inherited by their parents so if I do that the nice thing is it's the same gap all the way around but then if I come on this layout grid and I go oh you know what I got it wrong I need that to be a one well they all get smaller the sides get smaller but this gap here also got smaller or I could come here and I can make that a five they both get bigger right they're linked together and this is one of those things that don't overdo it I could see you see if you that's really cool and I'm gonna start doing that like crazy or actually maybe you overdo it have fun with it experiment with it push it to its limits because you'll start overdoing it for sure and using it in places where it's not really that useful but that's how you'll learn the limitations and eventually tone it back a little bit but locally scope custom properties even if you're relatively new to it if you like this idea go all in because they're awesome and if you don't like the idea again if you just want to throw a margin on there and match it that would work too or you could even have that margin set to this gap value and that would work as well there's a lot of different ways to skin a cat when it comes to creating websites and that's sometimes the frustrating part of creating them is there's no one way to do it but you know that's also the fun of it a little bit as well cool so that's actually done a lot since we're here and I've taken this step we haven't finished styling everything but we might as well get these to be centered instead and all I have to do for that is an align content of center and I think I got that wrong oh no I got it right cool I wasn't sure I was like is it a line items is a line content would items work there items would have also worked look at that so like even if I got the the other one it would have worked grid is a little bit weird and that we have a line content and a line items and justify content and justify items so we have an extra one that's not in flexbox they work very similarly though but it's more based on like where the cells are but yeah it's just when one works try the other one is often it's often the easiest way to to get through things even with margin and padding right if you get confused between the two of them that's fine you try one if it wasn't what you wanted you try the other one and if the first one you tried worked then you're good to go and eventually over time and just getting it wrong every now and then you start remembering which is which it's really not the end of the world and I mean check that out with that our layout is basically done we just need a bit of extra space on the bottom of our page it's the easiest way to do that I guess would be I'm just trying to think I'm just going to add some padding lock end and we're going to do maybe a five ram or something just to give us there we go a bit of space there at the bottom I'm doing block and instead of bottom if you did bottom perfectly fine if you did added on your main or something else a space underneath that's fine whatever again there's different ways to approach that I just anything that's going to create that final space here and I'm happy and now we can get into styling the individual cards awesome this is going along swimmingly and I will address afterward how we could approach this with a bit of a grid approach instead of using flexbox but this worked really well and it's a nice mix of using flexbox to create the columns and then using grid within there to sort of get the layout that we want as well which is kind of interesting and flex and grid work swimmingly together so don't be afraid of choosing one or the other and definitely you sort of do need to learn both one of them is not the solution each is very good at specific tasks it's a lot I always related to having different pairs of shoes you have running shoes and dress shoes they're both shoes just like flex and grid are both layout tools you generally wouldn't want to go play soccer in a pair of dress shoes you'll probably be sliding all over the place on the turf or you wouldn't want to really show up in your office wearing some cleats for various reasons so you know each one does its job so same thing with flex and grid you do want to learn both of them both of them are relatively simple at a standpoint to they can seem very complex you'll get like 95% of everything you're going to do with them is the same like simple things over and over and over and then the weeds are that final 5% but anyway before I start rambling on forever let's do these cards and we're going to address the different colors that are on them as well in different ways that we can approach that and actually why don't you start thinking about how would you style that if you haven't what would you do to change the color on each one of those as I come in and do a few other things first so the background color we don't actually want but we do need a box shadow on there it looks like it's actually a little it's definitely been moved down right if let's zoom back in on this but see how it doesn't really like stick out the edge as much like if it was a larger shadow would come around more we see it on the sides here but it's definitely been moved down so this is one thing I always get wrong when I do a box shadow is the values of the offsets we're new a one a zero and a one for the blur and I'm using rem here if you use pixels by all means it's fine use pixels it's pixels for these types of things are completely fine I'm just so used to using rem for stuff that it's become my default the thing I'm more wondering about is the color of it it does seem to have a bit of a bluish tint for now I'm going to come in with zeros and then do a forward slash of point two which is my alpha value see I moved it the wrong direction this is just the new color syntax so it's possible you haven't seen it it's not that new but most things you'll see would be the comma separated syntax exactly the same thing so I prefer the new one and the newer color we have RGB and HSL but now we also have lch and okay a lab and other stuff that use the new version and I just prefer it so it's there but we can see I offset the wrong way so this one should actually be a zero and then this one should be a one rem so it's moving down clearly maybe this should actually be moved down by a point five that's looking a little bit better but I'm wondering so this is offset one way offset the other my blur and then I'm going to come in with a negative point five rem which is the I forget the what do we call that the spread right so it's how far out does it go before it starts blurring so just if I make this like a five rem it's going to go from the edge and go up five rem and then it's going to have a one rem of blur to blur the shadow from that solid color until it gets to to nothing so by doing a negative point five here it's actually sucking it in a little bit so it sort of follows that pattern a little bit more you know what it's not perfect I actually feel like this is bigger and this is actually bigger and my color that looks a lot better actually and then my color I think should be a bit softer red green blue the last value here is blue so I'm just going to try sending it towards the blues and maybe mix in like a 50 on the green I'm not sure if that's the right color but it's not too far off HSL might actually be a bit easier to play with there's no there's this darker a one five I don't know I'd have to play around with it a little bit that actually looks like it's getting pretty good I'm pretty happy with that I do apologize my dog is also barking in the background so hopefully you didn't hear that but the mic might have picked it up so that's pretty good another thing with them is they do have a border radius so let's bring that in border radius of maybe 8.5 rem the border radius can be a little bit tricky to see but it's not too big so I'm kind of happy with that let's just zoom in a little bit here just for fun I think that looks okay so I'm going to stick with that border radius and now is the fun part that we said we were going to get to which is the colors how are we handling those colors that are on there and there's different ways of doing it so one way is with modifier classes like we've already seen that would work perfectly fine if this was a larger project that would probably be the way I would actually go just because chances are if you have this somewhere you're going to have it somewhere else where you'd have these types of things going so I'd probably if this was a bigger project have something like a border top class even that would sort of set everything I need and then after that I would have my border color or something that would you know modify the color of what was being set to in this case just because it's a simple project it's never going to get any bigger and just to explore some other options we have with CSS I'm going to do a card with an nth child on it and choose the first one actually on all the cards let's use let's do it properly first let's come here and I'm going to come here actually and set my border and it looks kind of thick let's try three pixels and solid without a color of course we don't want it on every side we only want it on the top cool and I'm already seeing a problem that I wasn't expecting so I might have to take another approach but let's get this to the right size because maybe if I make you know what if it fills the top now this is hmm if it goes and it's reaching the edges of the border radius we don't run into a problem this is where things get a little bit tricky because I think mine is ooh they're close right okay let's add the colors then we'll we'll see I think that's actually okay maybe it's a bit thick okay or anyway well I think it's a bit thick but let's let's come in here with my nth child here if you do a border without declaring a color it will match the color of your text so and that's the the body text color that we have on those so what I want to do now is and the child one and we're going to say border color is uh that's our teal so var color teal and there we go oh see I ran into a problem now I was trying to be clever but of course nth child I was thinking I had set it up like I would with grid where I have four children and it would just work but I said I want to do this by showing you some of the mistakes that people run into so um I'm not going to edit this out so we have that card is there so what we could actually do is layout grid so with this if I did the grid solution I definitely would have been able to do what I was doing now at right and then I come in with my card nth child two and then I could change that color to what color was the other one the red and it wouldn't get the red on the top one in this case that is not going to work and I'm just trying to think easy if there's like a simple way but I can't think of a way that would actually fix that so I'm going to stick with that I was a new card and then a border color so we just say well let's just say border I'm just going to do what I said border teal so border color is my var color teal and then I'm just going to duplicate that select this where it says teal and I'm going to push command D and it's going to select the next thing that's exactly the same and we're going to make that red then we can take this one command D and make that one yellow and then select this one command D that one and make that one blue and hit save and these become modifier classes um I'm wondering if borders the right one like maybe you're changing axes there's other ways we can handle this for sure I think for this project I don't want to overthink it and over complicate things so we're going to do that uh so it's a card that has a border of teal and that one goes teal this one has a border of red this one over here has a border of yellow and this last one over here has a border blue that works perfectly fine cool so yeah that does work I think what my line to me looks a little bit thick if I zoom this back into 100% the two things are I can't make it smaller unless I make my border radius smaller right so the border here is matching the same as my border radius because eight pixels is is half a rem so it could be that this could go down and then I could just match this 0.25 rem uh if you're doing this where both numbers are matching this could be another place for like border I'm just going to br for border radius and I'm going to do a 325 rem and then I could just do both of these uh right we can command d just like we did before and var br um and that actually doesn't look too bad and you could just come in here again let's just make it one rem you get crazy thick uh and then you make it a 0.1 and it gets super small uh and of course then if you went with a zero you would just have none of either one uh which maybe isn't great because you might want to have one anyway but I think that 325 um actually worked out really well so we're going to go with that um and it seems to be matching pretty well I think with the design awesome there are a few things that are off um so we're going to fix is on my cards one thing I didn't do I said I was going to follow the BEM and I didn't quite do it because I just have my h2 and my paragraph I think what I'm going to do because I'm noticing the font sizes are off and also we have some these have margins on them that I don't want uh so I am going to come in and I'm just trying to decide yeah so we had cards so very quickly and another vs code tip I'm going to come on this h2 and then I'm just going to hold alt on that one I'm going to hold alt here and then I'm going to hold alt and click here and put a space and what this is doing is it's multi cursor so I have my cursor in all those places at once and I can add a class of card and then do a title and this is just saying that this title is the double underscore here means that the title is something that would only be inside of a card and again this is just part of how the BEM naming convention works so there is my card we have all the borders we can just come here though and say card title is a font size of my var font size we have to fix our font size at the top two so maybe we'll do that next uh 700 let's just see what that's actually going to look like whoops what did I name my I think I had a four five and a six actually right yeah that looks a little bit better the other thing I'm going to do is a margin of zero just because the space between them is coming from the paragraph right now which is perfectly fine and you know what that font size actually looks pretty spot on so I'm pretty happy with that that's that one right there looking good awesome um my 500 was this one up here so I said we're gonna fix our other font sizes right because this one looked bigger than the regular paragraphs so let's come and do that there's no problem right I'm getting most of it in the right spot and then I'm like oh yeah I forgot these little details along the way so uh I'm just gonna do it this way header paragraph any paragraph that's in my header I'm gonna do it like that direct child but if you did it the other way it's fine if you give it a class that's also fine I said we're going BEM and then I sort of didn't go BEM here um but let's just say font size is going to be my var font size 500 uh and of course my h1 which I don't really need to be more specific because you should only have one h1 per page anyway uh that will have my font size of my var font size that I call it 900 because it was the biggest one I did cool and then with that we also had my h1 span had the font weight of my var font weight light I got the span backwards that's fine the font weight so this will actually be my uh bold and that means my h1 normally has a font weight of my var font weight light there we go perfect that looks pretty good my line height might have to be a little bit bigger maybe the 1.1 I have on there is a little bit tight so we can bump that a tad but overall I think that's actually looking really really good I'm super happy with that uh another thing that we will have to address here is if we look um that I wanted to address is these guys here that I mentioned and I said I wanted you to figure out a way that you would do that uh I'm gonna do two things because we do need some extra space on top they're definitely a little bit lower down um so that's with my cards uh because I did say I'm going with the BEM style I'm gonna come on all of these and just to show you another trick that you can do I instead of multi placing the cursor how I did it I'm gonna select my image here and do a command D because it's gonna select the next image and then command D for the next one I'm saying command if I say command it's control on a PC and if I say control it means it's command on a Mac uh and I'm gonna do it one more time and I've selected all of them but now if I change it it's gonna take that tag away so instead of selecting them I'm just gonna push my arrow key to the side and then I can start going and give them all a class and my class will be my card IMG for card image cool so now we can come here and we can say that my card image and we said we want a margin top so I can add a margin top maybe we want to ram or something just to give them that extra space 1.5 1.5 something just to give them a little bit more room because I think maybe the one is actually fine I was like it's probably bigger than one but that actually looks pretty good uh but now I need to get them on the right so there's a few different ways I could use a I could put on the card itself a display flex and then on that we could find a way to align it to the other side I'm actually doing that with flex box is hard to like push one element over except no maybe it wouldn't be because we'd have to change the flex direction but that's all kind of annoying right so you go oh well maybe I could use grid instead because then we don't have to change the flex direction or you know why you could just do this margin left of auto and it didn't work and it didn't work because I didn't do my image reset that I mentioned at the beginning that you normally do uh because for the margin left of auto to work it will not work on an inline element which an image is so let's do this as a let's do this as a display of block as well and then they will move on over and it also mucked up my my spacing there so we'll make that a little bit bigger and there we go that looks a lot better right I think that's looking much it's looking exactly like how we want it to more or less one thing I think is my overall column width might be a little bit narrow just because I see this card looks a lot wider than my card now that I've sort of set things up a little bit more but overall it's getting there and just to explain a little bit actually how this is working is normally when you use the margin auto you're doing it for the left and the right correct and that just means it's evenly distributing the space between both sides but if you do a margin right of auto it means all the margin goes on the right you do a margin left of auto all the margin goes on the left and then if you put both it distributes the space between both sides so a nice way just to easily push something from one side to the other just make sure that it has a display block and not a display inline because then the margins weren't working properly um which in images are weird because they're also sort of they're like inline blockish so that's why the top was still working let's not get too much into them because they're funky when it comes to that level of things um so yeah that actually brings us getting we're getting there I'm just going to boost this up maybe to 1200 and that looks like it's probably getting a little bit closer to what the actual lay it was maybe it was even a 1280 because that's like a common I tried 1300 at one point and I felt like it wasn't right but now that I've started setting these things up it's it's getting closer and closer anyway to what we wanted this should be at 100 percent my font sizes might be off but anyway I'm oh I zoomed out here that would be why see that's how you you zoom in and zoom out on something and then you you muck everything whatever I'm pretty happy with how that's looking maybe my font sizes are a little bit off but a couple of things though that I do want to look at now that we've sort of got everything in place I'm going to make one change to my wrapper which is also to add a little bit of padding in line again left and right padding of like two rem and what that's going to do is it's going to keep it from touching the sides of the screen when we're getting narrower because you can see that it was pushing off and then of course when we get to these smaller screen sizes we don't want this to happen at one point it does have to stack so that does mean that when we set things up here where I set up the layout grid using this I probably want this display flex to change flex direction at a certain breakpoint that would be the next step and then we'd basically be done instead of doing that I am going to switch this over to the grid like I mentioned and everything is already stacking because I said I wanted to show both solutions so one thing with grid by default things just stack and it's using my gap so everything is working perfectly fine and then what we could do is in this case since we already have created three columns we could just say that at media min width and then choose the size that we want I'm just going to go in with a 800 because it's a nice starting point and we're going to say that our layout grid has a grid template columns of 1fr 1fr 1fr and that means that at our larger screen sizes everything is working fine and if I inspect on this and then when you're in chrome it's this little guy here if you're using firefox it's a similar thing on the other side that opens up responsive mode and now we can to see when I get to my breakpoint which probably should be wider but at one point there everything will then stack one on top of each other and then pulls back out and we get them all working that way and I think I have grid inspectors on so it's changing the colors of things but we don't have to worry about that too much but it's just a nice simple solution and one of the reasons I actually like using grid for layouts in a sense is I don't have to worry about changing a flex direction then changing it back after I'm just creating a more complex grid as we go through it all and on that exact same thing we could come here and I'm just going to quickly get rid of my columns so delete you delete you delete those ones and we have one last div somewhere at the end that we're going to delete and it sort of breaks my layout a little bit as you'd expect it to just because we've we've destroyed everything that we had but I just want to do this to show you a nice little trick that we can do with grid and why I feel that it's sometimes a little bit nicer is because instead of doing it this way which would work I could set this up as four columns I'm going to do a different one where I'm going to use areas and I don't always like areas but I feel like for this one it's actually a nice little solution and areas are kind of weird because if we look at the layout that we're building this is my picture down here at the bottom again let me just zoom back out on this where we have like these empty spaces here and we definitely need a more complex grid but what we can do is you do a dot if you want something to be empty so dot is empty and then I'm going to have my second one so that's my two and then I'm have a dot and then we're going to come on this next one here so the next row down is going to be my one my two and my three I know that's my four isn't it yeah that's my four then we're going to come down on the next row so the first one is like all here then we're doing this overlapping area now we're going to this next overlapping area so it's a one a three and a four and then we're coming down we have a dot a three and a dot again and the dots are just to sort of demarcate empty space but the nice thing is you can just come in and put more dots if you want so I like doing it like this because then I just put as many characters as I need and you can put extra spaces if you want as well so you're sort of just drawing what you want it to look like and so I've drawn out my grid template areas and of course it's still not 100 working and that just means here we don't need this anymore and my cards now we actually we could have had the the borders that would just follow a little bit easier but now for my cards what I could do is that nth child trick nth child one is going to use a grid area of one right and let's just copy that and we're just gonna set them up for all of them so that would be my two my three my four and then I say my two my three and my four hit save and look at that we got our layout back again and of course I'm doing this with card nth child if I didn't even want to worry about what the content going inside there would be I could even do this would be my it was my layout grid and select the nth child one right so let's just come here and quickly update that and it's exactly the same solution but a little bit more robust because I could plug any content in there but I'm definitely taking things up a little bit of a notch with this but I just wanted to explore if you used one solution or the other one that either one is going to work I think my columns are actually a little bit uneven though so that does potentially mean here that I'm going to come and just say that my grid auto columns are one fr just to make sure that they all end up any column that's created will be the same size they're all going to be that one fr unit and they're going to match each other and there we go so I would love to know which solution you actually like better between the flexbox and the grid one here which one feels more natural which one do you think you would use if you were to create this or if you've already done this or you were following along which one you picked and if you're never really sure about when to pick flexbox or grid it is a topic that I've talked about before and you can find more information about that in this video right here I really do hope that you enjoyed this video and with that I would like to thank my enablers of awesome who are Johnny, Tim, Simon, 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