Teaching Kit

Back-to-School Postcard Teaching Kit

Learners will remix an animated back-to-school postcard to share important information about themselves with their teacher and to share their predictions about how the school year will go for them.

Made by Kim Wilkens and remixed for Clubs by Mozilla Learning Networks

Materials

  • Internet-connected computers for each student or each pair of students
  • Paper and pens
  • Projector for instructor’s computer
  • An index card or two for each learner

Learning objectives

Learners will...

  • Remix a Back-to-School Postcard sharing their feelings about the start of the school year.
  • Identify and use HTML tags.
  • Identify and use Web fonts.
  • Identify and change CSS values.
  • Identify and change JavaScript variables.
  • Change the image on a webpage.
  • Change the text on a webpage.

The specific Web Literacy skills that will be developed in the activity are Search, Remixing, Composing, and Sharing

Agenda

  1. Introduction (5 minutes)
  2. Brainstorm (10 minutes)
  3. Introduction to HTML (5 minutes)
  4. "I'd rather be...' Spectrogram (20 min)
  5. Introduction to CSS (5 minutes)
  6. Introduction to JavaScript (5 minutes)
  7. Thimble Tour video (3 minutes)
  8. Self-Guided Tutorial (25 minutes)
  9. Reflection (10 minutes)

Introduction (5 min)

Have a brief conversation with students about the start of a new school year. Perhaps ask:

  • What makes for a successful school year?
  • What do you have to do to have a successful school year?
  • What do teachers have to do to help you have a successful school year?
  • What would make this year the best year ever?

'I'd rather be...' Spectrogram (20 min)

Explain to learners that today we'll be remixing an online back-to-school postcard to help our teachers get to know us as people and students.

Explain that a postcard is a small, paper note, just a bit bigger than a smartphone, that people used to send one another from camp or vacation. The front had a picture of wherever the sender went, and the back had a short note written on it for the person who got the postcard, and the mailing address. No envelope necessary!

Postcards were like Instagrams back when written letters were like emails.

Before we remix our postcards on the Web, we're going to play a quick game to find out places we'd want to go and send postcards or Instagrams back from to our friends.

Explain that we'll use the cards to run a spectrogram game. A spectrogram is a game in which hear a few options and make a choice between them. Each choice is tied to a spot in the room, like the left side or the right side. When you hear the spectrogram options and make your choice, you walk to the part of the room that goes with your choice.

  • To begin, we'll each get an index card.
  • On either side, we'll write down a place we'd rather be - like a dream vacation spot or a place that feels super cozy to us, like our room or a family member's house or something.
  • After just two or three minutes, the teacher will gather the cards, and learners will stand in the middle of the room.
  • The teacher will shuffle the cards and then draw two at once.
  • The teacher will ask, 'Would you rather be ... or ...?' and fill in those blanks with the places from the index cards.
  • The teacher will point to the left for one place and to the right for another.
  • Learners will then split up according to which place they'd rather visit.
  • Once everyone has chosen a spot, the teacher will invite the learners who wrote those cards to step forward so the group can learn about them. Learners don't have to step forward, but they can to share a bit about themselves.
  • The teacher will keep running rounds of the spectrogram until all the index cards are used and each learner has had a chance to step forward.

After everyone has had a chance to share their favorite postcard or Instagram vacation spot, go on to the rest of the Back-to-School Postcard Remix activity.

Brainstorm (10 min)

Ask learners to brainstorm a list of 5-10 things that they think their teacher should know about them. You can use a brainstorming organizer, recording device, or any other medium that helps kids brainstorm successfully.

After 5 minutes or so, ask kids to circle or otherwise identify the top 3 things from their lists that they think their teachers should know about them. Once kids have identified their 3 items, ask them to brainstorm another list of predictions about the school year. Offer them a prompt like, ‘I think this school year will be….”

After a few minutes, have learners pair up or form small groups to share their predictions and encourage them to write down any cool predictions that others make.

Introducing HTML (5 min)

Ask participants to raise their hands if they know what HTML is. On your projector, go to any website and right-click to “View Source” to show the HTML code for that page. If you have a participant with HTML experience, ask them to see if they can point out a “Tag” in the code. Make sure to introduce these concepts before starting the activity:

  • HTML stands for Hypertext Markup Language and is the standard language for web pages.
  • HTML Tags tell your web browser how to translate the code into the website that Internet users will see. For instance, HTML tags can tell your browser when to turn text into a link, or how big to make the words appear on the page.
  • An open tag tells the webpage when to start doing something, while a closed tag, , tells the webpage when to stop.

Introducing CSS (5 min)

Ask participants to raise their hands if they know what CSS is.

  • CSS stands for Cascading Style Sheets, and it’s the code that styles your HTML, or tells it what it should look like. CSS properties can control things like color, font, borders, and more.

Introduction to JavaScript (5 min)

Ask participants to raise their hands if they know what JavaScript is.

  • JavaScript is a coding language that lets you make interactive things on your webpage, like buttons.
  • JavaScript uses small building blocks of numbers and words, called variables, to build actions, called functions, that work together to make programs, or scripts.
  • Writing a script in JavaScript is like making a recipe from smaller ingredients or building a model from all its parts.

Thimble Tour video (3 min)

Project the Thimble tour video so all students can see, or have them watch on their computers. The Thimble tour video is available on thimble.mozilla.org.

Self-Guided Tutorial (25 min)

Your learners can remix this make and use the built-in self-guided tutorial. You may want to do a lesson on finding and using Creative Commons-licensed images.

Reflection (10 min)

Facilitate a brief conversation using questions like these:

  • How did it feel to share out your feelings and predictions about school
  • How would this activity have been different without the Web?
  • What did you learn about making webpages?
  • What else would you like to learn about the Web this year?