How to create CSS Layouts - Web Development Tutorial for Beginners (#3) - with HTML & CSS

Key Takeaways

hey there and welcome back to web development tutorials um if you have not seen the first two videos uh you'll want to watch those first uh check here for a link to basic HTML and check over here for lesson number two which is a link to basic CSS I'm not going to recover those things so you'll want to check those out and if you've already gotten those two and you're kind of on the learning curve I highly encourage you uh learning web development is a skill you will be very very glad you learned it's easy to find work if you're half decent at web development uh there's lots of opportunities to work from home work remote um currently right now I'm in a permanent position and my employer is on the other side of the country my whole team is on the other side of the country uh it's just it's a really great career in my opinion to be in uh lots of flexibility lots of opportunity it's worth the work that being said let's get into building CSS layouts which is what we're going to do on this one uh you know how to do some basic CSS rules but now we're going to say let's take this page this blank page and really make it feel like an actual real web page um so let's get into it one thing you'll notice as I'm typing is I'm using a plugin for Sublime Text called EMT um and what that allows you to do is that allows you to hit Tab and autocreate some things so if I do header it gives me a header tag if I do UL sub Li * 5 gives me a UL with five Lis in it I can go start tabbing through all the fields it's really nice I'll put a little bit of description for it in the uh description down there on how to do it um but let's get into our layout a few HTML 5 Tags I'm going to introduce to you are called header nav and footer I don't I'm can't remember if I covered div or not so div is another one um these are all basically non styling Tags by default they're just container tags they're called semantic tags and what they do is they help you kind of give meaning to the content within them just by looking at the code clearly I'm doing a header with a nav you can put anything you want in here uh but when I see nav it helps the the reader understand uh or the Google bot understand you know when Google's looking at your page to figure out what all the content is helps you figure out what's inside of it so as you see if I just put text it appears and there's nothing special going on so what we're going to do is we're going to start building out our page using these semantic Tags I'm going to do an unordered list um with five liis in it and those Lis are all going to have a hyperlinks in them so this kind of the way I do it in M Atul With An Li and an a * 5 and there we go and I'm just going to put pound for the hyperlinks in there um since that kind of tells it to do nothing I add in some fake links here home blog about contact links sure there we go and you're like that does not look like a navigation um it will we've done it correctly with the tags we've said UL unordered list with line items and from there on out we're going to style them to look the way we want them to uh you know what else I'm going to do I'm going to add an H1 a header my page there we go website complete that's going to be our header section let's move on uh and let's build a three column layout let's go div class equals row and let's do three div class columns div. call time 3 there we go EMT is awesome once you get the swing of it and then footer content okay so this is the markup that we need to make a pretty decent site so far let's move over to CSS and show you how this thing starts coming together uh let's start by doing header and let's give the header a background for now we're not going to worry too much about design let's just go 00 Zer which is black you can also go black um and color white um save that there you go that's starting to come in yeah black is just a little too depressing I'm going to go 9999 for a slight grayish color let's go body let's give body uh H we'll leave body where it is one thing you'll notice too is by default the body has a slight margin around it so we're going to to go ahead and drop body margin zero um and that'll take care of these two it won't take care of that one though uh let's go ahead and save keep moving on header [Music] H1 this will be our title and this will and then we can move on to nav I'm just creating some CSS selectors here for what I'm going to be doing nav UL will give that no margin if you'll notice by default the nav UL has margins on it that took care of a lot header H1 let's give youo margin and let's give make sure the header has no margin trying to figure out where this extra little bitty margin's coming from sometimes there's some defaults on browsers that that you're not aware of all right we'll figure that out in a little bit I'll show you how to inspect that to find out where that padding's coming from so it clearly isn't that all right um so what we'll do now let's move on to the ulli so we're going to make a rule here you can see I'm further selecting into things by going navul the reason I'm putting nav first is I don't want to style every UL on my page uh with what I'm putting in here I just want to style my nav UL right now same with here I don't want to make every Li for the rest of my entire website look like a navigation so I'm just specifying nav with a UL child with an Li child so you see it's going nav UL Li and it's going to style that what I'm going to do is list style type by default it's going to do bulleted and now I'm going to change that to none you'll see now the bullets are gone there we go and then I'm also going to change the display to inline block there's a few display choices by default uh you can usually there's display inline oh there's my problem body had a colon in it and yes I knew I wasn't crazy easy see margin zero um you can see once I changed it to inline block they all jumped in line with each other um and the reason I made it in line is also an option which will give me a similar look uh you can see nothing changed the reason I did inline block is when I did inline block I can actually assign them fixed widths and I can do a lot more things with inline block than I can with in line uh let me give them a background color let's give these a background of black a color of white and you'll notice they they're still blue because the hyperlinks the a tags default have a color as well so there you go that'll take care of those and I'm also going to add a little bit of margin let's try five pixels all around I don't want to do margin okay one thing you'll notice this is a when you do margin it adds spacing on the outside of your element as you see here I have a black background and margin added spacing here which is what's giving me this funky look if I add padding instead of margin what padding is going to do is there you go see now now it's going to create padding inside of my element so what I'm going to do is I like the five pixel top and bottom padding but I want to have more like 10 pixel on the left and the right so that looks a little better I'm actually going to go even more 15 pixels once again with margin and padding you can go it goes top bottom left right top or top right it goes clockwise top right bottom left and if you just do two then it goes top bottom left right so I'm going five pixels 15 pixels so that goes top bottom five pixels Left Right 15 pixels if I want it to be more detailed I could also go five pixels 15 pixels same thing there's that and then I also do want to drop margins to zero because notice how there's a little bit of margin in between there I think there's a little bit of margin there we'll have to figure out where that margin's coming from we'll look at that in a little bit so there's our buttons you see it's starting to look like a web page I'm also going to add display in line to my H1 and display in line to my ul and that should make them yep bounce around to the same line which is very nice another thing I'm going to do is start adding some margins to my header now or padding rather let's try a same 5 pixel 15 pixel padding that's starting to feel good although I don't want any padding on the bottom so I'm actually going to go and extend this rule so what I just did is five pixel top right bottom left there we go kind of want these guys to stay on the bottom uh it's feeling a little good let's maybe see what happens if I do 15 pixel there yeah feeling decent feeling decent so what's going to happen here is because I made this display in line and this whole UL display in line by default they're automatically just going to line up with each other um and depending on how the space goes they're just going to automatically show up where they show up you'll notice there's a little bit extra padding coming on here that's cuz uls by default have padding as well let me drop that there you go and now I'm noticing oh okay I kind of like that default padding there maybe what I'm going to do here is give it a little bit of padding on the left 0 0 Let's try 15 pixels zero top right bottom whoops wrong thing top right bottom left that feels good so now whatever my title does is going to automatically bump these out further and further along let's move on to our three column layout so a little bit of explanation since I flew through this I'm using uh selectors to obviously clearly grab everything header header one I want to kind of keep them grouped uh so it's easier to figure things out a decent idea is start with the very top elements of your page move down the list you can see I went body header what's inside the header then I went nav I didn't do anything specific to the nav so that could stay there then I went what's inside the nav then I went what's inside the UL and so keeping with that um you'll notice we we only have a few actual selector rules uh CSS rules that we've used we've used a lot of margin and padding you're going to use those a ton you're going to use display a lot um you're going to use background and color and you know this list style type you're really only use that one here and there you see there's not an infinite amount of CSS rules uh or css yeah rules once you get to know them get to know what they are you start getting comfortable a lot faster than it feels like At first so uh let's move on to our div you'll notice we went div class row and then we went div class column class column class column all right let's create these things in an actual three column layout div row so I went a div with a class of row if I did this and added that space then it would look for a div with something class row inside of it I'll actually just go class row we'll leave you for now class column and what we're going to do is we're going to give you a float of left and what that means is is everything with the column now floats left check it out so they are all floating left uh we have a problem here in that since they're floating left our foot are bumped up and that's a tricky thing we have to add here is we have to we are going to do something sneaky is we can do one of two things we can either make the footer clear both clear both means forget about the floats and wrap around because lots of times after your things are floating left let me see if I can show you a little more clearly What's Happening Here let me give it a background of 999 and a padding of say 20 pixels I'll give it a background of 3 3 three so it sticks out so we've now got these three columns add a little bit of margin too for effect okay there we go that looks a little better three columns now that they're floating everything is kind of going to be out of pocket and they're just going to start lining up on the left um which means that the footer by default is going to bump up lining on the left as well we don't want that to happen we want it to do it called clearing the floats which means okay forget all the floats that are going on clear it come back down here and so that's why I'm adding a clear both that means it's clearing left and right floats uh if we told this to float right then they'd all start floating based off the right side of the page so when you tell it clear both you're telling it clear all the float lefts and the float rights if you can understand floats you've basically understood 80% of CSS layouts uh maybe not 80% maybe halfway through floats are a little bit interesting to to wrap your head around at first but as you can see it's it's not that complicated so I'm actually going to do now is I'm going to actually go a percentage size Let's see we have three so that would be 33% for the entire thing so if each gets 33% we''ve basically failed out our whole guy and you see they're no matter what my size of my window is they're always going to adjust what I'm actually going to do now is add a margin say 1% so that will now cause them to bump around okay so what happened here we have 1% margin plus 33% uh if you add these three together 33% you're getting 99% and now we added a margin of one one one one we basically added 6% to margins so now we're ending up at 105% that doesn't work so when you float stuff they're just going to keep wrapping around uh it's really nice let's say we added five more divs you'll notice they just keep wrapping around kind of like what Pinterest does the things just keep wrapping and coming down and wrapping and coming down interested in an even three column layout uh so I'm trying to think of what the math would be here I basically need to drop 5 percentage off um let's go 31 there you go so now we've got our three column layout you notice that no matter how my browser window changes it stays nice and Nifty that's really great um so that's kind of a lot of when you can use a percentage layout because what that's going to give you is the ability for your page to look really nice on all devices you can go width and keep it fixed I went 200 pixels there uh but you notice that depending on what kind of screen size you get it's not always going to look the same I'm going to leave this here because in future lessons we're going to cover Twitter bootstrap uh which does a lot of these smarts for you and does a lot of cool things for making it look great on every device I just kind of want you to get the basics of how we do everything here um one one thing I'm going to add before calling this layout done let's add border radius 10 pixels and that's going to add rounded Corners ah doesn't look too nice right now let's may make it five and let me add that padding back in so there you go now we're call whoops we got a padding of 10 pixels so now what you noticed here is that bumped our margin off against maybe I'm going to go padding there we go so what I did is I changed our margin to 0.5% and our paddings got 05% on the left and right so maybe I'll go 10 pixels top bottom .5 % left right and we definitely need a color there we go we're getting a layout I don't like that the footer is clearing both by default I want it to be a little more generic than that so what I'm going to do is I'm going to do a row after and this is kind of what's called a pseudo element you see that now I get the exact same effect um row after creates a fake take element after the row that's invisible and you get to style it however you want so all that element does right now is clear both so anytime I add a row tag it's going to clear both after it meaning that any floats they're all going to be checked out and the next guy is going to appear exactly as you wish it to so if I copy and paste this row and I just have one column and my that is did not do what I wanted it to do oh why is it doing that okay there we go make the row clear both and I'm not sure why the afters were doing what it's doing so I'll look into that and put it in the comments below so I don't look like a fool here on uh on public YouTube so that's pretty much where you're going to go I'll bad add my footer to clear both again one things you learn about web development is you never learn at all even if you knew it six months ago you might not have used that certain thing for six months um and once we get into bootstrap in the next video uh you're going to see why I might not have remembered what that was because I don't need to type it anymore there's a library that types it all for me so that's the basics of creating an HTML layout you already know how to link these Pages um and there you have it we'll catch you around