Responsive layout practice for beginners

Key Takeaways

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 frontend 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 the 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 figma 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 uh and then once you've downloaded them we're going to open up your editor of choice I'm using VSS 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 can zoom in a little bit to make some font sizes bigger but you can see I can see all of my files here inside of VSS 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 uh other than that though there is nothing different and let's jump jum 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 uh 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 uh though if you're on Windows I'll show you another option that you can have uh 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 popins font family with the two 4 and 600 weights uh 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 uh 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.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 VSS code it comes with EMT installed so I'm actually going to write link and then then put a Col in and just put CSS and hit either tab or return I will autofill that for me so I don't have to write it out myself and in doing that we now are linked to my style.css now it didn't know that I was calling it style.css it doesn't see this file that's just the default that it calls it uh 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 uh the way you need to and while we're here I'm also just going to delete the attribution now if were attributing front end Mentor Enough by using their project and mentioning them throughout this uh video so I'm going to delete the attribute or the attribution from there uh 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 uh as we go through this though it does make it a little bit more of a challenge but I I'll grab the text where I'm not too worried about that what I am going to do though is I'm going to open this design up here in a just in my regular Windows editing software whatever uh I don't even know what they call it anymore I I whatever I just opened it in on 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 uh 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 know you look at this top bit and you can probably do that uh pretty easily it's not nothing too complicated there we text to line Center does most of what you would need uh 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 uh 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 uh setting things up when you start doing your CSS so what when I see this I'm just hitting the edit button here so I can draw some lines cuz I like drawing on my layouts when I'm doing them so here we go I just go into the markup and the reason I want to do that is 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 like 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 1 2 3 4 right they all mobile Design's 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 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 Flex box like this and organize it so the First Column only has one it minute the second column has two items and then the last one over here has that one last one uh 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 setup so it could be which which of the two do you feel like you should be practicing which one skills do want to level up on a little bit uh cuz this is I think one of those situations where you could come up with a good justification for either Flex box or grid uh 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 um I I've decided in my head which one I'm going to use uh 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 um 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 1 2 3 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 uh onto the side here just so I can see it and 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 uh so I am using EMT I can just write header and hit Tab and it brings that uh in for me uh 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 we definitely everything does fall within like sort of a a specific width here uh 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 wrapper and you might also hear of a wrapper people will call these containers as well I used to call mine container I've switched to calling it rapper just cuz 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 H1 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's light and the second line is bold here uh for me it's reliable efficient delivery powered by technology um 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 print and Mentor that they provided us I'm just going to drag the bit that I want uh 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 Zed and ALT Zed will turn on and off your word wrap so uh 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 uh you know you could also come in here I guess with a br if you feel like you need to have the line break um 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 cuz 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 H1 and an H2 reliable efficient delivery as an H1 powered by technology as an H2 doesn't really make sense because an H2 should be a section underneath your H1 it's a lot like how chapters work in a book where you have or think of like a a textbook right where you have a chapter and then you have subsections under it the H1 would be your chapter and then the H2 would be one of the sections within that larger heading uh so reliable efficient delivery maybe could be the H1 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 H1 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 um 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 uh 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 uh because as I said I'm using EMT uh really fast if I do that that would work if I I just do a DOT wrapper and hit tab that's going to bring a class of wrapper because of the dot uh and maybe you have say a section that has 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 EMT Works in this video but um just to slow that down a little bit just in case it was going a bit fast for anybody uh if you do want to learn more about how EMT works I have covered that in a previous video that goes a lot more in depth and shows you a lot of ways you could speed up your working uh 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 uh because as I said this one's going to be wider whereas that one on the top uh right we needed that one to be the the narrow narrower one right there now there's a few different ways that you could approach this next part but uh one thing that's important with it is so uh 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 uh that would just sort of I guess be like you know Grid or whatever we're going to call it uh grid layout or layout or anything uh I just tend not to like having my wrapper do more than one thing there are times where it could be useful uh so if you want to go that route no problem at all if that's how you think you know you're envisioning it it probably wouldn't cause any problems and you'd have a little bit less divs and everything in your HTML and that probably be a good thing uh 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 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 cuz I want to show them both to you um so I we're yeah I I I prefer grid my my first instinct for this is definitely to go grid uh but because of that I sort of want to do the flex boox 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 cuz I'm going to go that two 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 um 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 uh 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 uh 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 Time 4 uh and I'm going to put the four cards in there so it's card star four and then hit tab uh or return uh and I could do it 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 uh 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 * 3 uh 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 um 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 or my yeah my third column has the fourth card in it so uh 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 1 2 3 4 that way if it was a 1 2 3 4 and this was the last one that would be a lot trickier to do uh with flexbox without playing with order and even then I don't I think it would just become a little bit of a nightmare um so yeah let's go the flexbox route and do it this way and then let's come in the first card here and let's zoom in a little bit on on what we actually uh 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 uh I wasn't going to do that but I'm going to take a screenshot of this just so we're only looking at my individual card here uh 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 you take a screenshot you can draw all over them uh and this is really straightforward but there is another decision that has to be made here so we have this layout and this 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 you the next one has to be an H2 so we're going in with our H2S so that's going to be my H2 uh this here is going to be a regular paragraph I don't even have to do anything up here we can 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 cuz I I think mine I like my solution for this one or how's this I think it's going to work cuz 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 going to have a picture a picture I put a p so I said picture we're going 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 uh 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 for 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 monitor's 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 uh 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 uh 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 um but it's called live server I'm just going to click the button that it comes with that adds the go live uh another way that you can get this to work is to rightclick on the thing and just do an open with live server once you have installed um 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 um 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 cuz we need to get Poppins so we're going to write that in Poppins uh and there it is so I can click on it from here and then you could download the whole family you could actually self-host this if you want to if you want to know about self-hosting Google fonts I have done a video on that in the past and I'll link to it uh in a card uh floating up above my head somewhere um 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 uh 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 uh and if I scroll down again they want us to download them now cuz I think um 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 um 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 uh 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 uh 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 uh font family declaration right there and we need to have that so I'm going to paste at the top in a comment for now just so I can easily reference it after uh and the other thing that we need to do is grab the colors so if we come back uh 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 uh but I'm still going to copy these ones over and paste them in just so I can easily reference them uh 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 route is custom properties just cuz 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 uh that does dive more into it and the first thing I want to do is actually take this font family uh here as a custom property I'm just going to call it font family s that's how I name it it's a saera font um this project doesn't really need it cuz we only have one font uh but it just makes it easy to change if ever we need to change it by having it up here um again you could just call this font family you could have a different name or because we only have 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 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 the most of them are using the 400 so usually uh 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 we want a 600 uh 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 cuz 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' be a 800 doesn't matter CU 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 um 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 I'm actually going to just say one R because you generally don't want to have font sizes smaller than that um 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 0 point it's 9375 remm and always do font sizes in rem please not in pixels I know it's easier you want to use pixel in other places that's fine just for accessibility reasons um 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 uh 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 uh so this would be my biggest font size it looks maybe like a 2.5 Ram I'm just guessing uh that we're going to have a font size 500 uh because it's going to be a little bit bigger right so we have a four a five will be these guys um so that one's maybe a 1.25 RAM and we're going to throw it together and and see from there um how well it matches everything and I think those are the only ones uh oh 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 RM um 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 of the connection between R and pixel values and you're good to go uh so and again we're just sort of going to be eyeballing it 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 H okay so let's just say um 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 um but it's probably okay and we'll see and there we go that's a pretty neutral um color to me uh so that's perfect our next one is this one so let's just see with that one that's going to be my color neutral neutral um I'm going to do that one as an 800 I don't know I'm following that same system the lighter we get uh the the the lower the number oh that's pretty light okay that's going to be 400 um 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 popins were 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 does all sorts of stuff if you saw before it was window snapping things into place I'm using it for that if I do a Windows shift C 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 cuz it's kind of narrow I can just zoom in with my mous wheel and get exactly the piece that I want and it opens this handy little popup 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 cuz I don't want to try and name these uh I'm going to grab the ey picker right here zoom in on the red you get the picture I'll go through these next ones uh we'll cut aead uh color red uh 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 uh but in this case it sort of fits if you wanted something that's more uh like meaningful rather than just calling them what they are uh you'd see off in like a yellow would be warning um 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 um 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 cuz 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 overthink it um 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 uh are handy is first of all our box sizing and I don't think we're going to have any pseudo elements uh 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 um 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 svgs 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 100% with a display block just to prevent um any weirdness from happening but we really don't need it in this project um 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 cuz you have to do cuz 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 cuz we never really want it uh 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 property set up uh 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 uh the other one we're going to do is font weight which should 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 um 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 uh 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 not work well on larger font sizes so these I'm going to set a line height to 1.1 um 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 um 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 um and this is where I'm actually not sure and let's they see how we have the different col 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 and 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 uh 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 um 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 uh I don't know how wide this is all um 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 uh only give you one so you just sort of eyeball it the best you can uh one way you can do that is just to make sure your zoom level is at 100% so right right under my head I'll move out of the way a little bit uh 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 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 uh it could be if you change a 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 uh and here let's set a uh 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 um and actually I should be doing the bottom one this is our narrow one but let since I'm already here uh the points I think it's probably wow they went really narrow here let's do a 550 uh that looks pretty close may not be perfect but it's good enough for what we're going to be doing uh I'm going to copy this cuz 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 uh and this one of course is the much wider one which is probably closer to 1,200 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 to make sure but I'm close enough when I'm trying to base it on a 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 cuz 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 um 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 um I guess now we can get into the more specific areas so let's come and we want to look at this part first cuz 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 100% 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 f following along something like this using Tailwind uh don't overthink it right don't you don't have to put a center Al line 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 align 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 spoton so I'm going to leave that alone and I guess that just means the problem is it's stuck a 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 for 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 leave it at that um cuz 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 2 pixel 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 5 pixels Sol 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 uh 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 going to end up with not very much CSS so I'm I'm not worrying about comments um as we go through here uh but let's come in and let's just remind ourselves cuz I'm old now and I forget how I name things I called it layout grid so we're going to come here and call it layout Grid or call it we're going to use that name so we can actually style it up and I I said we were going to use a display of flex and that should give us three columns magical now there is one one thing with flex uh and this is one thing that's a little bit annoying with flex in my opinion S 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 uh I think it's for me I see it cuz here like the line is ending here and then this one is much longer uh 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 um 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 um again this is one of the reasons I get a little bit annoyed with flex um 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 uh the the solution is to grab these calls here 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 uh 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 uh 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 um 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 in 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 uh 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 uh 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 two REM and then I'm going to come here and say that my Gap is my VAR Gap and this might seem really silly but we're going to do it anyway uh right cuz 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 Flex box 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 uh it looks pretty big so we'll do that same two REM on there and for now background of I don't know we'll come in with a a bit of a light color uh so we'll just do an ef ef ef and we 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 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 uh 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 when I do that it's kind of weird cuz 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