Have you ever wondered how to make coding exciting and show that it can be both fun and useful? Let me introduce you to a cool tool called Mozilla X-Ray Goggles!
Mozilla X-Ray Goggles is a tool that lets you peek behind the scenes of your favorite websites to see the code that makes them work. You can even remix these sites to create your own versions! It’s super easy to get started with just two simple steps.
First, you need to drag the X-Ray Goggles button into your Favorites toolbar on your web browser. Once that’s done, visit a website you like. At the top right corner, click on “X-Ray Goggles.”
When you do this, the website will be divided into sections, making it easier to understand. By clicking on different parts of the site, you can see the code that creates it at the bottom of your screen. This is where the fun begins!
For beginners, it’s a good idea to start small. Try clicking on a piece of text, like “Music for everyone.” You’ll see the code for that text at the bottom. You can change it to something personal, like “for ME.” Now, you’ve just changed the site!
Don’t worry, these changes aren’t permanent. You’re just creating a new version of the site that you can share with your teachers, classmates, and friends.
Besides having fun, X-Ray Goggles can help you learn more deeply. For example, you can visit a news website and explore its different parts. You can add your own comments, spot any biases, and make notes on the webpage. This helps you think critically about what you see online.
On Mozilla’s website, you’ll find lots of resources and activities to help you think more critically about media. It’s a fantastic way to get interested in coding and learn while having fun!
So, why not give Mozilla X-Ray Goggles a try and start exploring the world of coding today?
Choose a website you love and use Mozilla X-Ray Goggles to explore its code. Try changing the text or images to create your own version of the site. Share your remix with your classmates and discuss the changes you made.
Use X-Ray Goggles to understand how web pages are structured. Then, create a simple web page about yourself by remixing an existing site. Include your favorite hobbies, a fun fact, and a picture. Present your page to the class.
Work in pairs to find specific elements on a website using X-Ray Goggles. For example, locate the code for a header, a paragraph, and an image. Write down the code snippets and explain what each part does to your partner.
Visit a news website and use X-Ray Goggles to explore its content. Identify any biased language or images. Discuss with your group how these elements might influence readers and suggest changes to make the content more balanced.
In small groups, choose a website and use X-Ray Goggles to change the text and images to tell a new story. Each group member can contribute a part of the story. Share your final creation with the class and explain your creative process.
Here’s a sanitized version of the provided YouTube transcript:
—
How can you spark students’ interest in coding and show them that it can be fun and useful? I’m going to show you how with a tool called Mozilla X-Ray Goggles.
So, here we are on the Mozilla X-Ray Goggles page, and what you can do here is see the code behind your favorite webpages and remix them. It’s very easy to get it set up. There are really only two steps. You need to drag X-Ray Goggles into your Favorites toolbar. Once you have it up there, you can go to a site that students find interesting, and at the top right, click “X-Ray Goggles.”
From there, you’ll notice that it breaks the site down into chunks, making it more manageable for students to see what’s going on. If you click, you can actually see the code at the bottom of the screen that goes into making the site. Students can change and swap in images, videos, or text on these sites.
For students who are just starting, I suggest clicking on something small. For example, I’m going to click on a piece of text, “Music for everyone.” At the bottom, you’ll see there isn’t much there, but this is a great way to get students started. I’m going to personalize it to say, “for ME.”
Now you can see we’ve changed the site. The good news is this isn’t permanent; it hasn’t changed the Spotify site. It’s just created a remixed site that you can publish and share with teachers, classmates, and friends.
This is all a lot of fun and gets students interested in the site, but what about deeper learning? One of the things you can do is go to a news site and have students look at the different pieces of the site. They can add their commentary, spot biases, and annotate the webpage as they like. You can really do some deeper learning here with X-Ray Goggles.
If you go onto Mozilla’s site, you’ll find a lot of different resources and activities to get students thinking critically about media. It’s a great way to spark students’ interest and get them learning on the go.
—
This version maintains the core message while removing any informal language and ensuring clarity.
Coding – The process of writing instructions for a computer to follow. – Example sentence: In our computer class, we are learning coding to create our own video games.
Goggles – Special glasses that protect your eyes, often used in virtual reality or when working with computers for long periods. – Example sentence: We wore virtual reality goggles to explore a 3D model of the solar system.
Website – A collection of related web pages that are accessed through the internet. – Example sentence: Our class project is to design a website about endangered animals.
Code – A set of instructions written in a programming language that a computer can understand. – Example sentence: I wrote a code to make the robot move forward and turn left.
Learn – To gain knowledge or skills through study or experience. – Example sentence: We learn new coding skills by solving puzzles on the computer.
Experiment – To try out new ideas or methods to see what happens. – Example sentence: We experiment with different codes to see how they change the animation.
Critical – Involving careful judgment or evaluation, especially when solving problems. – Example sentence: Critical thinking helps us debug our code when it doesn’t work as expected.
Fun – Enjoyable or entertaining. – Example sentence: It’s fun to see our coding projects come to life on the screen.
Remix – To take existing code or projects and modify them to create something new. – Example sentence: We can remix the game by changing the characters and adding new levels.
Explore – To investigate or study something to learn more about it. – Example sentence: We explore different programming languages to find out which one we like best.
