Lesson video

Hello, and welcome to lesson six of key stage four HTML and CSS.

I'm Ben and I'm your computing teacher for this lesson, and this is your final lesson of this unit already, okay? Now in this lesson, we're going to build upon all of the knowledge that you gained in the part of this units, so your HTML and your CSS.

I'm going to apply something called the CSS box model, okay.

So all you'll need for this lesson is your computer and a web browser, and as ever you'll also need access to so you can all open up your laser tag website that you've been building throughout this unit.

So if you can clear away any distractions that you might have turn off your phone, and if you've got a nice quiet place to work, that would be absolutely brilliant.

And when you're ready, let's get started.

Okay so in this lesson you're going to learn how to plan a website using a sitemap.

We're going to learn about house styles and wireframes and how we might utilise this, okay.

We're also going to learn what it's meant by the box model in CSS.

And you're going to have the opportunity to apply your skills, to position items on a page using that CSS box model, okay.

Now, first of all I've got an exercise for us to do, which is a really interesting exercise, but for this you'll need to have Google Chrome installed on your computer, okay? So if you have got Google Chrome, you can navigate to the BBC website and press F12, okay? Now this can be applied on any website, but let's all do it together on the BBC website.

Now I'm just going to demonstrate that quickly, but let you explore it, okay? So if I go to the BBC website here.

You can strike F12 on the keyboard.

Now my keyboard requires me to press the Function key and then F12 but yours might not.

But find a way to press F12 and I'll do that and it opens up this window here, which my face is in the way of, so I'm just going to move myself out of the way, okay.

Now, once we do that there's as you can see this little icon on top here it says, toggle device toolbar.

So I click on that, okay.

What it does is you can see that it puts it into this little mode here.

Now there's a few things I'd like to have a look at.

You can see what this website would look like with different devices, which is really interesting.

So see if you got any of these phones or got the phone that's maybe closest to yours or your parents, one of you got a tablet.

You can select one of these and see what it looks like, okay.

You can also, you can change the whether or not it's portrait or landscape.

So you can rotate it like you would do on your device.

And you see what the website looks like that way, okay.

So I would like you to pause the video now for me please, and then press F12 using Google Chrome and just play around with that and see what kind of a.

See what the website looks like on those different devices.

Okay, so hopefully you've unpause that because you've done that.

And you had an opportunity to see what the website looked like on different devices.

So we think about as a web developer, why would that be a really useful tool for you? Well, hopefully you can imagine that if you create something that's live on the internet, this is unaccessible to in theory, anybody who has an internet connection.

So all those users that might be looking at your website might be looking at your device on a range of different devices, whether or not that'd be a tablet, a mobile phone, a desktop, a laptop, lots of different devices.

So having a tool that allows you to get a good understanding of what your website looks like, on all those devices can be really helpful to you in making sure that your website is as accessible as possible for the possible users, okay.

So let's move on to the planning a website, okay.

So here's some considerations that I'd like you to think about.

If you do move forward and start planning your own websites with your new found skills from this unit.

So first of all, there's a good practise to start off with a sitemap.

Now, a sitemap is a conceptual diagram showing how different pages will link together in a website.

Now it's usually a hierarchical diagram showing the homepage and how it links to all the subpages.

So we might most well, all pages will have a homepage like central page that you go to.

And from there.

And you'll see on the diagram here, on the right hand side.

From there you'll have these hyperlinks, these hyperlinks that you'll see on the on the homepage.

Normally in some kind like navigation bar, that might be the same on all pages.

Another on the diagram here, you can see that we've got from the homepage, you should be able to access a hyperlink to the about page, the product page and the contact page.

And then underneath that maybe when you get to the products page, you're then able to access these additional pages as well, okay.

So that helps you gain an understanding of the structure how you would like your users to navigate and find their way around your website.

The next thing to consider is house style.

Now house style refers to a set of rules that a company of size may want when making documents.

So to make a website, because a website is a document okay, now this really helps maintain that consistent style.

