Lessons

Lesson Info

Add HTML5 structure elements

Alright, let's start actually making the website. So our first project is going to be this restaurant, so we're going to put in the structure for it, the header, the main the nav. Okay. And it's going to look something like this is going to be the kind of main structure that we're building in this video, so hit a Nav main footer. Easy. Let's make it and that's what it looks like and we'll center it as well. That's the job of this video. Let's start coding alright. Depending on how well you've been following along and I'm going to close down everything in here except for going to open up my explorer. I'm in project one. Okay. And I've got index and style open to make sure those are open now in the style CSS let's delete all the code we've got so far and clean it out. Okay. And Salmon here, let's get rid of all of the body so that's nice and clean but if he returns in because crazy and we need lots of space, make sure that your style sheet is linked and the title. You've got a title. Any...

kind of title. What I also want to do before I move on is I'm going to close down the Explorer is I keep meaning to do it in every video but let's do it Now. Let's go to view. Um now I'm probably just gonna do this, we're gonna go to view a parents and see zoom in, you'll see if you want to do it in a sack, which you see all the text got a bit bigger. It's probably to help. May need help the editor from zooming around. You're probably getting dizzy as well going side to side checking CSS and html. So I made the text a bit bigger. You might be the same. You might be like, hmm, I wear glasses and I need to make this stuff bigger so view appearance and you can zoom in. Okay. So you're reset? We're ready to go once you get in the frame of mind, let's say we've, we've woken up. We've got to address, we've got a coffee and we're like, okay, we need to make a website for the city, a restaurant company. We've created our local folder. Okay. Which is called project one and we've created two files, index and CSS we've added our title and that's all we've done. Actually. We've connected the style dot CSS so you ready. Ok. Next thing I want to do is start adding my html five structure tags. Now we're gonna work off a diagram that I've hand drawn for you. Okay? It is in project one on your exercise files and it's called this one wireframe P one A So if you want to have that open on your other screen, like I am going to put it over there. Okay. Just to kind of work out the sizes and the colors and stuff. You don't need it. I do it anyway. Alright. So we're going to need our first one and the first one is hitter. Okay, so instead of writing div equals header, we're gonna ride. I actually don't even need the angle brackets anymore. Remember we're using new tricks so we're gonna type header. There it is there. Cool. Put a return in so there's a bit of space because I like space between the tags and now we're gonna style it over here in my CSS. The difference between what we're doing now and what we did before is we put when we write a class. Okay, we have to put what's the what's the thing that goes into the front of that period or full stop? Okay then we write header, but this isn't a class, you know, it's a class because remember we're right over here equals class. It's very clear when it's not a class, it's just a plain old tag. Okay, there's no class in front of it, We don't have to put that period so you only put that dot, if it's a class, this one we don't have to head up awesome. Then we put in our curly braces and we're gonna style it now, like before we're going to kind of open hours out to be a clear box, but often you wouldn't give it a background color in our height. Like we are in that kind of diagram that I showed you because you let the logo and all the text kind of fill the gap but we'll put the structure in first. Then we'll delete things like the height and the background color. Alright, so first up hitter you my friend get a background hyphen color. There you are. We're gonna use blue for this one. We're gonna have to save and we're going to go and launch our cool little live preview thing. Actually mine's still going from last time. Go live, started back up there it is there and great blue background. Why can't we see it? Because it has no height. So we either put content in it which you'd normally do, but because we're not doing content, we kind of separating this all out into separate videos that we can get our kind of knowledge going first. So we're gonna have a height of 118 pixels. Just that's what I decided for no good reason. Now let's go and preview. Here we go. Now. I'd like to give it a width because stretching all the way across it might be what you want. But for the moment we want it to be nice physical width. So how wide should you make your website? So this part of our course, we'll give it a physical width. So we'll say you know, you need to be a certain width later on we'll get it to adapt or respond. So when we get into a section about responsive design, we'll we'll get it to respond to different sizes but at the moment we're just going to target like a like a standard laptop size. Okay. And basically you're with can be anything it's up to you what you think you know the width should be but you're new so you need some sort of guidance. So often I'll make mine 10 24 pixels wide. That is a really kind of common generic web with Okay, it fits on like laptops by default or about About 1300 across. So 1300. So as long as it's less than that it will fit on most screens, other really common sizes are 9 60. Okay. Gets used quite a bit because it's well look at this later on but it's easily divisible by 12 which doesn't make any sense now but it will later on. It's the columns that we're going to use later on bootstrap which we'll look at later on as well uses 992. It's a framework that will look at but don't worry too much. Okay. It can be mashed keyboard. Okay. It's gonna be pretty small website that one but if I made it 8987 nobody would care. Wouldn't wouldn't break the browser as long as it's smaller than a laptop screen we're going to use 10 24. And the other thing is is you've got to say 10 24. Okay if you're at a web design group meeting and you start talking about 1024. They're going to know that you are a newbie you gotta say 1024. Alright let's save it and let's check it out browser. Cool. 1024 fits on my giant screen and that will fit on smaller screens. It's got a height and its background blue. And the main important thing is we used header instead of naming it a div giving it a class and styling it over here to the next one. A couple spaces I'm going to type in nav so nav return space. Here we go. I'm gonna do the same over here. Remember leaving that curly brace their type of novel. Doesn't need a full stop in front of it. Okay and we're gonna add a background color we're gonna cheat because it's already typed up the top there background colors are you'll get used to that's a really long winter type to get the right suggestion. Hate that one. Just a long group of characters. Anyway so let's check our diagram Where's my little diagram? He's going to be 40 high we'll use the same width. Okay but we use the height of 40 now this happens quite a bit. I do it and I forget to put the P. X. Back in what happens in the browser let's just check didn't appear. Okay save still didn't appear why you can see it because it's blue. Come on dan it's meant to be read it was there the whole time still not there? Ah Come on browser so it's meant to do automatically updating. Why is it not? Oh you know why? Okay, it's because I didn't save this side. I'm hitting command S it's controllers on a PC because I'm getting saved but I'm only in this document out of the habit this morning of hitting command s which saves both sides then it appears Alright, I'll pretend listen that I'm teaching you but really I just messed up. All right, so there's a nav, what else we got to do? We've got This section here which is going to be my main and this is going to be my footer. 400 100. Let's check it out. So over here I'm going to bulk them in. Okay, so I'm going to put in a note, I'm going to put in Maine okay return put some spaces between them so you can see and down the bottom here we're gonna put in footer now I noticed that I was kind of messing around with my cursor so it's all kind of I just put my curse in front of it, tabs it all lines up. You don't have to do that and I put a return in it to look like all the rest of them. All right, so there's my sections over here. Can I cheat paste that in that in? Okay. This one is going to be main. This one is going to be footer so we're doing lots of things one at a time But often when you're working you're going to start and kind of doing this a little bit more bulk kind of doing things so orange. It doesn't have to be the colors like there's some random colors in here. We'll look at kind of more code base colors later on, but I'm just using the ones that are pre filled in. It was 400 and 100, I can't remember. and 100. It is so height 400 And this is getting the right spot down. All right, save all and then go to browser and there we go. That's the kind of core structure and the big thing you're like, I want it centered. Why isn't he centering it. Let's do that one next. So what we can do is we could try and center every single one of these boxes and that would work. But what's really common is to wrap it all up in a div okay or in a container and make that centered so that these guys come along actually it's easier just to show you. So in V. S. Code. Okay, we are going to go in here and say the header. So just send us something. It's kind of weird to center kind of a structural element like this and there's no like make me centered. So it's kind of a trick. That's the way it gets done anyway. So there is so you can put in a margin. Okay, Which is the space around the outside. Okay. But you can put a margin on the left. Okay, I'm gonna click on that one and instead of putting in an actual measurement, you can just type in auto, make sure semi colon goes at the end. So Syntex has to be like that. I'm going to hit save. Okay. And what that does is let's have a little look at the website. Can you see I've done it to the header and it's because the margin is automatic, it just tries to be automatically as much as it can be. And so it just says, well I can be as big, I can be massive. So it goes massive. But to counteract that you say I want a margin on the right to the exact same thing and they battle it out and somehow magically they end up in the middle. So that's how you send the things. So we could do it for this and we could do it for this one as well and you can slowly work your way through it and there wouldn't be any technically problem with that except it just be a bit weird. So I'm going to grab all of this, Get rid of it. Okay, save it. So we're back to here and I'm going to put all of that stuff into a container. Now, there is no container. Um like predefined tags. We have to use our old school div tag. So at the top here. So I wanted to be before the header and I wanted to close just after the footer. So here I'm gonna tear about once and I'm going to say I would like a div with a class of container. Now I'm calling it container. You could call it banana nana. Okay, you can call it anything you like. Some people call it, nobody calls a banana just in case people got a rapper. It might be box. Okay. We're going to call a container for would be a really common one is container. So style that The problem is is it opens here and closes just here so it opens and closes straightaway. I need the ending of this. We did this kind of playing with our div tag box thing earlier on. That's the reason we did it is because I need this. I need to cut it. Okay, grab all little bits, bits and pieces and after foot of finishes I'm going to paste it in. So now if I click on this top one here, it opens their closes. There's they're all wrapped up. Let's tidy it up because it's looking a bit weird. We're going to do this. I've selected all of this. There's a sneaky shortcut to tidying it all up rather than tabbing it all yourself is to right, click it and go to this one that says format selection. Okay. And it just kind of indent everything nicely. The other thing I might do to kind of make this seem a bit nicer is I know I put returns in getting rid of them. Yeah, some trying to clear this up. So it looks nice for you editor. Can you speed this up a little bit and I'll see you guys in a sec. All right, you're back now. You might go that looked painful and it is. But it's kind of how I work. I liked everything to try and be as nice as I can and especially doing tutorials because it's nice to for you to be clear about where everything is and what it does. So it's nice and clear now that that's inside of a container, right? Because it's indented. And so all we need to do down here is we need to say style of container. Okay. And you're like he's doing it wrong and you're like definitely okay, that was an actual test that I set up. Okay, so you have to if you're signing a class, remember the period goes in front and then we can say we paste that. We don't so I've got to do it again. So margin, we do margin left and we're gonna make an auto semi colon. Same thing, margin. Right, auto semi colon save it. And because all of these fellas are inside of the container. They should not work at all. Not a test. Okay. Was it not working? Div class container right left. There are no errors down here. I've saved it all. What's going wrong? I know what it is. Okay. So I've added a width because I'm doing this a bit backwards. I added the width to these internal guys. The container needs a width. Okay. We need to swap them. So you need a width. Not Windows. Windows we need with more flustered. Okay. With 1024. Okay. And these guys can come off well actually they can stay on watch. Let's have a look. Okay, so the container now is with so now the margins no to push out from the sides there. And so we could leave these here. But because by nature Div tags will try and stretch to fill the space provided. And we've said the space provided is container. These guys don't need to be told twice. There we go. Looks exactly the same. Now in terms of the flow here, I want the container to be at the top. Just because later on when I come back into here, I'm looking for kind of when the when the CSS she gets quite long. I'm like, all right. The stuff at the top are the most kind of overriding things. So container and then here that these are I guess lower in the picking order. In terms of the structure for the site. Alright. So that's applying the html tags now in a previous um where is it? This one here? I showed you in wire frames. I made this one called Structure A and I put the knob inside the header. Okay, so we'll do that one first. That would just mean cutting that out alongside, grab this, cutting it out and putting the header inside of this one. Okay, so that would be a way of structuring that kind of design, let's say the other design didn't use main. They use section instead. Okay. Or so section open and close. They'd use that and style section over here but nothing would really change. Okay. I'm using Main because that's just the way that I like to do it and I get confused by sections and articles. Alright, buddies we've got our kind of basic structure for our site with some ugly colors. Let's start adding extra things because we've only done simple text and boxes. We'll start adding proper background colors and we'll start adding images and texts and all sorts of stuff in the upcoming videos. I will see you in a little bit after lunch