Lesson video

Hi everyone.

My name is Mrs. Welsh.

Still be learning about how to approach a web-based project.

This is part one of two lessons.

Don't worry if this is all new to you.

I'll be here to guide you through each step.

So let's get started.

Welcome to today's lesson from the unit HTML Programming Projects.

This lesson is called Web-Based Project Part 1.

By the end of today's lesson, you'll be able to plan and build a structured website using HTML for content and CSS for styling, applying key web design principles.

Before we begin the lesson, we'll just go over some keywords and we'll be looking at user requirement, this is something that the target audience wants in relation to the product.

And semantic HTML, these are HTML elements that clearly describe their meaning and role on a webpage.

Let's get going.

During the lesson, we are going to plan a website using design tools, create a website using structured HML elements, and use CSS styling to enhance the website design.

Well first of all, let's have a look at how we would go about planning a website.

So before we create a website for a specific purpose, you must identify the user requirements.

User requirements are what the target audience wants from the website.

The project brief will include information about what your website needs to do and what it should look like and who it is for.

User requirements are created using this information.

When developing a website, it is important to understand the user requirements.

To work these out, the developer must carefully read the project brief.

The developer needs to look for keywords that give details about the purpose: so why is the website being made? The audience: who will be using the website? The content: what information should be included? Features: what technical parts are expected? Design: what it should look like or feel like? And accessibility: what features will make the website usable by as many people as possible? Let's have a look at a practise project brief.

Your school's environmental club is launching a campaign called Eco-Friendly Choices to encourage students to live more sustainably.

They've asked you to help create a website that helps other students learn about environmental issues like plastic pollution and wasting energy.

The website should appeal to a school audience, so it needs to be clear, engaging, and student friendly.

The club hopes to include an interactive element like a quiz or a checklist to make the site more useful.

They also want the website to be accessible to all students, including those using screen readers or other assistive tools.

Let's go through and highlight the important parts.

So we've got tips for the environmental club and they'll launch in a campaign.

It is to encourage students, so again, that means we have the audience, so it is the age range of say 11 to 16.

We've got the purpose to help other students learn about environmental issues, and we have two clear topics included as well.

We've got that needs to be clear, engaging and student friendly.

Talks about the type of styling we could consider, so clear fonts, the use of, you know, bold colours.

It's for the school, so you may want to include the school branding on this as well.

It wants to include some interactive elements, and again, it gives a couple of examples of what kind of interactive elements could be included.

It also talks about accessibility.

So we may need to be thinking about how to utilise things called alt text using sections within our web pages to make it easier for assistive technologies.

From reading the project brief, we will then look at developing the user requirements and we will write these as a short set of statements.

And generally, user requirements will start with either the website must or the website should.

If we look at the practise brief, certain user requirements could be: The website must raise awareness about environmental issues.

The website should be suitable for ages 11 to 16.

The website must include at least one interactive feature using JavaScript.

The website must include at least three web pages.

The website must use consistent colour, fonts, layouts to follow a house style based on the school branding.

The website must include alt text for images and use readable font sizes and clear navigation.

So we've got that from the project brief that we were given and by highlighting those key points.

Let's have a look at a question: Which of the following is a user requirement based on the Eco-Friendly Choices project brief? A.

The website should add background music.

B.

The website must include at least one interactive feature using JavaScript.

C.

The website must only use one webpage.

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

Okay, which one do we think it is? A, B, or C? If you got B, you are correct, that is one of the user requirements that was specified in the project brief.

If you've got B as your answer, excellent job, well done, and let's move on.

So use requirements help with the creation of the site map, the wireframe and the house style.

And if you remember, a site map shows the structure of the website.

A wireframe is a simple sketch of the webpage layout.

A house style identifies the colours, the navigation, key images and fonts that need to be used.

And each of these items should reflect the user requirements.

Let's take a look at what the site map may look like.

So we will have our homepage and then we will potentially have a page on some eco tips and we may have an interactive quiz.

