Remix the Web! Using Mozilla Webmaker for Library Workshops & Programming

This was presented as a webinar for the Education Institute on Thursday, January 15. I metaphorically twisted Tamarack Hockin’s arm into presenting on the more interesting and practical parts of this topic.

Presented by Tamarack Hockin @tamahoc and me.

Webmaker Tools


Mozilla’s Webmaker is a suite of tools designed to allow others to teach, learn, and share on the web, for the web. People use these tools around the world to help teach workshops on web skills, might use it as a web platform themselves to create content, or learn independently.

From the very beginning, when Popcorn, the video editor was created, the development involved people outside of the Mozilla Foundation, both coders and non-coders alike. Webmaker strives to be open and build networks so that those who teach and create with the tools can share their knowledge, resources, and experiences. Today, community involvement is what really supports Webmaker.

As a librarian, I was very excited when I heard about Webmaker, because it meant running workshops without involving software being installed, a great degree of knowledge, or even time, because so many resources already existed. Best of all, it looked fun, allowing people to easily share and remix others’ work.

The Tools

X-Ray Goggles

  • inspect the blocks that make up a webpage
  • “hack” the page by inserting or changing
    • text
    • images
    • colours
    • etc.

Now just to be clear, no one is actually changing the actual website. What X-Ray Goggles does is make a copy of the webpage you’re looking at in order to play with it.

The first example, it might be a little hard to see, but the X-Ray Goggles text is highlighted to show that it’s a block that you can edit, and I’ve edited here to add “in Libraries”.

X-Ray Goggles has been used by numerous people just to have fun like changing their school website to a fictional one, such as Hogwarts from Harry Potter. Many have also used it to make artistic work or statements, such as this remix of the “Real Women of Canada” website, showing the creator’s view of what is more representative of women in Canada.


  • create webpages
  • HTML & CSS editor
  • instant preview
  • responsive help

Popcorn Maker

  • online video editor
  • pull in
    • video: youtube, vimeo
    • images
    • sound: soundcloud, clyp
  • internet archive, google maps
  • add links


  • newest tool
  • use preset bricks
  • make them interact
  • works in various browsers desktop & mobile

Why Webmaker

  • fully web based, no installation necessary
  • free
  • no experience necessary
  • lots of resources

As I mentioned before, one of the best parts of Webmaker projects is that you can remix or make your own version of any of the projects. Just look for the “Remix” button in the top right corner. The ability to share and remix is a big part of what makes Webmaker a lot of fun.

Webmaker in the Wild

Webmaker in the Wild– bringing these tools into the library and programming– primarily for teens, but will also address how these tools can be used for programming with other ages.

Program: Spring Break

  • two computer camps, 2.5 hours each
  • 10-16 preteens & teens
  • 2 facilitators
  • 1st session: HTML Basics, Goggles, Thimble
  • 2nd session: Popcorn, Review

Program: Summer Camp

  • Webmaker station as part of 4 week summer programming
  • 12-14 teens
  • station with 1 facilitator, 3-4 teens at once
  • went over Goggles, Thimble, and Popcorn (takes more time than the others)
  • created thimble page for teens with options for where to start
  • greater diversity in level of knowledge
  • important lessons: headphones (for Popcorn Maker), create a user account for program, facilitator to participant ratio
    • facilitator to participant ratio, 1:4 preferred, 1:6 minimum

Making Adjustments

  • make sure your program is adjustable with options for non-linearity
  • embrace chaos
  • learning styles vary by age group
    • teens go at their own pace, which can vary greatly
    • preteens need more hand holding
  • kids + parents, teach the parents
    • very visual tool, so can start as young as when they know how to use a computer
  • adults prefer linear learning, more open to preparatory instruction time
  • participants will help each other, don’t feel like you need to be a teaching assistant to every participant
  • bring candy
  • consider your audience before broaching big issues (digital citizenship, copyright, web literacy, etc.)
    • works fine with adults
    • with teens, little success so far, but will differ for each group

Hello HTML World

  • not having a background in HTML is not a barrier to facilitating
  • will need to know what HTML is for, and will have an easier time explaining concepts if familiar with it
  • Webmaker can be a great way for you to learn the basics yourself
  • don’t have to know all the answers, help your patrons look for the answers, as we do with any reference question
  • the most important part is your skills as facilitator and familiarity with the tools

An Easy Sell

  • rewarding for staff
  • wide appeal, gets both boys and girls involved
  • supports digital literacy & citizenship
  • cost effective, mostly staff time, no additional IT support required

Training and Documentation

  • Gallery with lots of makes with instructions built-in
  • Search for other makes and teaching kits
  • Resources including the Web Literacy Map
  • Badges – does not directly tie in to the Webmaker system, but has fields for you to point to the project as proof and the web literacy concepts it relates to
  • #teachtheweb – both refers to the MOOC that they run and the online community
  • Events – for example, Hive Vancouver
  • Mentor Network and other networks – for example, monthly calls for mentors

Author: Cynthia

Technologist, Librarian, Metadata and Technical Services expert, Educator, Mentor, Web Developer, UXer, Accessibility Advocate, Documentarian

Leave a Comment

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: