Lesson video

Hi, everyone.

My name is Mrs. Welsh.

Today, we're gonna be learning about CSS for layouts.

Don't worry if this is something completely new to you.

I'll be guiding you through each step, so let's get started.

And welcome to today's lesson from the unit "HTML programming projects." This lesson is called "CSS for layouts." By the end of today's lesson, you'll be able to design a wireframe plan of a web page layout and create it using HTML and CSS.

Before we get started with the lesson content, let's have a look at those keywords.

House style is an agreed design that is used to style the content in a consistent way.

Wireframe, a plan that outlines the basic structure and layout of visual content.

Floating, allowing HTML elements to be positioned in different ways.

In today's lesson, we're gonna be looking at how to design a web page layout and how to create a web page from a planned layout.

So starting with how to design a web page layout.

Let's take a look at an example web page.

What has the web designer taken into consideration when planning this web page? Have a look and see what you think.

What have they taken into consideration? If you need to pause the video so you can take a look at the slide in more detail, do so now.

Let's have a look at what the web designer may have taken into consideration when planning this web page.

The structure, the design uses divisions to organise the content.

Readability, the design uses consistent font and spacing.

Layout, the design has the sidebar and main content kept separate.

And the colours, the design uses subtle background colour with readable contrast.

So, did you get all those? Did you get any others as well? If so, excellent stuff.

Let's move on.

"So how do we plan the structure of a website?" "We can use something called a wireframe." A wireframe is a basic outline of a web page.

It does not include colours, images, or content details.

It helps designers plan where elements on a web page will be positioned.

And we see an example on the left side of the slide with all the different elements for this web page laid out using simple boxes.

The main elements of a wireframe are the header, navigation bar, main content areas, a sidebar, and a footer.

And again on the left, we can see a slightly different wireframe design that utilises each of these elements.

Let's have a look.

True or false? Wireframes include the final colours and images of a web page.

So what do you think? Pause the video to read through the question again.

So what do we think? Is it true or false? It is false.

Wireframe only show the structure of the web page.

Remember, it does not include any content, any colours, or any style rules.

It is just the structure or the layout of the web page.

So let's have a look at what a house style is.

It defines how the website looks, and this can include colours that the website will use, fonts, and this includes the fonts for headings and paragraphs, logo placement, where this will be located on the web page, and layout, for example, where things like the navigation menus are gonna go.

House style is important because it is used to create consistency by making all the web pages look the same.

It also helps the user recognise the web page as it provides the branding of the web page itself.

And using a house style can help reduce the risk of errors and time when creating new web pages, and this is because you're applying one house style across all of the web pages for your website.

So let's have a look at the Oak National Academy website.

What house rules do you think have been used on this particular web page? Think about the colour, the fonts, and the layout.

If you need to pause the video to go and have a look at the website and make your suggestions, do so now.

What did we get? Let's have a look.

If we look at the colours, the background is white with a blue border, and pastel colours are used for the different sections, and all the text is black.

The fonts are clean and simple sans-serif fonts, and the headings are in bold to make them stand out.

The layout is simple, all the content is split into sections, and padding is used to keep the different sections separated so nothing overlaps.

And there is simple navigation, which is used to return to the main menu or to continue with the lesson.

So did you get anything else? If so, share that with your class.

If you got those main ones, excellent work, and let's move on.

So taking a look at the CSS box model.

When we look at HTML elements, it is very similar to a box.

The CSS box model controls how the elements fit into the layout.

And this model has four parts, the content, padding, a border, and margin.

Let's have a look at this in more detail.

On the slide, we have got a diagram of how the CSS box model works.

In the centre, we've got the content, so this is the actual text, image, or other media element that we may be including as content on our web page.

Surrounding that, we have got padding, and this is the space around the content.

After that, we have the border, and this is a line around the box that separates it from other elements.

And then on the outside, we have got what is called the margin, and this is the space outside of the box that pushes it away from other elements.

So there's quite a lot to consider there when we're thinking about how to use the CSS box model to make our web pages have a better layout.

An example of a CSS box model.

And for this, we are looking at the paragraph tag.

At the top, we've got the width, and this is specifying how big that paragraph is going to appear on the page in terms of width of the content, so that's 300 pixels.

We have padding, and this is gonna be the space around the text.

We then have a border, which is going to appear around the text.

And in this example, it is 3 pixels thickness.

It is a solid line, and it also has a colour attached to it.

We then have the margin, which is the space between the border and any other elements.

So again, the margin stops things from overlapping.

And we have also included a background colour.

So this is the background colour of the paragraph.

Underneath the CSS style rules, we can see what it will look like.

And what we have is the text in the centre of the content with a light grey background.

There is padding between the text itself and the edge of the content box where the border is.

The border is a solid blue, and it's 3 pixels.

And again, if we had more content, we would see that margin come into play in terms of where that paragraph box is positioned in relation to the other content.

Why is the CSS box model so important? It controls spacing, which helps position elements properly on a web page.

It prevents overlapping to ensure elements don't get too close or overlap.

It improves the design by making sure buttons, images, and text all look neat and balanced.

