When that “simple” JavaScript tutorial is super complicated

This article originally appeared on Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

“For some reason JavaScript tutorials often start with ‘In this tutorial we will write a simple...’ and, 12,000 lines later you can't remember what it was you were trying to learn.”

– @perrydBUCS in a comment on dev.to

This is really well said, and it illustrates the key problem with a lot of tutorials: they promise simplicity at the beginning, and then they end up being so long and complicated that the readers give up.

Let's talk about how you can get around this problem and get the most out of a tutorial.

Tip #1: Start with the smallest possible piece

A lot of tutorials group a bunch of concepts into one big step. For example, they might ask you to perform an animation when a button is clicked.

If you follow along with the tutorial at this point, you'll end up typing (or pasting) a lot of stuff and not remembering it.

Instead, break the first step down into even smaller steps. First show a button. Next make the button do something simple (like maybe just saying hello when clicked). After that, try to create the animation on its own. Once you have a working button and a working animation, you can put the pieces together, and you'll understand how they work.

It also helps if you strip out unnecessary styles or markup in order to stay close to the bare essentials of what makes the code work. (Key word: unnecessary. If some of the styles and markup are necessary, keep them.)

In general, smaller pieces are easier to understand, easier to work with, and easier to remember. This approach will make a huge difference in how you learn.

Tip #2: Experiment before moving on

If you're learning new concepts, don't just follow a tutorial as written. Experiment with each step. For example, if the tutorial shows you one type of animation, try another type too. If something needs to happen when a button is clicked, try making different things happen when that button is clicked.

Adjust, experiment, play, break things. You'll learn so much in such a short time this way.

Tip #3: Try each step on your own first

When possible, try something on your own before looking at the tutorial. You might struggle, but you'll think deeply about the problem you're trying to solve and the issues to be aware of. This will prepare you to understand the tutorial much better because you'll understand why certain steps are included.

It isn't always possible to try solving the problem before looking at the tutorial, but it's something to consider in case it makes sense for your situation.

Key takeaways

The next time you see a tutorial, try these tips:

• Break it down into the smallest possible pieces.
• Experiment before moving to the next step.
• Try to solve some pieces on your own first.

When trying these tips myself, here's what happened:

Instead of doing ten tutorials and learning zero things, I would do one tutorial and learn ten things.

I hope this will happen for you too.

This article was reprinted from Simple Steps Code which tries its best to help people learn JavaScript and actually remember it.

If you hated this article, feel free to visit my site and yell at me. However, if you have kind comments, put them here on dev.to :)