A look and feel that the company wants to achieve and wants that the users to experience when looking at any of the documents that they might make and that's like say might be webpages.

So in the house styles you would dictate maybe the size also the type of fonts and the sizes, the colours for the fonts, the backgrounds that you would use, and maybe the logos, what dimensions each logo needs to be.

So they don't get pixelated and things like that okay.

So having that idea of what the colour scheme needs to be consistently, amongst all documents that the business, produces then that's really helpful.

And even if you're not a business and you just make a website obviously it makes it a much better user experience.

If you have that consistency of styles that are all your pages.

Okay and then finally we'll move on to wireframes.

So now we've decided we've worked out our sitemap and we've thought about the look and feel with the house styles.

The next thing has to do is produce a wireframe and you kind of did that in the previous lesson when you designed your laser tag website.

So wireframes are a way of planning the layout and content of a web page before coding.

Now they usually basic sketches to plan where elements will be, their dimensions, how the user will interact with the webpage.

As we want you to happy with your wireframe, then you can start coding.

So you can imagine that you can see from the diagram there, it's just a sketch diagram where you're talking about the position and elements and maybe the interactivity on the page but you don't have to draw all out and be the best artist in the world and draw as exactly what you want the heading to look like in the right font.

Your house style will do that.

All you need to do is say the heading needs to go here.

The navigation bar needs to go here.

This needs to be an interactive button here.

You know, all those things just kind of now highlighted so that if anybody else was designing your webpage, you'll be able to take your design and make it come to life using using HTML and CSS.

Now why wireframing is also important is to take into consideration user experience.

As there are a few traditional placements of items, meaning that users will find your website easier to use and locate the things that they are looking for okay.

Now if we think about what we've done so far, what we've done is we've looked at the HTML, which has described to you in a previous lesson as the skin and bones.

When we make our HTML, we don't really worry too much about the order of things too much, or the look and feel of it.

It's just here to content that I wanted my page.

When we started looking at CSS, that's when we started to think about dressing it up adding the clothes, making it look nice.

Adding the colour the styles okay.

So now what we can do is look at this thing called the CSS box model, that allows us to actually change the position of things.

So we looked at the colour of things and the styles and the fonts.

But now we'll look at the position of things on the page.

Now, the best way to explain the CSS box model is actually just have a go at it.

But I'm going to explain to you the principles behind it.

Now if you consider every element in your HTML page to have to be considered to be the content.

So anything for example, in the paragraph tag, any of that paragraph would be the content or an image that would be content.

Now what we can't see, is these properties that each one of those have, that CSS allows us to manipulate, and those are the margin, the border and the padding.

So around that content, whether or not it be an image or a paragraph or less for example, we have padding, border and margin around it.

And all of those are properties that we can manipulate to change the look of it and position it in the style of that content.

So, if we look at each one in individual and in turn sorry, the margin as space outside the border.

So if we look up the margin that you can see here, so that out space outside the border and between the content and any other neighbouring elements, for example the paragraph and the next paragraph below it, or the paragraph and an image.

So it allows us create kind of space in between those things.

Now, interestingly the margin can only be transparent.

You can't add colour to it.

You can't you never ever, the user will never ever see the margin, all they'll see as a space that you use, that once you've created the margin, okay? So the border adds space around the padding and the content.

So the border and those like the margin can't add space, but what we can do with the border, is actually add some colour to it.

So we can make it a solid colour, and then we can give it an actual colour.

So that'd be red, black or whatever colour you want.

And you can also manipulate other properties of it.

So you can also make it maybe a solid line or a dash line or something like that.

And then finally the padding.

So the padding creates space around the content.

So that's something again, it's a bit like the margin, but it's between the border and the content.

And again, like the margin it is transparent.

So you'll never actually see the padding itself okay.

So, Logan did give you a demonstration of what this looks like in our page okay.

So this is something that you can have a go at yourself in a moment.

So I'm going to go over to this page here.

So I'm just going to move myself to the bottom of the screen here.

So you don't.

I'm not going to be in the way of what this page looks like.

