Skip Navigation

Tourism Website (with Glitch)

By Caitlin Davey 90 minutes
Level
Grades 4-6
Subjects
English Language Arts,
Social Sciences
components
  • Programming
  • Design
Tools & Languages
Glitch,
HTML,
CSS

Key Coding Concepts

  • Sequences

Terminology

Webpage

A web page is a document or hypertext file connected to the World Wide Web that displays information using programming languages.

Hyperlink

A hyperlink or “link” is a link from a hypertext file to another location or file on the World Web Web. Links are what make the Web great because they connect pages together so that we can find them.

HTML

HTML (hypertext markup language) is a language used for tagging or “marking up” text files to achieve font, color, graphics, videos, and links on webpages.

CSS

CSS (cascading style sheets) is the visual language used for presentation or styling of a document written in a markup language. CSS files are what make the web colourful, patterned, responsive, and cool

Tag

A tag is a piece of code that specifies how the document or piece of the document should be formatted. Tags have angled brackets.

Sequences

Identifying a series of steps for a task. Computers and Scratch read and perform commands in order from top to bottom

In this project based assignment students will create a tourism website for their respective province or territory (or it could be another province too!). Work with students to review the steps of the project forming ideas about their site, gathering knowledge, checking facts, and coding their site.

Introduction
First, we need to do some research! Have learners choose (or assign) a province or territory and record answers to the following questions:

  • What is the province/territory best known for?
  • What are the top 5 things to do there?

  • Find a photo or video!

Code Along

  • Review the basic elements of a webpage using the “HTML Basics” slides: http://bit.ly/html-basics-slides
  • Show students the example project (https://glitch.com/~tourism-yukon).View the source code using the “code” tab.
  • Pair up learners and assign each pair a tag from the example project (e.g. - anything in angled brackets)
  • Instruct pairs that they have 2 minutes to use w3schools.com to research what their element does, and where it goes on the website.
  • Check for understanding by having them either orally present or add their findings to a shared Google Doc.

Activity
Have learners go to https://glitch.com and sign in with email. They will need to go to their inbox and click on the confirmation button to begin.

Have learners open the Starter Project (https://tourism-website-starter.glitch.me/) and select “Remix on Glitch.”

Use the Solution Sheet to guide learners through the following steps:

  • Change the title of the site
  • Change the heading
  • Create a list
  • Embed a video
  • Add an image
  • Change the styles

Learning Outcomes
I can remix websites by editing tags in HTML
I can add text to my website using paragraphs and headings tags
I can add images to my website using image tags
I can design my website using CSS

Success Criteria
I renamed my project with my first name.
I changed the heading of my webpage to my chosen province/territory.
My list has 5 different suggestions for tourists in this area.
I embedded a video that is relevant and useful for tourists in this area.
I added an image of the province/territory to my webpage.
I changed they style of 3 different tags on my webpage using CSS.

Assessment Ideas
Have learners use to explain their code
Provide time for learners to present their websites to the class.
Guide learners through editing and revising their work using the CUPS strategy (Capitalization, Usage, Punctuation, Spelling) - before submitting their final version.

Introduce HTML through play! Before this lesson, plan time for learners to play eraseallkittens.com (“Play Demo”). You may want to create a (free) account for your class which all students can use to sign in, or have them sign up using their individual emails.

Go through a KWL chart with the class (Know, Want to know, Learned). Ask them what they think they know about websites, and what they want to know. After the lesson, regroup and complete the ‘learned’ column as well.

Add a more extensive research element. Have learners spend more time learning about their province or territory, organized by subtopics.

Create a multi-page website by adding new html pages inside of the Thimble project, then linking the pages together using anchor tags.

People and environments, political and physical regions of Canada.

Teach lessons that are tied to your existing curriculum! https://bit.ly/CLClessons

r

More Lesson Plans For Grades 4-6

    View All Lesson Plans

    Explore lessons based on components

    The K-12 Computer Science Framework

    Although learning how to build digital projects is a key part of Computer Science education, students should also learn a wider set of skills and competencies that will help them to harness the power of digital technologies as both creators and consumers. A comprehensive approach to K-12 Computer Science education includes learning about the following five focus areas:

    View Framework ➝

    Programming

    By the end of high school, students should be able to create a simple computer program.

    Computing and Networks

    By the end of high school, students should understand and be able to use the tools and devices commonly used to build digital projects.

    Data

    By the end of high school, students should be able to explain how we use computers to create, store, organize, and analyze data.

    Technology and Society

    By the end of high school, students should be able to explore the ways in which technology and society have mutually shaped each other.

    Design

    By the end of high school, students should be able to apply design principles to the digital projects they create.