And the user requirements state: The website must raise awareness about environmental issues or that'll be under our eco tips.

The website must include at least one interactive feature using JavaScript.

We've got an interactive quiz page.

And it must have at least three web pages.

We've got the homepage, the eco tips page, and the interactive quiz.

So we've got our three webpages there.

So we can see the site map matches our user requirements.

If we take a look at the wireframe, again, we've got a nice simple wireframe example on the right hand side of the slide where the navigation bar is at the top.

We've then got the header, some content buttons, additional content, and a footer.

And as the user requirements state, the website should be suitable for 11 to 16.

So again, everything is very clear.

The website must use consistent colours, fonts, and layout and follow a house style based on the school branding.

And again, the website is clear in terms of the navigation bar is always gonna be at the top, followed on by the additional sections.

And the website must include alt text for images and use readable font sizes and clear navigation.

And again, that clear navigation as the bar is at the top.

And if we take a look at the house style, again, using that project brief, we've sectioned it out into maybe the main colour, the secondary colours we may use, a background colour and a text colour.

And we've picked the colours from the school branding, so our main colour is gonna be this leaf green followed with any light blue.

Background colour is gonna be white and our text colour is gonna be a charcoal, so quite a dark colour.

We've picked the white background colour with a dark text colour for that easy to read contrast, and again, it provides a high contrast for readability.

Moving on to looking at the fonts, we are using things like san-serif fonts.

These are clear, they are web-safe and for most it is easy for students to read.

And we've put some ideas about how big headings will be.

Headings will be bold, a minimum of say 18 pixels, and the body text is gonna be regular in terms of the weighting of it, so just normal text and a minimum of 14 pixels.

So it's big, but not super big on the screen.

We've got some information about navigation.

They're gonna have the same menu on every webpage, have clear webpages named "Home," "Eco Tips" and "Quiz." And we could also potentially highlight the current page in the navigation, but that could be an optional thing we might add in at the end.

And in the layout, we are gonna have the header on every page with the school logo in the top left, the navigation menu in the top right, and have a footer with page links and an accessibility note.

Looking at accessibility, all of our images are gonna have alt text, make sure we're gonna use headings to organise our content and ensure that text contrasts strongly with our background.

How this is matched up to our user requirements: The website should be suitable for 11 to 16.

We are utilising the school branding.

We are using clear fonts and clear colours.

The website must use consistent colours.

We have picked things from, again, the school branding.

And the website must include alt text for images and use readable font sizes and clear navigation.

All have been included in our house style when we've spoken about how we are gonna use fonts, how big the fonts are going to be, and so on.

So there's quite a lot we have to think about when we are designing our website based upon what our user requirements are, so we always have to make sure we are keeping them in mind.

Let's have a look at a question.

Which of these would not be found in a wireframe? A.

The layout of content on a page.

B.

The navigation menu position.

C.

The final colours and fonts.

D.

The placement of a quiz button.

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

What do we think the answer is, A, B, C, or D? The answer is C.

Wireframe focuses on the layout, not the final design choices like colours and fonts.

Okay, everything else, so A, B, and D are all things we might place on our wireframe.

Let's have a look at Task A.

The project brief that you are going to use for this website project.

So this is for this lesson and the following lesson.

Your school's digital leaders group has asked you to create a website to help students learn how to stay safe online.

The website will be shown during safer internet week and needs to explain risks like sharing personal information, talking to strangers online and spending too much time on devices.

So already you've got quite a bit of information there about certain user requirements, like the number of web pages you may need, who the audience is and what it is gonna be used for.

The website should be suitable for a school audience with design that is easy to use and styling that makes it recognisable as part of the school.

The digital leaders would like it to include something interactive such as a message that updates or a clickable element that shows additional content.

They have also asked you to make sure that the website is accessible to all users, including those with visual or reading difficulties.

So again, reading through that second part, we have quite a lot of information that could help us decide upon our user requirements.

So what you need to do is create the following planning documents for the project brief.

1.

Create a user requirement list, identify what the website must and should include based on the scenario.

2.

Draw a site map to show how the web pages will be organised.

3.

Create a wireframe sketch showing the layout.

And 4.

Produce a house style guide that describes the colour scheme, fonts, layout rules and accessibility choices.

Make sure the choices you make suit the user requirements.

If you need to pause the video to go back through the scenario and read through the task again, do so now.

If you need any additional help, you can have a look at the following: The website also needs to include: One interactive feature using JavaScript.

Use a clear layout and a consistent house style.

Include at least three pages with working navigation and follow basic accessibility rules like alt text and clear font sizes.

Okay, so if you've done your user requirements, have a read through of this slide just to see if you've missed anything out.

Moving on, let's have a look at some potential solutions.

User requirements: The website must include information about how to stay safe online.

Include at least three web pages.

Be suitable and engaging for students aged 11 to 16.

Include an interactive feature.

Be easy to navigate.

Be accessible for all users.

You may have got some others, they may be worded slightly differently, but as long as you've got those key points that the website must do these particular things, you are well on your way to having a full list of user requirements.

And the website should have a consistent colour scheme and layout and work well on different devices.

So again, if you've got any additional things that the website should do, again, good job, well done.

There are quite a lot of user requirements we need to keep in mind when we are developing our webpage documents.

So let's take a look at the site map.

So an example of the site map will be, we will have our homepage and from our homepage we may have pages called Protecting Personal Info, Online Gaming Safety, Social Media Safety, How to Report, or maybe go and find additional support.

You may have called pages something slightly different, but as long as you have got at least three web pages within your site map that are covering online safety information that has been mentioned in the project brief, well done.

The wireframe again, is an example, so yours may look slightly different.

We have got the logo and navigation bar at the top, followed on by what would be the header or the main heading for the webpage, some content, space for buttons, a second content box and a footer.

Again, this is just an example, your wireframe might be slightly different, but remember it just should be a simple sketch, giving an idea of what the webpage layout will look like.

This has nothing to do with what the content is or what the styling is.

It's just a base, a simple sketch.

Moving on to have a look at the house style.

So the colours, and again, dependent on your school colours, this may be slightly different to what the solution shows.

So do remember this as an example.

We have got dark blue and a bright yellow.

These are the main school colours in this example.

We are using a white background because it provides a high contrast, and the fonts we use are Aerial and san-serif because they are web safe and they are quite easy to read.

Again, your fonts may be slightly different, but as long as you've picked web safe ones that are easy to read, that is fine.

Moving on, in terms of the layout, we've got the layout with the header, the content and the footer.

The reasoning being, it helps the students find the information quickly, we know all the pages are set out in the same way.

The navigation, it's positioned at the top of each webpage next to the school logo.

This makes it easier to locate on each webpage.

Again, your design might be slightly different and that's okay as long as you have your reasoning for it.

And finally, accessibility.

Using alt text for images, clear headings and a high contrast.

This makes the website usable for most people and it also will help those using screen readers.

So how did we do? There was quite a lot to do in that task from identifying the user requirements through to doing all those planning documents.

So as long as you've got a good idea about what your user requirements are, what you need to be including regarding the site design, what you think the webpage layout is going to be, and you've got an idea about your colour scheme and the fonts you are going to use, then you've done really well.

There's quite a lot to do in this first task, but all of these documents are gonna help you when you start to build the website.

So moving on, we're gonna start having a look at how to start putting this website together.

Let's take a look at what this semantic HTML is.

So semantic HTML uses meaningful tags to describe content and the structure of a webpage.

Semantic HTML helps developers understand the code.

Web browsers and screen readers interpret the content.

And it also helps search engines improve search results.

By using things like the generic <div> tag, which is what we've done already for sections on a webpage, it can cause problems to the web browser when it's displaying it.

So we have some examples of semantic HTML tags on this slide.

We have got a <header> tag and that will serve as the top section of the page, which may contain the logo and the navigation.

We have got a tag which is called <nav>, and again, contains the navigation links.

<Main> holds the main page content.

