My checklist
Web Adventures · Week 11

Build a Complete Page

Aim: Organise a webpage into clear sections with navigation.

New coding words

  1. header
  2. navigation
  3. main
  4. section
  5. footer

What the coding words mean

  1. header: The opening area of a webpage, often containing its title.
  2. navigation: A group of links that helps visitors move around a website.
  3. main: The element containing the page’s most important content.
  4. section: A group of content about one topic.
  5. footer: The closing area at the bottom of a webpage.
Code along

Build a Complete Page

This code creates a complete webpage with a header, navigation links, two content sections and a footer.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

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

Explorer Club Website

This code creates a styled Explorer Club website with navigation, three content cards and a button that displays a welcome message.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Use script.js to add actions and make your webpage interactive. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

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.

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.

Save your finished mini project

Select Download my work and save the file as week_11_explorer_club.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

Chi Opara, your course guide

Knowledge check

Question 1

Which element contains the page's main content?

Question 2

Why must the word after # in a navigation link match a section ID?

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

How are you getting on so far?

My checklist

Finished Web Adventures Week 11?

Your completion and mood are saved only in this browser.