Okay, now this is a link sorry, on your worksheet that you'll have a go at manipulating yourself in just a moment.

So you see it when I've done this, I've got a page which is a really fascinating and interesting page called a history of mobile phones okay.

Now you'll see here, this is an image that I've got the top and we look at our HTML you can see I've got an image tag here, and then I've got my paragraphs underneath them, scroll down that's what my, that's what my page looks like.

Okay, perfect.

So what we're going to do is have a look at the CSS and what that might change about it okay.

Using this thing called the box model.

Now, you've notice that I've got, if you look at the div tags, so I've got the body tag here, but I've also got this, a div tag here as well.

So div tag class container.

Okay, so you can see where that starts and finishes.

So inside my body, I've also now got another div that's just nested inside the body okay.

So if I just manipulate that, so let's go to my CSS.

You can see I've got my body, I've added some background colour which is white.

I've also added padding and I'll explain why I've got so many values there in just a moment.

So if I go to a container, my first task is to add some background colouring.

So I'm just going to put in a background thinking about it didn't want me to do that.

So lets try it again, background and then dash remember colour spelled without the U colour and then colon and I'm going to add.

Make it red semicolon.

Let's now see what this looks like.

Okay and there we go.

So what I've got is I've got, excuse me, is I've got this white here.

You can see, I've got.

There's a white background around it, okay.

But I've now made all of this red, which feels kind of strange at first, but we're going to manipulate this so it looks a little bit better okay.

So what I'd like us to do now, is I'd also like us to add some code into the container, to maybe play around with the box model.

Now, if I go back to the box model and my slides, you can see that we've got margin, border and padding, okay.

So let's start off by manipulating each one of those in turn and seeing what impact that has okay.

So first of all, I'm going to add a margin in, okay.

Which is the Alta one remember can't add colour first and for margin okay, I'm going to make it 50 pixels.

So like that and let's see what happens with this.

Yep, run this.

Now look what that's done now because it's created space around the Alta Data.

This is the body tag that's been manipulated, with a white background there okay.

And now what I've done is I inserted my container, which is sits just inside that body tag okay.

I've added a margin.

Now, if I just change that value to a little bit less, let's just say 10, oh no 100 pixels.

Let's say 10 pixels.

You can see that block around it is slightly narrower okay.

And if I make it, let's say 30 pixels.

You can see it's slightly wider.

So what was the next element? So we started with a margin.

So the next thing was my border okay.

So I'm going to add a border.

So now what I'm going to do with the border, is I'm going to play around with some of the properties and you can look these up just by, by Googling in the CSS border okay.

I'm going to put in border dot width and I'm going to put in 12 pixels.

Let's see what that.

What happens when I do that so run.

Now nothing much happens, but something did happen, but we can't see it because a border has been added, but remember a border can have colour.

So what I'm going to do is I'm going to put, border style I'm going to put solid.

What happens here? Run this, and there you go.

Now I can see this border so was transparent before it was there.

We just couldn't see it.

So now I've put a border style in solid.

Now you can see that border that's being created okay.

And again, if I made the border width a bit more, so let's make it 20 pixels you should see a thicker line.

And there you go.

Even might change it to like 200 pixels.

Okay, and there we go, that's a massive border.

I definitely don't want that.

But you can see what effect that actually has and it's moved the content around the screen.

So rather than just finishing much in party HTML with just starting on the left hand side and moving it down, by manipulating that property, actually happy now to move the content around.

But let's just change that back to what it was.

I was quite happy with my 12 pixels of which it means I'm going to keep it at that and there we go.

So the remaining thing to do would be the padding.

So that was the last one.

So if we go back to my slides you can see.

So all right, the padding is that little box there, that's outside the content.

So we've added a margin.

We've added border, now it's time to add the padding.

Now it's was really nice to be able to see the padding because you can notice the other just looks a little bit tight against that border doesn't it okay.

It looks a little bit squished up to it.

So we add padding, we can then just move it away slightly from that black border okay.

So if I type in padding I'm then going to change padding to 20 pixels and my semicolon.

Well not.

