How easy is it to “hack” a website and put fake words on it?

Pretty easy.

So easy, that an 11 year old kid could do it.

In fact, this page is designed like a scavenger hunt web quest.

I’ll show you a few magic tricks to get started.

Then, you see how many things you can figure out how to do from the checklist below… without searching on the internet for the answers.

TL;DR Summary: This page is about using developer mode on a web browser to modify a website live in real time. It is not hacking in the real sense as we do not gain unauthorized access on the servers that host the website. In other words, any fake words we put on a website can only be seen on our computer, and not by anyone else visiting the website. But, that’s still enough to trick and scam people.

Table of Contents

Why should I learn how to put fake words on a real website?

• Knowing is half the battle
• Hack this webpage

3 skills you need

• Life Hack #1 Easily modify words on a real website
  • Google Chrome
  • Microsoft Edge
  • Firefox Browser
  • Safari
  • how to change some words

Why should I learn how to put fake words on a real website?

Because knowing is half the battle.

And, experience is the best teacher.

So, once you see how easy it is to modify a website, it might help you avoid being tricked in the future.

The key word here is might.

Just because you know how a trick is done doesn’t mean you won’t fall for it. I mean, this website is called “you can trust this website” – which probably made you a little suspicious.

The hard part is being a little suspicious and thinking critically when you have no reason to suspect anything is fishy…

That’s why internet scams are so successful.

There’s a reason why people have lost $13.3 billion dollars in the past 5 years.

Knowing is half the battle

We already know that images can be photoshopped.

(In fact, models are often photoshopped in ads to create an unrealistic standard of beauty.)

But, what we don’t always realize is that when someone shows you a “live” website, that can be faked too.

Live stream videos of screen recordings can be faked pretty easily.

And just because you land on a website that looks like Amazon, your bank, or some other trusted website, it doesn’t mean you’re actually on the website you think you are…

Looks can be deceiving.

So, let’s learn how to change the words on a real website.

And, hopefully this will help us be a little more tech-savvy in the future.

Hack this website page

Did that catch your attention?

Hacking means different things to different people in different situations.

There’s a difference between hacking and life hacking.

I want you to learn life hacks by changing this web page

I want you to improve your life by learning little tricks with the internet.

Like how to…

• easily modify words on a real website
• quickly take a screenshot to prove something
• reload a page without touching your mouse

I want you to use the developer mode on your web browser to change this web page on your computer.

I don’t want you to actually hack this website

And by that, I mean I don’t want you to gain unauthorized access to the web server or the DNS system to change this web page for everyone.

Don’t do that, please.

3 skills you need to put fake words on this website

Before we begin this challenge, let’s quickly go over 3 skills you’ll need

Life Hack #1 Easily modify words on a real website

We’re going to use developer mode on your web browser to change the words on this site.

NOTE: You have to be using a laptop or desktop computer. This won’t work on a mobile device.

Every modern web browser has a built-in web developing tool kit.

Here’s what it looks like when you open developer tools (devtools) in

• Google Chrome
• Microsoft Edge
• Firefox Browser
• Safari

Now, let’s look at how to change some words on this web page using your web browser.

Now you’re ready to change the words on this web page!

Let’s pretend this was a paragraph about penguins. Penguins are awesome! I mean, they sing and dance. They’re even hilarious as they save the world. Is there anything that penguins can’t do? (I mean, aside from fly.) The world clearly needs more of our black tuxedo friends!

Hmm. I guess it was a paragraph about penguins.

Okay. Let’s say you wanted to modify the paragraph so it was really about sharks. (Where are the cute videos of dancing sharks?)

Let’s change the sentence in red

1. Move your mouse over the sentence about how penguins are awesome.
2. Right click that sentence.
3. In the pop-up window, click on inspect.

This will open the dev tools (developer tools) in your web browser.

Getting used to the developer tools side panel

On the right side of your screen, a new panel will open up.

Depending on the size of your screen, you will see different things.

(This is because everyone has a different screen size so it can change which panels you see.)

Once you get used to how dev tools are set up, it will become a lot easier to put fake words on this website.

Watch this video to get a sense of how developer tools are organized.

• video coming soon

What Developer Tools look like in Google Chrome

Basically, on the left side of the browser, you can see the website like normal.

On the right side, you have developer tools.

• Usually there’s a section that shows you the code for the titles and paragraph text on the website. (This is HTML code.)
• And there’s also a section with the code for styles and appearances. (This is CSS code.) The styles includes things like text colour, font choices, layout, background images, etc.

Changing a sentence on someone else’s website by INSPECTING it in Google Chrome Dev Tools

With developer tools open, move your cursor over the words Penguins are awesome. When you RIGHT CLICK and INSPECT that sentence, the Developer Tools should highlight the underlying code that makes that sentence.

Warning! There’s a lot of code in there.

It can look pretty intimidating, especially if you’ve never seen this kind of stuff before!

At this point of the game, you don’t need to know HOW to code.

You just need to look for the words you want to change. (like Penguins are awesome)

Code is poetry. Well written code is efficient and elegant in its own way.

It’s like speaking another language.

Eventually, over time, you’ll probably start to notice some patterns.

• For example, what do you think the p in <p> stands for?
• What do you think is the difference between <p> and </p>?
• Why are some lines indented more than others?
• How do the indented lines help us understand the organization of the code?

Shark Example: Changing a sentence on someone else’s website using Google Chrome Dev Tools

Now that you have inspected the code for Penguins are awesome…

Reminder:

• Go up to the sentence in red that says penguins are awesome! (You can click here to jump back to that section.)
• RIGHT CLICK and INSPECT the sentence to show the code in the developer tools.

See if you can change the code that tells the web browser to show the sentence: Penguins are awesome.

