Hacking My Media with X-Ray Goggles

The goal of this activity is for participants to think critically about their identities and the media they enjoy. They will use these reflections to create their first webpage by hacking and tinkering with an existing webpage.

Made by MozGirls 2013 (Steph Guthrie, Kim Wilkens, Sandra Sears, Ricarose Roque, Catherine Steel, Chad Sansing)


Girls need and deserve to see themselves as technology producers with unique passions and skills that can transfer between platforms, makes and careers. This activity will support girls aged 10-17 in critical reflection on the intersections between gender, culture, technology and identity while building their webmaking skills and confidence. Read more in the post (Web)making it better for girls in tech at MozFest.

Learning Objectives

  • Deconstruct gender stereotypes and counter them with content that reflects their own unique version of girlhood.
  • Use webmaking skills as an avenue for creative expression and making a difference.
  • Recognize <img> tags, <p> tags and modify content within them

Steps for the Activity

Phase 1: Me and My Media

  1. On pieces of paper, have participants draw pictures of how they see themselves, including props to represent elements of their personalities, their values and the activities they enjoy (e.g. a soccer ball if they like sports). Beside that picture, draw another one of a character from a TV show, movie or video game you like.

  2. Underneath the pictures, have participants list the similarities and differences between them and their characters along the following dimensions: personality, interests, physical appearance, values and environment.

  3. Phase 2: Hacking My Media

  4. If you haven’t already, install the Goggles here and ensure participants do so on their devices. Tell participants that they will be hacking a website. The teacher/mentor should find the Wikipedia page for their own character's TV show, movie or video game and turn on the Goggles. You can do this by clicking on the bookmarklet.

  5. Using the Goggles, slowly use the cursor to point out the page's tags, attributes and elements. Find the object tags that you want to change or replace (e.g. the p tag or img tag). Hit “R” on your keyboard or just click on an element. Show participants that the code is remixable. Ask participants for help hacking the code and replacing the character's images and descriptions with their own. If the character's Wikipedia entry is long, you can limit your hack to the picture and the description at the top, as in this example.

  6. After you have made each change, hit the "Update" button. When you're finished, hit the "Publish" button (or "P"), publish to the internet (you'll need to sign into Webmaker) and show everyone the hack. Show everyone how to do this step by step. Then let participants go to their characters' Wikipedia pages and create their own hacks.