And there you go and you can see that it's actually just created that little border on that.

So, well little space sorry around the border.

So it doesn't look too tight and packed up to it okay.

So you can see now with that container, we've now applied those kinds of individual stylings to it.

The individual elements sorry, to that box model that allows us to move things around okay.

So, what I wanted to do also is show you that's.

You notice with padding here, I've got 10, zero, zero, zero.

Now this is should work like, if we put in a padding of 10 pixels, well just 10, so let me get rid of the zeros, zero, zero.

I'll show you what that does.

Well not, you might not notice a huge difference.

It not a huge difference, but you might have noticed that it's added some width around the outside.

We have space at the top, but if I just change this at five, maybe five pixels you still see it moves slightly up.

Okay now, if I just change that back to what it was, it might be a bit more obvious if I do it in this one.

Let's paint the mod the, yeah let's do the padding in fact.

So padding let's just change it up to 50 pixels.

Okay, can you see the way it's kind of moved around if I change it to a 100 pixels.

There we go, so the padding is a 100 pixels around the border, which is quite a bit of space all the way around it.

Now the key here is that if you just put one value, it will do it for all sides of the box okay.

But what we can do is we can just change that back to 10 pixels for example, it's a bit tight, so maybe I'm going to change it to, well, actually let's leave it.

Let's leave it at 10 okay.

But if we want to manipulate individual sides of it, what we can do is work around it in each box, see it like a clock face.

So if I put in four values, so I'm going to put 10, and then zero, and then zero then sorry I need to put pixels put zero I'm not putting commas where I think commas don't work.

So just spaces zero, zero.

So what this means is if you imagine like a clock face, that is the top of the box.

So that's the top side of the box.

The next one is a right hand side of the box.

The next one is the bottom side of the box.

And this is the left hand side of the box.

So we can put four values, which will add padding around each side of the box, but we can change the padding on each side.

So it's not 10 all the way round.

We can decide which side we want to be more padding.

So let's see what that looks like.

So take a look at these screen here, perfect run.

And you can see the way here, there's gap at the top, but there's no gap on the left.

There's no gap on the right and there's a very little gap at the bottom.

Now I've actually got space there, which is why it's showing that okay.

So let's say I'm quite happy with the bottom.

I'm quite happy with the right hand side, but I'd like a little more margin on the left here, so let's go through it.

So I'd like, that's the top, that's the right of the bottom and this is the left.

So let's just change that to 30 pixels to show that working.

So run that and there you go.

And you can see, it creates that space on the left hand side.

So we've got 10 pixels at the top 30 on the left, but the zero on the right and zero at the bottom okay.

So this is like the clock face that you go around.

Okay, so you can have a go at that if you want to, but would be quite happy just having the same value on all sides of the box and you just need to put one value in there and that would work.

Okay, so the final thing I wanted to show you, which is a bit of fun is that we have this image here.

Now let's say we wanted that image to kind of wrap around that text.

All we can do is, because this is inside that container element.

If we have a look at the HTML, you can see I have this.

I have the container here, div class container, but inside this div, I've also got this image here.

So what I can do with that image, is I can actually manipulate the where that's going to be and I'm going to use this property called float.

So what I can do is I type in image here.

I can use the property float, float colon, and then see what side of the page do you want to float on? I want to float on the right hand side okay.

So this will move hopefully, my image to the right hand side of my texts.

So we click run now.

And there we go.

Can you see the way now? Because I'm floating this on the right-hand side, using CSS this has nothing to do with the HTML.

Using CSS I've now dictated the position of that okay.

Now we've may well be, if you look just on the left hand side, it looks like the text is actually really close to our image.

So we might actually want to add some padding around that right? So I'm padding, and I want on the right hand side.

So, I'm going to go to the top.

I want to, the final is comes to zero pixels on the right hand side, it's a bit tight to the border.

So I'm going to add a bit of padding there, so lets say 15, lets get 20 pixels sorry, the bottom's fine.

So I'll put zero pixels and the left hand side I'd like a little bit of space and maybe 10 pixels okay.

