Skip to main content

Compass is offline while we prepare our new tools

Compass is offline while we prepare our new tools

Compass is now offline. Read more

Discover what this means
Supported by Raspberry Pi

Make a website

Create a website to showcase your group with both HTML and CSS code.

Back to Activities

You’ll need

  • Access to a computer
  • Scrap paper
  • Pens or pencils
Notes and handout (Make a website)
PDF – 3.9MB
Download Notes and handout (Make a website)
Buddy the dog looks inquisitively at a smartphone balanced against an open laptop.

Before you begin

  • Don’t panic if you’ve never used (or have never even heard of) HTML or CSS code before. There’s plenty of info below, and this activity’s a great way for everyone to learn. It’s a good idea to spend some time reading the information and practising before you lead the activity, though.
  • If you don’t have enough computers for everyone to work in pairs, you could run this activity as one base, so groups visit one at a time. You could also look in to visiting a local library or school to use their computers.
  • If you have access to the internet, use the online code editor Trinket in a web browser. You can find the started project here and the finished code for the example website is here.
  • If you don’t have internet access, don’t worry. You can download the code you need here, then open them in an editor programme such as Sublime Text 3 or a pre-installed text editor such as Notepad, TextEdit, or Leafpad. Check out the ‘Offline resources’ in the ‘Notes and handout’ pack for more information about doing this activity offline.
  • This activity’s all about making profiles. Especially if people are working online, remind them not to share personal details like full names, specific locations, or pictures of themselves. As always, there’s more safety advice in the ‘Safety’ section.

Plan a website

  1. Everyone should think about websites. What are they? What websites do people visit regularly? What information’s found websites?
  2. If people will be working in groups, they should get into groups now.
  1. Each group should think about their favourite Scout activities, events, or badges. They should jot their ideas down so they remember them for later.

Code the website

  1. The person leading the activity should give each group a copy of the ‘Notes and handout’ pack.
  2. Each group should turn on their computer. Depending on whether their meeting place has internet access, they should open the project here or open the pre-downloaded files in an editor program.
  3. Each group should work through the ‘Notes and handout’ pack to create a website with HTML code and make it look nice with CSS code.

Reflection

This activity was all about developing skills. People used their newfound digital making skills to show everyone some of their favourite activities and teach other a skill. How did it feel to use a new skill? Can anyone think of another way someone could use digital technology to share skills with others?

This activity also gave people a chance to learn about HTML code. HTML is a really important language – it’s what al websites are built in. Did people find it easy to code their own page, or was it trickier than they expected? What else would people like to learn how to code onto a webpage?

Safety

All activities must be safely managed. You must complete a thorough risk assessment and take appropriate steps to reduce risk. Use the safety checklist to help you plan and risk assess your activity. Always get approval for the activity, and have suitable supervision and an InTouch process.

Online safety

Supervise young people when they’re online and give them advice about staying safe. Take a look at our online safety or bullying guidance. The NSPCC offers more advice and guidance, too. If you want to know more about specific social networks and games, Childnet has information and safety tips for apps. You can also report anything that’s worried you online to the Child Exploitation and Online Protection Command. As always, if you’ve got concerns about a young person’s welfare, including their online experiences, follow the Yellow Card to make a report.

  • Challenge everyone to add more items and information to their profiles. People should use up-to-date copies of Scout badges, logos, and images. The Brand centre’s the best place to find these images – the person leading the activity could create a group login for everyone to use, or they could download some useful images before the sessions begins.
  • If you’re short on time, or people need loner to figure it out, they could just create one of the two pages. They could team up with a partner who’ll create the other page.
  • If people are working in groups, it’s useful for people with experience of HTML or CSS code to spread themselves between the groups.
  • We’ve included the finished code in the ‘Notes and handout’ pack in case anyone needs to peek.

Make it accessible

All Scout activities should be inclusive and accessible.

Digital Maker Stage 3

Why not publish the webpages or create another website for the whole group? People could use the group website to keep their friends and family updated with everything they get stuck in to. Make sure to stay safe online.

Showcase your tech projects with other creators in the UK and across the world! Check out the Coolest Projects webpages to take part for free from February, or join the celebratory livestream with announcement of the judges’ favourite projects in June. We’d love to see Scouts of all ages involved so please mention you’re a Scout when you register!

Everyone should make their own decisions about the content on their pages (and take responsibility for it too). This is a great chance to be as creative as possible. You could also try using a different coding language with an activity like Interactive map.