Build a Better Website

Overview

Students extend an existing multi-page HTML website by linking an external CSS stylesheet, adding images, and creating working navigation. The lesson begins with a short typing exercise and builds practical capability through teacher modelling, guided coding, and an individual website improvement task.

Learning intentions

Students will:

develop accuracy and fluency when typing HTML and CSS code
link an external stylesheet to an HTML page
add images using a local file path and an online image URL
create navigation using lists and links between pages
test, debug, and refine a digital outcome for its intended audience

Success criteria

I can link layout.css correctly in the <head> of my HTML page.
I can add two suitable images and use meaningful alt text.
I can create navigation links that open the correct pages.
I can test my website, identify an error, and make an improvement.

Curriculum links

Technology — Digital Technologies: designing and developing digital outcomes for a purpose and audience.
Technology — Technological practice: planning, making, testing, and refining a digital outcome.
Technology — Computational thinking: using precise instructions, structures, and debugging to solve problems.
The lesson supports communication, collaboration, and managing self through purposeful digital production.

Lesson structure (75 minutes)

0–8 min · Do-now typing test. Teacher opens the typing challenge slide and distributes the coding practice and website checklist. Students complete a three-minute timed exercise, accurately typing a short HTML/CSS code sample, then circle any characters or symbols they found difficult. Use a simple passage such as:

<h1>My Website</h1>
<p class="centre">Welcome to my page.</p>

Students record their words or characters per minute and one accuracy goal. Emphasise that coding requires careful typing, not just speed.

8–18 min · Demonstration: connecting CSS and choosing background colours. Teacher uses the stylesheet demonstration slides to model creating or opening layout.css, then adding the following inside the <head> of index.html:

<link rel="stylesheet" href="layout.css">

The teacher demonstrates a simple rule such as body { background-color: #336699; }, saves both files, and refreshes the page. Explain that RGB describes a colour using three values—red, green, and blue—each from 0 to 255. Hexadecimal notation uses six hexadecimal digits in #RRGGBB pairs: the first pair is red, the second green, and the third blue. For example, #FF0000 is red and #336699 is a blue-grey colour. Briefly connect this to Year 9 learning: computers represent data using binary, and these numbers or digits are another way of representing the colour information without needing to calculate the binary values. As a short teacher demonstration, change the background from an RGB value such as rgb(255, 0, 0) to #FF0000, then to #336699, and ask students to predict the visual change. If time allows, students spend 5–10 minutes using a pixel-colour tool such as CS Unplugged Pixel Painter or the CS Field Guide colour/pixel tool to decode or create a few colours, then apply one chosen RGB or hex colour to their website background. This activity is optional and may be shortened if time is limited. Formative checks: “What do the three RGB values represent?”, “Which part of #336699 controls blue?”, and “What change should we expect from rgb(255, 0, 0)?” Students follow along, check that their file names and folder location match, and note one visible change.

18–30 min · Demonstration: images. Teacher models both image methods shown in the reference material: an image saved in an images subfolder and an image linked from a complete online URL ending in .jpg, .png, or .gif. Use the image coding slides to show:

<img src="images/photo.jpg" alt="Description of the photo">

Students add two images between the main content tags, using different methods where possible. They test each image and correct missing files, incorrect paths, or unsuitable dimensions. Discuss why descriptive alt text supports accessibility.

30–43 min · Demonstration and guided practice: navigation. Teacher models adding a list inside the existing navigation tags:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="videos.html">Videos</a></li>
</ul>
</nav>

Use the navigation demonstration slides to model saving copies of index.html as about.html and videos.html, opening each page, and replacing only the content between the main content tags. Students create or check three pages and test every link. Pause for a quick partner check: one student clicks while the other reads the file names and predicts the destination.

43–63 min · Website improvement challenge. Teacher explains the independent task using the improvement challenge slide. Students improve their website by applying CSS to the body, content, footer, or navigation; adding two images; and completing three-page navigation. They must make one deliberate design choice for a specific audience, such as changing colour contrast, spacing, alignment, or hover colour. Students record their changes and any debugging steps on the coding practice and website checklist. Teacher conferences with students, prioritising broken links, unclosed tags, incorrect file paths, and unsaved files.
63–71 min · Peer testing and feedback. Students work in pairs, opening one another’s website and using the testing section of the coding practice and website checklist. Each tester checks: stylesheet connected, two images visible, meaningful alt text, all navigation links working, and a clear design choice. Students give one specific strength and one actionable improvement. The owner makes one quick correction.
71–75 min · Plenary and exit check. Teacher displays the plenary question slide and asks students to explain why a relative path such as images/photo.jpg may fail. Students complete the final checklist response on the coding practice and website checklist: write one line of code they used successfully, identify one error they fixed, and state the next improvement they would make.

Resources

the website coding slide deck
the coding practice and website checklist
Computers for 30 students, ideally one per student
HTML/CSS editor such as Notepad++ or the school-approved editor
Web browser for testing pages
Existing website folders or starter files
Local images subfolder with suitable image files
Projector or interactive display
Shared folder or learning management system for saving work
Pixel-colour tool such as CS Unplugged Pixel Painter or the CS Field Guide colour/pixel tool

Assessment

During demonstrations, check students’ file structure, stylesheet link, image paths, navigation code, and understanding of background-colour notation through questioning and observation.
Ask formative questions such as: “What do the three RGB values represent?”, “Which pair in #336699 represents blue?”, and “How could you make a lighter version of a colour?”
Use the optional pixel-colour activity to check whether students can decode or create colours and apply one accurately as a CSS background colour.
Use the peer-testing checklist to gather evidence of functional links, visible images, meaningful alt text, and purposeful design decisions.
Review the exit response for understanding of relative file paths, debugging, the relationship between HTML structure and CSS presentation, and how RGB or hex values represent colour data.

Differentiation

Provide a starter folder containing index.html, about.html, videos.html, layout.css, and an images folder for students who need organisational support.
Display code one line at a time, colour-code matching opening and closing tags, and provide a printed or digital code scaffold with file names clearly shown.
Pair students strategically for peer testing; allow keyboard shortcuts, zoom, text-to-speech, or additional time for students with learning or motor needs.
Support English language learners with visual demonstrations and plain-language explanations of “path”, “link”, “stylesheet”, “tag”, and “attribute”.
Extend confident students by adding a navigation hover colour, centring a heading or image with a reusable class, or creating a two- or three-column layout while ensuring widths total 100%.

Teaching Instructions