HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML

Key Takeaways

hey and welcome to the end of this series this is a little sad that we're here but we're at the end and I just want to cover making a really basic layout and here we have a very basic layout this is what we're going to be building together a nice big header area a main content area with a sidebar and a footer down at the bottom looks simple but if you can do this you can build this is the real foundational skills of making really nice websites [Music] so I'm really doing this one from scratch so the first thing I need to do is make a new folder on my desktop and I'm going to call this my first oops my first layout and then I'm going to right click on there and choose open with atom which is the code editor that I've been using for this whole series now I don't have much of a layout but whenever I am doing layouts I like having the visual here while I'm working it just makes it a little bit easier so I'm going to keep this on the side for the beginning part here so I just hit a control or command n to make a new file or of course you can use your file new file and I'm right away going to save that because I want to tell Adam this is an HTML file and I'm inside my first layout the home page which will be the only page in this demo but will be my index.html and now I'm ready to start writing something so the first thing we always need to do is declare the doctype doc type HTML and so we're telling the browser that we have an HTML file and then we have to open our HTML tag and close our HTML tag to tell the browser that we're this is where our HTML is next we need two other tags we need a head close head and I need my body close body so I have my doctype then I have my HTML tags inside of there I have an open head closed head and I have my body close body so if you remember from earlier on our head is where we put the extra information and the bodies where we put the content that we'll actually be seeing on the screen so I'm first going to come into my head here and we're going to give this The Meta tag for our car set which is one of the important ones and pretty much everyone will always just be using utf-8 uh we're gonna look at another meta tag that I haven't looked at that's fine uh we're gonna do meta name is author and content is Kevin what this is um it's letting people know who the author of The the site is so yeah you just put what your name is the content so the name of this meta tag is author so we're letting it know it's an author tag and I'm putting the content as Kevin so the author is Kevin which is me and the next one is something we have seen before close title my first layout great so I'm going to save that and while we're here we might as well open this up in the browser so let's just move this over so we can see what we're doing at the same time and I like setting this up so it takes up about half my window and this on the other half and there we go I have a blank layout but we can see that the title is working so the next thing I want to do we want to come into our body and we want to start putting some content in there so we might as well jump down here and come and we're going to do three different parts to this or four we're going to start with our header and close the header and while I'm doing this I might as well pull this up so my header is this big thing here and it's a tag we haven't looked at it works a lot like a div would it's exactly like a div except it actually means something a div is an abstract box in this case it's not an abstract box it's the header of my site it's where things like your logo and your navigation go so we have our header then we have this area down here that has this area plus a sidebar over here so we're going to start by doing a div class here and close and this is my container so my container will hold everything right in the middle of the screen it's going to hold these things in place so they're not touching the sides and inside there I have two things I have a section close section and I have an aside and close aside so a section is sort of what the name implies it's a section of my website and the aside is like a sidebar so a couple new tags but again these just like the header they work just like a div it's a box that's just holding there to hold some content but it's letting the website know a little bit more uh the website it's letting the browser know a little bit more information about what its purpose is and then down at the bottom we will have our footer close footer and that's about it as far as actually putting in the tags now we just have to actually have some content that we're going to put in here so I'm going to start by getting rid of this so we just have our blank page there so if I save this and refresh nothing actually changes all of this is in place but without any content in there we don't see anything quite yet so in my header let's come and just put the title of my website H1 my first website close H1 okay let's refresh hey then there we go awesome so now let's come down to our section and I'm just going to use some filler text in my section here we'll start off with a heading so another H1 close H1 and then we'll do a paragraph close paragraph and another paragraph close paragraph just so we have some stuff that's in there this is the main content area of this page and here uh it's a bit long let's put two short paragraphs in there so this is just some Laura some text it doesn't actually mean anything at all and re save refresh and there we go I have my two paragraphs and we'll jump down over to here we have an aside so I'll put an H2 inside my side along with and let's go with an ordered list just for fun so open ordered list close ordered list and in there list item close list item and let's just do list item one again just to fill this up why we'd have a list item in a sidebar and you know maybe you're linking to some websites you like this is my sidebar awesome and at the very end down here inside my footer I'll come down and just put a nice simple paragraph close paragraph and we'll grab a little bit of filler text just to throw in there and there we go there's my footer and as far as the actual HTML placing the content on the page that's it I'm gonna throw the CSS side of things in a separate video so that you should see that on the screen right now you can click on that and jump into the CSS so I look forward to seeing you there if you have any questions about this whole section and header and aside and footer thing leave it down in the comments below if you like the hip video hit the little thumbs up and I'll see you in the next one where we actually make this look like a real website