Introduction: How to Change a Website (Temporarily)

Hello! Have you ever wanted to show your friends your 'hacking' skills by changing a website to say your name on it, changing stuff to make it funny, or do really anything to a website? Well its a good thing you're here. In this tutorial you'll learn to torture, maim, beat, and murder websites to your liking, for free! I'll see you on the other side...

Step 1: Install Chrome

In this tutorial, you will need only one piece of software, Google Chrome. If you already have this, great! you can skip this step. If you don't, follow here. First go here to download Google Chrome:

And click the nice big green download button, assuming if its the correct operating system shown. if it isn't, click the

Download Chrome for another platform

Once downloaded, run the setup installer. Once you have Google Chrome installed, go to the next step.

Step 2: Find Your Website

For me, this is the hardest step. You want to find a website with as much static information as possible, or in other terms, it doesn't reload or change, it stays the same. For this tutorial I will be doing a website of a very much loved store's website,

Something to note:

If you reload your page all your work will be lost, so at least take a screenshot first!

Step 3: Right Click on What You Want to Change

First what you will need to do is right click on what you want to change. I will be right clicking My Local Store

After you have done that, click Inspect Element and a big complicated window should pop up near the bottom of your window. Make sure the tab Elements is highlighted, its directly right of the search icon. There may be another window(s) in your way, so hover your mouse over the top of the overlapping window till you see your cursor change to two horizontal parallel lines and two arrows facing opposite directions (trust me, its the only way your mouse can change besides to edit text in this window). Then, click and drag all the way downwards will you see a hole bunch of colorful text, or HTML.

Step 4: Find Where Is Highlighted

If you didn't click any of the colorful text, one line should be highlighted grey, as shown in the picture. Because I clicked My Local Store I'm looking for > My Local Store </ then after the </ either div, a, h1, anything, really, As long as it says My Local Store. Some times it has a grey arrow pointing near the right, click that and some text should pop down. You may find it there, too. After you find the My Local Store, you are at the fun part. You can edit this to almost whatever you want. Sometimes it can be too big for the area given, so you will need to change it to something shorter. But i think Walmart is helping up, because their website changes the location of the other tabs for us!

Step 5: Have Fun!

You can do this to as many things to a website as you want! If you find any <div class="any class here" style="left: #px; right: #px;"> or similar, You can change the px number. I found this example in the Instructables homepage, when i clicked the Let's Make button. There's a screenshot up top, and the right px was just auto. But you can change the 7px to whatever, this changed the offset of the changing words. I can't show you all the ways to change everything, HTML and CSS is a vast coding language. So, just right click, click, on the website or on the HTML editor, see what you can do! Post a screenshot of what you can do!

Step 6: Gallery of What You Have Made!

Coded Creations

Participated in the
Coded Creations