Use X-Ray Googles To Give A Web Page Makeover
Difficulty: 4 (rated by author; 1=easy <--> 5=difficult)
Views: 3307
: Creating With Media
Mozilla’s X-Ray Goggles is a tool to learn how the web works by using it to inspect and re-edit a copy of any page on the web:
X-Ray Goggles allow you to see the building blocks that make up websites on the internet, and then remix them into new creations. X-Ray Goggles lets you poke around the elements of a web page and remix them into new creations. Learn how to swap images, text, and more.
Try a simple example on the demo site– activate the goggles, and follow instructions to see how you can change the background of the page. To do your own, follow the directions to install X-Ray Goggles in your web browser (this will not work on a mobile device).
The process for doing your own web maker over are:
- Find a page on the web you want to modify with your own content (see below for instructions and examples for this Challenge).
- Click the X-Ray Goggles on your bookmarks bar (after you have installed it).
- Click on any element of the page- a headline, a paragraph, an icon, a menu button, then edit the portion of the HTML code to change the content (you can change the
src=""
value of animg tag
to change an image to any other image on the web if you can find it’s URL). Here we will change the headline of an article in the Onion


- Click Update to save that change.
- Change as many elements on the page as you can to change it’s meaning.
- When you are done, press P on your keyboard or click the Publish button in the lower right. If this is your first time using Googles, you will have to create an account on Mozilla; if you have an account you may need to log in. This will create a version of your re-written web page at a public URL- this is what you should use as the example of your response
If you do not want to make an account, then just make a screenshot of your work to make an image. You can put it online in our UDG Image Pool so it has a URL you can use for your example.
Three Types of Challenges
You can, of course, use Mozilla Googles in any way you prefer- the goal is to give you an experience in the tool. For this challenge, we ask you to try one of the following sites to re-create them to reflect some aspect of Do It Yourself vs Do It For Me.
Transform a Coursera Course
Choose one of the MOOC courses offered by Coursera, and change the course description page to be related to something of interest to you. Below is a re-write of the Stanford University Machine Learning Course to be about Happiness For Edupunks:

See the full version of the Happiness for EDUPUNKS Course
Change the Description of a YouTube Video
Find a YouTube Video and change all of it’s information (title, description, names of related videos, note the video remains the same, you are changing it’s context). This example adds a bit of EDUPUNK to a video about getting introduced to Blackboard Learn by making it seem the video is about a new feature on the tool.

See the full version of the Busting Out Blackboard eduPUNK
Turn an Everyday Product on Amazon.Com into Something Good for DIY
Start with maybe the kitchen or household areas of Amazon.com to find an item that you can change it’s title an description to make it more interesting to someone interested in the DIY approach. The example below tries to add some EDUPUNK to a set of spatulas.

Example for "Use X-Ray Googles To Give A Web Page Makeover":
http://cogdog.makes.org/goggles/cogdogs-remix-of-machine-learning-stanford-university-coursera
Leave a Reply