How to teach website design in class without coding

Website design is one of the most motivating units you can teach. Pupils make something real, share it with family and see the result of every decision straight away. The usual obstacles are practical rather than pedagogical: email sign-ups, forgotten passwords, half-finished files and no safe way to publish. This sequence removes those obstacles so the lessons stay focused on planning, layout, audience and content.

What pupils actually need to learn

A website unit is not a typing exercise. Across primary and secondary computing, the assessable skills sit in four areas, and each one maps neatly onto a lesson.

• Audience and purpose. Who is the site for, and what should they be able to do after reading it?
• Structure. Splitting content across pages, and linking them with a menu and buttons.
• Layout and design. Choosing sections, image placement, colour and contrast for readability.
• Content and accuracy. Writing clear headings, concise text, and checking spelling and facts.

A six-lesson sequence

Lesson 1: Look at real websites

Open three sites the class knows, a school site, a local attraction and a sports club. Ask pupils to find the menu, the main heading and the first thing the page asks you to do. Record the common parts on the board: header, banner, sections, footer. The vocabulary you build here is the vocabulary you assess later.

Lesson 2: Plan on paper

Before anyone touches a keyboard, pupils sketch two pages: a home page and one other. They label each section with a heading and a one-line description of what goes there. Paper planning is the single biggest predictor of a finished site at the end of the unit.

Lesson 3: Build the home page

Pupils log in, add a banner section, type their title and add a picture. Set a firm finish line for the lesson: a title, an introduction and one image. Work that saves automatically means nobody loses a lesson to an unsaved file.

Lesson 4: Add a second page and link it

This is the lesson where structure clicks. Pupils add an About or Contact page, then use the menu and a button so visitors can move between pages. Ask them to test their own site as a visitor would.

Lesson 5: Design and readability

Introduce colour and contrast. A quick test works well: stand at the back of the room and see whose headings are still readable. Pupils adjust their colour choices and image sizes based on what they can actually see.

Lesson 6: Proofread, submit and review

Pupils swap seats and read a partner's site against the success criteria, then make final corrections and submit. You review each one, send notes back where something needs changing, and approve the sites that are ready.

Success criteria you can mark quickly

• Two pages, both reachable from the menu
• A clear main heading that states the purpose of the site
• At least three sections with headings and supporting text
• One image on each page that matches the content
• Colours chosen so the text is easy to read
• No spelling errors in headings, and no personal details published

Managing the practical side

Three things keep the unit running smoothly. First, logins that pupils can remember and you can reprint. Second, automatic saving, so a lesson ending abruptly costs nothing. Third, a review step: nothing a pupil makes should appear online until a teacher has read it. That last point is usually the one that decides whether a school allows the project at all.

PagePal was built around those three needs. You create a class, paste in your pupil names and print the logins. Pupils sign in with a username and password, no email address anywhere. Everything saves as they type, and each site stays private until you approve it. Read more about pupil accounts and online safety or see how it works.

Extending the unit

Fast finishers can add a third page, write a short accessibility check of a partner's site, or rewrite their home page for a different audience, parents instead of pupils. For an end point, export each site as a PDF and display them, or publish the approved sites and send the links home.