Intermediate
40 mins
Teacher/Student led
+125 XP

Build a Small Website

Combine your knowledge of HTML and CSS to create a small multi-page website about a problem you investigated. The site will feature a home page explaining the issue and additional pages with data or ideas, linked by a menu.

Teacher Class Feed

Load previous activity

    1 - Start: What We're Building ~3 mins

    Illustration for Start: what we're buildingEverything from the last three lessons, on one site of your own: the problem you investigated and pitched, explained well enough that someone who knows nothing about it would understand why it matters.

    Getting started: the Web Page Builder appears on the build steps further down, already holding a Home page with a heading and a sentence on it. Blocks and code both count — use whichever gets you there.

    2 - What Your Site Needs ~4 mins

    Aim for this shape:

    • A home page that names the problem in plain language and says why it matters to people near you.
    • At least one more page going deeper: your data, who is affected, or an idea for how a program or website could help.
    • A menu so a reader can move between the pages.
    • Styling that makes it readable.

    Keep the writing short and use real details from your investigation. Two well-written pages beat four thin ones.

    3 - Write Your Home Page ~6 mins

    The builder below opens on a Home page with a heading and one sentence already on it. Make them yours.

    1. Click the heading block and type the name of your problem, in plain words.
    2. Click the text block under it and say what the problem is.
    3. From Content in the palette, drag a second text block underneath and say why it matters to people near you.
    4. If it helps a reader, add a list from the List category with two or three facts from your investigation.

    Use the Your web page tab to see it as a reader would.

    Interactive activity

    4 - Add Your Second Page ~5 mins

    A site is more than one page.

    1. Click Page in the palette and drag a page block onto an empty part of the workspace.
    2. In its name box, type a clear name, for example Data or Who it affects. You will need that exact name in a moment.
    3. From Content, drag a heading and a text block into the new page’s content mouth, and fill them in.

    Here is what a second page looks like before you fill it in:

    {"blocks": {"languageVersion": 0, "blocks": [{"type": "web_page", "fields": {"NAME": "Data", "BG": "lightblue", "FG": "navy", "FONT": "sans-serif"}, "x": 10, "y": 10}]}}

    Interactive activity

    5 - Link Your Pages with a Menu ~5 mins

    A reader needs to get between your pages.

    1. Click Links & buttons in the palette and drag a menu block to the top of your Home page, just under the heading. It makes a link to every page in your site automatically.
    2. Drag a second menu block onto your other page too, or a reader lands there and cannot get back.
    3. Test it: open the Your web page tab. Before you click a link, say which page you expect. Click it, then click back.

    Checkpoint — stop here until this works. Two pages, and links that go both ways. Do not start styling until they do.

    Interactive activity

    123learn · Online learning platform

    Unlock the full learning experience

    You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

    Hundreds of curriculum-aligned lessons
    Interactive activities in every lesson
    Printable resources & progress tracking
    Copyright Notice
    This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more