So taking a look at how wireframe, house style, and CSS box model all work together.

The wireframe provides the structure and the planning for the web page as it decides where things go.

The house style looks at the branding and the consistency across the web pages, and it decides how things look, such as the colours and the font.

And the CSS box model is all about spacing and styling, and this controls the spacing of the elements on the web page.

So all of these work together to create your web page, from the original wireframe layout through to the house style of how it's going to look, through to how we're gonna implement it to ensure that all elements have spacing and styling through the CSS box model.

Let's take a look at task A.

A school wants to create an enrichment website to showcase extracurricular activities such as clubs, trips, and events.

You have been asked to design the layout and the house style for this website.

The first part of this task, you need to create a wireframe for the layout of the web page, making sure you label the key sections, including header, navigation, main content area, sidebar, and footer, and explain how your wireframe supports clear navigation and user experience.

The second part of this design is to define a house style for the website.

This needs to include the colour scheme, font choices, and their purpose, such as if it's for a heading or for the paragraph.

And again, justify your choices by explaining how they contribute to a professional and accessible design.

If you need to pause the video there to read back through the task, do so now.

Let's take a look at an example solution.

Yours may be slightly different, so you will need to compare your answer to the answer that is on the slide.

So for the first part of this task, we had to create a wireframe sketch.

We have included the header at the top, followed by the navigation bar.

We then have the sidebar and the content sitting next to each other, and the footer at the bottom.

Again, you may have made some slight alterations to this in terms of the order, but as long as you have justified it and the layout makes sense, then you've done really well.

So in terms of justifying this design, it is user-friendly.

The navigation is clear, making it easy for students and parents to find information.

It has a logical layout where the sidebar provides quick access to essential links while keeping the main content focused.

And it has a responsive design, so it means that we can utilise it across different screen types.

Let's take a look at the house style.

Again, it may be slightly different in terms of what colours and what fonts you have used, but again, if you've given a good justification as to why you have picked those colours and those texts, then the house style is fine.

So, for the colour scheme, we have got a dark blue, gold, and light grey.

And this is the colour scheme that is used by the school, so we are maintaining the branding.

And there is a good contrast between dark blue and gold to ensure readability.

Fonts, the headers are gonna use Georgia and a serif, and the body text is gonna be Arial and sans-serif.

And again, justification for these, Georgia gives a professional look while Arial is easy to read on screens.

And the layout, the sidebar is going to be on the left with the main content in the centre or to the right, with navigation above it.

And this layout keeps all the important content structured and easy to navigate.

So, for both of these, your solution may be slightly different, but as long as it is the wireframe is producing a logical layout where it would be easy to navigate around the website itself, and the house style shows that the colour scheme is accessible and allows for readability, and the fonts you are using are clear, then it's all good.

So well done with that one.

And moving on.

So now we're gonna be looking at how to create a web page from a planned layout.

When using the <div> tag to create a structure on a web page, the divisions at the moment are stacked on top of each other.

So we would have header, navigation bar, sidebar, content, footer.

And these are called block-level elements.

To create a layout similar to the example or the wireframes that you have created, the divisions need to be able to be placed side by side.

And this is what we call floating.

Let's take a look at floating in a bit more detail.

The floating property in CSS means we can position divisions next to each other.

We can utilise these three different properties.

We can have float: left; where it moves an element to the left of the screen, allowing content to the right of it.

We can float a division to the right, meaning that we can place another division to the left of it.

And we have clear: both; and this stops the floating, and this makes sure that no other elements appear next to those floated elements.

So let's have a look at the float properties in use.

If we have a look at the sidebar style rules, we have got the width of the sidebar being 30% of the screen, so that's how much space it is gonna take up.

We've then got background and padding included, and we've got a float to the left.

This means the sidebar is going to appear to the left of the screen and take up 30% of the screen size.

Content has a width of 65%, and this has got a float to the right.

And this means the content is gonna take up 65% of the screen, and this is going to be positioned to the right of it, which means the sidebar and the content can be sitting next to each other.

Let's take a look at this question.

What would happen if you do not use clear: both; after floating elements? A, the page will crash.

B, the footer or other elements may not align properly.

C, the float property will stop working.

D, nothing will change.

If you need to pause the video so you can read back through the question and decide on your answer, do so now.

So, what do we think? What answer did we get? The answer is B, the footer or other elements may not align properly.

This is because the style rules being applied still think float is being used.

So moving on.

A division can be placed inside another division, and this is what we call nesting.

We can use nesting to group content together.

So the example at the bottom of the slide shows a content division, and inside that content division, we have got a heading division and a paragraph division.

So heading and paragraph are nested within the content division.

So all of those are grouped together, which means we can use one style rule to do the background colour, for example.

So why would we use nested divisions? It makes websites easier to manage when adding or editing content.

It makes applying styling easier.

It keeps titles, images, and text together in organised sections.

So let's have a look at this.

The following shows a nested division with a title and a paragraph within a content box.

Right at the top, we have got our division that is called "content" and this is the content box that is going to hold the other divisions.

Underneath that, we have got a division called "title" and this division holds the heading of the content.

