Build a Responsive Grid CSS Website Layout From Scratch

[Music] hey what's going on guys so in this video we're gonna create a responsive grid CSS website or grid CSS theme and it's not the prettiest thing in the world but it's gonna teach you about the fundamentals of the grid in a real project which seems to be lacking on the web and in tutorials but one great resource is West bosses new grid CSS course which is where I got the idea for this project so I will put a link to that course in the description ok we'll also be looking at and using CSS variables REM units things like that so modern CSS techniques so basically just to go through a real quick we have a simple nav at the top which uses the grid we have basically four different sections for fractional x' then this part here is the top container and we're actually going to be using grid template areas for this part which I actually left out of my grid CSS crash course because we ran out of time in that video but we can basically assign named named template areas to our grid which is really cool and I actually created some images to give you a visual representation of how that works all right and then underneath that we just have some simple boxes here using some font awesome icons will actually be using font awesome 5 which was just released these are actually SVG icons and then below that we have the info section which is basically just two fractional Zoar to grid columns very simple and then some images here coming from unsplash these are just just some gallery images and then a very simple footer alright now we're not going to do the inner pages if you guys want to take it upon yourself and try to create those pages on your own that would be a really good learning experience and just to show you the responsiveness of this website if we go bigger you'll see that it still looks good if we go down down until we get about 700 pixels which is right here you'll see that everything changes so basically the menu goes vertical we have the showcase is now on its own column on its own line and then the two top boxes are side by side and then these boxes are all side by side this area the info area is just one big box or one big area and then we have the gallery images which are two side by side and then if we go down to 500 pixels okay that's 700 once we hit 500 you'll see that everything is just in a single row so this would be like on small mobile devices okay we're gonna change the grid template area up in the media queries to make this responsive so that's what we'll be building guys hopefully you enjoy it let's jump into it all right so we're gonna get started now with most projects it's it's a really good idea to follow along and actually open your text editor and code along with me it gives you a much better learning experience than just watching but it's up to you how you want to do it if you do want to code along then just go ahead and create a folder I called mine grid biz and inside that folder you want an index.html file and a style dot CSS file and you can see they're both completely empty and then I also have an image folder an IMG folder with two images one is showcase JPEG and one is pik-wan dot JPEG and if you want to download these directly you can go to pixels comm and search for web and you can see this image right here I grabbed the medium and i named it showcase jpg the other one I searched for business and it's this one right here and I downloaded the medium version as well but if you want you can also get them from the code pen in the description and if you noticed my showcase is a little darker because I made I faded it out a little so that the text is a little more prominent on top of it okay so let's go ahead and get started now we are going to be using font awesome as well and then font awesome just upgraded to version 5 which uses SVG icons so we will be using that but first let's jump into our HTML file and let's add our HTML had body tags now I'm using vs code which comes with Emmet which allows us to do shortcuts for HTML and CSS so I can just do exclamation tab and that'll give us our base layout and I'm just gonna close this sidebar up if you are using a different text editor I'd highly suggest installing em it makes things much much quicker so we'll go ahead and change this title up to let's say grid biz and then we're gonna want to use font awesome so I'm gonna go to get started and we're gonna use SVG with JavaScript which is recommended so we just want to grab this script tag right here and we want to put this in the head just like that and then here I'm just gonna link our style sheet so style dot CSS and save and we should be all set for our head area now if you want you can open up your index.html file or if you're using vs code you can do what I'm doing and use live server which is an extension and if you want that you can click on this icon search for a live server and install it once you do that you'll be able to right click and just say open with live server and this gives you auto reload so every time I save it'll update I won't have to keep reloading it alright so let's start in the body now so everything is going to be wrapped inside of a wrapper so I'm gonna create a div with the class of wrapper you want to make sure you stay within this actually I'm gonna put a comment right here that just says wrapper ends ok so inside the wrapper let's create our navigation I'm gonna try to keep this commented for you guys so navigation we're gonna use a nav tag and give it a class of main - nav and inside here we're gonna have a UL and some allies let's put an a tag in here these aren't actually gonna go anywhere so I'm just gonna put a hash and then I want a couple more of these so we're gonna have four different navigation items so this one will be about this one will be services and this one will be contact all right so that's our navigation if I save that that should show up it's gonna look ugly but it shows up now notice how my HTML change when I saved it that's because I'm using an extension called prettier which formats your whatever HTML CSS JavaScript when you save I don't really like having these on separate lines but whatever it's fine so it doesn't because it fixes a lot of other stuff as well if you miss for instance semicolons and your javascript or css so under the nav we're gonna do the top container alright so the top container is this right here it's the showcase and these this is the top top box a and top box B so let's go ahead and do that so we're gonna do a section here with the class of top container and inside here we're gonna have a header the class of showcase okay so the showcase is gonna have an h1 and it's gonna say your web presence your web presence and underneath that we're gonna have a paragraph now with Emmet you can do lorem and then a number I'm gonna do 15 and then hit tab and it's gonna give me 15 words of dummy text okay under that we want to have an a tag and I'm gonna give this a class of BTN which is going to be a custom button class that we create so that we can make our links look like buttons okay and we'll just say read more and then that's it for the showcase if I save it it should look like that now still within the top container section we're gonna do the first top box so it's going to be a class of top box and then another class of top box a okay and then inside here we're gonna have an H for will say membership and underneath that it's gonna have the pricing that's gonna be in a paragraph called price and this is gonna be $1.99 per month and then underneath that we'll have an a tag and let's actually give this a class of BTN and we'll say bye now all right so we're gonna have two of these so I'm going to copy this whole top box div and paste one right underneath and we're going to change this to top box B and then change this to pro membership and then this is going to be $2.99 per month okay so we can save that and that's it for the top container so next is going to be the boxes section so I'll just say boxes section and we're gonna use a section tag with the class of boxes and then each box will have a class of box okay and then each one of these we're gonna have an icon so let's put an eye tag with the class actually I'll just show you let's go to font awesome and go to icons this first one is going to be a chart icon so I'm going to search for chart and I want this one here and if we go down it gives us the class of FA s and then FA cha chart Pi so I can actually just copy that and put that there alright now if I save this and we take a look you'll see that the icons are very very small by default so I'm going to add another class in here called FA - 4 X and save that'll make it basically four times the size okay so that's our icon underneath that we're going to have an h3 and it's gonna say analytics and then under that we're gonna have a paragraph I'm gonna do lorem 10 tab which will give us 10 words and then we'll basically just let's just copy that whole box div and put it in 3 more times we want for that things and save and now we just want to change up the icons so the second icon is gonna be a globe fa globe and then the heading here is gonna be marketing okay and then this icon here this is gonna be FA - cog it's gonna be a little gear icon and for the the heading we're gonna say development and then this last icon is gonna be FA users FA - users and then this heading is gonna be support ok we're going to leave the same paragraph text that doesn't matter so that's it for the boxes section now we're gonna move on to the info section so for this we're gonna do section with the class of info and inside here we'll put our image the image is going to be in the IMG folder and it's going to be called pic 1 dot jpg ok underneath that we're gonna have a div and inside the div 11 h2 and we're gonna say your business on the web underneath that will have a 30 word paragraph so I'm gonna do lorem 30 tab and then under that we're gonna have an a tag with the class of BTN and the text will just say learn more alright we'll save that and that's our info section ok and the image is going to be huge don't worry about it all the stuff is going to look very ugly until we get to our CSS alright so next we have the portfolio section okay so in here we're basically gonna have nine images and the images are gonna come from unsplash.com which just kind of generates random images for us so it's gonna be HTTP source dot unsplash.com slash random slash and then the size which is going to be 200 by 200 okay 200 X 200 now I'm gonna go ahead and copy this and put it in 8 more times so that's 2 3 4 5 6 7 8 9 all together and save and now you'll notice that all the images are the exact same and I don't want that so to change the image all we have to do is change the size so the second image I'm just gonna put the first 200 I'm gonna make 201 and save and notice that now that's a different image so I'm gonna go to the next one and do 3 4 5 and the size doesn't matter because the images are contained within the container within their parent so that really doesn't matter so 7 wait 0 1 I forgot to I mean it doesn't really matter but I like it 1 through 9 or 1 through 8 sorry alright so we'll save that and now if we go down here we have all different images okay so that's that next thing we'll do is the footer that's the last thing on the page so I'm just going to do a footer tag very simple we're just gonna put a paragraph and we'll say what is this grid biz let's do a copyright symbol so ampersand copy semicolon 2018 oops okay and that's it that's it for our HTML so now we're gonna go to our CSS which is the hard part in the long part and we're only to start off by creating some CSS variables why can i spell variables okay so if you guys have never used CSS variables don't worry about it it's not difficult at all if you want you can go and check out my video on CSS variables I did about a month ago or so but basically what we're gonna do is just define a scope of route so any variables that we create in here we can use throughout this whole stylesheet throughout anywhere we're not restricted to certain elements so we're just gonna have four variables one is gonna be primary so each variable is prefixed with a - - primary color is gonna be ddd in hex which is just a very light grey we're also gonna have one called dark which will be three three three will have a light which will be white which is just triple F and then also for the shadow if you notice if we look at the final theme here all of these boxes they all have this box shadow so I want to put that in a variable so that we can easily access it so it's going to be zero one pixels five pixels and then RGB a and the color we want is going to be 104 three times and then for the Alpha the opacity is going to be zero point eight all right so that's it for our variables so we can use these throughout our CSS now so let's go and create our HTML CSS so we're gonna say box sizing and we're gonna set that to border box that'll make it so that if we use any padding or anything it doesn't affect the width of the element we're also gonna set the font family here to arial helvetica sans-serif but of course if you want to use something different that's fine and then the base color I'm going to use is a variable so I need to save var and then pass in the variable I want which is gonna be the dark all right so now I'm gonna do the body so for the body I'm gonna give it a background of CCC which is a very light grey I didn't put that in a variable because this is the only time I'm using it so it would be kind of redundant let's add a margin now I'm not using a container I'm not restricting the the wrapper of our website I want it to be full width but I do want to have a little margin on the all sides of the website so we're gonna do let's see we'll do 30 pixels top and bottom 50 left and right okay and then we're gonna give it a line height of 1.4 all right there we go so next thing we're gonna work on is the button the BTN class because that's kind of a global class we're using it all throughout the site so I'm going to give it a background color of our variable are dark variable and then the color which is the text I'm gonna give it the light color okay and then we're gonna give it some padding now I'm going to try to use REM units rather than pixels just because it's more responsive so we're gonna do 0.6 REM on the top and bottom and 1.3 on the left and right and one REM is just a multiplier for the the root HTML font size which by default is 16 pixels so one REM by default is going to be 16 pixels okay 1.3 is going to be whatever 16 pixels x 1.3 is and I have a whole video on remand m units if you want to check that out all right so let's see we also want to remove the underline so text-decoration we're gonna set to none and then also border we're gonna set that to 0 okay and there's our buttons and let's see we're gonna go ahead and say that all the images we want the width or we'll set a max width rather to 100% because we want the images to stay within their containers within their parents okay and then for the wrapper that goes around everything we're gonna display that as a grid and we want to give it a grid gap okay which is the spacing in between everything that way we don't have to manually assign all of our margins and stuff so we'll say 20 pixels for that okay so that's kind of the core styles now we're gonna work on each section we're gonna start with the navigation up top so I'll put in the comment here say navigation and that has a class of main nav and we want the UL okay so this is gonna be display grid just like most things and we're gonna say grid gap 20 pixels and let's set padding to zero because by default you ELLs have padding and then set the list style to none we don't want any bullets and then we're gonna set the grid template columns okay now for the columns we have four links right so we can do one fractional four times like this and save and it'll do that it'll spread it at spread it apart basically for different sections a shorter way to write this though would be to use a repeat and say repeat four times one fractional and save and it gives us the same thing okay now we want to style each individual link so we're going to go down here and say main nav and we want the background to be the primary color so we're gonna use our variable of primary okay then we're gonna set the display to block and we're gonna set the text decoration to none we don't want any underlines we're gonna set some padding I'm gonna use REM so we'll say 0.8 REM and let's make them aligns to the center so text align Center and for the color of the text we're gonna use the dark color the variable we have okay and then let's also make an uppercase so we'll do text transform uppercase and let's do font size 19 pixels actually it's not used let's do one do one point one REM see what that looks like and then box shadow we're gonna use our shadow variable that we created above all right we'll save that and that looks good now I do want a hover State so what we'll do is we'll say main - nav a:hover and all we're gonna do is reverse this so I'll just gonna copy this background here and see yeah so wait a minute yeah primary alright so we're just gonna make the background doc when we hover and then the color and grab this the color we're gonna make light so if we save that we hover there we go so now we get the dark background so let's move on to the top container by the way if you guys don't know to make a call up to make a comment like that I just do control /and vs code I don't know if that's an Emmet thing of what I think I don't think so but that'll make the comment for you before you actually type it all right so let's create a class of top container not create but style it and we're gonna display it as a grid and we're gonna do a grid gap of 20 pixels all right so this is where we're gonna do our grid template area so let's type out grid - template areas and we don't want to do that I'm gonna go on the next line here and I'm gonna first type this out and then I'm gonna explain it and I'm gonna give you a visual representation of it so I'm gonna say showcase showcase top box a and then I'm gonna go on the next line put another set of quotes and say showcase showcase and then top box B okay and then we just need to end that with a semicolon now if I save that I mean it's it you can see it's set as a grid but it's not really doing anything yet because we just set template areas we didn't actually assign them but let me just bring over an image real quick to show you that if we look at this I have this yellow overlay over the showcase and over the top boxes and it's the exact same format as this right here as this text we have our showcase showcase top box a and then our showcase showcase top box B okay so we basically want the showcase to take up two columns this way and and have one of the top box a we also wanted to take up two rows this way okay the grid system is two-dimensional unlike flexbox which is just one dimensional so we can make this take up that we can make it go this way too and then we have our top box B over here so you can use these grid template areas as just that as templates and you can kind of see how your content is gonna look just within your CSS all right and I also have some images for when we change this up for the responsive versions as well all right so what we need to do now is we need to assign out our grid area so let's put let's do showcase so we have our class of showcase and this is what we're going to assign we're gonna say grid area and assign it to showcase because if we don't do this it doesn't know what this means showcase so we're assigning it here alright and then we're gonna go down here and we're gonna assign our top box a to grid area top box a and we want to do the same thing with B so I'll copy that we'll change this to B and also change this to be okay let's add our semicolons and save and there we go so now we have our showcase going this way all the way over to here and then our top box a and B okay just like this image now we just need to add our separate styling to each thing so let's go back to our showcase and let's go ahead and add a min height of 400 pixels okay and I could set this to to anything if I set it to 800 pixels and save you'll see that this the top boxes will also extend along with the showcase okay but we're gonna put that back to 400 and then we're gonna add our background all right so this is gonna be a URL and it's gonna be in the image folder and then it's gonna be showcase dot JPEG all right now I don't want to just zoomed in on the laptop like that so I'm going to change the background size to cover and we're gonna set the background position to center and save and there we go all right let's see let's also add some padding so we'll say padding 3 R M so that's 16 times 3 and when you use REMS you can you can see the the pixels if you want if you go down in your development tools here whoops into elements and spring this up and if we go down here let's see where's font size wait and I'm not looking for font size I'm looking for padding which is right here 48 pixels all right so three REMS is 48 pixels because 16 times 3 is 48 all right so next thing we want to do is align this stuff you can't you can barely see it because we need to change the color but the heading the paragraph and I'm actually gonna use flexbox to do this now one misconception is that if you use grid you can't use flex blocks at all now what I like to do is use the grid to layout the site layout all the boxes all the areas of the site or the the UI of the application and then I'll use flexbox to align things inside of those elements all right if that makes sense so we're gonna say display flex so if I do that automatically it's gonna just make it go everything go horizontal so of course I want that as a column so I'm gonna say flex direction we're gonna set that to a column so it goes back down the other way all right and then just some alignments we're gonna say align items to the start and let's say justify content to the center which will move it down all right and then I'm also going to add a but the shadow to the the showcase so we'll say box shadow and we're gonna use our variable that we created of shadow all right so now let's do the inner elements the h1 and the paragraphs so we're gonna go down here and say showcase each one and let's add let's say font size I'm gonna make it bigger so I'm gonna use for R M and let's do margin bottom zero so that the paragraph and the heading can come closer together and then let's do the color of light so VAR light okay there we go now let's do the paragraph so go right here and say showcase paragraph and let's do font size and I'm gonna say 1.3 R M let's do margin top zero and let's do color and we'll use our light variable and save and there we go selects pretty good so I'm gonna go down here and I'm gonna put a comment here for top box so we already have our styles for top box a and B now we want for just top box because both of them have that class we want to add a background of primary which is the color that these the navbar items have so we'll say background is gonna be var primary we'll save that good and then let's also display grid okay so everything and it will be displayed as a grid and we'll align the items to the center and let's justify the items to the center and then I'm also gonna give it that shadow so we'll say box shadow and set it to the variable of shadow all right and then we're gonna do padding which will be 1.5 REM and Save and there we go now the price needs to be much bigger so we're gonna go let's see I guess we could do all right here we'll say top box price and let's set the font size to 2.5 REMS and there we go so that's the top container that's all set now we're going to go down to the boxes and just to show you if I make this smaller the responsiveness hasn't kicked in yet you'll see it's and it's not responsive at all whatsoever we need to add our media queries and we're going to do that in a little bit but let's move on to the boxes so remember we have a section with the class of boxes we're going to display that as a grid and we're gonna give it a grid gap of 20 and then we're gonna do our grid template columns all right now you have a few options here if you know that these are gonna be for across all the time you could do what we did with the nav which is right here just for one fr-s but I want to make it kind of I guess more responsive where you could add more boxes if you want I also want to make it so that we don't have to keep changing these the grid template columns when we get to a certain size because obviously four across is too many when you get down to it a small width so the solution to this is going to be to say repeat and then we're gonna say autofit and then we're gonna use this min/max function that comes with the grid and inside here we're going to say we want a minimum of 200 pixels and then one fractional max of one fractional okay so that's gonna put it all put them four across and if I make this smaller if I make this smaller you'll see that it'll actually they'll go on the next line so we don't have to specify the template columns for each media query for each size it'll kind of do it itself alright so I think that that's a good way to do it so now what we want to do is style each individual box I want to give it a background and stuff so let's say box and it's going to have background and we'll use the primary variable we also want to align everything to the center and let's add some padding so I'm going to do 1.5 rim on the top and bottom and two on the left and right and then let's add a box shadow and we'll use our shadow variable and save and there we go all right so let's move on to the info section which is really easy so we're gonna say dot info and let's add our background we're gonna use the primary I'm just gonna copy this and we're also gonna have the Box shadow whoops copy that and then we'll do display grid let's add a grid gap I'm gonna use 30 here just to push it apart a little more and then let's do our grid template columns and I'm gonna this is going to be really simple I just want to do two fractional Zoar one fr one fr I'm just going to use repeat so we'll say repeat twice one fr and that will just split it in half okay and then finally I just want some padding which will be three REM and save and there we go so it's just split into basically two columns so now we need to do the portfolio so portfolio is going to display as grid and let's give it a grid gap of 20 and then for the grid template columns I'm gonna do the same thing I did here and autofit except actually is out so what I want yeah that should do it so if we save that good and display a grade' grid gap all right so for the images for the images I'm gonna make sure that the width is a hundred percent of its container and then we also want the box shadow which will be our variable and Save and there we go all right good so now we just need the footer which is very simple I'll just use the footer tag as our selector and we're gonna say margin top to REM background is gonna be the dark color and then the color will be the light color okay let's make sure it's text aligned to the center and let's add a padding of one rim okay and there's our footer all right so that's the just the the regular website now we need to work on the media queries okay which isn't too difficult so let's do that down here so we're gonna do a 700 and a 500 media query so let's say media so for the max width of 700 pixels so anything we put in here will only be ineffective for 700 pixels or less so first thing we'll do is the top container okay we want to change up the grid template areas all right what why keeps doing that so let's take a look at this now I have another image that we can look at so this is what I want it to look like and remember that the the format of our text is gonna look just like this so we want showcase showcase should take up the whole thing and then top box a and top box B so let's go ahead and do that okay I'm gonna make it so this still shows so we can see this and let's put in showcase showcase go on the next line and you guys probably know what I'm gonna do top box a and top box B oops that should have a slot I - all right so if I save this and we go down to 700 pixels right there it changes okay so that should this grid template areas makes it now change to this style this format all right now some other things I want to do is I want the h1 to shrink up a little so we're going to say showcase h1 and we're gonna set that font size to 2.5 remm all right let's also do the menu I mean I guess it looks okay here but when it gets smaller you can see that and also if we were to add more links so we're gonna actually make this we're going to chain the grid template columns right now it's for 1/2 hours across we want to make it just one fr for each one so each one goes all the way across alright so we'll say main nav ul and we'll say grid template columns and just simply one fr and there we go alright so let's see what else we want to do this stuff is fine the info I want this to be one fr as well so what I'll do is just copy this and I'm gonna change this to info so that way info is also one fr and it's just you know one big block all right now the button here I want this to go all the way across and be displayed as a block level element so I'm gonna say info dot BTN and we're gonna display it as a block and let's see let's make it with actually we don't need to do that I'll just say text-align:center and let's do margin Auto and save and there we go so that looks a lot better and that should be it for 700 pixels that looks good now when we go down to 500 just so when we go down like this you can see that this it's it no longer looks good so we want to again change the grid template areas so I have one more image to pull over and this is what we want now so we want showcase top box a top box B so let's create another media query this is going to be for max with 500 pixels and what I'll do is just copy this and paste that in and then I want to change it to this showcase top box a top box B so on this top one we just want showcase the second one we want just top box a the last one we want top box B let's save and go back and there we go so now everything is in a single line it's all stacked and it's completely responsive even on very small mobile devices alright guys so that's gonna be it for this video hopefully this taught you a little something about the grid and even if you already know grid CSS hopefully you had fun doing it and building it and please leave it a like if you liked this video if you're not subscribed and you like this type of thing please consider subscribing I upload videos every few days every couple days or so but that's it thanks for watching and I will see you next time hey guys if you like my style of teaching check out my premium udemy courses listed at traversée mediacom of course is an angular nodejs bootstrap for PHP a my most recent 21 our modern JavaScript from the beginning course all links from the website our promotional with up to ninety percent savings

Channel: Traversy Media

Views: 529,885

Rating: 4.9672756 out of 5

Keywords: grid css, grid css website, build a website, responsive website, responsive grid css, css variables, css grid flexbox

Id: moBhzSC455o

Length: 45min 32sec (2732 seconds)

Published: Mon Feb 05 2018