Hacking Websites: A CoderDojo Tutorial

This tutorial is written for the Northfield chapter of CoderDojo for our special “April Fools Hacker” theme. It is aimed at students ages 8 and up.

Anything that runs within your browser has to be downloaded first.

That means, everything you see in front of you right now can be changed! The languages that power the web are HTML, CSS and Javascript. In this tutorial, you’ll learn how to look at and change the code for any website, right from your browser!

Step One: Viewing the source

Most browsers let you view the source of any web page. In Chrome, you can press CTRL+U on any page, and it will show you all of the source code!

If you try this on the Northfield CoderDojo website, you should see something like this:

There’s a lot of code here though. How do we know what everything does?

Step Two: A better way to view source

Chrome (and other browsers) have a really cool tool to help you hack websites and see how they’re made.

Right click on anything on the page, and click “inspect”.

You should see the inspector pop open!

Do you see this little icon on the left?

That’s the inspector tool. Click on it, then click on anything in the page, and you’ll see the code that makes it work!

Step Three: Change it!

You don’t have just to look at it. A real hacker learns by breaking and changing things around!

Let’s try to change the color of the “Northfield CoderDojo” logo.

1- Select the inspector and click on the logo at the top

2- Select the upper span element in the code (the one with color_19)

3- On the right, you should see the styles (that’s css). Click on that checkbox.

What happens to the color? Can you change it to something else?

More Challenges

Absolutely anything you see on any website can be changed! Try to get creative and change your favorite websites and learn how they are made by looking at their code!

Note: Remember that if you refresh the page, all your changes will be lost! If you want to work on a website without losing your stuff, you can save the webpage to your computer and work on it later.