Three Things I <3 Teaching Kit

Made by Mozilla Learning Networks.

Learners will remix text and HTML code to change webpages within a single website, learning about composing for the web, navigation, and remix.

75 to 90 minutes

  • Preparation

    Do the activity on your own to become familiar with it. Make sure your technology works as expected across a few test machines.

    You may also wish to set up a whole-class account on teach.mozilla.org that you can share with your learners. If students don't have their own accounts, they can use this one later on to publish their remixes.

    Review this definition of the word "Remix", so that you can help your learners (and colleagues!) understand what it means to remix a make.

    Clear out a large space in the center of the room.

    Post the URL, or Web address, of today's make somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

  • 10
    min

    Introduction

    Welcome your students and explain that in this activity we're going to remix website to share three things that each of us loves, like games, music, or fashion. Explain that to do so, we're going to remix several linked webpages inside the same project or website. We'll be remixing text, as well as media like images and video.

    Give each student a notecard and a pen or pencil. Tell students that you'll use the notecards to play a sorting game based on things they love. Ask each student to write down one thing he or she loves. Ask students to write down general kinds of things they love (like "food"), rather than very specific ones (like "liverwurst"). Collect the cards. Skim through them and pick 8-10 that are appropriate for your learning community and seem to have wide appeal.

    Once you have quickly picked 8-10 cards

    • Ask students to move to the center of the room.
    • Explain the rules: You will read one notecard at a time. Students who love the thing on a notecard should all go far to your right. Students who don't love that thing should all go far to the left. Students who are neutral can stay in - or go to - the middle. Students should move and sort themselves again when you read the next card.
    • Read each card.
    • Pause to let students sort themselves.
    • Continue reading and sorting until you make it through all the cards.
    • Ask learners to share anything positive they learned about themselves, their friends, or the class.
    • Once everyone has had a chance to respond, ask students to sit at their computers and go to the webpage for today's activity.
  • 10
    min

    Explore the project

    Explain that this entire website is made in Mozilla's Thimble Web editor. This means that students can hit the green "Remix" button in the upper right-hand corner of the screen to change all sorts of things on the project's pages, including their titles, text, and images.

    Ask students to explore the 3 Things I <3 activity by reading the page alone or with a partner.

    Then ask students to hit the Remix button.

    Explain that after students hit the Remix button, Thimble will show them the code for the all of the project's webpages, as well as the stylesheet that makes the website look the way it does. Explain also that this activity will let students practice the Web skills they've previously developed across several related webpages.

    Students will also see the .png image file that makes the blue heart on each page.

    Tell students that today we're going to make a simple website that shows three things that each of us loves

    Answer any questions your students ask.

  • 40
    min

    Remix the project

    Guide learners around the Thimble interface using your computer and projector. Point out the sidebar to the left that has the main page called index.html, the three other pages called games, music, and places, as well as the stylesheet and image files.

    Also show your learners that they can hit the 'Tutorial' tab on the right side of the screen to switch their view from the webpage to a self-guided tutorial that takes them through the remix activity.

    Run through the tutorial yourself at a baseline pace for the class and do a 'think-aloud' as you work. Speak your thoughts as you navigate and change the code.

    Invite eager students to move through the tutorial at their own pace.

    Use the tutorial and your think-aloud to support students and loop back to any difficult areas.

    After 30 minutes or so of working through the tutorial, each student should have remixed and changed

    • The title of each .html page.
    • The text of each .html page.
    • The embedded videos on games.html and music.html.
    • The embedded image on places.html.
    • The file names of games.html, music.html, and places.html.
    Gauge students' engagement with remixing other parts of the project, like style.css, and either end this part of the activity a bit early or extend time for students to continue working.
  • 5
    min

    Share your project

    Publish your remix. Invite your students to hit the 'Publish' button in the upper right-hand corner of their remix when they finish. Thimble will give them a URL, or Web address, to visit and share with friends.

    Take it a step further. Invite your students to check out the style.css file in the left sidebar and to see what happens when they change values there.

  • 20
    min

    Reflect and review

    Give students about 5-10 minutes to visit one another's machines or to swap Web addresses to see what other learners came up with in their remixes.

    Ask volunteers to share their newly remixed websites with the class.

    Facilitate a brief, reflective discussion about composing, coding, and remixing using questions like


    • What seemed easiest or most difficult about remixing the page today?
    • What feels good about sharing what you love with others?
    • What feels difficult or scary about sharing what you love with others?