And let's see what that does.

So run, and hopefully you'll see won't be so tight set up a margin there.

I want to have a little bit more space than the last.

So actually run that and there you go.

It's created a space around there and I've got a little bit more space there and we've got a little bit of space in the right hand side so perfect.

And I've manipulated that element of the CSS box model.

So I can just get that nice look and feel that I want okay.

Now you may notice that in the HTML page here, we've also got some other div classes I've set up for you.

So these are paragraphs okay.

For example, we might want the text to be white okay.

So we can manipulate that using CSS.

And we've also got another one called a header as we might manipulate the header as well okay.

But I would like you to play around with that.

I'd like you to manipulate this page, use a box model to maybe change the things that I've just showed you, but also change the heading, change the paragraphs as well okay.

So I would like to head back over to the slides now okay.

And I would like you now to go over to your Activity 1 worksheet where you'll see a link to a page that we've just manipulated, but also you'll see a set of instructions about what to do, which goes through all the things that I demonstrated okay.

So that should hopefully help okay.

So how fun would that play around the elements as always, and then unpause when you're done.

Okay, so how did you get some with that? So hopefully you've applied those elements of the CSS box model to actually manipulate those individual bits that every element has outside the container, outside of the content okay.

So your next task now is to go over and apply these things to your laser tag websites okay.

So now you've had experience applying the CSS box model.

Your next house requires you to do the following three things.

So I'd like to pick one existing page on your laser tag website okay.

You might want to do it for all the pages and that's absolutely fine if you want to do that.

That would be absolutely brilliant and two thumbs up from me, but I'd like to at least pick one of your web pages, maybe the homepage and for that page, I'd like you to create that wireframe for me okay.

We've already thought about the colours because you already applied those things.

The house style I suppose but the next stage is to look up this wireframe.

So I'd like to create a wireframe for the homepage and just sketch out maybe, where you want things to appear on the page okay.

So spend a little bit time design the layout.

And then I would like to apply the CSS box model to help you achieve the layout okay.

So that's all your, the.

That's the remaining task for this units okay.

Put those finishing touches on your laser tag websites.

Okay, so again, go to Activity 2 on your worksheet, your task design a layout to a page on your laser tag website and apply the CSS box model to achieve that design layout okay.

So for those, final finishing touches on it, play around as always with all the properties, don't be scared to get something wrong.

The worst that will happen is it doesn't display properly.

So check for those common mistakes, misspellings, maybe missing the colon or semicolon, or finishing your curly braces okay.

And again, don't be afraid to look back over any of the previous, previous examples that we've done throughout this unit.

And you can start copying and pasting some code and editing those or manipulating those individual elements okay.

So good luck have fun with it and I'll be here when you get back.

Okay, so how did he get on with that? Now I'm afraid that's all for this lesson and that's all for this unit as well.

And I really hope that you've enjoyed it.

And I mentioned to you right at the beginning of lesson one that HTML and CSS is one test subjects I really enjoy cause I still remember that feeling that I had when I made my first HTML webpage.

At that point, there wasn't anything to do with CSS that didn't really exist then.

So all I had was the bare bones of a structure, but from that alone, I felt inspired that I was able to make something that I could actually put on the World Wide Web that anybody could do and see okay.

So hopefully that's given you a nice taste of the things that you hopefully feel that you're now comfortable, that you're able to achieve the same things as well okay.

So why not build that next webpage for yourself? Why not make that site and put something on the on the World Wide Web for everybody to view.

And if you do that, please do share it with us and even I'd love to see your laser tag websites as well, because to hopefully some of you have been sharing this with us right from the start and to see that journey of having that HTML to the CSS and applying the box model, I'd be really pleased to see that okay.

So if you'd like to share that with us, please ask your parents or care to share your work on Instagram, Facebook or Twitter tagging @OakNational and using the hashtag #LearnwithOak.

So I hope you enjoyed this unit and I hope you also take other units on the Oak National Academy website okay.

So that's all from me.

I'm Ben and I'll hopefully see you soon.