fbpx
Skip Navigation

Innovation Website

By Kassandra Lenters
Duration
120 minutes
Key Coding Concepts
  • Sequences
Terminology

Innovation

Innovation is the creation or improvement of a product or process to make an impact.

 

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, for example <h1> is the top most heading on a webpage.

Level Grade 7-8
Subjects English Language Arts, Science and Technology, Social Sciences, Other
Provinces / Territories Across Canada

Overview

Students will learn about innovation in Canada, and create a website about their chosen recipient of the Governor General Innovation Award.

Watch the “Content 101: Glitch” video: http://bit.ly/content101-videos

Review the example project (click “Remix your own” to see inside): glitch.com/~innovation-website-example

Print the Solution Sheet for the main activity: bit.ly/innovation-website-glitch

You will need computers and access to the internet for this lesson.

Learners will need emails to save their projects.

Created in partnership with

Introduction

Ask: What does “innovation” mean? (A: Innovation is the creation or improvement of a product or process to make an impact)

Ask: What makes an idea “innovative?” (A: Something that is new, original, and creative)

Ask: What is the Governor General Innovation Award? (A: An award that celebrates innovation in Canada)
Ask: Do you know of anyone who has received this award? (See past recipients: innovation.gg.ca/year)

Watch this video about innovation in Canada:

Research:
Choose a Governor General’s award recipient from: https://innovation.gg.ca. Use the provided information, plus any additional research to answer the following questions (in a word document):

  • Name of Canadian innovator
  • Their invention or idea (in your own words)
  • What problem were they trying to solve?
  • How was their idea developed?
  • What challenges did they face?
  • How is their invention innovative?

*Don’t forget to record where your findings are taken from, so you can properly reference your sources later.
We’re going to make a website about our chosen award recipient!

Code Along

  • Review the basic elements of a webpage using the “HTML Basics” slides: http://bit.ly/html-basics-slides
  • Show students the code for the example project: https://glitch.com/~innovation-website-example - Open ahead of time by clicking “Remix your own” (below the preview) - Don’t let them see the actual website yet!
  • Ask: Based off of what we know about HTML tags, what do you think this website will look like?
  • Either sketch the site up front based off of their feedback or have learners work in pairs to sketch out the website
  • Click on “Show Live” (top, left) to see if you were able to guess how the website would be displayed.

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://innovation-website-starter.glitch.me) and select “Remix on Glitch.”

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

  • Remix the starter project
  • Change the title of the site
  • Change the heading
  • Add some information
  • Embed a video
  • Add an image
  • Change the styles

Before learners share their website, have them add a section about themselves, reflecting on their role as a future innovator in Canada.

  • What does innovation mean to you?
  • What problems do you see in Canada that need help solving?
  • How could you use your skills, strengths, or abilities to help solve these problems?

Have learners share the link to their published project with you (see solution sheet for steps).

Learning Outcomes

I can practice Innovative thinking by using original, creative solutions, or taking an existing idea and making it better.
I can use Innovative thinking and risk taking to help broaden career options.
I can help drive innovation in Canada by exploring and sharing my ideas.
I can use my skills, strengths, and abilities to help solve problems for others.
I can use websites to share information with others.

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.

Add a more extensive research element. Have learners spend more time learning about their innovator or invention, organized by subtopics. Create a multi-page website by adding new html pages inside of the Thimble project, then linking the pages together using "a" tags.

Build this into a unit on innovation using lesson plans from the E41 Resource for Grades K-12

Research, Reading for meaning, Understanding Form and Style, Developing and organizing content, Form and style in writing, Understanding media texts, Creating media texts, Continuity and change, tools and technologies, innovation, Digital citizenship

Example: BC Grade 7 Career Education (see Learning Outcomes)

Governor General’s Innovation Award
https://innovation.gg.ca

E41 Resource for Grades K-12
https://canadianinnovationspace.ca/resources/grades-7-to-12/

Laptop image by Raw Pixel from Pexels.com

More Lesson Plans

View All Lesson Plans