Creating a Website: First Steps

• New lesson editor
• IT
• Higher Education (degree)
• Further Education (Key Stage 5)

IT9 – Creating a Website

This first lesson should open the unit by making websites feel familiar and purposeful. Keep the focus on simple websites made with graphical tools, not advanced coding.

Expectations

Unit Structure

Unit Summary

Assessment Criteria

Where can website skills take you?

Learning Objectives

By the end of the lesson, learners will be able to:

• Identify the purpose of a website.

• Identify the target audience of a website. 

• Describe what makes a website easy to use. 

• Design a simple website homepage.

What words come to mind when you hear website design?

Use this to surface familiar ideas such as pages, links, images, audience, purpose or layout. Briefly connect student words to the lesson goal of planning and creating a simple website.

What is a website?

A set of pages on the internet, where a company or an organization, or an individual person, puts information.

How important are the websites for college students?

What is a website?

A set of pages on the internet, where a company or an organization, or an individual person, puts information.

What is a Domain Name?

How Does a Website Work?

A domain name is the unique address used to find a website on the internet.

Examples:

• google.com

• bbc.co.uk

• amazon.co.uk

Can you guess why Google and YouTube are at the top?

What is your favourite website, and why?

Different Websites, Different Purposes

What Should We Consider When Designing a Website

Before creating a website, a web designer needs to think about:

🎯 Purpose
Why is the website being created?

👥 Audience
Who will use the website?

📝 Content
What information will the website contain?

What Should We Consider When Designing a Website

Before creating a website, a web designer needs to think about:

©️ Copyright
Do we have permission to use the content?

💻 Usability
Is the website easy to use?

A good website is not just about how it looks. It must be designed for the right purpose and the right users.

Purpose

The purpose will help decide what content and features are needed.

Why is the website being created?

Activity

Compare:

Purpose • Target Audience • Layout • Navigation • Readability • Usability

💬 Discuss & Decide

Which website is better for its target audience? Why?

Suggest one improvement for the other website.

What Content Can a Website Include?

© Copyright and Using Content on Websites

When creating a website, you cannot simply use anything you find online.

Copyright protects work created by other people, such as:

1. 🖼️ Images and photographs

2. 📝 Text and articles

3. 🎬 Videos

4. 🎵 Music and audio

5. 🎨 Graphics and illustrations

© Copyright and Using Content on Websites

Website Usability

Usability means how easy and efficient a website is to use.

A website should help users complete what they want to do quickly and easily.

What Makes a Website Easy to Use?

What is a Layout?

A layout is the way different parts of a web page are arranged and organised.

It decides where things appear on the page, such as:

• Text

• Images

• Menus

• Buttons

• Videos and other content

Before We Build a Website…

A website can have many different pages.

For example, a restaurant website might need:

🏠 Home
🍽️ Menu
ℹ️ About Us
📍 Location
📞 Contact
📅 Book a Table

What is a Sitemap?

Before we start building all these pages, we need a way to organise them and show how they connect. This is called a sitemap.

A sitemap is a simple diagram that shows:

The pages in a website

How the pages are organised

How the pages connect to each other

This begins the move from general website ideas to design work. Emphasise that planning improves quality and saves time later.

What is a Sitemap?

This begins the move from general website ideas to design work. Emphasise that planning improves quality and saves time later.

What is a Sitemap?

This begins the move from general website ideas to design work. Emphasise that planning improves quality and saves time later.

🗺️ Activity: Create a Website Sitemap

You are planning a new website. Choose ONE:

🎮 Gaming Club
⚽ Sports Club
🎵 Music Event
🏫 College Club
✈️ Travel Company
❤️ Charity

Step 1 — Decide the Pages:

What pages will people need when they visit your website?

Choose at least 4 main pages.

Step 2 — Create Your Sitemap:

Start with the Home page at the top.

Then connect your other pages underneath.

What is a Wireframe?

Remember

Layout = how things are arranged

Wireframe = a simple drawing of that layout

✏️ Activity: From Sitemap to Wireframe

You have already planned the pages of your website using a sitemap.

Your Task

Choose ONE page from your sitemap and create a wireframe for it.

Your Wireframe Should Show

⬜ Header
⬜ Navigation menu
⬜ Main content
⬜ Where text will appear
⬜ Where images will appear
⬜ Buttons or links
⬜ Footer

Planning page layouts

• A wireframe is a simple page plan.

• It shows where text, images and navigation will be placed.

• Each page should be designed to support the website’s purpose.

Keep this at a simple level: wireframes are layout plans, not final designs. Avoid overloading with detailed design theory.

What a wireframe can show

• header

• main content

• footer

• buttons or links

• where images and text will appear

Link this to later creation work: students will use these plans when they build pages with software tools.

Adding notes to a design

A website design should include annotations or a short description.

These notes explain:

• how the design fits the audience

• how it supports the purpose

• why content is placed in certain areas

Creating with tools

Websites can be created with different tools:

• WYSIWYG software - visual tools that show the page as you build it

• Text editors - tools for writing and editing code

Because this is an early Level 1 lesson, stress that graphical tools are a main route in this unit, while simple HTML awareness is still useful.

What does a sitemap show?

A

Image sizes

B

Text styles

C

Page links

D

File names

Tests understanding that a sitemap shows pages and how users move between them.

Complete the planning paragraph

