Skip Navigation

Innovation Website

By Kassandra Lenters 120 minutes
Level
Grade 7-8
Subjects
English Language Arts,
Science and Technology,
Social Sciences,
Other
components
  • Technology and Society
  • Design
Tools & Languages
CSS,
Glitch,
HTML

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. 

 

Hypertext Markup Language (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. 

 

Cascading Style Sheets (CSS)

CSS 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.

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

Technology

  • You will need computers and access to the internet for this lesson.
  • Learners will need emails to save their projects.

Before the lesson...

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)

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.

Now, we’re going to make a website about our chosen award recipient!

Code-Along

  1. Review the basic elements of a webpage using the “HTML Basics” slides
  2. Show learners the code for the example project - Open ahead of time by clicking “Remix your own” (below the preview) - Don’t let them see the actual website yet!
  3. Ask: Based off of what we know about HTML tags, what do you think this website will look like?
  4. Either sketch the site up front based off of their feedback or have learners work in pairs to sketch out the website
  5. 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 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 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 "comments" 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 learners 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 Glitch 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 7-12

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

Connexions 1.0 - We Did This / #GGInnovation Awards
https://www.youtube.com/watch?v=3J7hDsna0rc&feature=youtu.be

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

Laptop image by Negative Space from Pexels.com

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

r

More Lesson Plans For Grade 7-8

    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.