6 Hands-On Tools and Activities for Teaching Web Literacy

 
Creative Commons Licensed Image Source

Web Literacy is Essential for Today's Learners

One of the most important skills of the 21st century — web literacy — is often overlooked in the classroom. The ability to read, write and participate online is an indispensable skill for learners, but it’s curiously absent from many educators’ curricula.

At Mozilla, we believe web literacy should be a cornerstone of education. When students can create their own content on the Web, tinker with HTML, and understand the basics of online privacy, they’re empowered to do great things. We also believe web literacy is best taught through hands-on, interactive learning.

We’ve just wrapped up Maker Party, Mozilla’s annual celebration of teaching and learning the Web through hands-on activities. But Maker Parties can be held anywhere, anytime. And our resources for teaching web literacy are free and open source, always. To kickstart web literacy learning in your classroom — or outside of it — here are six tools and activities from Maker Party for teaching critical 21st-century skills:

Thimble (tool)

Coding can be overwhelming — all those brackets and slashes, and not one can be out of place. Thimble is a tool to simplify the learning process and make coding more visual. Thimble users see their screen split in two: a code editor on the left, and a preview pane on the right. Each character and line of code students change on the left will alter what appears on the right, making for a fully-visual learning experience. Thimble also offers a pre-existing projects that students can jump in and remix — they can edit birthday cards, memes, and more. Later this year, Mozilla will be releasing a new, more powerful version of Thimble.

X-Ray Goggles (tool)

Ever wonder what makes your favorite website tick? Students can enable X-Ray Goggles to peer at the code behind their favorite site. It’s a great method for unpacking how code gives way to the websites we know so well.

Hack the News (activity)

Turn on your computer, activate your X-Ray Goggles, and put yourself on the front page of the New York Times. This activity has students use the X-Ray Goggles tool to create a local version of any website, swapping in custom text and images to make it their own.

For example: Learners can head to nytimes.com and remix the site’s layout, placing themselves in the headlines and above the fold. Students can then send the local version to their friends and family for pleasant surprise, or remix peers’ projects to make the activity even more interactive.

Erase All Kittens (activity)

Some might refer to this activity as “stealth learning” — teaching skills under the guise of a game. In this case, the skill is coding. And the game involves kittens. Students alter the source code of the game (written in HTML and CSS, just like a website) to rescue kittens. While playing, students develop the ability to identify and apply various HTML tags.

Webmaker Beta (tool)

With Webmaker — a free, open source Android app — students can build interactive photo galleries, games, memes, comic strips and more, no coding required. The app lets users iterate on the three basic building blocks of the Web: text, images and links. Webmaker’s hallmark is simplicity: even first-time smartphone users can create original content in minutes. Users can also share their creations via email, text and social media, and discover (and remix) what users around them are making.

Webmaker is designed for users who are discovering the Web for the first time through their smartphones. It aims to empower these users as content creators, not just content consumers. But Webmaker is fun for users of all backgrounds and skill levels. The app will emerge from beta later this summer with even more functionality.

The IP Address Tracer (activity)

We browse the Web everyday. But how, exactly, does the whole connectivity process work? This activity teaches students about IP addresses — or, the unique number assigned to each web-enabled device — in the context of privacy. Students learn how IP addresses operate; how to find their own IP address; and what personal information an IP address reveals. Throughout the activity, students create a map of how they’re connected to the Web — and learn how to protect their personal data, too.