 Hi there, and welcome to this last part of this series. We're taking that design that I made in Figma and we're turning it into an actual website with HTML and CSS. I'm assuming you've already watched part one where I wrote the HTML and part two where I started doing the CSS, working on the small screens mostly. If you haven't, I really strongly suggest you check those ones out, at least part one, because this one's not gonna make a lot of sense if you didn't see part one. But yeah, I'm assuming you have. So we're ready to go. As I sort of alluded to at the end of that last video, Gared didn't quite do what I wanted it to. I sort of, you know, we're gonna see that we run into a few problems along the way. And it's the types of problems where you have to use some decision-making between, you know, a lot of the time you're given this and you're given the big design, you're not given the in-between. That in-between is where the problems come up. So I talk my way through the process I go through to get through those problems. I think it's gonna be a good video. It's the type of thing people have been asking me about a lot, so let's get to it. All right, so it's time to make this responsive and look good at all screen sizes. I'm actually gonna do this in reverse order. We're gonna start down here and work our way up because I think it's gonna be a little easier. Now, well, let's start with some easy wins. So basically, I'm saying it's gonna be easier, but I also think this is gonna dictate a little bit of what I'm doing up top. Because I did say I wanted to use a bit of grid. So let's come down to my main and I'm gonna do at media, min, width, and we're gonna decide when to do this. So people ask me all the time what sizes to use for these. Basically, I like starting at small screen sizes first just because it's easy. I don't have to do as much work and then I'm adding complexity. I find that a lot easier than removing complexity. Now, when do I do it? Well, I like this a little responsive, but just know this isn't perfect. The ideal thing is actually checking it on phones and checking it on tablets and trying different stuff, but it does give you a general idea. And for the most part, it's when the image starts coming in here where I have an issue because now it's covering, I can't read the text that's on top of my image. So ideally, it would be somewhere around, I don't know, let's say for 500 pixels where things start to break. So it's a nice round number. Let's go with 500 pixels. Now, I might change that number because one thing I don't like to do is this is 500 and then something over here is changing at like 520 and then something over there is changing at 565. Like I try and keep things all using the same break point or same set of break points because you might have three break points on a site just for consistency. So things aren't always jumping around, but I mean, you can have technically as many as you want. And it's not, you know, most people other than if you're a developer, you're doing this all the time. If you're not a developer, how often are you actually changing the size of a screen? Probably not very often. So I'm gonna do a display of grid. Oops, what are we doing that on? Dot main will end up with a display of grid. Cool. And well, that breaks everything. That's kind of crazy sauce. All right. So the first thing I'm gonna do and I think it's just gonna make life easier is just a justify items start and that should fix that from going a little bit nuts. The next thing I'm gonna do is try and figure out what my grid areas here are gonna be and 500 is probably actually gonna change because I just thought of something. But anyway, I wanted to find what my grid actually is going to be. So we're gonna do grid template columns and let's give it a, I like doing a min max on the outside. For this, I'm actually, let's go on a separate line here just cause it's gonna, I don't want word wrap on it. It's kind of awkward for in my CSS. So this is just, this is my grid template column. We're gonna do min max of, I like doing one M and one FR that might change, but it's my starting point. And I like having that for both edges and it's definitely gonna change for the right side, but we're gonna start with that. Then here in the middle, we only really need one big content area. So what are we gonna do? I'm going to set this up with a min max as well. Let's say the minimum is 450 pixels and or even this you can go small with like 320. The one thing with the min max is you have to give a min max at like a set value on your minimum. I'm doing 320, we could bring that into REM. 320 divided by 16 is 20. So I could say that this is 20 REM comma, the maximum, the maximum. Let's see if I can do this with CH's 50 CH. Obviously it just broke everything, but actually my max there is looking pretty good. It's actually like I see where that's stopping on my line length. I'm super happy with that. So CH is looking at how the character is per line. It's actually looking at the width of the number zero for some reason. I don't know how they chose that, but that's what it looks at. Now the only thing is I want all of the content that's inside my main to be inside that area. So what we could do is main all the direct children of my main can have a grid column of two over three. And we just fixed our layout. So ideally here, if this is working properly, if I shrink that, we're actually at one point, once we get 500 columns, 500 pixels, you can see there it's clicking over. So we're in my grid now and as that gets bigger, I'm gonna have to change some margins because that margin underneath is too big. This is too big and this is probably too small. But anyway, you can see that it grows, it grows, it grows, and then it stops when it gets to 50 CH. And this and this are just gonna keep growing and it's gonna keep the content perfectly centered. Now the only issue with that is, do I want it to be perfectly centered? Like this image now is causing a bit of an issue. And if we go and look at the original design, it definitely wasn't perfectly centered. Or if it was like we have a, basically this area probably shouldn't have the one FR on it. It probably should have something else. So I think what we're gonna do is bring that up to like a 10, a maximum of 10 RAM. And in this case, we're gonna have to go a bit bigger here and see what happens. That's sort of working. There's this one little problem area, but then it's working out pretty good after that. Like I'm pretty happy with where everything else is lining up at this stage. Boop, boop, boop, boop. So, we could play around with the background a little bit. So that was my, let's come here, dot main ski, background position, center, or left center. I just wanna see if that even makes a big difference. It's probably not gonna do a lot, but it keeps my skier always there because my skier is sort of centered. And usually on a widescreen you'd also have more height, but it's always gonna keep, now, or maybe I should actually do left, bottom, bottom left, whatever. So we always keep the mountains in no matter what happens. So I think that's working, that's working. The spacing here is driving me nuts on how it's doing that because it's getting to the 10 RAM really fast and it's actually leaving this smaller. So what I think I might do is one FR, and then we're actually gonna redefine the grid at another screen size. So it's gonna work, that seems like too much work though. I mean, there is another thing we could do here. The reason that it's doing it like this, in this case is, maybe instead, what if I did auto? FR is using empty space, it's the same problem, yeah. It wants to do the 10 RAM before it starts doing the one FR or the auto here. So it's filling this up, and then once there's, like all the spaces have been defined, then it's going into this. So another option could be that this is one FR, and this ends up being like two or three FR, so it's gonna put more empty space on the right than on the left. So let's just see if that makes a difference. We're gonna click in, you're gonna see that it's sticking more on the right side, but that space is always growing. I sort of like how that's working a little better. That's actually working pretty good. I'm still getting some stuff going on top of the skier. I could play with the background position more, and I feel like I'd build in another media query at like a large screen size. So say like at media, min, width, 1200 pixels or something like that, where the main ski background position would be center right or something like that, just so we keep the skier in it more. So like we have the mountains, it looks all cool, but like when he starts disappearing off the top, then we focus more on him, and like who cares about the mountains really? Like this is more interesting than seeing a guy with his head cut off and seeing a nice mountain range. I do like the mountains. I do think it frames this whole thing really well, but you have to, with background images, there's always a sacrifice to make. And you know what? I'm gonna cheat a little bit. It's bugging me, so I'm just gonna make that smaller, so it doesn't go on top of my image. Now again, this isn't perfect. It might go like that's... Anyway, how would my actual design look? How wide did I go? I went a bit wider than how wide we're actually getting. So you know, we could redefine the grid or something like that, but I think that gives us a good idea of like the types of things you can get away with. I'm gonna come back into here for a second though, just to fix that spacing. That's all my weather stuff, so it's gonna be lower. Main title, margin, bottom, zero, maybe even. And my main info, margin, bottom, two, M. Did that even change anything? I feel like it didn't change anything there. It was main info, right? Oh, I've just scored open there. Oh, main intro, not main info. There we go. I think that works a little better. I do 45. If I bring that back up to 50, did they have room to go next to each other? Why are they never going next to each other? Oh, I know why. Because they're both sitting in this column. Huh. So this is a, okay. These are always going next to each other. I didn't think of that. Because each one of these is a grid item, they're all trying to live on this column two, three. This simple fix for that. Honestly, where's my buttons would be to wrap those. So I could even put them in like a paragraph or I could put them in a div or whatever. If we did something like that, they live together now. The only problem is they have a margin top because they're inside a paragraph. So I mean, ideally anyway, something I talked about this a little bit before in my typography, a lot of the time I'll have something like P and margin top zero anyway. Cause I find those are really, really annoying. It also stuck them together. Curious. We can fix that though. A nice little trick. This was also to be a responsiveness, but we're coming up with a few other little things. Where's my buttons? Always a good thing to do. Plus.btn, margin left of one M. So it's only gonna take the second or third or fourth or fifth button. I'll take all of them, but it will never take the first one cause it's only looking for buttons that come after a button. So you can do the same thing with like P, P space P. Actually that made that spacing too close together. P space P would only add margins to something or like anything. It's always looking, you know, is there a button following another button? Yes, that second one gets it and that third one would get it and that fourth one would get it, but never the first one. So we're not adding empty space at the beginning. We call that the lobotomized owl for, you know, you can do, whoops, something like that. It's the lobotomized owl and you can, you know, do fun stuff with that. I just realized my spacing went off now cause I've removed margins from multiple places. So here my main title, my margin bottom can actually be like a 0.5 rem. Actually I can do that as like a one rem and it's gonna be pretty consistent then. And maybe even if I do this as a one rem. So those are the same but I find it's a little tight. I'm gonna go back up like that. And actually if you think of my final design, I think this is actually a lot bigger and this could be like a two even. Or in that case I could probably do one M. See, I find that too big and this is why I generally like M's. So let's say like a 0.75. Just remember if you're using M's it's relative to the font size. So here my 0.75 M it's 0.75 the size of three rem. Here my four M it's four times bigger than this font size. So there we go. The only problem now I think maybe is on small screen sizes this might not actually be working in terms of spacing. So maybe some of that should have gone in my media query. Let's just shrink this down. I think actually on mobile all the spacing issues are gonna work themselves out there. I think I'm pretty happy with that. We can move up to the top now and start focusing on the issues that we're running into up there. So I'm actually, I have responsive mode open right now which causes some problems. So let's get out of responsive mode and just go with the size of my browser window because that's gonna make life a lot easier. Okay, so up here, do-do-do header. And you know what? I said I was gonna do this so we're gonna do it. Except now that I'm saying that I'm gonna grab it. Let's go look at my layout in Figma for a second. See how this stuff is coming out like it's living over here but I just told this grid it has to, like this cell has to stop here and I have one big cell for that whole other side. That's not gonna work for what I wanna do up here. So I'm not gonna use the same technique but I am gonna use a grid. And again, I think if I, hmm, or, okay, we will but we're just gonna make things a little bit more complicated. I'm gonna cross my fingers that it works. I'm not, we're gonna see. We're gonna see. Okay, let's try. So what I'm gonna do is I'm gonna take this whole thing. Let's just put it, like here I had my grid like that. I'm gonna take that whole thing and I'm gonna replace it here with a var grid and we'll come up to here and we'd originally had that there but I'm gonna replace it with what we just grabbed. But here it's gonna change where I'm gonna have a fourth column and this is where I'm a little worried that I'm gonna break stuff. We're gonna try min max. Do I need a min max? I just do this as a one FR maybe. Oops, one FR. This isn't broken. So that's a good sign. Let's just take a look at, whoops, that's my weather one, my main. That doesn't see, there's my one FR in the middle. So let's just bring on responsive mode again and shrinker this down. So I think that's actually gonna work out just fine. I don't think it's gonna break anything along the way. It's dividing, it's adding a little bit more extra space here, which actually at the end of the day is not necessarily a bad thing. I think that's gonna be okay. And then what I can do, so this is gonna be an important. So it's adding that fourth, like this empty cell that's not being used right now. I think that's gonna be, anyway, let's see if this works. I haven't tried this. So it's a little bit of an experiment. So in my header, we're gonna do an at media. We're gonna use the same break point. So a min width, whoops, min width of 700 pixels. And we're gonna give this a display grid. This shouldn't break anything, let's hit save. Nothing's broken yet. Oh no, what are we doing? We need to do our header. Header has a display grid. Shouldn't break anything, a few things might move. But now when I do grid template columns, var grid, this is when things might go kind of crazy. Not too bad. Not too bad, not too bad. Okay, so now we do have a bit of work to do. The easiest one to fix is gonna be my weather one. So let's start there. Weather grid columns, don't need any templates. Let's go take a look at my header. I want it to live here. Now, I might change my grid again, because maybe I screw up and I need to add more or remove columns. So when we're using line numbers, one of the dangerous things to say, I said four over five, because I want to go from here to here. The dangerous thing that could technically happen is, it ends up, then I remove the four over five, but then it's gonna create some implicit lines and it sort of screws everything up. So I think what I'm gonna do is instead is do a negative two over negative one, which means that the grid column, not grid columns, it's always gonna go to the last cell. Doesn't matter what cell it is, it's always the last one, because you can see here I have my one, my two, my three, my four, my five. Now at the bottom, I'm counting backwards. A lot of the time we use this negative one, but by using the negative two over negative one, again, it just ensures that we're always in the last, last column. Now it's stretching a bit more than I'd want, so I think we can do a justify self end, and it should just suck itself over. I guess we have to add some margins in there after, but overall I think that's working. Now what's really important here is my logo is going to be in my grid column of two. It's gonna start there and live there. We're gonna break a few things here, because I'm gonna put my nav in the grid column of two, but I want it to go all the way to four. So this might break some stuff. That also means that I have to say, I probably have to do it for all of them, so we'll just do it here. Logo, nav, and weather, grid row of one over two. You can just do one even. Okay, not terrible, except this is a bit of an issue, so maybe here we're gonna have to play with things a little bit to get this to work, but grid column, okay. Let's just see if I do a three over four. That's what I was worried about. So we might mess around with things. Now why is this, see the whole reason I was doing this was so you see, this is where I wish we had a sub grid. Damn, my FR units are going to struggle to match each other. So the way I'm gonna change the grid based on the design is I can't have, that's the wrong one, here in my ski, I need this to actually go over two columns so my navigation can fit as well, like crossing two columns. So for my logo, which is gonna be the first of those two columns, we have my empty space, then after that empty space, we're gonna add in a min content. Now this is gonna break some stuff, that's okay though. So it broke this, but it's gonna, anyway, it's gonna help us in the long run. So it's come down back to, and I think I probably over complicated matters by doing this with grid, I won't lie to you. And it's one of the reasons I'm really looking for a sub grid, because these issues wouldn't be actually coming up. So, where is it? In my media query, I'm just gonna have this two over four instead, so it's going back to the original size that it was, that's a big fixed problem right there. Another issue that's coming up with this is let's turn on my header one and let's turn on my ski one there. You can see that we have a problem there with the padding. So in here on my main, I'm just gonna do padding, top padding, top left, sorry, left of zero and padding right of zero to get rid of those extra spaces. Now the problem that's coming up, and this one's, I think, here, see how it's a lot smaller than this one? And it's because this is full of content. We have so much content up here. It's actually taking up all the possible room. And if we look at my grid, that's saying minimum is one M, maximum is one FR. So in this one where it's being smushed and we don't actually have enough room, this one is setting it one M and this one here is setting it one M. But if we look over what's happening here is these one FRs, there is empty space. There's room for them to start growing. So they're actually, they are growing. They're adding empty space. Whereas on this, they're not. And that's kind of weird, right? So instead of doing one FR, I'm actually gonna switch this to a percentage because the percentage will be a percentage of the screen. So if I do that, you can see my logo is now lining up with that right there. And as that grows, as that grows, let's grow it this way here. That space here, it's not gonna grow as much as I wanted it to. But I think that the 10% there, it's a nice compromise from where we were at before. So it's going to work. With that same thing, we can come and fix this now. So those aren't overlapping. I'm gonna try one thing first and see if this works. And if it doesn't, it's all good. But my nav, let's just try to justify self-end to see if that helps. Helps. I sort of wanted it to come over more that way. But, and actually on this where we have my grid, I have my grid template columns are okay. I'm also gonna do an align items center. There we go. Just to help center things vertically like that. So just like with Flexbox, why is this one not centering? Oh, cause originally, let's just put margin zero. Probably will not fix that. We'd put a margin on my logo here. I'm actually gonna have to take this media query and move it down. Let's just move it. Oh, we might as well just put it in with this. Yeah, actually it's just right here and have link after my navigation. We could definitely combine everything together. So here I could probably just do a margin of zero and fix that. So we're overriding, this margin of zero has to overwrite this margin top that we had. All right, and now we could just use on my nav list. Here we could do nav item or I think I did last list item, I believe. Margin left of, I don't know, two M, just to space them out, maybe a bit more, three M. And there we go, it's looking not too bad. I definitely would prefer if this was coming all the way over, but I don't think with how I've set this up, this is what, let's go take a look. I have my inspector already opened. Basically how I've done this, I could have it go up to this line, I guess. Let's just see. Oh, that's a problem. I know why that's happening. Well, we'll explore that in a second. We're running out of space once again with how I set it up, but it's just okay. I think what we're gonna do, I'll move it over a little bit. Either I'd like to keep it closer to the side or I'd prefer it to be all the way over there. Let's just put both of these on for one more time. Once again, you can see that this one is huge compared to this, and then even this one is smaller than this, and it's because, again, these are gonna be exactly the same. But my min content here is different from what min content is for this one here. So this is sort of causing some issues. This is where if we had subgrid, this issue would not exist. But sadly, in this case, it does. And or even the min content has actually completely disappeared because the min content is zero. So I'm actually wondering, can I fix that? There could be one solution. It's all the way at the top, my grid. One solution would actually be to take this, but to have it. So say we did 10, 10, and then, as I say, 20, 22 and 22, or even 22 and 23 would work. At least everything's lining up with each other now. So it's a little bit more consistent that way. And maybe actually we'd stop running into that problem and that sucks. We don't have room for all of this. So we'd have to change the media query up there, which is okay. It's gonna make me wanna change one thing overall, even though I don't mind it up to about here. Oh, we have that problem with the skiing and golf now though. Oh, I want them to go up to my grid line number because I changed the numbers, the sizes and everything. So they're stopping here. Realistically, we could have it stop here. And I'm even wondering if I'd wanna build in an extra row, or sorry, an extra column just for this guy because he's taking up lots of room here. If I just switch these around, would that work? Not quite, but sort of. I see now it's, it is mucking. Well, it's mucking, but it's not really mucking things up. I sort of prefer that. But here, what if I just min content instead? The difference in max contents, making sure the text is all staying on one line. Whereas min content means it's gonna shrink it as small as possible. So I think I could actually do that. And the advantage with that now is I keep turning on the wrong one there. Again, I'm just using this, but I have it off screen. So we have more real estate. We have my line four, we have my line five. So I could actually bring my navigation. My nav could go all the way up to five. It's gonna bring it all the way to there. And that actually makes it work exactly how I wanted it to. That's pretty exciting. But we are running into this issue here. So I think what I'll do is I'll actually change this media query because that's roughly where it's breaking. Maybe even earlier. Wow, that's pretty big. Now, obviously this doesn't look very good either here. So let's fix that up too. But overall, like this I'm happy with. Here I think I'll increase the space a little bit. So at this really big space, my nav can also get a margin right of like 3M. I think that's perfect. I'm happy with that. I'm happy with how all of this is working. I just broke it again because I added that margin on there. Okay, we're doing this at like 1,000. And then we don't have to worry about it anymore. So that's for our very big screen sizes. So now we have to come up with an intermediate solution. And this is the type of thing that actually does happen sometimes. We run into these issues that we weren't really expecting that we'd run into. Which is fine. And this is what happens when you're given designs. Even if we were given the small design and the big design, we'd run into issues like this a lot. So this is where I think at this level, all I'm gonna do, so I'm gonna do that same media query we had before at media min with 700 pixels. But what we wanna do now is, I'm gonna do my nav has a max width of say 600 pixels of say 20 RAM. I'm just guessing at this point. Let's see what that looks like. Not bad. And we'll do a margin of zero auto to center it. And there's something through our, are we inside? No, we don't have a grid yet. So why is it? Oh, my 600 is too small. And the spacing on it. So my nav, let's just do, let's just do 30 then, it'll be fine. And here, and even my media query shouldn't be in pixels. They should be in Ms too. Is that actually fitting everything now? It is. So my nav items, nav items, yeah. That's where I put my margins. So on my nav items, I think what we'll do is a margin of zero and 1M, 1.5M. Does that make sense? It's not nav item, it's nav list item. Sorry. So then it should be without that. So there we go. Now it should be centered because now we get the margin on both sides of them. And the max width on there should actually hold the whole thing. So there we go. It's perfectly centered. So I think right away that's a big improvement. Again, I should give those a hover. But what do we do with this guy, that guy? That's my weather. With max content. Again, that's going to, I can sort of get rid of the other thing I did then. This is gonna make sure that everything falls on one line of text. If we did a min content, it would shrink it down to snowfall becomes like the limiting factor on that. It's gonna make sure that snowfall, that's sort of controlling that. But we're gonna do a max content on this guy. So that's better. And we could probably even play with that a little bit. But I think what I'm gonna do is margin zero. Let's do like 1M auto just to see, cool. So I want it to be centered there. Maybe this could be smaller, 0.5. But what I wanna do is on the bottom actually do a negative 3M, probably too much. Whoops, don't put a space. There we go. Whoa, oh yeah, that's right. Position, position relative, Z index of one. Ah, there we go. I thought that was too big, but this is where negative margins can come into play. Either I'd want it to be like exactly in the middle or we could do it where it's just like a little bit of overlap, which I think is completely fine. Stylistic choice on that. And again, this gray content would be the next section. We'd be getting into other stuff down there. But I think something like that could work. This could stay on the side and we could just shove everything like right a line and keep that left a line. But I'm looking for like a nice simple solution. So we get that, then it bounces to that. And I think what we should do also here is just come in, that was my weather info span, I think. So on that, we could add a margin left of like one M. Oh, we'd probably need their span. So we need to display block on there. Not block, inline block. Or actually, they're flex items. So maybe the block would work as well. Let's just try block. Weather info, it is adding a little bit, but not what I was hoping for. Probably because my weather info is all the way down here. Margin left is okay. I did an auto there because if I take that off, what happens? There we go. So let's just see, that's looking okay. It's still good. Oh, that's why we had the auto. Okay, we'll put that back on. So they actually stay far apart. This maybe could actually get copied even. Could we, you know what I'm tempted to do? So here, whoa, I also am breaking there. I think what I'm really tempted to do right now is just grab all of this and not even have it in a media query and we'll fix that last thing. We'll add in, so I'm actually gonna come here and just start fixing this. I don't think I need, oh, you know what, undo, undo. No, redo, redo. It's all good. So my weather, I think all of this, we can just bring into here. Cool, that's working. All of this span, where's my original span? I can bring that into here. Oh, it's gonna break my margin left though. Oh, that's good. I don't want this margin left here anymore anyway. Do I even need that one? We don't even need this. We can delete all of that. That looks all right. But my navigation is giving us a little bit of a headache so my nav was up a little bit. Nav, so my nav list item, this margin will become a margin left of one m and a margin right of one m. There we go. And at one point, that's my nav list should have a zero auto on it because I want it to be able to be centered. And then over here, we want it to also have a max width of, what's the max width? I'm gonna say 20 RAM. Nope, bigger than that, 35 RAM. And that's probably too big. That's not too bad actually. So it's coming together. That's looking all right. And then it pops over and does that. And last thing, last thing we need to do, whether margin of zero, it's not gonna work. So let's just grab this whole media query. This is sometimes why when we're working on stuff like this and get messy, I usually like to keep all many things sort of organized when they're in media queries. Is this all in the 700? That's in my 1,000 pixels. So we can sort of organize my media queries by size and all of this can actually come up. Here, there we go. So it's before my media query, all the media queries at the bottom. It's always safer to do that in a way. Let's just do one last, last, last thing. Nav list, list item. Nav link, nav link hover. Color will be var color primary. Oh, there we go. That looks nice. This is all working. There we go. Those buttons are looking all right. And it's nice and responsive. It's working at my small screen sizes. It's working at my big screen sizes. I'm pretty happy with it overall. I think that looks pretty good. I hope you do too. There we go. It's done. I hope you enjoyed it. I hope you liked this. I hope I covered everything you were hoping that I would do. Hope I didn't make any mistakes. If you did see any mistakes that I made or if there's any issues, please leave a comment down below so we can follow along. Also the GitHub link down below. I've been forgetting to mention it the whole time, but there is a GitHub link down below that has the finished code. If you just wanna go and check that out or compare it to your own or whatever it is. I'm really happy that you watched the series. I'm assuming if you got through this one that you've been enjoying it. If so, please let me know what you've learned. We've covered a lot of material in this one, so please let me know what you learned down below. I always like knowing what you guys are getting out of these videos. I did go through a lot of things very quickly in this series because I wasn't focused on anything major. I wasn't like, this is how this one thing works or this is how this one grid property works and all of that. If you were enjoying this and you felt like you learned a lot, but sometimes you're used to watching tutorials in general. You're following along with the tutorials and everything seems awesome and you're getting it and it's all making sense. And then all of a sudden, you run into a problem. You run into this thing where you try and do it on your own and it just doesn't work. And then you have to go back to another tutorial and another one, it's tutorial hell. We've all been there. You get stuck in it, I understand it. I've lived it. You're living it now and that sucks. But I'm working on something to help you get out of it. It's called CSS Fundamentals. It's focused on getting people out of the CSS tutorial hell mostly. And if you're watching this, that's what I'm assuming you would be stuck in. So if you're interested in that, it will be coming out in a few months from now, but if you wanna get updates on it, it's only gonna be opened for one week. So if you wanna make sure you find out about that course and get in on that course during that one week launch, I would encourage you to go down below, hit the link. There's gonna be a landing page you're on and you can put your email address in there and get all the updates about that when it is coming up and when it launches. Thank you very much for watching. I really hope you've enjoyed this series. A huge thank you to my patrons for helping support everything I do here on my channel. It really does help and does make a difference. Thank you guys so very much. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.