Mozilla offers some great tools that can help students understand how webpages are created. Thimble is one of those tools that I have featured in the past. It offers many great activities for students to complete to learn how to build webpages including webpages with animations.

X-ray Goggles is another great tool that Mozilla makes to help students learn the code that powers much of what they see on the Web. X-ray Goggles is a free tool that lets you remix any page that you find on the Internet. (Note, it doesn’t change the way others see the page, it only changes the way that you see it). To use X-ray Goggles you need to install it in your Chrome or Firefox bookmarks bar. Then you can launch it on any webpage. When you launch X-ray Goggles you will be able to select images and text on a page and then shown the code behind your selection. X-ray Goggles will let you then alter the code to display new things on that page.

Applications for Education
Mozilla offers a free lesson plan called Hack the News that introduces students to the features of X-ray Goggles. In the lesson students will remix a news story by putting their favorite fictional characters into the page on which the story is published.