1. Double click the sentence about penguins in the code (on the developer tools side)
2. Type in a new sentence about sharks. For example, sharks are better than penguins!
3. When you hit enter on your keyboard, the sentence on the real website will change.

You just put fake words on a real website! High five!

Life Hack #2 Quickly take a screenshot to prove something

The internet changes constantly.

Sometimes, you might want to take a screenshot to “prove” something was there.

Or, in this case, you might want to take a screenshot to prove something you did. Like change the sentence on someone else’s website.

There are lots of ways to take screenshots.

• Here’s a post by Business Insider about different ways to take a screenshot on Windows.
• This Apple support page has information about how to take a screenshot on Macs.
• This Chromebook support page has information about how to take a screenshot on a Chromebook

If you’re using a Windows device, usually there’s literally a “print screen” key somewhere on the keyboard.

(The hardest part is finding it because different keyboards hide it in different spots. Also, if you’re using a laptop, you might have to hold down a special function key to get it to work. This is because the Print Screen key might be combined with another function on the same key to save space.)

Usually when you take a screenshot, your computer will copy the screenshot into the clipboard.

That way, you can go to another program (like Google slides) and paste in the image.

Life Hack #3 Reload a web page (without touching your mouse)

All of the changes we’ve made so far only affect the web browser on our computer.

If you switch to a different web browser and open the same page, your sentence about how sharks are awesome will revert back to the original version.

Likewise, if you re-load this web page in your browser, your computer should get a fresh copy of the code for this webpage from the web server.

In other words, changing a website with developer tools is not permanent.

(But it does make life way easier if you’re a website designer because you can quickly tweak and try things with your website without having to constantly upload changes to the webserver. So, we test a bunch of things with developer tools, and once we find something that works, we use that code and upload it to the real website server. When we change the code on the website server, it means that code now gets seen by everyone visiting our website.)

3 ways to reload your webpage

Reload this web page to erase your changes and get a fresh copy of the original web page

Press the F5 key.

This is a keyboard shortcut that tells your browser to reload the web page.

The sentence you modified about how sharks are awesome should go back to the original sentence, Penguins are awesome.

So, as you go through the scavenger hunt, if you mess up, all you need to do is hit the F5 key.

(or the SHIFT + F5 key combination.)

Hack this Page Scavenger Hunt – Bronze

You’re ready to try to hack this page!

See if you can change the text on this web page.

All of the following challenges modify the HTML code of this page. (Hypertext Markup Language)

Let’s see how many you can figure out how to do!

(The first one, we already did together but see if you can do it with a different paragraph!)

By the way… one of the 10 items is impossible to do with developer tools. Everything else is possible.

Which number is impossible to modify using developer tools and why?

Hack this Page Scavenger Hunt – Silver

The next stage of the Hack this Page challenge is to change the appearance or styles of the text and layout of this web page.

We make these types of changes to the CSS code (Cascading Style Sheets).

Let’s take a look at developer tools to see how we can change the appearance / style of a web page

How to use Developer Tools to change the styles on a web page

Now that you have inspected the code for Penguins are awesome…

Reminder:

• Go up to the sentence in red that says penguins are awesome! (You can click here to jump back to that section.)
• RIGHT CLICK and INSPECT the sentence to show the code in the developer tools.

See if you can change the code that tells the web browser to show the sentence: Penguins are awesome.

1. Double click the sentence about penguins in the code (on the developer tools side)
2. Type in a new sentence about sharks. For example, sharks are better than penguins!
3. When you hit enter on your keyboard, the sentence on the real website will change.

You just put fake words on a real website! High five!

CSS

• Change the colour of text
• Make something invisible
• Change the font size 
• Change the font ???

JAVA

• Can we get a clock updated by Java 
• Change the output of the clock – date
• Can we get a news feed? Or something similar
• Content that loads without refreshing 
  • List of posts – filter by tag?
• Code date – time on website 
• Social feed?

Page content 

• Winners of contest 
• News article
• Facts and tables 
• Warnings
• Fake news

Proof

• Take a screenshot 
• Take a screencast video
• Film the screen using a phone cam

Website pages are made up of 3 parts

• HTML
• CSS 
• JavaScript 

Developers mode in browsers lets you tinker around in real time – as in, the changes you make in the code can be seen right away!

And in fact, tinkering around is one of the best ways to learn about things.

If you right-click in a sentence, you get a drop down menu. If you click on inspect, you’ll see a sidebar pop up on the right.

The line of code that created the sentence you right-clicked on will be highlighted.

Usually, there are many lines of code. So the browser will use an ellipse … to hide some code. If you click on the ellipse, you’ll be able to see more of the underlying code.

Eventually, you’ll see a sentence or word that you want to change. 

Some of the tasks below involve changing text on this page. 

Usually, when we learn to code, we expect a teacher to go step by step to introduce us to various commands. 

And that can be a great way to learn. 

Another way to learn is to explore and discover things for yourself. 

see what’s inside the box. Are there any patterns you can find? 

Can you change this title?

Here’s a paragraph. Can you change a few words to subtly change the meaning of the text? Just because we see “evidence” or “proof” of something, how do we really know things happened like that? 

Strategies 

• Change this bullet item
• Check the website yourself 
• Use a different device to verify the information 
• Can you find multiple sources that confirm the information – as opposed to multiple sources that are reporting on the same primary source

Here’s a photo. Can you change the photo

According to sales, here are the 5 largest online retailers. Can you change the link below to go to a different website?

• Bank

Sometimes if you hover over a link, you can see an alternate message. Here are the 5 largest free email providers. Can you change the hover over alternative message?

Pretend there’s some information that you want to hide on a page. Can you delete this paragraph?

Pro: save your changes so when you refresh the page, it’s not lost.