Mozilla Webmaker Part 3: Making and Using Web Projects

Some of the projects available on Mozilla Webmaker.

Some of the projects available on Mozilla Webmaker.

Mozilla, the software community that produces free Web browser Firefox has a pretty cool new(ish) website, Mozilla Webmaker. It has a collection of tools and resources, including an entire section geared towards education, meant to help people become more Web-literate. This is part three of my three-part series on Mozilla Webmaker, and in it I’ll talk about a few of the already-available projects, and how to go about creating your own. If you haven’t seen them yet, here’s the first post in the series, about assigning a Web-based project here, and the second, about Mozilla’s Web tools here.

But first, to use the Webmaker Projects, you’ll have to sign in to their site.  You can easily do this with any existing email address, and if you have a Gmail or Yahoo! account, you don’t even need to enter a new password, you just use that account to log in. Once logged in, you can save projects that you see and like, as well as save your own remixed projects and projects you’ve made from scratch. Since you can log in to Webmaker with Gmail, all W&M students, whose email is Google-based, can easily sign in with their W&M email addresses. This makes assigning Webmaker projects even easier for W&M instructors.

Some Example Projects and Kits Available

Some projects are more like tutorials, while others are more involved.  Learning by working on a project is key to learning development skills, and many of the projects on Webmaker are designed for beginners just learning. Many of the projects also require no special knowledge of the Web in order to assign and teach them, so that you can jump in with your students and learn something new yourself. They are all also open resources, which means that you can remix and modify them to fit your teaching needs. Below are two projects that I thought might work in a future course.

  • Make a Movie Pitch is an activity that involves creating a webpage and content for that page, including a fake movie.  It is specifically geared towards high school students as it is right now, and pitching a movie for a Chinese audience, so if I used it, I’d remix it to better fit my course’s needs. For example, I might have students in a women’s studies intro course read about the Bechdel Test and think up a movie pitch that is for a movie that passes the Bechdel Test.  I’d probably have them work in groups for this. The finished webpages could then be used to have a discussion in class about what kinds of decisions a feminist filmmaker might make. As producers of their own webpage projects, students could also discuss gender and popular culture from a different perspective than as “consumers.”
  • Hacking Guide: Online Storytelling isn’t an “activity,” but a kit, which is a more open-ended project. This kit has several tools and tutorials collected in it to help learn how to do online storytelling using the video editor Popcornmaker. The description from the Mozilla Webmaker website: “Dive deeper into digital storytelling. Use Popcorn Maker to create compelling multimedia stories on the Web.”

These are just a couple of examples of the projects available on Webmaker, and there are lots of others that might fit your needs, either with or without remixing them.

At W&M in particular, I think that doing a Web-based project (either a whole-class project, or individual projects) would be great for a freshman seminar. Not only would freshmen get a taste of some Web skills, but also a class-project would work well in helping students develop relationships with each other, get practice working collaboratively, and be invested in the project of the course iteslf.

Making Your Own Projects

While all the existing projects already available provide a good start, the real strength of the Webmaker projects is in how easy it is to make one yourself. There’s a project available on Mozilla Webmaker’s projects page that helps you build your own teaching kit and one that helps you make your own teaching activity. Both of these projects have broken down the process for thinking through a Web-based assignment, so they’re good guidance for doing so if you’re new to Web stuff yourself.  You can also use these projects as templates for your own project (or any other project on the site, for that matter).

This is the "Teaching Activity" project inside the Thimble Web editor. Within this window, you can make changes to the webpage, and save it as your own project. As you can see, the html for the webpage appears on the lefthand side, and the webpage as it will appear in a browser appears on the righthand side.

This is the “Teaching Activity” project inside the Thimble Web editor. Within this window, you can make changes to the webpage, and save it as your own project. As you can see, the html for the webpage appears on the lefthand side, and the webpage as it will appear in a browser appears on the righthand side.

If you want to create a new project based on an existing one, like the Teaching Activity project, just click on the green “Remix” button on the upper right corner of the window when you’re on the teaching activity page.  This will open up the webpage into a Thimble Web editor. If you don’t know html, don’t fear, Thimble was designed by Mozilla to help you learn the basics of Web editing.

As you can see in the image to the right, Thimble shows you the webpage as viewers will see it in their browsers on the right, and the html code on the left. As you make changes to the code, you can see the “live” effects of those changes on the webpage itself.

Even if you don’t know html, if you’re doing a “Remix” of a project, like the remix of the Teaching Activity project (pictured right), you don’t need to know html.  The code on the left-hand side has tips and instructions built into it — it’s the black text, which tells you things like “What is needed to run this activity? Replace the example materials with those your activity needs!” or “Add a description here.” The best part is that you can’t “break” anything or mess up an existing website, since you’re working on your own copy of the webpage. There’s also large, unmistakable “undo” and “redo” buttons on the editing window. This means you’re free to experiment with the html, figure out what it does, all while developing a Web project for your students.

About Kim Mann

Kim Mann is the editor and a writer for the Academic Technology Blog. She earned her BA in English from the University of Minnesota in 2003 and her MA in American Studies from William & Mary in 2009, and her PhD in American Studies at the College in 2014. Her research is on technology, the interface, and the body in mid-twentieth century science fiction.