{"id":12271,"date":"2014-09-10T15:21:33","date_gmt":"2014-09-10T19:21:33","guid":{"rendered":"http:\/\/webmakerblog.wpengine.com\/?p=12271"},"modified":"2019-02-26T12:41:11","modified_gmt":"2019-02-26T20:41:11","slug":"hack-your-school","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/foundation-archive\/mozilla-learning\/hack-your-school\/","title":{"rendered":"Remix your school's web site"},"content":{"rendered":"

\"\"
\nRemix your school’s web site<\/strong>. It’s fun, creative, and lets you mess around with HTML, the language that makes up the web. It’s easy!<\/p>\n

Don’t worry<\/strong> — you’re not actually hacking the site for others — just yourself. You’re changing a local version of the site that only you can see.<\/p><\/blockquote>\n

1) Install the X-Ray Goggles<\/strong><\/h3>\n

Go to https:\/\/goggles.webmaker.org<\/a>. Drag the big yellow “Activate X-Ray Goggles” button to your browser’s bookmarks toolbar.<\/p>\n

\"\"<\/h3>\n

2) Navigate to your school’s web site<\/h3>\n

 <\/p>\n

3) Activate the Goggles<\/h3>\n

Click the Goggles to turn them on. Now when you mouse over elements of the page, you’ll see the code underneath.<\/p>\n

4) Hit the “remix” button<\/h3>\n

Hit “R” on the keyboard to remix any element.<\/p>\n

5) Change the text<\/h3>\n

Try changing some of the text on the page. You could announce that your school is closed next week, that your teacher has been abducted by aliens — anything!<\/p>\n

6) Bonus points: swap in a new image<\/h3>\n

Mouse over an image on the page and hit “R” \/ “Remix.” Then paste in the address for your new image.
\nTOP TIP: How to swap an image.<\/strong> First, find an image you like on the web<\/a>. Right-click or control-click on the image you want and select: “Copy image location<\/strong>.” (Or “Copy image URL” or “Copy image address”, depending on your web browser.) Then paste your new image URL over top of the old one. Be careful not to lose the quotation marks!<\/em>
\n

\"\"

Here’s a sample remix<\/strong><\/a>. We changed the text and image to add more dog.<\/p><\/div><\/p>\n

7) Share<\/h3>\n