<Section> will group related content together.

And a <footer> will serve as the bottom part of the page, and this again may contain links or some additional information about the website.

So if we take a look at an example of how this would work, we have got <header> as the example being used here, and this identifies the content of the header section.

Inside there, we have got the <h1> heading, which is the heading for this particular webpage.

And you can see there it says eco-friendly choices.

And then we are using another semantic HTML identifier and this one is called <nav>, and this is gonna identify the navigation section within the header sec.

We can then see that we have got four links, which are gonna make up our navigation section.

And we've got the links to each of the webpages that we are gonna create within this project and we have got the names of the links that are going to be displayed.

We've then got the closing tag for navigation and then the closing tag for the header.

Let's have a look at a question.

Which of the following is the most appropriate semantic tag for wrapping website navigation? A.

<div>.

B.

<nav>.

C.

<section>.

Or D.

<main>.

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

So what do we think, is it A, B or C or D? The answer is B.

Using <nav> identifies what part of the webpage this is for.

So remember the question says, what is the most appropriate semantic tag for wrapping website navigation? So the key word there was navigation.

Okay, so if we got that right, well done.

Let's move on.

Let's look at Task B.

Using the site map, wireframe and user requirements, create the HTML structure for the Staying Safe Online website.

You need to include a separate HTML file for each webpage.

Semantic tags to identify sections of each webpage, a working navigation bar, headings that match each webpages purpose and relevant content for each webpage.

Now to read back through the task, do so now.

Let's take a look at a possible solution.

So for this bit we are looking at the body tag on our main page.

And here we have got our <header>.

So we've used a semantic tag to identify our header.

And within there we have got our <h1>, which is our Staying Safe Online heading.

And then we've also got our navigation semantic tag as well.

And in there, and we've got a list of the webpages and the links that are going to make up the navigation for our website.

And then at the bottom again, we have got each of the open tags being closed.

An example looking at the main section.

So this time again, we are still within the body tag, but we are creating the main content of the webpage.

And inside there we have then got two separate sections.

The first section is a welcome message and telling us what the webpage is about.

And then the second section is looking at why online safety matters.

And again, it has then got a paragraph of information.

And again, we have then got each of the open tags closed.

So both sections are closed and then the main section is then closed right at the very end.

So again, this page is used semantic tags to identify the different parts of the webpage.

If we're to have a look at the full code for the webpage, this one is looking at the index.

html.

We have got the header at the top with the title for the website itself.

We've then got our body tag.

In our body tag, you can see we've got the header section sitting in there, so that's our semantic HTML tag.

And in there we've got our heading one for Staying Safe Online, followed on by our list for the navigation.

And you can see that displayed on the right hand side of the screen in the preview.

We have got our big Staying Safe Online heading followed by the list for our navigation bar.

You may not have done it this way, you may have the navigation bar running horizontally rather than a list.

As I said, that is completely personal preference regarding the design of your website.

And if we move further down the website, we can see we've got underneath our header, we've got our main section which has got a little bit of information about the welcome to the site, why online safety matters.

And then at the bottom we've got our section called footer where again, we've got a little bit of information about the year and who it has been designed for.

And as you can see, at the moment, it is just the default stylings of HTML because we haven't added any CSS to it as yet.

So yours may look slightly different, the content may be different, but as long as you have got the pages running.

And as you can see, I've got an index page, a gaming page, a social media page, and a support page.

So again, as long as you've created enough pages to satisfy the user requirements, you've done really well.

For the third part of this lesson, we are going to use CSS styling to enhance our website design.

If you can remember, cascading style sheets or CSS are used in the creation of websites because they improve how our website looks and feels for the user.

A house style keeps the design consistent and professional.

Colours, fonts and spacing should match the purpose in the audience.

And good styling improves readability and user experience.

So when creating CSS for a website, we must consider the user requirements.

This means you should be thinking about the colours, the font, and the spacing.

Webpages on a website will use the same CSS rules to give a uniform appearance.

So an example of a CSS created from a house style, we have got our body.

