re:Envision a Website
Activity 1: Get to know Mozilla Goggles
(10 minutes)
Before you can start, you need to add the Mozilla Goggles as Bookmark on your Web Browser. This Bookmark works for FireFox, Chrome, Safari, and Opera. It doesn’t work on Internet Explorer
To download the goggles, go to this site: https://goggles.mozilla.org/ and follow the instructions
Remix an animal and its text
Activity 2: Remix a Real Website
(20-40 minutes)
Ready to become a hacker?
For your first hack, choose a news website.
Choose your favorite website. It could be a news site, the website for your favorite band or performer, or any other site you think would be fun to remix.
Change Some Text
-
With your Moxilla Goggles on, click on some text you would like to replace. You might notice some tags around the text; here’s what they mean.
-
<h1> Heading </h1>
-
<p> paragraph </p>
-
<strong> Makes your text Bold </strong>
-
-
Delete the text inside the tags and replace it with your own words.
-
Click Update to see your changes
Change An Image
-
Before your change an image, find the image you want to use online. You could use a creative commons image search to find photos, videos, and more: http://search.creativecommons.org/
-
Let’s say I found an image online at this url: https://static.pexels.com/photos/59523/pexels-photo-59523.jpeg
-
In html, I will label it as an image <img> and the website I got it from is its source src=
-
Here’s how I would code this image in html:
<img src=“https://static.pexels.com/photos/59523/pexels-photo-59523.jpeg” />
-
With Mozilla goggles, click on an image you want to replace. Make sure it is an <img/>
-
Delete the html code for the image, and replace it with:
<img src=“https:// ” />
Activity 3: What else can you remix?
(20 minutes)
Imagine the fake websites you could create by remixing! If you like your fake news site, keep working on it! If you’d rather remix a different website, like the site for your favorite musician or the wikipedia site for something you’re interested in, go for it!
Activity 4: Save and Submit
(5 minutes)
If you create an account through Mozilla Goggles, you can share your fake website. If you’d rather not create an account, take a screenshot (or two!) of your remixed site and send it in to work toward a web design badge.
What You'll Need:
Remix a webpage with hacker-style x-ray goggles
