Design, Build, Publish: How Students Can Build Their Own Websites with Canva’s Complete Toolkit

I'm a huge Canva fan. I use it almost daily to edit photos, create videos, design YouTube thumbnails, build classroom resources and produce lesson slides. It's easy to use, simple to collaborate with and, crucially, 100% free for educators and students.

It therefore made a lot of sense to build our Year 6's next Computing unit on website design, centred around Canva's comprehensive toolset. Web design isn’t just for older students anymore - primary learners are more than ready to design, build, and publish their own websites. With the right tools and guidance, our students are able to learn about and experiment with the elements of design, build layouts using wireframe mockups and create the final product using a range of media. What's more, it would be simple to share their projects with parents and our wider school community. This isn’t just about tech skills, it’s about agency, purpose, and digital storytelling.

Below, I'll go through the steps I took to build this exciting unit of work from the ground up. If you've not got a class set up on Canva yet, you can get your educator account here, then follow these instructions to add your students.

Let's dive in!

Elements of Design – Teaching the Fundamentals

Canva Design School has a ton of free resources and certified courses to support educators and other professionals with creating professional-looking designs. You can kick off this unit by exposing students to the 8 elements of graphic design outlined in the Graphic Design Essentials course. They are:

Dot - The most basic visual element

Line - A continuous mark that defines shape, direction, and movement

Shape - A flat, enclosed area created by lines or color

Form - A three-dimensional shape that has depth, width, and height

Tone - The lightness or darkness of a color; used to create contrast, mood, and the illusion of depth.

Texture - The surface quality of an object, which adds richness and dimension.

Colour - Used to evoke emotion, draw attention, and create harmony or contrast.

Text - Visual representation of written language that conveys information and supports the overall design.

Once students have explored each of these elements in more detail, including seeing examples in context, they can collaborate on Canva Whiteboard to create a visual representation of the 8 elements, in their own style.

Students can add text, drawings, images and shapes to their collaborative whiteboard

Creating a Layout Using a Wireframe

Next, student pairs should chose a topic for their website. Some examples at our school included:

• Urban Legends of Japan

• Nascar vs. F1

• Planets

• Cats vs. Dogs

• Basketball

• History of Potatoes (I mean, why not I guess...)

But before jumping into designing the site, students need a clear, focused plan for how their website will look and function. Using Canva Whiteboard, they can visually wireframe their site in a low-pressure, flexible environment. At this stage, students should avoid using colour or text styles - the goal is to think about structure, not decoration. I made this wireframe template to support students in mapping out key sections like headers, images, and text blocks across each page. They should add a clear title for each page and use sticky notes to label what content will go where (e.g. “About Me paragraph”, “Photo of my artwork”, “Intro video”). Students can also drag in elements from @canvawireframes, a ready-made library of wireframe components. This phase keeps the focus on layout and user flow, laying the groundwork for thoughtful, intentional design later.

My custom wireframe template

Typing and Dictating Text

Once the structure is in place, students can begin adding text to their websites, either by typing or using dictation tools (which are especially valuable for younger learners or those with additional needs). This stage is a great opportunity to build digital communication skills while reinforcing clarity and purpose in their writing. Students should stick to a maximum of two fonts throughout their site to maintain a clean, consistent look, and they should use font sizing, styling, and alignment intentionally to emphasise hierarchy and meaning. As they format their content, encourage them to adjust text box sizes and placement to match their original wireframe layout. They should also choose background colours and fonts that reflect their website’s theme, while always prioritising readability through strong contrast, legible font styles, and appropriate line spacing. The goal here isn’t just to fill space with words, but to design text that’s easy to read and visually aligned with their message.

Canva Docs is an easy-to-use word processor

Adding Images

With text in place, it’s time for students to bring their websites to life with images. Canva offers multiple ways to add visuals. First, students can explore Canva Elements, a safe and curated library of graphics and photos that are age-appropriate and easy to search. They can also upload their own images - whether it’s scanned images of their own artwork, or photos taken on their devices. For another angle, students could experiment with Magic Media to generate AI-created images. This opens up creative potential, but it also requires guidance: students will need to learn how to craft clear, effective prompts to get meaningful results. Regardless of the method, it's important to keep the layout uncluttered; limit image use to a maximum of three per page and encourage students to select visuals that enhance their content.

Students should continue to consider their colour choices as they add images

Storytelling Through Video

Introducing video into student websites elevates their communication skills and gives their projects a personal, engaging touch. You can start by framing video as a powerful tool for storytelling; students can use it to introduce themselves, explain their project, or showcase their learning in a more dynamic way. Storyboarding or scripting a short video will help students plan their content clearly. When filming, encourage the use of simple supports like stands for devices, good lighting, and, if available, microphones to improve audio quality. While green screens are a useful tool for the future removal of the background, they’re not always necessary. Canva does a pretty decent job of removing the background of videos as long as it's reasonably plain. In the Canva video editor, students can trim, split and rearrange clips, add captions, music, and visual effects to polish their work. Again, it’s intuitive and student-friendly. For more guidance on helping students become confident filmmakers, check out my previous article on filmmaking in the classroom.

Adding Links

The final step in the process is adding links to create interactivity and a smooth user experience. Students can link between pages within their site (e.g. from the homepage to their gallery or about section), or add external links to relevant videos or websites. This introduces the concept of navigation and user flow, helping students think beyond content and into the experience of the viewer.

A menu bar on the home page will help users to navigate the site

Sharing the Final Product

Once students have built and refined their websites, they should share their work with an authentic audience. Canva allows students to publish their sites as a live link, which can be copied and shared directly with others. Before sharing, it’s essential to discuss audience awareness and digital safety: students should know who will see their site (e.g. parents, peers, school community) and ensure all content is appropriate and respectful of privacy (no personal details, no full names or identifying info). One simple way to share is by generating a QR code from the website link, which is perfect for printing for display boards or adding to newsletters. To celebrate the learning journey, consider hosting a class website showcase, where students present their projects to each other or to visitors. This turns the process into a true exhibition of creativity, communication, and confidence.

Conclusion

This project goes far beyond building a simple website - it’s a process that empowers students to reflect, create, and communicate with purpose. Throughout the unit, you’ll see growth, from initial ideas and rough wireframes to published work that students can proudly share with their community.

Next Steps

• For more ideas on integrating technology across the Primary curriculum, you can subscribe to my weekly newsletter here

• Keep an eye out for exciting new features 'coming soon', like the AI Code Generator

This is just the beginning. Students can evolve their websites into digital portfolios, virtual museum exhibits, or even community storytelling projects, deepening their connection to curriculum and real-world audiences.

Let’s keep building!