Theory is boring. Practice makes perfect. And fun practices own the game.
Make a Mess of a Web Page
No one likes messy things. In fact, I really hate it because it takes me time in a lot of things. But that doesn’t mean I always make everything perfect. Sometimes a little mess can make my day. More important, it’s fun.
When you look at a perfect website, you might be interested. But if you break that perfection you might feel more excited. Trust me.
OK, let’s break the perfection of a website anyway.
So, who are our first victims? Let’s pick WikiHow.
First, look at the source code of wikihow to see what tags are being used.
As you can see, there are many tags: div, li, ul, p, span, img, etc.
Now, we paste the following code into the Console Tab:
And wow, what’s just happening?
Facebook Knows Who You are Even Before You Sign up
Not for now, but probably will be sometime in the future.
For now, we can pretend to do that by handling the button event and showing a simple dialog.
Let’s see what the registration button id is.
And the code we will use is:
And when I click the sign up button, a message appears.
Use this trick to scare your non-tech friends and have fun.
Sign Up Facebook Challenge
We will make the facebook registration button change the position itself every time the mouse pointer is moved.
This one is super fun. If you use it to fool your friends, they’ll find it a bit annoying. So what? More importantly, again, it’s fun.
And here’s the result.
Make an Editable Web Page
There is a way to create fake screenshots with modified information without you having to inspect the DOM element. In fact, you will edit directly on the site.
The code below will help you do that. All you need to do is paste it into the Console Tab and Enter:
Do you have any other practice methods? Please share and let me know in the comment below.