Before building a website, you should make a to show the pages in the site. You can also make a to plan where text and images will go. Short explain how the design suits the audience and purpose.

Before building a website, you should make a

to show the pages in the site. You can also make a

to plan where text and images will go. Short

explain how the design suits the audience and purpose.

header

footer

hyperlinks

buttons

Correct blanks are sitemap, wireframe, annotations. The final blank accepts annotations as the taught term.

Why is planning useful before building a website?

Expected elements: planning saves time, organises pages, helps place content, supports navigation, and makes sure the site meets its purpose. Use for brief pair-share or class discussion.

Basic parts of a webpage

• Header - top area, often with title or navigation

• Main content - the key information on the page

• Footer - bottom area, often with extra links or details

Navigation and hyperlinks

Users need a clear way to move around a website.

Common methods include:

• buttons

• text links

• jump-to-top links

• links between pages with hyperlinks

Make the connection to the earlier sitemap slide: the structure is planned first, then built using navigation and hyperlinks.

Content and media

A website can include different types of information:

• text

• numbers

• graphics

• images

• video

• audio

Choose media that helps the user, not just decoration.

Students may want to add too many features. Reinforce that content should support purpose and audience.

Editing and managing assets

• crop and position images carefully

• reduce file size where needed

• save and name files clearly

• store files so they are easy to find again

You can mention that poor file naming and oversized images often cause problems when students build websites.

Simple interactive features

A simple website can include interactive elements such as:

• buttons

• hotspots

• rollover images

These features should make the site easier or more interesting to use.

Do not go deep into setup steps yet. This first lesson should only introduce the idea that websites can include limited functionality.

Which tool lets you build a page visually?

A

Footer

B

WYSIWYG software

C

Text editor

D

Hyperlink

Uses the contrast taught on slide 11. Text editor is a plausible distractor because students may remember it is also a web tool.

Complete the webpage description

A webpage often has a at the top and a at the bottom. Users move between pages using . A site can also include such as buttons or hotspots.

A webpage often has a

at the top and a

at the bottom. Users move between pages using

. A site can also include

such as buttons or hotspots.

wireframe

sitemap

audience

purpose

Correct blanks are header, footer, hyperlinks, interactive features. Reinforces structure and navigation.

Which part of website building seems most important so far?

1

Planning

2

Navigation

3

Media

4

Testing

Using simple HTML tags

Some common HTML tags are used to structure content:

• `<p>` for a paragraph

• `<a>` for a link

• `<img>` for an image

These tags help create and organise a webpage.

Mention that learners may meet these tags even when using graphical tools, because the software still builds webpage code underneath.

Checking and testing

A website should be tested as it is built.

Check that:

• links work

• pages open correctly

• navigation is clear

• spelling and grammar are correct

Frame testing as part of the creation process, not something left until the very end.

Fixing faults

Testing helps you find faults such as:

• missing links

• non-functional buttons

• misplaced content

• spelling mistakes

Faults should be repaired so the site works as intended.

Reviewing the finished website

After building the website, review it in terms of its purpose.

A review should identify:

• whether it meets the purpose

• what works well

• what could be improved

This introduces Learning aim B without turning the lesson into a full review lesson. Keep it as the final stage of the process.

What quality looks like

• A stronger design is coherent and well organised.

• A stronger website functions as intended.

• A stronger review explains how the site meets its purpose and what changes improve usability.

This slide lightly introduces pass, merit and distinction thinking without listing the grading table in full.

Unit example

One example task in this unit is to create a website to promote a college course.

The website would present information for prospective learners and use separate pages for different subjects.

Use this as a concrete preview of where the unit is heading. It helps students connect planning, building and reviewing to a realistic scenario.

What should you check during website testing?

A

Link colour only

B

Page price only

C

Working links

D

Font mood only

Targets slides 17 to 22 on testing, fixing faults and reviewing. Distractors mimic students focusing on appearance only.

Complete the final stage summary

As a website is built, it should be so faults can be found early. After building, you should it to see if it meets its purpose. A strong website as intended and is well organised.

As a website is built, it should be

so faults can be found early. After building, you should

it to see if it meets its purpose. A strong website

as intended and is well organised.

decorate

upload

wireframe

advertise

Correct blanks are tested, review, functions. Last blank is functions as taught on slide 21.

What should a website review talk about?

Expected elements: mention the website purpose, what works well, what could be improved, usability, working links/navigation, and organisation.

What is one thing you learned in this lesson?

Reflection only. Invite short answers about planning, audience, purpose, testing, navigation or wireframes.

What helped you understand website design today?

Reflection only. Useful for identifying which teaching approach supported this group best, such as examples, diagrams or key terms.

Which part of today’s lesson felt hardest?

Reflection only. Use answers to spot misconceptions for the next lesson, especially around purpose vs audience, sitemap vs wireframe, or testing vs reviewing.

Glossary

audience - the group of people a website is made for

purpose - the main job or aim of a website

usability - how easy and efficient a website is to use

sitemap - a diagram showing the pages in a website and how they connect

wireframe - a simple layout plan for a webpage

navigation - the way users move around a website

hyperlink - a clickable link that opens another page or location

Glossary

WYSIWYG - software that lets you build a webpage visually

HTML - the code used to structure webpage content

header - the top section of a webpage

footer - the bottom section of a webpage

asset - a file used in a website, such as an image or video

interactive feature - a part of the webpage the user can click or use

copyright - legal protection for work made by someone else