How to Be a Fake Hacker

Have you ever looked at a website and said to yourself "I wish there was a legal way to make temporary changes to website for my own amusement."? If you have, and even if you haven't, you're in luck because I have something that will suit your needs.

First of all, hacking is a term that is commonly over used. A hacker is "a person who uses computers to gain unauthorized access to data." according to Wikipedia. In this tutorial, I will not be showing you how to steal secret documents from the government, but rather change what we see on a website, like the picture above.

Before we get started, I just want to warn you that no permanent changes to the actual website will be made, but this is a cool tool to play with. I warn that if you leave or refresh the page the changes you make will be erased. And now i present to you: How To Be A Fake Hacker. Or How To Trick Your Friends Into Thinking That You Are A Hacker.

Cost: Time. 2-5 Minutes Really.

Materials needed: Computer with internet connection.

To start this tutorial off, find a website that you would like to play around with. For this project I used my Instructable account page (https://www.instructables.com/member/-_+-+wAT). The Picture is of how it looks without any changes made to it.

Ok, so the next thing we need to do is open up the element window. This will vary between browsers, but I have gotten it to work on Internet Explorer, Firefox, and Google Chrome. I will be using Google Chrome in this instance.

In order to open the Element window, we need to right click almost anywhere on the webpage. It is preferable to right click on what you want to change. After right clicking, click on "Inspect Element". This should open up an intimidating box on the bottom of the webpage. Now before you start clicking all over the place trying to do this on your own, you should know that you will have a difficult time without knowing HTML codes.

For right now, lets just work on changing the color of some text.

So we should have the element inspector at the bottom of the screen right now. If you didn't click on anything, then the code for the small portion of the page should be selected. If you look to the right portion of the element inspector, you will find a box like the one that I 'circled' in red in the second picture which I will call the styles box. About half way down this box you should find something like this:

[√] body {

[√] background-color: #c6d7de;

[√] margin: 0px;

[√] font-family: Arial, Helvetica, sans-serif;

[√] font-size: 12px;

[√] color: #333;

[√] min-width: 970px;line-height: normal;}

Some of the text will be faded or have a line drawn through them, but we don't need to worry about those for now. What we want is the color category. If you hover the pointer over the colored box, it will tell you to either click the colored box or shift click it. We want to normally click the box. Once we do, a colorpicker opens up. Experiment with different colors and find the one that you want. I will be using a shade of blue. #1209E9 to be exact.

CONGRATULATIONS you have stuck around longer than most people I try to teach. Give yourself a pat on the back.

Now stop doing that. It's weird.

Back to what we're working on, lets change some of the text. Lets say that you have a low feature count. Why don't we change it. Go over to the numbers for the feature count (mine was at 0%) and right click and open the inspect element. The inspect element screen will then shift over to another section code that will look something like this.

▼

▶

• ...

  ▶

• ...

  ▶

• ...

  ▶

• ...

  If you click on the arrow of the third ▶

• ... , it will open up another section of code containing ... and "0%" (or whatever percent of features you have). If you simply double click on the percentage, it will open up a text editor and you can change the number to whatever you want. This method can also be applied to changing other text objects.

I continued to change other things to my liking and ended up with the picture above.

This can be used to change many different properties to a website and to prank your friends. I especially like taking a screenshot and then sending it to a friend. With knowledge of codes, it can become even cooler, however, since you are only changing the html of the webpage on your screen, the changes you make will disappear if you leave or refresh the page.

Personally, I used http://www.w3schools.com/html/default.asp to learn HTML.

Have fun with this and enjoy pretending to be a hacker.