Learning objective
Web Design & Publishing
Creating a Website
1
2
3
4
5
6
Learn to plan, build, and publish your very own website using free online tools. From wireframing to going live, discover how digital creators share their ideas with the world.
What is a Website?
Students explore what makes a great website by examining real examples and identifying features such as navigation, pages, purpose, and audience.
Let's Go!
Routine: See, Think, Wonder
Look at this website screenshot. What do you SEE on the page?
What do you THINK it is for?
What do you WONDER about who made it?
Learn
Websites are like digital houses — every great one has a clear front door (the home page), easy-to-follow signs (navigation), and a reason for existing (its purpose)! The best websites know exactly who they are talking to — their audience — and design every page just for them. As you explore real websites today, put on your detective hat and hunt for the features that make them brilliant!
🏠 Page: Home
My Website
Welcome to My Website!
Tell the world what your site is about.
🖼️
Click to change image
Click to change image
3 blocks on this page
Try it yourself
Website Detective Mission
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Can name at least one feature of a website (e.g. a menu or a home page) with support.
Developing
Can identify two or more website features and explain what they are used for.
Secure (Goal)
Can explain how navigation, purpose, and audience work together to make a website effective.
Mastery
Can compare multiple websites, evaluate their strengths and weaknesses, and justify what makes one better than another.
👀 What A Good One Looks Like (WAGOLL)
Exemplar of 3
⭐ Secure Standard
⭐ Mastering Standard
⭐ Secure Standard📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Can name at least one feature of a website (e.g. a menu or a home page) with support.
- Developing: Can identify two or more website features and explain what they are used for.
- Secure: Can explain how navigation, purpose, and audience work together to make a website effective.
- Mastering: Can compare multiple websites, evaluate their strengths and weaknesses, and justify what makes one better than another.
Curriculum links
Curriculum strand: Create & Design
Outcome: WEB.01.B.1.1 — Identify key features of effective websites including navigation, purpose, and audience.
PYP: Form · Digital spaces can be designed to communicate ideas, express identity, and connect people across the world.
Learner profile: Inquirer
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 2: Plan Your Site
Complete the previous learning check to unlock this next level.
Plan Your Site
Students learn that all great websites start with a plan. They sketch a wireframe for a 3-page site (Home, About, Contact) using pen and paper or Google Drawings.
Learning objective
Learning About: the concept of wireframing as a planning tool for website design. Learning To: create a simple wireframe showing the layout and content of three web pages. Learning To Be: Thinker.
Let's Go!
Routine: See, Think, Wonder
Here is a wireframe sketch for a website. What do you SEE in the boxes and labels?
What do you THINK this website will look like when it is finished?
What do you WONDER about why designers plan before they build?
Learn
Every incredible website you have ever visited started as a simple sketch! A wireframe is like an architect's blueprint — it maps out where everything will go BEFORE you start building. Professional web designers always wireframe first because it saves loads of time and helps them think clearly about what their visitors need. Today you will plan a 3-page site: a Home page that wows visitors, an About page that tells your story, and a Contact page so people can reach you!
🏠 Page: Home
My Website
Welcome to My Website!
Tell the world what your site is about.
🖼️
Click to change image
Click to change image
3 blocks on this page
Try it yourself
Blueprint Builder Challenge
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Can draw a basic box layout for one page of a website with support.
Developing
Can create a wireframe for at least two pages, showing where content and navigation will go.
Secure (Goal)
Can produce a clear 3-page wireframe with labelled sections for navigation, headings, content, and images.
Mastery
Can create a detailed wireframe that considers user experience, explains design decisions, and links pages logically.
👀 What A Good One Looks Like (WAGOLL)
⭐ Secure Standard📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Can draw a basic box layout for one page of a website with support.
- Developing: Can create a wireframe for at least two pages, showing where content and navigation will go.
- Secure: Can produce a clear 3-page wireframe with labelled sections for navigation, headings, content, and images.
- Mastering: Can create a detailed wireframe that considers user experience, explains design decisions, and links pages logically.
Curriculum links
Curriculum strand: Create & Design
Outcome: WEB.02.B.1.2 — Create a wireframe plan for a simple 3-page website showing layout, navigation, and content areas.
PYP: Function · Planning and structure are the foundation of purposeful digital communication.
Learner profile: Thinker
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 3: Build with Google Sites
Complete the previous learning check to unlock this next level.
Build with Google Sites
Students use Google Sites to create and publish a real multi-page website, adding text, images, and navigation based on their wireframe plan.
Learning objective
Learning About: how Google Sites works as a free website builder tool with a simple drag-and-drop interface. Learning To: create a multi-page Google Site with text, images, and working navigation links. Learning To Be: Risk-taker.
Let's Go!
Routine: See, Think, Wonder
Here is the Google Sites editor screen. What do you SEE in the toolbar and the editing area?
What do you THINK each button or panel does?
What do you WONDER about how easy or hard it will be to build your first website?
Learn
You have planned, and now it is time to BUILD! Google Sites is a free, beginner-friendly website builder that lives right inside your Google account — no coding needed! You can add pages with a single click, drag images and text wherever you want them, and set up a navigation menu so visitors can explore your whole site. By the end of today you will have a real, published website that anyone in the world with the link can visit — how incredible is that?!
🏠 Page: Home
My Website
Welcome to My Website!
Tell the world what your site is about.
🖼️
Click to change image
Click to change image
3 blocks on this page
Try it yourself
Site Builder Sprint
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Can create a single page in Google Sites with a title and some text with teacher support.
Developing
Can create two or more pages in Google Sites and add basic text and at least one image.
Secure (Goal)
Can build a complete 3-page Google Site with text, images, and a working navigation menu, and publish it.
Mastery
Can build and publish a polished Google Site that closely follows the wireframe plan, with consistent formatting and purposeful content on all pages.
👀 What A Good One Looks Like (WAGOLL)
⭐ Secure Standard📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Can create a single page in Google Sites with a title and some text with teacher support.
- Developing: Can create two or more pages in Google Sites and add basic text and at least one image.
- Secure: Can build a complete 3-page Google Site with text, images, and a working navigation menu, and publish it.
- Mastering: Can build and publish a polished Google Site that closely follows the wireframe plan, with consistent formatting and purposeful content on all pages.
Curriculum links
Curriculum strand: Create & Design
Outcome: WEB.03.B.1.3 — Build and publish a basic Google Site with multiple pages, text, images, and a working navigation menu.
PYP: Connection · Digital tools give us the power to build and share our ideas with a global audience.
Learner profile: Risk-taker
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 4: Build with Canva
Complete the previous learning check to unlock this next level.
Build with Canva
Students use Canva's website builder to create a visually striking website, exploring templates, drag-and-drop design, and content sections.
Learning objective
Learning About: how Canva's website builder offers templates and drag-and-drop tools for professional-looking web design. Learning To: select a template, customise sections, add original content, and preview a Canva website. Learning To Be: Communicator.
Let's Go!
Routine: See, Think, Wonder
Look at these two websites — one built with Google Sites and one with Canva. What do you SEE that is different between them?
What do you THINK makes Canva websites look the way they do?
What do you WONDER about which tool is better for which type of website?
Learn
Canva is not just for posters and presentations — it is also a seriously powerful website builder! With Canva's drag-and-drop editor, you can choose from stunning ready-made templates and swap in your own words, photos, and ideas in minutes. Every section is like a design block you can move, resize, or swap out — giving you total creative freedom without needing to know any code. Get ready to design a website that looks like it was made by a professional!
🏠 Page: Home
My Website
Welcome to My Website!
Tell the world what your site is about.
🖼️
Click to change image
Click to change image
3 blocks on this page
Try it yourself
Canva Creator Challenge
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Can open a Canva website template and change a piece of text with support.
Developing
Can choose a template, change the text on at least two sections, and add an image.
Secure (Goal)
Can design a Canva website with customised text, images, and at least three distinct content sections, and preview it.
Mastery
Can produce a polished, visually consistent Canva website that uses multiple sections creatively and looks significantly different from the original template.
👀 What A Good One Looks Like (WAGOLL)
⭐ Secure Standard📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Can open a Canva website template and change a piece of text with support.
- Developing: Can choose a template, change the text on at least two sections, and add an image.
- Secure: Can design a Canva website with customised text, images, and at least three distinct content sections, and preview it.
- Mastering: Can produce a polished, visually consistent Canva website that uses multiple sections creatively and looks significantly different from the original template.
Curriculum links
Curriculum strand: Create & Design
Outcome: WEB.04.B.1.4 — Design and preview a Canva website using a template, drag-and-drop sections, and original content.
PYP: Perspective · Creative tools empower individuals to design and present ideas in visually compelling ways.
Learner profile: Communicator
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 5: Make It Yours
Complete the previous learning check to unlock this next level.
Make It Yours
Students refine their website by applying consistent branding — choosing a colour palette, typography, and embedding media — to create a site that feels uniquely theirs.
Learning objective
Learning About: how branding elements like colour, fonts, and style create a consistent visual identity across a website. Learning To: apply a theme, choose matching fonts and colours, and embed content to personalise their site. Learning To Be: Reflective.
Let's Go!
Routine: See, Think, Wonder
Look at these three websites — each has a very different visual style. What do you SEE in their colours, fonts, and layout choices?
What do you THINK each style says about the person or organisation behind it?
What do you WONDER about how YOU want your website to look and feel?
Learn
A great website does not just share information — it has a PERSONALITY! Branding is the art of choosing colours, fonts, and a visual style that works together to give your site a clear identity. Think about your favourite brands — you can recognise them instantly from their colours alone! Today you get to be your own brand designer: pick your colour palette, choose fonts that match your vibe, and embed some cool content like a YouTube video or a Google Map to make your site truly come alive.
🏠 Page: Home
My Website
Welcome to My Website!
Tell the world what your site is about.
🖼️
Click to change image
Click to change image
3 blocks on this page
Try it yourself
Brand Identity Makeover
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Can change the colour or font on one page with support.
Developing
Can apply a consistent colour scheme or theme across two or more pages.
Secure (Goal)
Can create a visually consistent website with matching colours, fonts, and a theme applied across all pages, including at least one piece of embedded content.
Mastery
Can articulate clear branding decisions, apply them consistently throughout the site, and embed multimedia content that enhances the user experience.
👀 What A Good One Looks Like (WAGOLL)
⭐ Secure Standard📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Can change the colour or font on one page with support.
- Developing: Can apply a consistent colour scheme or theme across two or more pages.
- Secure: Can create a visually consistent website with matching colours, fonts, and a theme applied across all pages, including at least one piece of embedded content.
- Mastering: Can articulate clear branding decisions, apply them consistently throughout the site, and embed multimedia content that enhances the user experience.
Curriculum links
Curriculum strand: Create & Design
Outcome: WEB.05.B.1.5 — Personalise a website with a consistent visual identity including theme, fonts, colours, and embedded content.
PYP: Reflection · Personal expression through design choices communicates identity and values to an audience.
Learner profile: Reflective
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 6: Publish & Share
Complete the previous learning check to unlock this next level.
Publish & Share
Students take their finished website live, learning about privacy and sharing settings, generating a share link, and testing their site on a mobile device before presenting to their audience.
Learning objective
Learning About: the responsibilities and technical steps involved in publishing and sharing a website with an audience. Learning To: configure sharing settings, publish a finished website, generate a share link, and test the mobile view. Learning To Be: Principled.
Let's Go!
Routine: See, Think, Wonder
Imagine your website is about to go live for the very first time. What do you SEE in the publishing and sharing settings options?
What do you THINK happens when you click Publish — where does your website actually go?
What do you WONDER about who might visit your site and what they will think?
Learn
This is it — the moment every website creator dreams of — LAUNCH DAY! Before you share your site with the world, you need to think carefully about your sharing settings: who should be able to see it, and how will you share the link? You also need to test it on a mobile device, because more than half of all web browsing happens on phones and tablets. Once everything looks perfect, you will publish your site, copy your unique share link, and officially become a published web designer — congratulations in advance!
🏠 Page: Home
My Website
Welcome to My Website!
Tell the world what your site is about.
🖼️
Click to change image
Click to change image
3 blocks on this page
Try it yourself
Launch Day Checklist
🚀 Open a practice space
🌟 Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
🎯 Task Success Criteria (Rubric)
Foundation
Can publish a website with teacher support and copy the share link.
Developing
Can independently publish a website, set basic sharing settings, and share the link with a classmate.
Secure (Goal)
Can publish a complete website, configure appropriate privacy and sharing settings, test it on a mobile device, and reflect on the outcome.
Mastery
Can publish a polished, fully complete website, thoughtfully choose sharing settings based on audience and purpose, test across devices, and present their work with a clear explanation of their design decisions.
👀 What A Good One Looks Like (WAGOLL)
⭐ Secure Standard📁
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
⭐Self-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See, Think, Wonder
Achievement pathway
- Foundation: Can publish a website with teacher support and copy the share link.
- Developing: Can independently publish a website, set basic sharing settings, and share the link with a classmate.
- Secure: Can publish a complete website, configure appropriate privacy and sharing settings, test it on a mobile device, and reflect on the outcome.
- Mastering: Can publish a polished, fully complete website, thoughtfully choose sharing settings based on audience and purpose, test across devices, and present their work with a clear explanation of their design decisions.
Curriculum links
Curriculum strand: Create & Design
Outcome: WEB.06.B.1.6 — Publish a completed website, configure sharing settings, copy a share link, and test how it appears on a mobile device.
PYP: Responsibility · Sharing our creations responsibly allows us to connect with and contribute to our communities.
Learner profile: Principled
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow