 Okay, so I'm really excited for this video where I'm taking a design that a community member supplied You can see it on the screen right now and we're taking this design and we're going to code it up And we're going to be doing a lot of cool things with it We're going to be pushing the edge trying some bleeding edge technologies to sort of show you how they're going to be changing web development now And we're going to be doing it to make it fully responsive. So this layout that I have is just a We have just the desktop design But I want to show you how we can do mobile first Even though we're starting with the desktop design you can see that here. We have the the layout growing It's switching over. We have a few different things We have this fun little animation on the button that we're going to do in And then as it gets bigger like that the layout sort of switches over and then eventually locks in at this maximum size like that And we have the overlapping content lots of really cool things with the sort of like asymmetrical style Of this design. So we're really going to be pushing the box. We're using sub grid We're going to be using css custom properties clamp a few other things You can see here like the the main title grows and shrinks in size But it has a minimum size and it also goes up to a maximum size Lots of really cool and fun things we're going to be doing in this one. Don't talk to me about browser support This video is not being put together for production. It's not being put together for browser support It's being put together to show you how easy a layout like this is going to be in the not too distant future So much fun. Lots of really cool things are in me looking at. I'm really looking forward to jumping into it. So let's go So before we get into this video, I just want to say a really big. Thank you to moritz He is a community member on my discord He had designed this and was asking for feedback on it and someone said wouldn't it be cool to see kevin To code that up because it looks pretty interesting and I thought it does look pretty interesting So let's see how we can do it. So a really big. Thank you to moritz I have linked to his instagram down below So make sure to give him a follow over on instagram and yeah, let's go and get started on this So what do we need? Well the very first thing I'm going to do is you can see I have the design here in Xd open which is what it was designed in and what I want to do is keep it really simple at first Um, and actually we can keep the markup like the html here really really basic So I all I started with here is a blank html file and I am in vs code So what I'm going to do is exclamation point and push tab and that is emit just filling everything out for me So I don't have to do anything else Here we'll just call it the box because that's sort of what this is. We have tb is the logo. So I'm guessing that is also the um The the logo there is tb the box and we can get started Cool. So in the body here, what I want to do is bring in a div class called main grid And the reason I'm doing this is because I am going to be using sub grid if I was not using sub grid maybe I wouldn't do this um And main grid, could you just do this on the body itself? Could we make that? That's how I started I originally when I was using grid was just always putting it on the body Um, but I found a few edge cases where I was running into issues with that So I prefer doing something like this now Now inside my main grid. I'm going to have three main parts. We're going to have our header We're going to have my main And we're going to have a footer And so that's the main look of it and those are all going to be placed on my main grid So I'm going to be using grid to lay something out for those Um, but the nice thing is because I can use sub grid now And this will only be supported in firefox because I am using sub grid But I can use that same grid for the children that are inside these with normal grid You couldn't do that. So you're going to see how easy and how fantastic that does make things So inside here in my header, uh, we just need a couple of things We need an image because I did bring that in as a spg and I'll bring that in in a second Uh, so and then we need our class here and I'm just going to call it logo And the alt of this, um, generally it should be a description of what it is So tbs is not really going to tell people much Uh, logo won't really tell people much. It could be the name of the company So like company name could be here. So maybe we could just put the box Um, and next we need my navigation. So nav and just I'm using emit as I said So if I hit tab, that's what I've been doing up until now to speed things up a little bit My nav I I'm going to give this a class of nav as well Just because I like giving everything classes I could do this on my header my main and my footer as well actually Um, but here we have my nav. So on the nav itself Um, we could do this with an on ordered list and do it that way. So Um, I'm going to speed things up a little bit just because and do it the lazy way Which is just putting links directly in here. So we need four links. I'm going to do an a with a class of nav link And I'm going to do star four hit tab They're not going to have anywhere to go to so we'll just you know do something like that Um, I'm not going to put in the text right now We can come back and do all the text after I'll bring my image in and do all of that in one shot We're just worried about, you know, how things are looking right now or getting our markup all in place So that should be it for my header Then we can come in to my main here and what do we need in my main? Inside my main we need our title subtitle type of thing here paragraph a button and my image So what I'm going to do is here have an h1 with a class of title I think that makes sense We're going to have a paragraph with a class of location. I guess location Then I'm going to come in with an image. I am g with a class of primary image We're also going to come in here and have a and I guess I can make this a little bit bigger Just so while we're working on it, you can see a little bit more as we have my primary image Then um for the two images down here because they stay grouped together What I am going to do is give those a div So I'm going to do a div with a class of secondary image images I'm going to put image here too. I'm going to write it out So secondary images And then inside of that we can have image with a class of secondary image singular because it's the the individual ones And hit tab Oh actually before we do that we want to do a star two star two times two and then we can Whoops that probably worked Two and I think em it puts everything on one line there, which drives me a little nuts But there we go. We have my two images that have come in So that will be my two images down here at the bottom. So that's oh and we need a button I was going to say that's all the content we need But we can come in here with a button with a class of btn for button and that should be okay I am making it a button. I'm assuming this would be sort of I don't know what Is that going to another page in which case it could be a link? Is it pulling something up? I'm imagining some sort of javascript functionality that could be cool. So I am using a button, but it could also be Not a button and we could have that as a link if it was just going to another page Cool And then all that's left for our markup is here in the footer I'm going to give these a div don't doesn't necessarily need it But I like doing that because I'm imagining that maybe later on they'd want to add more stuff to the footer So what would happen if they wanted to add the name again or a copyright or some other information? It would just make my life a lot easier. So here we can do social links Um, and then inside of my social links, we have three of them. So a With a class of the industry social link Yep, that would work Except we want three of them. So star three and in this case actually we want to have a image inside Each one of them and the image can be social image Just like that Now one thing I am definitely going to do here And maybe I'll come back to this a little bit when I style the footer a little bit But on each one of these I am going to place a area label Which is going to go with the social icon. So the first one could be snapchat air bnb and Instagram And so the reason I'm putting an area label is these are links. These are things that people can click on But if there's no text in there, if somebody's on a screen reader or there's some other type of You know, something is reading the page. They don't know what that link is Unless the person can see the the actual image So putting an area label on there just helps the screen reader know when it gets to the link It can read the image out and it knows what the image actually is So somebody can decide if they want to click on that or not So area label on there and just like that our html is all done. That's all we need Um, we will need one or two other things, but I think just one So I'm going to come here and make a new folder inside called css And oh just before you can see I have a get attributes in there This will be up on github. So if you want to get the finish code for this You can check the description below and there will be a link to the finished version of it down there If you want to check it out So here in my css folder, I will make a styles.css And I can come back to my index and we want to link that so we can just do link css styles dot css And there we go a bit easier to see with it like that. So there we go my link going to my css file right there and With all that I think we're done with my html Before I do that, I'm just going to cut ahead as I'm going to bring all the text in that we need for everything in here And then I'll see you on the other side when we start writing our css and all of the text is in place All right, so here we go We are ready to go One thing I did realize when I was bringing in all my text is I'd actually forgot to put this description in here And so I brought it in and you'll notice I have my title first my location Which is right there my big image my two little images and then I have my description after that Even though here you would think like maybe there's a different order. You might want to do Maybe the description would be with the text, you know, whatever it would be many people wouldn't be putting it after this But there is a good reason that I'm doing it that way and it's I want to start this design mobile first And I always want to think about how and it's not even mobile first actually at this stage It's like what happens if there's no css So I am in firefox here So I'm going to do a control shift m to open responsive mode and to shrink this down a little bit I realize my image is overflowing. It's really big But I like this idea of having my main image first then the two secondary images and the description And I'm going to make this even split into two columns probably because they're really secondary Images and then we'll get our description down there So let's jump over to my css file right here And a couple things or the first thing I always do is set up my box sizing So star We're going to be using some pseudo elements in here. So before and my Star after And box sizing border box if you don't not know about if you do if you do not know about border box I do have a video on that. There should be a card popping up there right now Uh, definitely a must-have at the beginning of any project Um, the next thing I am going to do while it's just to save on that. It won't really change too much I will just come and say image max width 100 because that's going to fix a big problem that we were having Um, and before that, um, I think what I want to do is come in and I'm going to set up my custom properties And so I'm going to do my root selector and custom property this away So we're going to do my I only have them from the colors. There's one font that's used throughout all of this. So And just to explain a little bit of what my colors are Let's bring the design back up. And so the colors we have my you can see them here the social icons My background colors are the really dark color. I have my image box. So that's this color. That's my bg light Even though it's a dark color. It's Lighter version And my accent is that orange color that we can see right there And actually we can see we have little boxes there that are showing them to you. So you can probably figure that out Um, okay, so let's get started on the more interesting stuff. So I will come on to my Body now normally on the body we're used to doing a margin of zero But I'm actually going to do a margin of 1m to increase it a little bit Just because I want to just keep stuff off the sides Uh, we're going to be getting rid of that on the big screens and we can set our background color to my var Bg dark right there And obviously the color will be my var color text Super duper cool Uh, the next thing I'm going to do is just set a line height on this because I pretty much always set line heights on things Uh, to get rid of the default which is always way too tight. So we'll go with a 1.5 Um, my font is way off and for now, I'm not going to worry too much about the font But I will do a font family of just a sa sarif for now And we'll figure that out and see if we want to change that as we go That's you know, and actually before we do anything else, I just want you to look at this and go, you know what? It's not fantastic looking but on a mobile phone like okay. Sure. It works, right? It's a functional layout right now. Um, I do like having the margin of 1m It's a little tight without that and I have I still I come to sites all the time these days that have a margin of zero And I'm reading like a big block of text and it's stuck to the side and it's really hard to read It looks like do I need to side scroll? Not really. It's awkward On mobile designs. Make sure you have some breathing room. It doesn't have to be like this that you're creating it But make sure there's some space around your stuff, please Um, the next thing we want to do is come in and I guess we can just start doing some typography stuff So my main title we're gonna do something fun for the title here So first, I guess we should set the color though. So color will be my var color Accent whoops not icons accent One thing I really love with custom properties now is that they're sort of integrated into vs code here Is you don't even have to know what color you want like as soon as I do my custom property clr I get the list of all the colors I want if I was using this for font weight fw I just have my list of font weights. So nice. So in this case color choose my color accent and I can just keep going Um, what I want to do actually we need a text transform of uppercase on this one And I guess well, let's bring in my design here for a second Um, I'm just going to move it down a little bit I want to be able to see what we're doing There we go. Um, so we need an uppercase there. I think that's okay and the next thing I want to do is obviously play with the Um, actually I'm going to put a margin at the font size on this is going to get big You can already see there's these big spaces around that so we can do a margin of zero right away Uh, so if I come in with the font size, we're going to do the fun part right now Which is with clamp and what do I want to do clamp is setting a minimum in ideal and a maximum So the minimum is the size I'm the smallest I want it to get to so, uh, let's try three rem I'm just going to do a clamp with three rem and actually it's a set three rem and see what that looks like So I think that's a pretty good size at like a small screen size. I think that's looking good as a minimum so clamp three rem Um, I wanted to grow pretty fast and you can play with this We'll try 10 vw and then we'll set a maximum of 10 and see what this is going to do So it means it's small screen sizes. We are at three but then as this grows we hit a point where Um, it's the 10 vw is bigger than three So it's going to start growing and it's going to start growing. It's going to start growing And then we're going to need this a bit bigger. I think I don't know if we're going to reach our 10 That's getting really big actually. Okay, let's make this a little bit smaller. We'll try seven And I think we have a maximum now like there you go. You can see so here we have our small size It starts growing it hits a maximum and it will never grow bigger than seven So so so nice. I love that so much. Okay, so that's looking pretty good for the title Uh, we can come down on our location. We'll scroll up a little there just to make it easier for you And on there we want our color is going to be a lot darker. So our color I think it's the icon color actually Uh, once again, I guess we need to have No, we don't have all caps on that one. We'll put a margin of zero on that as well and a font size Font size what should we do as our font size? Um, I think I'm just going to go with like a two-rem Maybe that's a little big Let's shrink that down I lost my my side scrolling. I want to Okay, there we go And there okay, so I think it's a little bit big especially when you compare it to the design here So maybe a 1.5 would actually be better And notice how there's still a lot of space that's coming on these. I think what it is is actually um My it's just gonna be on the title. I think we want to line height on here height of one I think there we go. That will bring it down if every ever really big font Um, and you know, I I boosted the default line height to 1.5. So that's going to create more spacing Um by default. So maybe we'll have to play with margins and stuff, but we'll we'll get back to that in a second Or I said in a second. Why don't we do our navigation just to actually make that all work a little bit better? Um So I think what I'm gonna do is do my header is going to be a display of flex So they actually go next to each other like that Uh, my nav link Is going to be color of our color I think it's the text, right? Let's bring this up Yep Uh, did I not call those nav link? Oh under Silly I was using them, but it's like the only place I did. There we go. Um, we can do a text Transform of capitalized, which I don't use very often, but that looks like oh, it wasn't even capitalized really whatever we'll stick with that text decoration of none Um, I use the display of flex here, but you can see it doesn't look perfectly centered. So I was trying to line items center Super duper and We will Um, I'm gonna just select my nav here And I want to check something so let's give this a Outline of one or two pixels solid red just so we can see it All right, and so I want I use display flex and when you do that things shrink down to like they're as small as they can possibly be So I have my logo I have that and then I have this empty space left over here Um, I actually want this to fill up that entire space So I think the easiest way is just on the nav to give that a width of a hundred percent And it's going to grow. Um, or even, you know, I mean the more I guess the official way would be a flex grow And just enable flex grow. I guess that's more of the proper way to do it So we'll go with that both of them would have the same effect and would work just as well Um, so the advantage with doing that is I can do a display of flex here now And then I can do it justify content space Usually I use space between Um, but I sort of want to create this artificial gap on those sides. So I'm wondering if space around here It's not a ton of space But, you know, if we get rid of this This here Um, it's better than nothing. I think they're going to collapse into each other a bit. It's not perfect at super small screens let's us Um, but as we get to the bigger screens, it's going to get better Um, and then it's going to switch over at one point to a bit of a different layout anyway And here on my header, I think what we'll just do. Um, I'm going to give this a little bit of margin top and bottom. So margin 2m zero There we go, and it starts to breathe a little bit more like that. Cool Um, I do guess we can give the location here a margin bottom of I don't know 2m 1.5 m Just to balance things out a little bit. So we get the title there Coming down and then we get in run into our images What I will do for those images which is secondary images Display of flex on that. So remember that was the parent. So by doing it on the parent They go and smush next to each other and they'll shrink down a little bit And I am doing this with cutting edge technology. So instead of doing anything else I'm just going to do a gap. That's probably a bit big 0.5 m m There we go. We got to spell it right and we get a gap in between so that works the same as grid gap It's coming to flex. It's there in fire fox. Um browser support is coming. I think but it's not everywhere yet I think actually chrome just added it. I think it's on the way for chrome. It's in I think it's on the way for chrome and hit canary or something like that. So hopefully we're seeing it soon And for the mobile layout and this is why I like organizing my markup in the most logical way possible Like I'm thinking of them. I'm looking at this because I need to focus on that But I'm also thinking about like, how is this just going to work without me having to make any layout decisions Early on and it's I think the most logical reading sequence. It's all about reading sequence when you're doing your markup And one of the things I love about these new tools we have with grids have grid that's coming Like I can do this and then easily achieve this layout without having to go crazy. So that's super super exciting Um, so I guess we just really need to focus on our buttons and I we can do a little bit The button there and we can do a little bit more now. I will come up for my Button and I'm going to do it over here after my image I guess I mean Ideally it would be something that could be reused anywhere on any page And some of this stuff is a bit more specific even though, you know, I could say the same For a lot of this this you know, this is really a one-off project So sort of ignore my organization of my css. I guess So for my button now this button is a little bit interesting But I think the easiest way to get that like orange bar thing underneath is to use a pseudo element Maybe I'm wrong on that, but I think it is the easiest thing to do So the first thing I'm going to do is cursor pointer because it's a button and it sucks when they don't have that We can give that a border of zero. We're just pretty much resetting a lot of the defaults that it has background will become transparent Um, and let's give it a color color var color text And then Because it should be white. What's it save? Okay, it's coming in a font size 1.125 rem I want it to be a little bit bigger because it does look bigger than the text here a little bit Uh, I guess we should give it a little bit of padding padding can be like a 0.5 m It doesn't need a lot, but I think a little bit will go a long way With that I'm going to do a display inline block Just in case someone were to place this on a link So if it wasn't on a button, but you're using this class on a link that would become really really important And I'm going to move that up just because that's how I like to organize my buttons And I think that's okay for that. Um, I'm just going to go down for now We have my header. I'll just do it here footer Uh margin Top of like 2m just to give me some space there Because that was bugging me and we'll come back to my button and we want to get that orange bar So I think what I'm going to do is use a pseudo moment pseudo element element button pseudo element after And I want to do uh, so I need my content on here And if you're not too familiar with pseudo elements I do have a three part series that really deep dives into how to use them and how um Yeah, I think they're one of the most Underused parts of css that are absolutely amazing. So, uh, definitely check it out And maybe I overuse them because I think that but you know, um, yeah, I'm still going to suggest doing it Um, so with that I'm going to do a position of absolute and if I'm doing position absolute here I definitely want to come up to here and do a position of relative on that Uh, which we shouldn't see any changes yet. We can give this a background of bar color accent And now the fun begins we want to position it so Let's just give it a height of 1 m See what that gives us. I think it's me too high a width of 100 Left of zero Okay, is it index of negative one to push it back? Okay, we're getting there. Uh, I think the height of it is actually okay. We just want to move it down So top could be 50 percent Okay, and obviously the width is too big. So let's shrink that width down 60 percent Little too short 70 five Okay, good. I was just looking it's in the oh I wanted to try and get it in the oh Um, and actually that looks a little bit like that. Maybe the height is a little bit I just scrolled away and I don't know why Um, maybe the height is a little bit much so we can do like a 0.75 Maybe even bigger 8.5 m That looks a little bit more like it's cutting in the b I'm not even zooming in but I'm just saying like roughly what it looks like there So I think that looks a bit better Now the fun part I want to make this a little bit more interesting when we hover on top of it. So let's do a button Hover so one one colon hover after and it's going to change And what are we going to do? So when we hover and actually we could do this for our focus state too. So the same thing, uh button Focus after I should have done that from I didn't even make a hover for these guys yet. Um, so what are we going to do? Let's just try a transform of scale and we're just going to scale it up scale 1.5 And so when we go on top it gets bigger except it's not going the way I want So what I'm going to do here is my transform Origin will be bottom left And now it should grow that way. Cool. So that's looking all right. I think we should add in transition on my transform 250 milliseconds Okay, it looks a little better. We're going to modify that a bit. I want to come up with a better animation Let's see how here it looks. Okay. And when I go there, it's like way too long. It's kind of ugly Um, I'm actually going to do two on here. Let's try I might have to make this bigger. So let's try a two. Let's just see. I'm looking at the height right now Maybe it's a little bit too much 1.9 For the height. I'm only worried about the height. So it's looking pretty good But obviously it's getting way too long when I do that So what I want is to do two and this one can be like a 1.3 So this is stretching the height up and down and this is going to do the left and the right pretty much Oh, did I mix that up? I mixed that up 1.3 and 1.9 There we go. That looks a little better. Um, so this is actually going to go up to a 1.4 And that's going to get switched over to a 3 5 There we go. And maybe even this could be a 1.85 or something There we go I think that looks a little bit better and I want to make a better animation there And one thing that I'm not very good at so if we do bring up our Tools here, I'm going to go on my little inspector I'm going to inspect right on that button And you can see that we should see button. Let's go find my after And I can see my transition Oh, I never put the okay here. Let's just do a ease The only reason I'm doing that I could have done that in the dev tool actually Whoops inspector, let's find my button again after We have the ease so I can click on that and I can create a curve now So I want something it's going to sort of go slow and then go really fast. I want to bounce I know you can't can you if I move this up. Can you see more of that because it's coming off screen? I can't move it all onto my screen sadly I think you can see most of it though. There's a little bar that's bouncing back and forth at the bottom Um, sort of showing me what the animation looks like So it's going to sort of start slow and then go really fast But then it's going to do a big bump right at the end Um, and then come backwards even a little bit So let's try that out and how do you try it out? Well, then you can just come here and copy the cubic busier that it made and get rid of that And replace my ease with my cubic busier and That's stuck on There we go. Aha. There we go. Nice little like bouncing animation Um, and maybe I could even speed this up to like a 175 So it's like this really drastic like boom boom boom And if I hit tab it should still work make an alt tab or shift tab off tab shift tab. There we go Cool, cool. Awesome. Um, I think the last thing I really want to do right now is just down here My actually I put my footer here with my header, but I'm just going to sort of keep a logical sequence here I think would make more sense Um, and here my social social Link I think each each individual one uh opacity of like a point five Uh, yeah, so hover Social link focus So that just to give us a nice little something like that I could do something up here too. Um, or maybe We're here nav link We didn't do it. So our my nav link hover And my nav link focus Color in this case. Let's just switch the color to my uh, my nice accent color there And there we go, it's working there and then if we tab through or we come through I think that's looking okay. Now. I realize the mobile navigation is not the best But mobile navigations if you're doing like a hamburger menu, it's a long time This is already shaping up to be a really long video So I think we're going to leave it just like that for now. Um, there's a few different ways. I guess we could tackle that. Um, actually Yeah, I'm going to leave it like that. I'm not going to kill myself um It is bugging me, but anyway I do want to push forward with this video and focus more on the layout and getting it to look like this So this is where the real fun begins. Um, let's zoom in a little bit and Hmm, how are we going to do that? How are we going to do that? So we have to decide when the layout is going to start changing is one of those things and Don't just go with 768 because that's what bootstrap uses I tend to look at where things are causing issues. My lines are getting really long like here This is getting really really long and then about 800 pixels. So I'm going with 800 if you want seven at media if you want a seven 68 because it's 768 it's not going to change anything men with 800 pixels And what do we want to do? Well, the first thing I'm going to do is I want to start pushing more toward this layout And you can see I don't have a space here like the image is glued to the side of the page So that means that here my margin Uh margin my body's margin Should become zero And so that means we should see it right away here. We have a margin and then my margin disappears and everything is now glued to the side The next thing I want to do is create my grid So you remember I had my main grid where we're going to create a grid that we're going to be using and Um, one thing I I do want to do is actually split this up into multiple columns So when I'm looking at this I'm actually seeing um, I'm trying to think Actually I'm sort of seeing like one column for here One column for where this is all overlapping a little bit. Maybe all the way up to here Not even I'm seeing yeah, like one column for the text like this here is in one column This this is even like two columns probably I'm just thinking like I can break this up into three really easily So I'm going to do like a pretty much a three column layout. That's what I'm trying to say So the easiest way for me to do that and I like doing um, so main grid is going to have a display of grid obviously so display grid And then we're going to do a grid template columns And I'm going to split this up on multiple rows. Um, or multiple lines of In here just so it's easier to read and I always like starting with a min max of one m About one fr. I don't use this all the time Um, but I do like using that for my outermost ones and these don't even count towards that three column grid that I said I wanted That's going to come here where I'm going to do a repeat of three And we'll throw another min max in here I'm going to try 10 ram 30 ram and 10 it's 160 each Um, and then this is three times bigger than that So I'm just letting them grow these numbers are sort of pulled out of a hat at this point Uh, but we'll try it out and see what happens So obviously everything broke because everything fell onto my grid, but let's open my dev tools up again And I can now turn on my main grid and we can look at what that looks like So here I should be able to stretch this out a bit. Um, here we have the one m one fr Here we have the 10 Another one another one and then this one here is this last little guy all the way at the end Now obviously we need to get start placing things a little problem A little bit better than what we have right now because um, we do have a bit of an issue I'm also going to come in and give this a gap of I don't know We'll try to m and if we have to modify it from there we well But it's just going to create some spaces for our content to live in Um, so let's start placing stuff on my grid. So the first thing we have is my header And we'll do header grid column of three over five That's all the way down here And that's sort of broke everything. Anyway, let's keep going and see what ends up happening Oh, I just realized something I'm gonna have to do a two over five and we're gonna play with that a little bit. Okay. So header is there Then we're gonna have my main which is going to have the grid column of two over Negative one because I want it to go off from and actually let me just turn off my responsive mode here Oops And I just realized I didn't have that open the whole time. We can stretch this down a little bit You see in my desktop and if OBS running there, that's how I'm recording Um, so by doing the two over negative one, it's just going to bring us all the way like from one edge of the browser over to the other edge And then my footer I guess I have since we're doing sort of all the big pieces first. So footer can go grid column Um Two So from here to here, I think you can yeah, it's gonna live like in this space right there So it should just move over. There we go. It's over there. I should have spaced those out. We'll come back to that Okay, so that's starting a little bit. We've gotten a little bit of things working Um, but where I really want to change my layout now and start pushing It's not going to go all the way there yet but We want to start pushing it toward this idea of having all the text on this side and my image on that side And this gray box and stuff so The easiest way to do that is actually here on my main and remember the main is has the box The rich man the big picture the two little pictures and all of this the button and this text here So all of that is in there and what I want to do now is I want to give this a display of grid But instead of giving this a regular grid template columns, what I want to do is say sub grid And what that does is now you can see everything. Let's undo that for a second Everything is living inside this one big box pretty much We have everything that's in here and as soon as I do that instead of living in that big box It's now breaking into the columns and even this image is squeezing into the here So the it's now using the grid columns of the parent and that's cool We can still use all the line numbers. We can use everything. It's super super cool except the line numbers might be different Let's they probably will be actually My sub grid will be that one and I'm turning this one on so I can make sure Because like now my number one is here Whereas the old number one was here and like this was too so the line numbers might be a little different But we're using the same grid, which is really really cool. I don't have to do anything I have to define one grid and that's it. Um, I love this so much So what can we do now? I'm going to leave all that because that's my no, let's just come here whatever I said I was in a group it like that, but Um, we might as well bring no, let's position things a little first. Um, so where's my title going to go my title Is going to Go from grid column I want to stay here, but I want to go all the way to here So we can do a one over three and again, I'm just looking at these numbers one two three Save it goes from one to three. We have x room if we need it Um, not finished with everything I need on there, but we might as well come into my primary image Um, and my primary image should be the grid column Of two over four Two over let's just do a negative one. I want to go all the way to the end So there we go. We're starting at two and we're going all the way to here The only problem is they're not overlapping each other because they don't things won't overlap in grid unless you tell them they have to so grid row of one and grid row of one And now they overlap image z index negative one and we can push it back. We don't have to do display. We're in grid. It's amazing We don't have to mess around with other stuff Um, I'm also going to say grid row one over three maybe Maybe it's even a four because I need that to push down more. I need like multiple things to be able to live over on this side Let's maybe even do a four on that I think that's more what we want um, my Secondary images and this is where why I love grid. It takes a little while to set grid up But then once you start doing your layout everything just starts falling into place Um, sometimes it's a little annoying. You do lose your grid when the page refreshes. So let's turn that back on Uh, I want that to go from two to four. I guess so secondary images grid column To actually two over three maybe even Hmm, what if I did a four on that does that? Well, that's weird, okay We'll stick with that and we'll try and figure out what happened I know these are overflowing. Anyway, we'll figure that out in a second um My location's okay. I'm going to be really let's just come here and say location and my description just a description uh grid column one over two That's going to pull that there What I need to do. So we have one two three Um, I don't know if this is going to fix it, but I'm going to do a grid auto low of dense I did okay. So, uh, just if you're not too familiar, let's turn that off Um, I had that empty cell Whoops wrong one Let's turn that back on So we have this empty cell right here because it's what's happening is it's going like in my original markup It's looking at the html. So it's going we have first we have the This then we have my location. We have my image Um, but then, you know, it's going after that. So this is just empty now because we're going after my image I have these and then after these so then it's this is the next like available cell So it's going here. We do have these empty cells, but it's going okay like after this i'm flowing down and that's where it's going Um, but by switching it to dense, it means if there's empty stuff available It's allowed to squeeze up into it. So that does help out right there and fix things and it also somehow fix this too So i'm not sure what happened there Um secondary images I will actually i'm not going to put this in the media query because I think I can Just put this on my button and it won't cause any issues the rest of the time um is i'm just going to give this a line self start And a justify oops And a justify self start So it shouldn't shrink like sale there before was stretching the whole way across It's just going to make sure that it stays its own size and nothing weird happens Cool Um, that's looking okay I sort of like this going all the way across because if it was just in like a little space I think it would be way too tight. Um, so i'm going to leave it like that for the moment Secondary images margin top I think was pretty big Let's just go back to the design Yeah, we had like a big gap there. I know this has like an arrow that looks like it's going to go to other ones We're not going to do that Um, we had the big number one Then the layout is more or less there, right? We're we're getting close. We're not all the way there, but we're getting mighty mighty close uh footer Social links same thing I did before display. This is for my navigation display flex and a gap of like 2m just to space them out Super I love the gap so much. It's such a cool property Um, so I think what I'm going to do is bring in my pseudo element now. So that was on my main I'm going to do my main After it doesn't have to be on the main. I could do this as a pseudo element anywhere really Uh, so content is going to be nothing Um, and we're going to give this a position of absolute And so we can see it. Let's just give it a background color to start background color of our color This is my bg light uh that I haven't used yet Um, and now the fun part is let's just give this a top of zero bottom of zero left of zero right of zero And of course, I don't see it anywhere Uh, so let's see where this is mean Oh, I gave this a class when I don't have a class. There we go. That's what I thought It would cover the entire page. That's what I was expecting Um, so now that it's covered the entire page what I can do and this is the real fun part Is my main grid. Let's make this position Relic pull you got to spell it right position And you can see it changed a little bit, but nothing too exciting has happened yet But now what I can do is I can actually position that on the grid. So I can say grid column two Just two over three, I guess and see there we go and so I guess I should have done it three over four Ha, perfect. And then we can just zindex that to the back index negative one Oh, we should do a negative 10 my image had a negative one on it. So we'll just go another layer back Um, and that's kind of cool. There we go. I think what I am going to do is increase that a little bit And I think at this screen size actually what I'm going to do is make that a little bit bigger Um, because and I think even for these guys that was my secondary images, right? Let's do over Something like that. I just make them a little bigger. They were kind of sad with how small they were Um, what I don't like is the way this box is the gray box here is touching there So here on my left and the right. I think what I'll just do is negative one m I I only need it there on the left just to pull it over. We could do the negative two m Um, it's going to match. I'll do that. It is matching the design I don't love that this is touching and the reason the two m here is working properly or perfectly Is it's matching the gap that I had on the main grid. So it's going to fill in that space exactly um And actually let's fix our navigation up a little too Um my header we're going to do the same thing Uh display of grid grid template columns sub grid and then my nav can live in the grid column of three over five Which should fill up two over five There we go. Okay. So it's filling up from one side of the gray box to the other pretty much So cool. Cool. Let's see how that's um actually let's find out what's uh Spilling up the side. I'm just going to go all the way to here Uh outline two pixels Solid red Nothing is spilling out the side. Refresh No idea Don't know what that was about but it seems to have fixed itself. So we'll be happy about that. Okay So I think that's actually looking really good. It's not exactly for the design But the way I'm seeing this right now is if Um, oh, we have a bit of an issue there. We'll fix that in a second. Um at small screen sizes We're good. We have our mobile layout. Everything is looking okay And then we start getting to a bigger size and maybe we could break that a little earlier But at one point boom, we want it to break and go over to a layout more like this Now I didn't want this to be the gray box to be too small So I left it like that and it's going to grow like that but at one point Probably around here right at like 1200 pixels. We're getting pretty big there We're going to be able to break into a different layout now and match more of what the original design was all about So let's come down And create a new media query and this one won't have as much in it new media uh min width of Um, we said we were around 1200 pixels. So we'll go with that and really I don't think we need much in here Um, I'm just gonna have the nav The Main after I want them to shrink down So they're going to go from the grid column of three over five to a grid column of three over four And this shouldn't have a dot on it Three over four. Oh, that's not working with my nav. Okay, so we'll just do that. We'll start with that So now we're matching more of what that original design Was looking like a little bit. We have a few things here. My image is getting a bit too big I think so we're going to fix that in a minute, but I sort of like how that's breaking So what I want actually here is then my nav and my Secondary images are going to go into a grid column. I guess it's two over three It's a little bit tight. What do you think? Oh, remember when I did that left of and I didn't do it on the other side I think we're going to have to right because now it looks weird that it's stuck there Yeah So let's just come up that was on Left and the right can be a negative 2m as well And I don't think that'll cause any side scrolling at smaller screens Yeah, we're fine Cool, so we have that and then we get to the bigger screen size and it's looking pretty good And actually it's a little bit tight right there, but that extra space I think is actually making it work a little bit better Now the big issue is my image is getting a little bit out of control obviously So one way we can fix that is we're going to want to come up and change my Just trying to think where we should put this on my image So I get I mean let's come into our media query here because this is where the problem starts We have our nav my main my title location primary image. We have some primary image here So we might as well stick with what we have here Um, I'm going to get a height of 100% because I want to always keep that height But I'm also going to give it a max height of let's just say 500 pixels So it can never be taller than 500 pixels now. It's going to cause a bit of an issue As my screen gets in the side there. I think that looks good when I go to here I don't like that all of a sudden it's not touching the side anymore So one way I can do that is say that the width is always 100% no matter what The only problem with that is that means it's going to stretch my image to make it fit So you can see there it's all okay, but then when it needs to that image not so good Um, so what we can do for that and even here you can see it's actually smushing my image a little bit that way too So it's not working either way. Uh, so I'm going to do an object fit on this of cover And that treats it more like a background where it's actually going to crop away the image instead of stretching it Um or playing with it. So here we're good. We get to here. That's good. It's still working That snaps over, but it's still working. It never sort of gets too big Um, we just have this issue where everything sort of stretched out right now and I think Um, what we could do is here on the main Um, we have my dense the other thing Columns, I want to do grid Is it template rows? I think I want my auto rows To be min content, which means be as small as possible And there we go. That sort of fixes that now my height on my image is maybe a little muck now So we might have to give that a minimum height as well. Um You know what I think I this is a bit of a silly solution But um right now I'm just noticing that my image is stopping before it's getting to the button And I sort of want to increase This down just a bit more. So I think where I have my primary image and save one over four I can just make that a five so or I can do like a span four on that Um, so it's spanning one Two three four pieces on that side. So I think that's a little bit more clear It sort of stops it from being too tiny. Um, And I think that more or less fixes that issue Um, I do think that it's getting kind of weird at really big screen sizes So one other option here too is on the primary image. I said a width, but maybe what we could do here is choose a Minimum so which one is smaller out of these two between 100 percent Or 1,000 pixels 1,000 might be a bit big. I don't know if I can get there my screen if it was on my full screen I definitely could. Um, oh no, there we go. So you can see that it's going like that So it's which value is smaller than those two a hundred percent width or a thousand pixels So now the image is less than a thousand pixels big, but then it gets to a thousand pixels and it stops growing So it sort of stops too much of the image from disappearing. I guess we could also set a minimum height on there As well instead of like I have a max height. I don't know what the height on that is What if I just said the height I'm just scared it's going to start pushing things apart here again 500 pixels Like it's going to cause a little bit more spacing if I do something like that for sure I don't like locking. I mean it's I sort of like that better to be honest In one way I could fix that is actually to put all of these in one box Instead of having them all separated But I think what I'm going to do Or what if the height now I'm going to do what I had before I'm going to say height like that And we're just going to leave it. So I think that'll work Yeah, I think that'll work Fine, and that means just if the content here got really long Um, or we're getting like really smooshed down the image won't stretch to like too tall to fit That's sort of why I want a max height on it is to stop it from becoming a super tall image Um, but I think that's working out pretty good. Maybe we could tweak that a little bit Hey there future kevin here and when I was editing the video, I realized I didn't quite like how it was looking on big screens I think this encapsulated really well The overall layout where we had this big image and then we had the text on the side But when I got to the larger screens and I was watching it Um, I don't know. I just wasn't as happy with how small this gray thing was I felt like it should be bigger according to the design and overall I wasn't super super happy with it Um, so what I think a really quick fix would be Is just here instead of having all three columns the same would be to have two columns that are the same And maybe a little bit bigger. So say we do like a 15 and 35 type thing and then we have another one over here min max Um, this one won't be quite as big though. So maybe like a five rem over 10 rem or something like that. We can always adjust that and I think what that's going to do is just give us Everything here gets a little bit more room Which I feel like, you know the original design I feel was more within line like that where we had a bit more room for this And this space over here was a little bit smaller So a bit more of that asymmetrical look to it. Um, that was really cool about it And then the other thing is this font didn't quite get as big as what I should have let it do and We'd set that up so it could get big and I said, uh, it's getting too big and I think I was wrong Um, so here on the title, maybe something like 10 would have actually been a bit more appropriate Maybe even a bit bigger, um, like say a 12 or something like that So it would allow it to actually get to that really big size as we break into the bigger font sizes And I think that captures a little bit more of the feeling of it Uh, so just like that, uh, just a couple of little tweaks there, um that I do think make a big improvement and get us a little bit closer to the Original spirit of the design I am really happy with that. I hope you are happy with that too I hope you learned a couple of things along the way with that It was a lot of fun to put together and I really find these new tools for creating layouts are just super super exciting So I really hope you enjoyed that you learned a few things along the way If you did and you haven't yet subscribed to this channel, please do consider subscribing And if you'd like to help this channel out, there's a few different ways you could do it So if you're getting a lot of value and you do want to help me out There's a bunch of different ways you could do it. You could just let other people know about it That's probably the best way to do it just to spread the word and let other people know that you're enjoying the content That's here and you think they would help them out too Um other ways you can do it and you can buy a t-shirt. I have them just down below So there's t-shirts hoodies a few other things You could definitely go and buy one of my courses. I have one on scrimber right now. So that could be a good thing It's a 15 hour really big long class on css We do flexbox grid and tons of other stuff or you could also become my patron over on patreon and speaking of patreon Thank you very much to all my current patrons. You guys are amazing I really really appreciate your continued support. You guys really help everything keep going here So thank you very very much I think that's the end. I think we covered everything I wanted to say So thank you so much for watching and until next time don't forget to make your corner the internet just a little bit more awesome