Web Adventures · Week 12

Final Quest: My Amazing Website

Aim: Plan, build, test and improve a complete interactive webpage.

New coding words

plan
wireframe
combine
test
accessibility

What the coding words mean

plan: Deciding what a webpage should contain before coding it.
wireframe: A simple drawing showing where webpage content will go.
combine: To bring HTML, CSS and JavaScript together.
test: To try different parts of a webpage and check that they work.
accessibility: Making a webpage usable by as many people as possible.

Code along

Build the starter website

This code combines HTML, CSS and JavaScript to create a complete website with navigation, styled sections, a list and an interactive message button.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage

What will you create?

Select Run my code to see your webpage here.

Mini project

My Amazing Website

This starter code can be personalised to create a complete final website with your own safe theme, text, colours, sections and interactive message.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage

What will you create?

Select Run my code to see your webpage here.

Notice:

This project combines ideas already practised: href="#..." must match a section id, .card styles elements with class="card", and a button’s onclick name must match its JavaScript function. document.getElementById("message").textContent = ... finds the message paragraph and replaces its visible words.

Change the title, heading and section text.
Include at least three sections.
Include paragraphs and a list.
Keep the navigation links matched to the section IDs.
Add an optional grown-up-approved image with useful alt text.
Use pretend information only.
Choose readable colours and fonts.
Style the page background.
Add spacing and borders to the cards.
Make buttons easy to see.
Change the surprise message.
Keep at least one working function.
Make sure the function name matches the button’s onclick instruction.

Your mini-project to-do list

0 of 4 completed

Complete these activities in the mini-project editor above. After each change, select Run my code to check your webpage.

Level 1: Personalise the headings, text, colours and list.Level 2: Add another card or approved image with accurate alt text.Level 3: Add a second button that runs a different JavaScript function.

Save your finished mini project

Select Download my work and save the file as week_12_my_amazing_website.zip. Extract this .zip file to keep your HTML, CSS and JavaScript files together, then open index.html in a browser to view your webpage.

Debugging detective

In your mini-project code: Change showMessage() in the button to showMesage(). Test it, compare the spellings and repair the function call. Select Run my code after each change to check your webpage.

Test your amazing website

Every opening HTML tag has the correct closing tag when one is needed.
All navigation links move to the correct section.
All buttons work.
Images load and have useful alt text.
Text is easy to read.
The page works in both wide and narrow Preview modes.
No private information appears on the page.
The editable .zip copy has been downloaded.
A grown-up checks the page before it is downloaded or shared.

Knowledge check

Question 1

Which language controls a webpage's appearance?

CSSJavaScript

Question 2

Name one test you should complete before showing your website to someone else.

Your answer

Your answers are checked in this browser and are not submitted.

How are you getting on so far?

My checklist

Finished Web Adventures Week 12?

Your completion and mood are saved only in this browser.