So in this case, Featured Club: Robotics.

Underneath that, we have then got another division that is called "description" and this is holding a paragraph.

And that's a little bit of content about the robotics club.

Both the division title and division description are nested within the division that is called "content." And as always, we need to make sure that we close all of our open tags.

So it would look something like this.

We have got the background colour for the content box set to yellow.

We have got our heading, so Featured Club: Robotics, in a bold text.

And then underneath it, we have got our paragraph.

And as it says there, the heading and the paragraph are contained within the yellow background.

So it is nicely grouped, the heading and the paragraph regarding the robotics club, together in that content box.

So it's a nice section about it.

So true or false? Nested divisions help structure a web page into sections.

If you need to pause the video to read through the question and think about your answer, do so now.

So what do we think? True or false? The answer is true.

By placing division elements inside another division element, developers can create grouped layouts, making it easier to style and organise content.

So let's take a look at task B.

Your school is launching a new enrichment website to showcase extracurricular activities.

You have been given a wireframe layout and a house style to follow.

Your task is to code the web page using HTML and CSS to match the planned design.

And on the right-hand side, you can see the wireframe.

So it's quite simple.

We've got a header, a sidebar that is floated to the left, a main content that is floated to the right, and then a footer underneath.

The house style, the header and footer are both the full width of the web page.

We have a set background colour, a set text colour, and the text being centred.

We have a font size of 24 pixels.

And in the footer only, we need to make sure we add in the clear: both; style rule.

And remember, that is to remove any floating that is going on.

If we then take a look at the sidebar, the sidebar has a float left.

It has a 30% width of the web page.

And again, it has a background and text colour that need to be included.

The main content has a float right, a 65% width of the web page, and has a background colour.

And then for the general styling, the font family used across all content is gonna be Arial and sans-serif.

The text colour has been included, and the main background colour has been included.

So your task is to open up the starter code, use the wireframe to update the HTML code to include the nested divisions and to add structure to the web page, and then, using the house style information, update the CSS file to include the style rules for each section of the web page, including the header, footer, sidebar, and content.

So if you need to read through all that again, pause the video now.

Okay, so how did we do? Let's take a look at our solution.

So, just take a look at a quick snippet of code about how we've done the nested divisions.

Right at the top, we've got a division for our class called "header" and this includes the main heading, so the School Enrichment Programme.

Underneath that, we have got our division for our container, so this is gonna be where our nested divisions are.

Inside that, we've got our division called "sidebar" which houses all the list of activities.

And then right at the bottom, you can see our content division being included as well.

So we're gonna take a look at this in the code editor so you can see how it all works together.

So if we're having a look in the code editor, we can see in the body tag, we have got the division class "header" and it says there it's got the heading School Enrichment Programme.

Underneath that, we have then got our division called "container" which contains our sidebar and then our content.

Inside our content division, we have got the heading and the paragraphs regarding the robotics club.

And then at the bottom of the page, we have got our last division for the footer.

So we need to make sure that we've added all of these in, we have closed our division tags as we've gone through.

So, did you get something similar? Okay, not to worry if it looks slightly different, but this, remember, you did have to do it to match the wireframe as best you could.

So let's have a look at the style rules.

Having a look at the header style rules, some of it was already completed for you, but you needed to add in the background colour and the text colour.

You needed to ensure that the text align was to the centre and that the font size was updated as well.

For the main content rules, we had to make sure that the width was set to 65%, we included the background colour and the text colour, and that we'd made sure that it had a float to the right of the page.

So this is the main content which is gonna appear on the right side of the web page.

And then the sidebar.

Again, we had to set the width, and this time to 30%, include both the background colour and the main text colour, and this time, we have to make sure we floated it to the left.

So this means that the sidebar will be to the left, with the content sitting to the right of it.

So how did we do? Shall we take a look at what the web page should look like when we run the code? So, when we run the HTML code, what we should have is, up at the top, a title or the header, so School Enrichment Programme.

To the left, we have got the activities in the sidebar with that light grey.

And to the right in the yellow box, we have got the main content.

And then down at the bottom, we have got our footer.

So hopefully when you run your code, it will look something similar to this.

If not, you may need to go and check your CSS style rules, and also go and check where you've put the divisions.

If your website is looking very similar to what I've got on my screen, excellent job, well done, you've managed to implement the wireframe and the house style accurately.

So let's move on.

To summarise today's lesson, we've looked at wireframes, which help plan web page layouts, ensuring a clear structure.

House style maintains a consistent look using colours, fonts, and design elements.

The CSS box model controls spacing with content, padding, borders, and margins, while the floating helps position elements side by side for a structured layout.

By combining HTML and CSS, a wireframe can be turned into a working web page.

So I hope from today's lesson, you can see how important it is to use wireframes to help with the initial layout of your web page design, house style to identify colours and fonts that you may want to use, and by having both of these set up, it makes it much easier to code your HTML and implement your CSS.

Thank you for joining me for today's lesson on CSS for layout.

I hope you've got a great understanding of how to go about creating your own website plan and then how to implement it.

I look forward to seeing you in the next lesson.

Bye for now.