How to Practice JavaScript, with an Example

By Angela

Jun 15, 2025

Tutorials

I love when I get questions from my subscribers, and I got this comment on a recent video. It's the kind of question that deserves a deeper answer, so I wanted to share my thoughts here. Let's walk through it together, because if one person asked, chances are others are wondering the same thing.

Could you make a video with tips on learning JavaScript or getting better at it? I'm familiar with the basics and concepts, but I find JavaScript more challenging compared to HTML and CSS. (You and me both!) For example: writing code without looking at an example. Also, I'd love some advice on how to work with JavaScript—like what you do when you can't remember how to do something (which is normal, since using Google is part of the job). Where do you like to look for solutions? I personally use resources like MDN and W3Schools.

Before I dive in, I won't bury the lede. The answer is practice and repetition. JavaScript is a language, and to learn a new language you need to use it.

But let's break down this question a little more. First, I also find JavaScript a lot more challenging than HTML and CSS. I mean, I use JavaScript most days and it's probably always going to be the thing I need the most help with. You are not alone there at all.

Next, I don't think you should worry about needing to look at examples, although I totally understand the frustration of not remembering something. This is why I take really good notes and I version control most things I do. So I don't have to remember everything. Because even when I do something so well I can do it from memory, if I don't do it again for six months or a year, I sometimes forget and have to look it up.

I think MDN and W3Schools are both excellent resources. I also recommend Learn JavaScript which I'll link below. This is one of the best JavaScript tutorials I've ever worked on and it's structured in a way that makes you solve real problems over and over again.

Again, the best thing you can do to build your skills is practice and repetition. Think of all the user interface elements that require JavaScript. Things like tabs, accordions, sliders, navigation… those are all things that are done with JavaScript. I promise that if you practice building these things, you'll get much more comfortable and confident with JavaScript.

You know what else you can do? Subscribe to my channel and hit the Like button so I can keep answering your questions, and help you build confidence as developers. It helps me out and I really appreciate your support. Thanks!

So let me show you how I use a JavaScript .forEach(); loop and the window.location; property to create something called You Are Here navigation. For-loops and JavaScript API properties are two very common, and very powerful, things you can use to manipulate the DOM.

Let's say we have this navigation of five links for five pages:

						
							<!--typical navigation-->
							<nav>
							  <ul>
							    <li><a class="active" href="">Home</a></li>
							    <li><a href="">About</a></li>
							    <li><a href="">Portfolio</a></li>
							    <li><a href="">Blog</a></li>
							    <li><a href="">Contact</a></li>
							  </ul>
							</nav>

When I hover over the links, they're styled with CSS to have an underline. I also want an “active” class added to the link that belongs to the page I'm viewing, so if I'm on the home page, the home page link also has an active class that keeps the underline on the link.

Before I start, I'm going to write something called pseudo code: For each navigation link, if the link is the same link in the browser, add the active class to the link.

First, we need all of those links in an array:

						
							/*
							* finds everything with this class and builds a static array
							* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
							*/
							const links = document.querySelectorAll('.nav-link');

document.querySelectorAll(); takes everything with the class .nav-link {} and creates an array, which we need in order to use a for loop. Next we need to get the link of the page we are currently on. So in the console if I type window.location;, I get all of this information from the JavaScript API about the page I'm on. I want everything that comes after localhost, so I'm going to use window.location.href;.

						
							/*
							* compare the nav link to the URL
							* if they match, add an 'active' class
							*/
							const links = document.querySelectorAll(".nav_item");
							const href = window.location.href;
							links.forEach((link) => {
							  if (link == href) {
							    link.classList.add('active');
							  }
							});

So let's make a list of everything we did here:

created an array of links
used the JavaScript API to get the link of the current page
used a for loop to check all the links and compare them to the link of the current page
added a class to the link that matches the page link

Creating an array, using the JavaScript API, looping through an array, using a conditional if statement to see if something matches, then adding a class to the correct element… This is a basic example, but also a really common application of JavaScript. And when you practice regularly and apply even basic techniques, you'll start to remember what you need to do.

Keep writing pseudo code. Write what you need to do with JavaScript in plain language. If you can describe the problem you're solving, you can find the JavaScript you need to solve that problem.

This is why I don't think you should worry too much about remembering syntax. Those things come with experience, and if you're using something like VS Code, intellisense is pretty good at helping with that. What's most important is that you understand the problem you're solving and come up with the best approach to solve that problem.

How to Practice JavaScript, with an Example

Links:

Photo Credit: