Creating a responsive, asymmetrical design with HTML & CSS

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 gonna code it up and we're gonna be doing a lot of cool things with it we're gonna 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 a desktop design you can see that here we have 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 gonna 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 a sort of like asymmetrical style of this design so we're really pushing the box-room using sub grid we're gonna 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 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 was asking for feedback on it and someone said wouldn't it be cool to see Kevin 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 gonna do is you can see I have the design here in XT open which is what it was designed in and what I want to do is keep it really simple at first and actually keep the markup like the HTML here really really basic so I all I started 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 Emmet 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 as the logo so I'm guessing that is also the 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 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 footer and so that's the main look of it and those are all gonna be placed on my main grid so I'm going to be using grid to lay something for those 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 I'm gonna see how easy and how fantastic that does make things so inside here in my header we just need a couple of things we need an image because I did bring that in as a SVG and I'll bring that in in a second so and then we need our class here and I'm just gonna call it logo and the alt of this generally it should be a description of what it is so TB is not really going to tell people much logo won't really tell people much it could be the name of the company so a company name could be here so maybe we could just put the box and next we need my navigation so nav and just I'm using Emmet 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 name I'm gonna give this a class of nav as well just because I like giving everything classes I could this on my header my main and my footer as well actually but here we have my nav so on the nav itself we could do this with an unordered list and do it that way so I'm gonna speed things up a little bit just become and do it the lazy way which is just putting links directly in here so we need four links so I'm gonna do an A with a class of nav link I'm induced r4 hit tab they're not gonna have anywhere to go to so we'll just you know do something like that and I'm not gonna 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 at right now are 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 a paragraph a button and my image so what I'm gonna do is here having h1 with a class of title I think that makes sense I'm gonna have a paragraph with a class of location I guess location then I'm going to come in with an image IMG 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 and see a little bit more has to be my primary image then for the two images down here because they stay grouped together what I'm gonna do is give those a div so I'm going to do a div with a class of secondary timid images I'm gonna put an image here too I'm gonna 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 individual ones and hit tab Oh actually before we do that we want to do a star to start 2 times 2 and then we can whoops that probably worked - and I think I'm it puts everything on one line there which shows 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 when we need a button I was gonna say that's all the content we need and we can come in here with a button with a class of BTN for a button and that should be okay I am making it a button I'm assuming this would be sore I don't know what it 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 gonna 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 and then inside of my social links we have three of them so a with a class of three an astute social link yeah that would work except we want three of them so start 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 Airbnb 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 not a screen reader there's some other type of it you know something is reading the page they don't know what that link is unless the person can see the actual image so putting an area label on there just helps screenreader 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 and 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 it called CSS and just before you can see I would get attributes in there this will be up on github so if you want to get the finished 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 dot CSS and I can come back to my index and we want to link that so we can just do linked CSS Styles 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 at one thing I did realize when I was bringing in all my text is I've actually forgot to put this description in here and so I brought it in and you'll notice I have my title first in 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 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 ctrl shift M to open responsive mode and to shrink this down a little bit and 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 so let's jump over to my CSS file right here and a couple thing or the first thing I always do is set up my box sizing so star we're gonna be using some pseudo elements in here so before on my star after and box-sizing border box if you don't not know about if you do do not know I'm a border box I do have a video on that there should be a part of popping up there right now definitely a must-have at the beginning of any project and the next thing I am going to do let's just hit save on that it won't really change too much I will just come and say image max with 100% because that's gonna fix a big problem that we were having um and before that and I think what I want to do is come in and I'm gonna set up my custom properties and so I'm gonna do my route selector and custom property in this away so we're gonna 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 it a little bit of what my colors are let's bring the design back up and so the colors we have my in see them here the social icons my background colors is a really dark color I have my image block 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 in okay so let's get started on the more interesting stuff so I will come on to my body and then normally on the body we're used to doing a margin of zero but I'm actually into a margin of 1m to increase it a little bit just because I want to just keep stuff off besides what could be getting rid of that on the big screens and we insert our background color to my bar BG dark right it there and obviously the color will be my bar color text SuperDuper cool and the next thing we do is just set a line height on this because I pretty much always set line Heights on things to get rid of the default which is always way too tight so we'll go with a 1.5 and my font is way off and for now I'm not gonna worry too much about the font but I will do a font family I've just saw Sarah 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 I do like having the margin of one M 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 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 bar color accent whoops not icons accent one thing I really love with custom properties now is that it they're sort of integrated into vs code here's 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 i'm what i want to do actually we need a text transform uppercase on this one and i guess well let's bring in my design here for a second i'm just gonna move it down a little bit i wanna be able to see what we're doing there we go um so we need it uppercase there i think that's okay and the next thing i want to do is obviously play with the actually I'm gonna put a margin the font size on this is gonna get big and already see there's these big spaces around that so we can do a margin of zero right away so if I come in with the font size we're into 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 too so let's try three REM I'm missing two a clamp with three REM and actually it's just 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 V W 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 3 but then as this grows we hit a point where it's the 10 V W is bigger than 3 so it's going to start growing and it's going to start growing its gonna start growing and then we're gonna 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 ok 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 Sonne so so nice I'd love that so much okay so that's looking pretty good for the title we can come down on our location I'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 far color I think it's the icon color actually once again I guess we need to have oh no we don't have all caps on that one we'll put a margin of zero on that as well and eight font size font sizes what should we do it as our font size I think I'm just gonna go with I go to round maybe that's a little big let's shrink that down I lost my side scrolling I'm gonna okay there we go and there okay so I think it's a little bit big specially when you compare it to the design here so maybe a 1.5 but actually 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 me 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 ever you have a really big font and you know I did the default line height to 1.5 so that's gonna create more spacing by default so maybe we'll have to play with margins and stuff but 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 so I think what I'm going to do is do my header is going to be a display of Flex so they actually go next to each other like that my nav link is going to be color bar color I think it's the text right let's bring this up yeah did I not call those nav link Oh silly I was using them but it's like the only place I did there we go we can do a text transform of capitalized which I don't use very often but that looks like oh it wasn't capitalize really whatever will stick with that text declaration of men I used the display of flex here but you can see it doesn't look perfectly centered so it's trying to line items Center SuperDuper and we will 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 right and so I want i use display flex and when you do that thing shrink down to like they're as small as they can possibly be so we have my logo I have that then at this empty space left over here 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 100% and it's going to grow or even you know I mean the more I guess the official way would be a Plex 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 so the advantage with doing that is I can do a display of flex here now and then I can do a justify content space usually I use space between but I sort of want to create this artificial gap on those sides so I'm wondering space around here it's not a ton of space but you know if we get rid of this this year it's better than nothing I think they're gonna collapse into each other a bit it's not perfect at super small screens let's just but as we get to the bigger screens it's going to get better 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 I'm gonna give this a little bit of margin top and bottom so margin to M zero there we go and it starts to breathe a little bit more like that cool I do guess we can give the location here a margin bottom 2m 1.5 m just to balance things out a little bit so we get the title coming down and then we didn't 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 smoosh 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 gonna do a gap that's probably a bit big 25m em there we go we got to spell it right pan we get a gap in between so that works the same as grid gap it's coming to flex it's there in Firefox I'm 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 gonna work without me having to make any layout decisions early on and it's I think the most logical reading sequence it's all the 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 and so I guess we just really need to focus on our buttons and I we can do a little bit the button there we can do a little bit more now I will come up for my button and I'm gonna 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 it's sort of ignore my organization in 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 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 font size 1.125 R M I want it to be a little bit bigger because it does look bigger than the text here a little bit 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 gonna 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 gonna move that up just cuz that's how I like to organize my buttons and I think that's okay for that and I'm just gonna go down for now we have my header I'll just do it here footer 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 wanna get that orange bar so I think what I'm gonna do is use a pseudo moment pseudo-element button pseudo-element after and i want to do 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 yeah I think they're one of the most underused parts of CSS that are absolutely amazing so I definitely check it out and maybe I over use them because I think that but you know yeah I'm still gonna 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 here and do a position of relative on that 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 one M see what that gives us and they needs me to high a width of 100% left of zero okay is it index of negative one to push it back okay we're getting there I think the height of it is actually okay we just want to move it down so top could be 50% okay and obviously the width is too big so let's shrink that width down 60% little too short 75 okay good how's this looking it's in the oh I wanted to try and get it in the oh 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 maybe the height is a little bit much so we can do like 0.75 maybe even bigger 85m that looks a little bit more like it's cutting and the BMI 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 when one colon hover after and it's gonna change and what are we gonna do so when we hover and actually we do this for a focus day too so the same thing 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 gonna 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 gonna do here is my transform origin will be bottom left and now it should grow that way cool so that's looking alright I think we should add in transition on my transform of 250 milliseconds okay it looks a little better we're gonna modify that a bit I want to come up with a better animation let's see here it looks okay and when I go there it's like way too long it's kind of ugly 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 mix that up 1.3 and 1.9 there we go that looks a little better and so this is actually an ego up to a 1.4 and that's gonna get switched over to a 3/5 there you go and maybe even this could be a 1.8 5 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 gonna go in my little inspector um I'm gonna 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 gonna sort of go slow and then go really fast I want to bounce um 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 sort of showing me what the animation looks like so it's gonna sort of start slow and then go really fast but then it's going to do a big bump right at the end 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 than it made and get rid of that and replace my ease with my cubic Bezier and [Music] that's stuck on there we go ah there we go nice little like bouncing animation and maybe I could even speed this up till I go 175 so it's like this really drastic like boom boom boom and if I hit tab it should still work I'm gonna alt tab or shift tab off tab and shift tab there we go cool cool awesome I think the last thing I really want to do right now is just down here my actually I put my footer key with my header but I'm just going to sort of keep a logical sequence here I think would make more sense and you're my social social link I think each are each individual one opacity of like 0.5 yeah so hover so chill link oh kiss so that just to give us a nice little something like that I could do something up here too or maybe we're here at nav link we didn't do it so I might Ave link hover and my nav link focus color in this case let's just switch the color to my 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 navigations not the best but mobile navigations if you're doing a hamburger menu it's a long time this is already shaping up to be a really long video so I think we're gonna leave it just like that for now there's a few different ways I guess we could tackle that actually yeah I'm gonna leave it like that I'm not gonna kill myself it is plugging me but 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 and let's zoom in a little bit and mmm how are we gonna do that how we're gonna do that so we have to decide when the layouts 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 I'm at about 800 pixels so I'm going with 800 if you want seven media if you want a 768 because it's 768 it's not going to change anything then with 800 pixels and what do we want to do hmm well the first thing I'm going to do is I want to start pushing more toward this layout 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 margin my body is margin should become 0 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 wanna 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 one thing I do want to do is actually split this up into multiple columns so when I'm looking at this I'm actually seeing 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 that even I'm seeing yeah like one column for the text like this year 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 gonna do like a and 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 and so main grid is gonna have display of grid obviously so display grid and then we're gonna do a grid template columns and I'm gonna split this up on multiple rows or multiple lines of in here just so it's easier to read and I always like starting with the min max of 1 M comma 1 F R I don't use this all the time but I do like using that for my outermost ones and these don't even count towards that 3 column grid that I said I wanted that's gonna come here where I'm going to do a repeat of 3 and we'll throw another min max in here I'm gonna try 10 Ram 30 REM and 10 it's 160 each and then this is three times bigger than that I'm just letting them grow these numbers are sort of pulled out if I had at this point but we'll try it out and see what happens so obviously everything broke because everything fell on to 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 here we have the one m1f are 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 we do have a bit of an issue I'm also going to come in and give this a gap of or will try to M and if we have to modify it from there we well but it's going to create some spaces for our content to live in and so let's replacing stuff on my grid so the first thing we have is my header and we'll do header grid column of 3 over 5 that's all the way down here and let's sort of broke everything all right let's keep going and see what hits up happening ooh I just realized something I'm gonna have to do a 2 over 5 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 2 over negative 1 because I want it to go up from an actually let me just turn off my responsive mode here whoops 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 I be s running that's how I'm recording so by doing the tuber negative one it's just going to bring us all the way to like from one edge of the browser over to the other edge and then my footer I guess since we're doing sort of all the big pieces first so footer can go grid column I'm - 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 space those out we'll come back to that okay so that's starting a little bit we've we've gotten a little bit of things working but where I really want to change my layout now and start pushing it's not gonna 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 great 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 Richman 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 like 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 blind 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 where's the old number one was here and like was to 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 I love this so much so what can we do now I'm gonna leave all that because it's May now let's just come here whatever I said it was gonna group it like that but we might as well bring know its position things a little first and so where's my title gonna 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 two three we have extra room if we need it not finished with everything I need on there but we might as well come into my primary image and my primary image should be the grid column of 2 over 4 2 over 2 negative 1 I want to go all the way to the end so there we go we're starting at 2 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 and grid unless you tell them they have to so grid row of 1 and grid row of 1 and now they overlap image is said index negative 1 and we can push it back we don't have to do display we're in grid amazing I'm gonna have to mess around with other stuff I'm also gonna say grid Row 1 over 3 maybe maybe it's even a 4 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 4 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 - starts falling into place sometimes it's a little annoying you do lose your grid when the page refreshes so let's turn that back on I want that to go from 2 to 4 I guess so secondary images grid column 2 actually a 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 my locations okay I'm gonna be really let's just come here and say location and my description just a description grid column one over two that's gonna pull that there what I need to do so we have one two three and I don't know if this is gonna fix it I'm gonna do a grid Auto flow of dents I did okay so just if you're not too familiar let's turn that off 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 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 but by switching it 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 is I'm just gonna give this a align self start and a justify whoops and a justify self start so it shouldn't shrink like see how they're before we're stretching the whole way across it's just going to make sure that it stays its own size and nothing we are happy cool um that's looking okay I sort of liked this going all the way across because if it was just in like a little space I think it would be way too tight and 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 gonna go to other ones reckon to do that um we have the big number one I mean the layout is more or less there right where we're getting close we're not all the way there but we're getting mighty mighty close footer social links same thing I did before display this is for my navigation display flex and a gap of like um just to space them out super I love the gap so much such a cool property um so I think what I'm gonna do is bring in my pseudo element now so that was on my main I'm gonna do my main after it doesn't have to be on the main I could do this as a pseudo element anywhere really so content is gonna be nothing um and we're gonna 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 then used yet 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 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 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 gotta 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 and just two or three I guess and see there we go and so I guess I should have done it three over four ah perfect and then we can just set index that to the back index negative one so we should do a negative ten my image had a negative one on it so we'll just go another layer back and that's kind of cool there we go I think what I'm gonna do is increase that a little bit and I think at this screen size actually what I'm gonna do is make that a little bit bigger because and I think even for these guys that was my secondary image is name let's do over something 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 in the right I think what I'll just do is negative one M I only need it there on the left just to pull it over we could do the negative two M it's gonna 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 gonna fill in that space exactly and actually let's fix our navigation up a little to um my header we're gonna do the same thing display a 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 actually let's find out what's spilling up the side I'm just gonna go all the way here outline two pixels solid red nothing is spilling at 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 I'm we have a bit of an issue there we'll fix that in a second 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 gonna grow like that but at one point probably around here we're at like 1200 pixels we're getting pretty big there we're gonna 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 min width of we say we're around 1200 pixels so we'll go with that and really I don't think we need much in here I'm just gonna have the nav the mean after I want them to shrink down so they're gonna 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 gonna 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 gonna 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 gonna have to do 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 negative to em as well I don't think that it caused 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 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 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 I'm gonna name it a height of 100 percent 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 we can never be taller than 500 pixels and that'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 gonna stretch my hinge to make it fit so you can see there it's all okay but then when it needs to that image not so good so what we can do for that and even here you can see it's actually smashing my image a little bit that way too so it's not working either way 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 a crop away the image instead of stretching it 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 we just have this issue where everything sort of stretched out right now and I think what we could do is here on the main we have my dents the other thing columns I want to do grid it's a 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 you know what I think is is a bit of a silly solution but 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 instead of one over four I can just make that a five so it's alright I can do like a span four on that 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 I do think that it's getting kind of weird really big screen sizes so one other option here too is on the primary image I set a width but maybe what we could do here is choose a minimum so which one is smaller out of these two between one hundred percent or one thousand pixels one it 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 Oh No there we go so you can see that it's going like that so it's which value is smaller of those to 100% wit 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 this scared it's gonna 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 does mmm I sort of like 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 gonna do or what if the height no I'm gonna do what I had before I'm gonna say height like that and we're just gonna leave it so I think that'll work yeah I think that'll work fine and if that means just if the content here got really long or we're getting like really smushed down the image won't stretch to like too tall to fit that's all why I want to Mac site on it is to stop it from becoming this super tall image 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 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 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 this one won't be quite as big though so maybe like a 5r m / 10 Ram 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 with in 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 that asymmetrical look to it 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've set that up so it could get big and I said it's getting too big and I think it was wrong so here on the title maybe something like 10 would have actually been a bit more appropriate maybe even a bit bigger 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 yeah so just like that just a couple of little tweaks there and 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 find these new tools for creating layouts are 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 in 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 enjoy the content that's here and you think it would help them out too other ways you can do it 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 in buy one of my courses I have one unscrambler 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 helped 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

Channel: Kevin Powell

Views: 62,061

Rating: 4.9782062 out of 5

Keywords: Kevin Powell, tutorial, html, css, css layouts, html layouts, html and css layouts, css grid, css subgrid, css subgrid layout, making a layout with grid, making a layout with subgrid, making a responsive layout, responsive layout css, responsive layout grid, css flexbox, css grid and flexbox, css grid vs flexbox

Id: QBfblbmTTF4

Length: 57min 45sec (3465 seconds)

Published: Fri May 22 2020