Today you get a small two-page site about hobbies.
You will put a banner across the very top of each page. A banner is a coloured strip with a short title. It tells a visitor, in one glance, what the site is about.
By the end, both of your pages will share the same banner at the top.
First lesson of the module. Every pupil (or pair) needs a device. The Web Page Builder opens on a ready-made two-page site (Home and Reading), so a class new to the interactive can start here.
Model on the board how to switch between the Blocks and Your web page tabs before pupils begin. Do not send anyone to Start again: it is not a clean slate.
Work saves by itself. The site will still be there next time when pupils open this course again.
This lesson uses a tighter 10-step shape on purpose: words and colour sit in one Home beat, and the match checks sit inside the Reading beat, so pupils get fuller builder time instead of extra near-identical loops.
Look-for: pupils talking about what a visitor would notice first, not only about colours.
When someone opens a web page, their eyes go to the top first.
In about one second they decide: is this page for me?
A banner sits across that top strip. It holds a few words and a colour, so the visitor knows what the whole site is about before they read anything else.
Later today you will find the banner in Layout, place one on each page, write short words on it, and pick a colour so both pages match.
Keep this short and spoken. Hold up a real-world parallel if it helps: the big title on a library display, a club poster, or the header on a school newsletter.
Tell pupils the banner's colour comes from the block's own colour dropdown. It does not come from the CSS tab. That matters later in the module, so plant it calmly now without a long explanation.
Open the interactive activity. Your site is already there. You do not need to find it.
Click the Your web page tab so you can see the page, not only the blocks.
You have two pages: Home and Reading.
On the page preview, click Home or Reading in the site menu to open each page.
On Home, look from the top down. What does a visitor see first right now?
Before you add anything, predict:
Circulate and listen. Good answers sound like "My Hobbies", "After School", or the pupil's own short title. Steer away from long sentences.
After the look-around, take 30 seconds on the predict questions. Ask two pupils to answer each bullet. Do not confirm the "right" answer yet; the build will test their prediction.
Name the difference once if anyone clicks the builder tabs by mistake: Blocks and Your web page are the builder tabs; Home and Reading live in the site menu on the preview.
Optional pair talk (keep it spoken, one minute): what short words could sit at the very top to say what this whole site is about?
If a pupil's canvas looks empty, check they are on the right lesson tab in the builder. Do not use Start again as a fix unless the workspace is truly broken, and warn that saved work will return on top.
Click the Blocks tab. Click the big page block labelled Home so you are editing that page.
From Layout, drag a banner block onto the Home page.
Drop it at the very top of the Home page, above the menu block.
If it lands in the wrong place, drag it up until it sits first.
Click the Your web page tab. You should see a coloured strip across the top that says Banner.
Model the page-block click first: on the workspace there are two big page blocks, Home and Reading. Clicking Home means the next drag goes onto that page.
Then model the drag once on the board: palette Layout, then banner, then place it above menu.
Common snag: the banner sits under the heading instead of at the top. Say pull it to the very first slot on the page.
Another snag: pupils drag a coloured box (card) by mistake. The banner is the wide strip block in Layout, not the box block.
Click the Blocks tab. Click your banner block on the Home page.
On the banner block, click the word Banner and type a short title instead.
Use a few words only, not a full sentence. For example: My Hobbies.
On the same block, pick a colour from the colour dropdown that fits your site and still makes the title easy to read.
Click the Your web page tab. Check the top strip shows your words and your colour.
Keep titles short. If a pupil writes a long sentence, ask what three words would still tell a visitor what this site is?
It is fine if many pupils keep "My Hobbies". The skill is choosing on purpose, not inventing something fancy.
Reinforce once, calmly: banner colour is chosen on the block. Pupils who open CSS looking for the banner colour will not find a useful control, and nothing they change there will recolour the banner. Do not name CSS to the class unless someone goes hunting there.
If two pupils argue about the "right" colour, remind them the test is whether the title is still easy to read.
If someone tries to click the coloured strip on the preview, point them back to the Blocks tab first.
Optional 20-second partner glance before the next step: pupils show a classmate their banner words and colour on the preview, then sit ready for the Reading page.
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.