Advanced
60 mins
Teacher/Student led
+115 XP

Design and Finish Your Site

Finish your website layout so the most important information appears first to visitors. Plan the content, add a banner, organise with rows and boxes, apply colours and fonts, then check the design before completing the site.

Teacher Class Feed

Load previous activity

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

    Today you finish your site. No new blocks. You use everything you already know: a banner, a row, boxes, and a look for the whole site.

    Key point

    Your job is to lay it out so a visitor sees the most important thing first. By the end, your site should be ready to show.

    2 - Plan It First ~6 mins

    Key point

    Before you touch a block, decide three things. Say them quietly to yourself.

    1. What is this site about? In a few words. That goes on your banner.

    2. What should a visitor see first? The most important thing belongs at the top, under the banner.

    3. What will you change on Home first so it sounds like you? You will do Home first, then your second page.

    Tip

    Keep those three answers in your head. You will use them while you build.

    3 - Build: Banner, Pages and Look ~14 mins

    Open the interactive. Your site is already there.

    Key point

    Do Home first. Use the Done list. Then do the same on your second page (Hobbies, Tips, or whatever it is called in the menu).

    Watch out

    Edit what is already there. Do not add a second banner. Change at least the banner words and one page colour so the site is clearly yours. Only treat a line as done when you can see it on Your web page.

    Done looks like this:

    • Every page has a banner at the very top with words you chose.
    • Both pages use the same banner words so the site feels like one place.
    • You chose a background colour, a text colour and a font on the page block for each page.
    • Every page has a heading under the banner.

    Need help? Work one line at a time.

    1. Banner
    From Layout, drag a banner to the very top if the page has none. Type a few words about the site and pick a colour. If a banner is already there, click it and fix the words and colour.

    2. Same banner on both pages
    Use the same banner words on your second page as on Home.

    3. Page colours and font
    Click the big page block. Change the background colour, text colour and font.

    4. Heading
    From Content, drag a heading under the banner and menu if needed. If one is there, change the words to fit your site.

    Interactive activity

    4 - Checkpoint: What a Visitor Sees First ~4 mins

    Key point

    Stop building. Hands off the keyboard for a minute.

    Open the Your web page tab. Look only at the top of your Home page.

    Ask yourself:

    • What do my eyes land on first?
    • Is that the most important thing on my site?
    • Does my banner tell a visitor what this site is about?
    Tip

    If the answer is no, you know what to fix in the next stretch.

    5 - Build: Rows and Boxes ~14 mins

    Back to the interactive. Now give your site a shape a reader can scan.

    Watch out

    If you already have two topic boxes in a row, only change words, pictures and colours. Do not stack more boxes.

    Edit what is there. Do not add a second banner. Check Your web page against the list. Add only what is missing. Do Home first, then your second page (Hobbies, Tips, or whatever it is called in the menu).

    Done looks like this:

    • The words on both pages sound like you, not the sample sentences about dogs, GAA and tin whistle unless those are truly yours.
    • At least one page has a row with two things side by side.
    • Things that belong together sit inside a coloured box.
    • You have at least two coloured boxes, each with its own colour.
    • A reader can tell where one topic ends and the next begins.

    Row
    Put blocks inside the row, in the empty space on that block, not beside it on the page.
    If you need a row, from Layout drag a row onto your page. Put two blocks inside it. A picture and a text block side by side works well.

    Coloured boxes
    From Layout, drag the Coloured box (the block that wraps a topic). We will call it a coloured box. Move the heading and text for one topic inside it and pick its colour. Add a second coloured box for another topic. Try putting both inside one row so they sit side by side.

    Make it yours
    Change the words so the site sounds like you. Swap pictures from the gallery if you want.

    Tip

    Need a simpler target? One row and two coloured boxes on Home is enough.

    Finished early? Add a second row or stronger colour contrast on your second page.

    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