The Fun Way to Learn JavaScript

And it works great for me.

Photo by Kelly Sikkema on Unsplash

Theory is boring. Practice makes perfect. And fun practices own the game.

In order to have sustained interest while learning JavaScript, I often tend to make my work as fun as possible.

With the help of Console Tab and a little creativity, you can make learning JavaScript more interesting than ever.

Do you still want to have fun with JavaScript? Keep reading.

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

Oh really?

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

Again, Facebook.

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:

These are just small practices out of the countless practices to have fun with JavaScript. Such exercises help me memorize better and code more effectively.

Do you have any other practice methods? Please share and let me know in the comment below.

Blogger | Programmer | Entrepreneur | Join me for more helpful insights:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store