Intermediate
60 mins
Teacher/Student led
+65 XP

Build Your Own Site

In this lesson you build your own website by planning first then creating pages with menus and organised content. You also add an interactive element such as a counter or list that visitors can use.

Teacher Class Feed

Load previous activity

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

    Today you build your own site for real.

    You already know the blocks. You have planned a shape. You have made a counter on a page, and you have made a page take what a visitor types.

    Now you put it all together: at least two pages, a menu on every page, your content in boxes, and one thing a visitor can do.

    2 - Plan It First ~6 mins

    Before you start building, decide four things. Write one short line for each on scrap paper so you can glance back while you build.

    1. What is your site about? One topic only.

    2. What are your page names? You need at least two.

    3. What will a visitor do? Count something, or add something to a list.

    4. What goes in a box on each page?

    Keep those four answers where you can see them. Build that plan, not a different one.

    3 - Build: First Stretch ~13 mins

    Open the interactive. Your site should already be there if you built earlier. If you see a simple starter site instead, that is fine. Build on it.

    Must-have by the pause: two pages, and on each page a menu, a heading, and one box with text inside.

    This stretch is about shape and content. Do headings and menus first, then fill the boxes.

    1. From Page, drag a page block if you still need a second page. Type a clear name for each page.
    2. From Links & buttons, drag a menu block onto every page. The menu finds your pages by itself.
    3. From Content, drag a heading block onto each page. Put it near the top.
    4. From Layout, drag a box block onto each page.
    5. From Content, drag text or subheading blocks into each box so every page has words about your topic. Drop them inside the box until the preview shows them on the coloured area.

    If you have time, you may also add a picture or emoji from Content.

    Check these off when you can see them:

    • Your site has at least two pages.
    • Every page has a menu.
    • Every page has a heading at the top.
    • Your content sits in boxes from Layout.

    Interactive activity

    4 - Checkpoint: Can You Find Every Page? ~4 mins

    Stop building. Hands off the keyboard for a moment.

    Open your site on the Your web page tab.

    Use every name in your menu to move around.

    On each page, check there is still a menu so you can move again.

    Can you reach every page and get back without help?

    If a page has no menu, go back and put a menu block from Links & buttons on that page too.

    5 - Build: Second Stretch ~13 mins

    This stretch is about the one thing a visitor can do.

    Most people should build a counter. Follow the counter path below.

    Order matters: put the counter on the page first, then the button, then the action inside it. If you do it the other way round, the dropdown will say “(add a counter)”.

    Counter path:

    1. From Apps, drag a counter block onto a page. Give it a real name, such as goals or books read.
    2. From Apps, drag a button when clicked block. Type a clear label on the button so a visitor knows what it does, such as Goal!
    3. From Apps, drag a change counter block inside that button. Pick your counter in the dropdown.

    Only do this part if your teacher says your list from earlier is finished.

    Add these in this order. If you add them out of order the dropdowns will say “(add a text box)”.

    1. From Apps, drag a text box onto the page.
    2. From Apps, drag a list box under it.
    3. From Apps, drag a button when clicked under that.
    4. From Apps, drag add text box to list box inside that button.
    5. Type a clear label on the button, such as Add to list.

    Try it yourself on the Your web page tab.

    Check these off when you can see them:

    • A visitor can do one thing on your site.
    • The action uses blocks from Apps.
    • You tried the button and it worked.
    • The thing they do fits your topic.

    Interactive activity

    DigitalSkills.org · 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 DigitalSkills.org 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