FOSSASIA

X-Ray: Hack your favorite webpage using X-RAY Goggles

X-ray goggle is a code inspector tool by Mozilla Webmaker which lets you view and remix the code of your favorite web pages. Find the tool here: https://webmaker.org/en-US/goggles

Outcome:

  • To learn the basics of html and css using top-down approach.
  • To inspect the code of your favorite website. For example, on google website, the word "Google" written is a text or an image?.
  • To hack the code and remix it how you want it to be.

Requirements:

  • Step 1: Go to the above url.
  • Step 2: Activate x-ray goggles.
  • Step 3: Go to your favorite webpage
  • Step 4: Activate x-ray googles on the same page.
  • Step 5: Start hacking and remixing the code.

Note:

  1. Make sure you sign up/sign in (if you haven't already) before saving your make.
  2. Hacking here doesn't mean you will be able to change the actual website. It means that to learn coding you will be following top down approach where you can view all the code of a website and edit those as you want and once you save it it creates a new make in you account which is the edited page.

Expected Outcomes:

  • Remix at least 5 to 10 html elements and css properties of your favorite website.
  • You can go for more than one make if you wish to.

Task tags

  • html
  • xray goggles
  • webmaker
  • css

Students who completed this task

JamMurz, Sumesupe, Yathannsh, pineappleskyes, Guneet, Chong Jing Quan, Yasoob, Vera, Binareader, Parisha, Shashank, Delta, Juanvhook, Nastya, jinyang, Baidya, emanf9, danny_yin, nitezaw

Task type

  • code Code
  • chrome_reader_mode Documentation / Training

Level

Beginner
close

2015