Teaching Kit

Keep Calm Meme Teaching Kit

Learners will create "Keep Calm" memes for the Web that celebrate the back to school season. They will remix HTML with their own messages about how to succeed in school. Learners can also remix CSS to change the looks of their posters.

Made by Mozilla Learning Network and remixed for Clubs by Greg McVerry

Materials

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

Learning objectives

Learners will...

  • Remix a Keep Calm Poster celebrating the start of the school year.
  • Identify and use HTML tags.
  • Use a color picker to change the background colors of a webpage.
  • Change the images on a web page.
  • Use CSS properties to change the style and layout of a web page.
  • Search the Web for an image to replace an existing one.

The specific Web Literacy skills developed in this activity are Search, Remixing, Composing, and Sharing

Agenda

  1. Introduction (5 minutes)
  2. 'What's a meme?' Simon Says (10 minutes)
  3. Brainstorm (10 minutes)
  4. Introduction to HTML (5 minutes)
  5. Introduction to CSS (5 minutes)
  6. Thimble Tour video (3 minutes)
  7. Self-Guided Tutorial (25 minutes)
  8. Reflection (10 minutes)

Introduction (5 min)

Have a brief conversation with students about what it takes to succeed at learning in school and other places.
  • What do successful learners do?
  • What does success look like? or How do you know if you’re succeeding in school?
  • What are other ways we succeed in school, not including grades and test scores?

Remind students that successful learners also have fun - they love what they do. Tell learnes that oen of today's goals is to have fun while learning about the Web with memes.

'What's in a Meme?' Simon Says (10 minutes)

Ask students if anyone know what a meme is. Help students discover or explain that a meme is a viral, or catchy, idea. People make memes by combining pictures and words that show a spoecific idea, like success or failure, in every version of that meme ever made.

Using your computer and projector, show students pictures of 3-5 memes appropriate to your learning space. Ask students how each meme works or explain each as you show it. Describe the memes out loud for learners who might have difficulty seeing your projections. In a school setting, you might use memes like success baby, grumpy cat, doge, or 'all of the things.' Be sure to preview whichever memes you use with your learners.

Finally, to give students practice recognizing key features of memes, play a quick game of Simon Says or group charades led by you or a student. Only play with the memes all your learners just saw so no one is disadvantaged by a lack of background knwoedlge. Play until only one student or just a few students are left in the game. Use Simon Says commands like, 'Simon says show me...grumpy cat!' to get learners to perform memes. Learners who perform memes when the leader doesn't say, 'Simon says,' or learners who perform the wrong memes are out of the game.

After giving learners the chance to perform memes, explain that now everyone will have a chance to make them using the Web.

Brainstorm (10 min)

Split the learners into pairs. Have them talk together and come up with a remixed Keep Calm message using printed versions of the template.

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.

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)

Explain to your learners that the original “Keep Calm and Carry On” message was used to raise morale during WWII.

Ask learners to reflect on how their remixed message might help others stay positive during tough times. You might use a Think, Pair, Share model. First, allow a few minutes for learners to think silently. Then ask them to pair up with a partner and discuss. Finally, ask for a few volunteers to share their reflection with the group.