 All right. It is time to continue working on this project. We're working on a front-end mentor project that you can see right here. If you have not been following along, I'd strongly suggest checking out the previous videos where we started everything off on. But if you'd rather not do that and you just want to jump into where we are right now, there is a link to the GitHub repo where we just finished off in the last video. And that is where we are on the screen right now. So you can see the first thing you want to do if you are doing this is just an MPM install that's going to bring in the dependencies that we need for this. And then we can come in here with an MPM run dev to fire up our development server. So we can keep working on this project. And there we have it. I'd written all the HTML in the last one. We already had some utility classes and other stuff set up. I made a few mistakes along the way in using them because I can see some colors that did not come through. Perfectly fine. We're going to sort of set the stage and fix a few of the base things up in this one. And then we're going to move through and actually sort of make things come together more specifically for each section as well. So for that, the first thing we're going to do is let's come and check my files that we're going to be working on. We need my index here. And we need my CSS. So let's go and I'm going to check my CSS file for these utility classes I did. BG accent 400. What did I write? Um, yeah, I just want to fix a few of the things where they weren't working down here to start with. And then we're going to bring in the container, the even columns and the things like that. So in my footer BG neutral and then text neutral 100. Did I not make my text neutral? I feel like I made a typo somewhere. Oh, wait, did I get these backwards? This should be my 900. And then this would be 100. This would be a 100%. And then this would be my 100. That that fixed a couple of things. And then let's just come down to my BG accent 400, which is looking at my color accent 400 BG accent. Let's just go see where I said BG primary. So this should have been accent 400. That's why that didn't work. That's better. And then the color here is, okay, good. It's all working now. Perfect. So just a few little mistakes there, but nothing too complicated. Now let's come in and do some general styling. Because I am bringing in a reset and I'm not using SAS or something else to do like file management on this, or there's nothing wrong with coming up here and like, oh, I already have some core defaults here. Do I set up the rest of them here or should I be doing them somewhere else? And that's really up to you and how you want to be working. But I'm actually going to put mine down below just in case the reset ever got changed. That would be crazy to do that later in a project. But we're just going to come down here and let's do general styling. So we have my resets, we have my utility classes, then we have some general styling. And let's look at my general styling. So we'll go on my body and right away we can do my font stuff we've set up my variables for. So here I did a font family, which actually, I have a post CSS plugin running and it thinks I'm in a post CSS file, which we're not wearing a CSS file. Because normally when I do ff, there we go, font size of or my font family of body. And we also, oh, no, font size body. And then we want the font family. So font family, we can do my var, we can do my var font family of body hit save, things should look a little bit better. They do my color as well color is going to be, you don't have to write var, you can just do hyphen hyphen and color neutral 900, which is which is like that really dark blue color. It probably doesn't look any different, but I think it is. Oh, I did. Yeah, that's not the right color. It should be this blue color here. Let's go take a look. So here we should see. Let's just take a look. Oh, it is the right color. Okay. Oh, you know what? I think it's not that one. I think we got that from our colors. But I think this is actually that primary one we had primary. Did I call it primary 900? No, primary. Let's go take a look. I think it's primary 400. There we go. This is the right color. That's the color that this should actually be. When I did my background, one second color, my new we're never really going to use that. Hmm. Yeah, I think we wanted this blue color for more stuff. There's a black that came through on something. But I don't think we're ever actually using that black color. Yeah. Okay. So yeah, but I think we're okay with that. Let's actually let's keep this here. Yeah, because I'd said this is my dark color, but I'm not sure where that dark color is ever used, except for like those numbers, maybe in the navigation over here. No, not even. I'm not sure where it's actually being used. So not going to stress too much about that. So that's looking better. Now another thing that we set up. This is utility class two actually really. So I will come up here to do a few of these. So my container is going to be a I'm going to set my container up in a way we don't really need a fancy container for this project because it's a set size everywhere. But we could do a container. We're going to create a custom property here of my max width. And we're going to create one of my padding on the sides. It's not actually going to be padding. It's going to be margins more auto margins, but we're going to call it padding because that's whatever it padding that we'll have on the side of our page at small screen sizes. And let's come and look at my figma file and just get the max width here. So if we look at something, the max width is 1110. So we could say that 1110 pixels. Usually I convert things to REM, but it should be fine. And here let's do a padding of one REM. It could be side padding, maybe vertical padding or horizontal padding. I'm just going to call it that. The reason I'm creating it with custom properties is because I am going to do a width here. And so I could do this as three properties or I could set that up as one setting up as one makes it a lot less readable. But then having this come in makes it more readable again. And it makes it easier to customize when we have custom properties. So I don't mind doing it this way. So here on my width, we're going to do a minimum function. So it's going to choose the smaller of whatever value we have. So we can say choose the smaller between max width or 100%. We're going to change this in a second. But let's do that. And we're going to do a margin inline of auto margin inline auto is just your left and the right are both being set. It's a logical property. So now with that, we should see that if I go bigger, it is it's working perfect. And what they've said, it's not working there because we didn't set it up. That part doesn't have a container on it. But we can see it's working everywhere. But the problem is when the screen size gets too small, we can see what's happening is it's stuck to the side of the screen. And I'm actually surprised it worked because here I'm missing a closing. Oh, because it was it wasn't actually it was using the 100%. I don't know, Mike, that's better. We have my var opening close, and then 100% there. And then what we want to do is to prevent it from touching the side of the screen when things are smaller is here, we can do minus my var of padding. And you can see that that's put that space here. Now it's really, really small. So if we come back to Figma, we can look at what it would actually be in the design by looking here. It does look really small at 16. So it's one REM. So I can actually leave like the padding, I want to be one REM on each side. So here, and this we are definitely getting a little bit more abstract in the code. But I think as long as you're making it clear what's happening with a custom property, there's nothing wrong with having more abstract code. It keeps it readable, it keeps it easy to update. And you don't really worry about this, you just worry about these and everything works. If you disagree with me, that's also fine. But we have my var padding. So here we could actually do this, and you don't need a calc just because we're inside of a min function. So times two. And so it just means that now it's doing, you know, it's padding of one on each side. So yeah, now we have one here and one there because we're padding times two. So it's our max width, it's 100% minus two padding or two REM on each two REM. And then we have our margin inline auto, which is centering it. So it's not quite padding because if you had a background color, it wouldn't actually extend outward. So if you do like a different name there, I think that's perfectly fine. But yeah, I'm going to set that up that way. These are locally scoped custom properties because I only really want those working within my container. Cool. So that's a nice first step there. Definitely getting into like a little bit more advanced but not terribly advanced. Another one that we want to do here is an even columns where we're going to do, I mentioned when I was creating this, we're going to do a display grid on it. So display grid and we are going to use a media query for this, but let's come in here and just do a gap of like one REM. That just helps space things out. We'll see that more in a second. And then what we're going to do here is my ant media of min width. And I said we're going to use 50 and maybe just update that 50 later on. So 50m, just really fast. People always ask me why I use Ms in my media queries. It's the only unit that's consistent across all the browsers and operating systems when you're zooming in and out. There's inconsistencies between like Chrome and Safari. If you zoom in and out when the media queries are kicking in, unless you use M, the last time I checked that was still valid, I'll link to an article down below that goes into more detail. And one thing that's important if you use M or REM in a media query, it is not looking at your root font size. So even if you change your root font size, it will not change what this 50m is. This 50m looks at the default browser setting instead. It's a little bit different, but it keeps it consistent. So with that out of the way, even columns. Here we can do a grid auto flow of a column. Ah, there we go. We get columns now. Now you'll notice that they're not the same size. This one's much bigger compared to my image. And I want that to really be like a 50-50 relationship. Whereas if I look down here, it's closer, like these should be the same everywhere, right? These two columns here should be the same as these two columns down here. As like here, my three columns are a bit mucked up. So we can also say that my grid auto columns are 1fr. And now we get even columns. And you can do the same thing with Flex. I like doing it with grid completely up to you and how you prefer to work. So there we go. That's setting all of that up. And now a couple of things I need to decide on are when we have the layout, like the spacing between these sections. So like here, this is one section is all this. And then we get the space here of 93 pixels. Then here's like that next section. And then here we have 62. I'm going to make it more consistent because like even here, it's very tight. Here, how much we have 91 on the top and bottom. If I come and look here, what do we have? 62. See, like that sort of, I'm going to deviate a little bit here, just for a little bit more consistency, because it's kind of annoying to me that there is that lack of consistency. 62. See, it's 62, 62 there. But then when we look here, this one's gone down to 51. And then this one's gone up to 91, which just makes for a lot harder maintenance on a project as it would grow if you're doing that type of thing. Like the font sizes, we still had that inconsistency, but by sort of abstracting that out a little bit, it's not too bad. Whereas if you just have padding that's just like really nearly a little bit, this one's growing, this one's shrinking, this one's doing something else. As the project grows, like people don't know really what to use. How do you manage it between different things? There's ways of doing it, 100%. This could be a standalone component, you have different margins or different padding based on different, you have your class that's setting it for small screens, for medium screens, for large screens and all of that. It really depends on how you want to do it. But I think what we're going to do, let's open my dev tools. And I'm just going to use this guy here, just so we're in the mobile mode. And look at it at small screens to start with. And just actually, I didn't look at it right away. We're on a pixel five, let's just go to responsive mode. Here you can see when we hit that breakpoint, things change around a little bit. So yeah, that's the 50 might have to be adjusted, as I said, but that's what we've set up now. So it's actually working well. I see a few things here that I do want to fix up and make a little bit better. But I'm just trying to think what I want to do right now is the spacing. So we could create spacing, like spacing classes that we could use, right? So you know, it could be padding block. So padding block is top and bottom. And then so it would be padding block. So we just set up different values here. So we could do like a 400 is sort of my default one. So maybe we're going to do that. But I'm trying to think if it would be better to base this on a few variables. I didn't set up any spacing ones at the beginning, but would it be worth having them? If we look at the figma file, as I mentioned, there is a little bit of inconsistency right now. That's 47. Say between this text in here is 29, between here, between text blocks, actually, it's really hard to give proper spacing in figma. Just because there's like the white, it's a little bit awkward. So measuring that space isn't always perfect. That's 60, like there we have an actual six, let's just say that's 62. Here, it's different because here we have those like the box that comes on it. Um, 24 16. But again, like this one's not really a 16, because this text box isn't budding up right against the bottom of that piece. So it's super hard to judge sometimes in figma. What let's us create a few. And if we feel like we're not going the right way, but let's do a size 400 is going to be one ram we can do. So with that logic, size 300 can be a 0.75 ram, a size 200 can be a 0.5 ram. You probably don't need smaller, but if you do want smaller, we could also have a 100. Because they could use that for border radiuses and stuff too. So let's just make four, five, six, seven, eight, nine. If we're going to do this, we might as well go all out. So we have a one, this could be like a 1.5. We could make this a bit more granular, like two five, 1.5. Or we could make this something that's with clamps to 2.5. But I think for this one, we could stick with something like this. I'm just trying to decide if I want to use REMs or M's. I think we'll go with REM though. Three, I think, is fine for the larger size. We do have bigger. No, it's not. I think, okay, so what I'm going to do, just because we get into larger spacing a lot in this, let's just do this as a three, a four, and a five. Anyway, we'll see if we stick with this or not. I might not say exactly like this. We might abandon it as an idea. But what we will do, and I'm going to create utility classes as I need them for this, I'm just going, so padding block 400 could be my var size 400 as an example. And then we could do the same thing for inline, which would be my left and the right. Or just padding 400, which would be all the sides. And like looking at these things, definitely could be useful here, the spacing. I'm just trying to let's get into there. We have 40, 40, 40 and 60. And that could actually be useful. My buttons too could potentially use those, though I usually like to use M's for buttons. I'm just trying to run through quickly. Yeah, I guess what we'll do is we'll actually make usually I like using sas that can generate these for me. I think what we'll do is we'll create these as we need them. But let's just do our 900 first for my size 900. Because then what we could do and again, maybe it's worth coming in making these clamp based values instead of what I'm going to do for now. But let's just come here and let's open Figma. So if we look here, like there's definitely a lot of space on the top and the bottom of this. I think usually I go very heavy on utility classes for spacing as well. But I think because of how this is working, I won't go so heavy on utility classes. But what we will do is on each one of these sections, let's just do a class of padding block 900. I could do all whoops, you probably do that all at once. So let's undo that actually, if you select a section. Actually, I want to select it with the opening closing just so it's not matching a close section as well. I'm going to do a control shift L, which will select all of them. So every section's now been selected, I'm going to push that way and then back. So I'm in here and I can do class of padding block 900, which I think is going to be too much on the ones that had the background color, but at least it's sort of spaced things out. Oh, and I didn't add it everywhere, but I've added it in some spots, you can see the spacing that's come in. And these numbers might need to be adjusted because I just thought of something, but that's okay. I'm just trying to think why it's not being applied here. That's a section. Oh, because we already had the class. Okay. So here we can add that in to these two. So this section and my section carousel because they already had classes. So we didn't get into those. So that would be my padding block. See 900 is going to be too much. If we do that, let's try, we'll say it's a seven, seven. And then here at the same ideas last time, we'll put in a bar just to separate the carousel, like my utility classes from my component classes, visual separation only, which means we do need to build that one in as well. So we can make this a seven and a seven, which should shrink that one down slightly. Just for fun. Oh, you got to save. You have to save both files for that to work. There we go. That looks a little bit closer to what we want. And my footer will give the same thing too then. Footer BG neutral. So here would be padding block 700. We'll start there and we'll sort of adjust things as we think we need to. But yeah, that's actually, that gets that off the ground. While we're here. Okay, actually, I think like the, that's a lot of the utility classes that have come in that are working and they're going to be fine. There's a little bit of work we need to do for links, but I think we'll tackle that just when we get down there, because these links are completely different. So the one other thing I want to sort of update is just on these larger font sizes, anytime we have them, the line heights are wrong. So let's come into here right away. And for these font size primary heading and secondary heading, I'm also going to come in with a line height of say 1.1, 1.2, that looks better. So yeah, just often you'll separate these things. But I think here, like if you're bringing in this font size, you want it to be tighter. If we look here, we can see it's definitely you can even get the exact one that they used if you want. Maybe the 1.1 actually was closer. It looks pretty tight in their design. So go with that. Just because I think it makes sense to use that across the board, missing a bold over here. Let's find that what, what they found there, we just want a font weight bold on there. So yeah, I think a lot of the utility classes of what we need are in place. And is there any other utility class we need, we just never button, it's not really a utility class to me, it's more of a component. So let's come here, we'll do my button now button. And just because it's going to be kind of fast, so it's my dot button, that's going to get a border radius of 100, there, the V max, let's just say, it's just a huge number makes it pill shaped. The padding on this can be a 0.5 m 1 m. That looks a little bit better. Let's just move this so we can actually see what the button should look like. And scroll on over to that one. They have that shadow on there too, which is kind of interesting. So we have my button itself. Cool. So the font weight, oh, is this font weight? No, I think it's actually so my var font weight, oh, we did the it's my bold. I wasn't sure. And the font size, that's the one I was thinking of font size, we actually have the font size button that we set up. Here we have my border radius. So here we'll also say border is nothing. So we get rid of the border that's on there. The padding is obviously wrong. So let's do a one and a 1.75 maybe because it should be quite a bit bigger and that doesn't want to update it. Why does that not change it? For some reason, it wasn't updating, but now it is. So let's do a 1 m and a 1.75 m. You could do some actually this is even bigger, you could do like a minimum width on buttons as well. I don't want to do that though, because in like we have my go button and the go button in the design is really tiny. But sometimes on designs, you might actually want like a text aligned center with a min width. So there's like a consistency in the minimum size of a button, but we definitely don't need that in this case. This is pretty much, it's a lot of padding on the side, we might need a special class actually on that smaller button. I'm going to go with a 2.5. That looks okay. So then we just need the colors. So here we'll do a color of our color neutral 100, which is my lightest and then a background color of our color accent 400. And then there's that hover state, which we were just looking at, and then we'll add the shadow in. So the hover state needs to get a lot lighter. So here, let's do that button hover. And if you have a hover, we also want a button. I'm going to focus within. Oh, actually, I just thought of something here. We also we want the hand icon clearly. So we're going to do our cursor pointer. Is that the right way around? One second. Let's just turn off the responsive mode. Whoops, whoops, whoops. Turn off responsive mode. Good. Okay, I got the right one. The other thing, this could be put on links as well. So we'll do a text declaration of none, just in case we ever had a link that styled like a button. And then the reason I'm using focus within is because if we have a focus state on a button, and you click, it will actually like stick on the button. And a lot of time we don't actually want that focus within is usually what you actually want. So now if I like, see if I tab onto it, it gets the highlight. But if I just click on it, it doesn't get the focus state. And that's the default now in the browsers. But when you style stuff, it can be useful to use focus within and not focus within focus visible. Sorry, focus visible is what is often, maybe we'll see a use case when we do the navigation in the next video. And I can explain it more there. But yeah, we have that. And then when let's come in with the background color background color, I think it's the only time we're going to use my color accent 100. So when we do that, oh, that's not the right color. That's the color that was in the design system. So let's make a 300 here, and come up to here, and we'll duplicate this. And this is one of the reasons I like using HSL. So here we can make a 300. And then here I can just lighten this up by making it like an 80. 75, try 75. That looks pretty close. There we go. Close enough. And we get it later. I guess we could have lowered the opacity too. But I'm always hesitant to lower opacities on things, which is why I'm a little concerned with my paragraphs here and how we're going to make them later. But yeah, we'll cross that bridge when we get there. So that's looking pretty decent. Next thing. And so yeah, let's just get that box shadow on there. So box shadow is going to be, it looks sucked in a little bit. So we're going to do a zero offset that way. We need to move it down. So let's move it down by 0.5 m. Then we want to do a blur. It looks pretty blurry. We'll try one m. And then let's do one m and then let's do a minus one m for the spread, which is what's going to pull it in. And let's just put red for now to see if that works. It's working, but I can't see it. Let's move it down by one. Oh yeah, we have to move it down by quite a bit actually, because we have the negative one spread that's pulling it in. That looks pretty close actually to what we want. It's just the color I think that's wrong. Maybe we can move it down, point a little bit extra, just so we see it a little bit more. And then we can come in here with my var color accent 400. This could be a fun one to link to the color of the button itself. But I noticed if we can't, like here we have that, oh we need to turn the glow off on that one actually, like this button we're going to make it, let's do that now, we need to do it anyway. But notice we don't see a glow. I know the design has a glow. Let's go look at it. There is the shadow, but if I come and look, whoops, the shadow is here. It's almost like it's a darker orange, because it's still an orange shadow. It's not a different color. Maybe we'll do is an accent 500 here. And then add that color as well. So accent 500. And then this can be like a 40. So it's a little bit darker, but there we go. You can actually see it's showing up here, similar to what we see here. Maybe it's too dark now, so this could be like a 50. It's just slightly darker than the background color. And the saturation, let's drop the saturation down as well. That looks a little bit closer to here. Oh no, that's terrible. Oh, I wanted to drop this down a bit more actually. I think what we're, I think that's actually more what I want for the color of it, maybe 45 and like a 60 here. We can plug around with those all day long, but I think it's closer to what we actually want. I think the big difference right now with that is, first of all, the background color on there. And I think here we could just pull it down a little bit less, 1.125 maybe. So it's still there, but it's just not as strong. And then if you remember, we used the data attribute of data type here when we set this up originally. So if I go and look at the HTML, get started. There's that one. Oops, get started. We can find, there it is, data type of inverted to change what this one looks like. If you want to know more about why I did that, you can go back to that video where I wrote the HTML for it. So the data type here will be my inverted where, what do we want it to look like? The color of it, I think the color is actually what changes there, right? Yeah, it's the, so the, let's just take my background color, my color. This becomes my background. This becomes my color. So there we go. Yeah, that looks pretty good, I think. Right? Yeah, that looks pretty good. I'm happy with that. So that's perfect actually. And then we just want to, on hover now, we just come here, and then we want to say that this one, the hover, as well as the focus. So, and let's just copy all of that, paste it there so we can do our focus within, focus visible, not within again, visible. And then the color will become my 300, and the background stays the same. There we go. And we get the later color that comes up, which I think is exactly what we wanted. It looks, it's funny, this one looks off center, whereas this one doesn't to me. I'm not sure 100% why. But we have both buttons there. It looks pretty good. We could actually, one thing you can do on buttons is, I'm just going with the font stuff. Let's just throw a line height one. It helps center things often. If you do that, you can even do a line height of zero and lose all of it. You do need a lot more padding when you do it. But it can help things just be a little bit more centered. And then we just need more padding on the top and bottom after that to make up for the difference. That actually, I think that looks better. At least to my eye, they look the same now. Maybe I was not seeing it, but whatever. There we go. In the next video, we're going to go and tackle the navigation, get that working on mobile screens and on large screens and get it looking the way we need it to. That video should be out in a few days. If you're watching these as they're coming out. And of course, if you're watching this later on, it should be available for you right now. But before we jump to that, I just want to say a very big thank you to my supporters of awesome Jan, Johnny, Patrick, Simon, and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your court on the internet just a little bit more awesome.