So in here for the body of our website, we are going to use the font family of Aerial and san-serif.

We are going to use one background colour and then we are gonna have a colour set for the text as well.

And then for the header, we are gonna have a slightly different background colour.

We are going to have the colour of the text being white and we are going to include some padding around the header.

And we are going to include some padding around the header, so the text or the navigation or whatever content is within the header is not too pushed to sort of like the edges of the webpage in itself.

Let's take a look at the following question.

Which of the following statements are true? A.

CSS only changes the colours of a website.

B.

A consistent house style makes a site look more professional.

C.

Fonts and colours should be chosen randomly.

D.

Good styling makes it easier for users to find and read information.

So which of those do you think are true? If you need to pause the video to think about the answer and read back through it, do so now.

Let's have a look to see what the answer is.

B and D.

B.

A consistent house style makes a site look more professional.

And D.

Good styling makes it easier for users to find and read information.

Did you get both of those? Do remember to make sure you read the question carefully because it does say following statements, so it's possibly looking for more than one.

So if you've got both of them well done.

If you've got one but not the other, still a good job, just make sure you do read the question carefully.

So let's move on.

Task C, you'll now write the CSS for the Staying Safe Online website.

CSS must use the colours, font and layout ideas from Task A, make the website accessible and readable and follow the planned house style.

CSS should include background colour, font settings, main content styling, header and footer stylings, navigation styling, and consistent spacing.

For this task, you need to use your house style guide from Task A along with the HTML code you've written from Task B.

You need to make sure that you are adding any of your CSS rules into the correct file in the code editor, making sure that you have covered all of the house style rules from your guide.

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

Let's take a look at a possible solution.

So looking at the body CSS, we have got the font family of Ariel and san-serif.

So again, we've used the fonts from the house style.

We've got margins and padding, both set zero.

We've got a background colour and the background colour is light.

And again, we've got a colour for the text, which is in contrast to the background colour we have included.

If we have a look at the header CSS rulings, we have got a dark blue background colour.

The text colour is white, so this again, is gonna provide a stark contrast, making it easier to read.

We have got some padding information and in this, we have also aligned the text for it to be centre.

So remember, you could go back over some of your previous work to have a look at some CSS rules you have set up before.

So how did you do? Have you managed to get your house style implemented on your HTML website that you created in Task B? Did you have to make any changes when you looked at the colours and the fonts? Did it all display properly? If you've managed to get your CSS working well with your HTML code, excellent job.

Well done.

This was quite a big task to undertake in this lesson.

On the page, we're just gonna take a look at a possible solution and you can see how it's also displaying.

You can see that we have changed our minds about the navigation bar and we've got it running horizontally rather than vertically.

It looks much better.

The body, we have got Aerial and san-serif as our text, which you can see displayed.

We've got margin and padding being included, our background colour and the colour of our text, so we have got a high contrast.

For our header, you can see we've got that sort of mid blue kind of colour.

The text is white.

So again, we are keeping with that high contrast and the text is also central.

And then, if we take a look at the navigation bar, we have got a background colour, which again is a slightly darker blue and all the content is centred.

If we continue, we've got some additional navigation information around the colour of the text.

And again, the footer has got a CSS style allocated to it as well.

Again, with the colour matching that of the header, again, the text colour matching that of the header, the text being centralised and making sure that we have got some padding so text is not squished into the box.

So again, if you've got something that works in a similar kind of way that your colours are working, the fonts have changed to the correct font that you've selected and the headings are appearing as you anticipated, you've done really well in today's lesson to get a working website.

So to summarise, good planning, which includes wireframes, site maps, house style makes a website easier to build.

The use of semantic HTML helps structure content clearly for users and screen readers.

A consistent how style improves readability and user trust.

And CSS brings your website to life with colour, layout and design.

So I'm hoping you've enjoyed today's lesson where you've been able to go and build a website using a scenario, and also adding in the CSS.

I'll hope you join me for the next lesson where I'll be adding interactivity to our website.

So see you next time.