Projects Can Sometimes Be the Worst Way to Learn JavaScript

One of the most surprisingly dangerous pieces of advice to JavaScript learners is to “just do projects.”

To be 100% clear, projects are often a great way to learn any coding language. However, problems arise when people attempt certain projects before they know enough of the basics to judge what’s reasonable.

This topic is important because attempting a project too early is one of the most common reasons people give up on JavaScript entirely.

I’m not about to let that happen to you, so here’s what we’ll cover:

• the most common traps JavaScript learners fall into when attempting projects, and why
• specific examples of projects that frequently stop people from learning JavaScript
• how to avoid the common traps and learn more effectively
• when and how to start doing projects
• how to know which concepts to use once you start doing projects

The aim of this article is to give you confidence in moving forward, whether you’re learning JavaScript or any other language.

This article was peer reviewed by Tim Severien and Chris Perry. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

The Common Phrase that Often Leads to Failure

One of the most common things I hear from people who want to learn JavaScript is, “I’ll just make a quick slideshow.”

They’ll try to make the slideshow, and one of two things will usually happen:

1. It’ll be too hard, and they tell themselves they’ll “come back to it later” — which often means giving up forever.

2. They’ll succeed in creating the slideshow, but since they had to cover so much material at once, they won’t be able to apply it afterwards. This leads to discouragement, which can mean, once again, giving up forever.

Why does this happen?

The Trap of Too Much, Too Soon

JavaScript learners often pick a slideshow as their first project because it sounds simple.

Once they attempt it, they discover it’s harder than they thought. Making a slideshow might involve arrays, functions, loops, animation, timing, event listeners, DOM manipulation and more. This can be an overwhelming number of new concepts for someone who is starting out.

Suddenly, this project that was supposed to be easy is too difficult. That difference from the original expectation creates a nasty psychological effect. “If I can’t do this easy thing,” learners tell themselves, “then maybe I’m just not cut out for JavaScript.”

Alternatively, some people will succeed in creating a slideshow, but it’ll be cobbled together with a ton of help from tutorials and relatively little understanding of what’s happening. In those cases, you frequently hear phrases like, “I was able to follow along with the tutorial, but then I couldn’t apply any of it on my own.”

Either way, the end result is often a feeling of discouragement that can stop people from learning JavaScript.

These scenarios happen not just with slideshows but other projects that learners will attempt too soon. For example, a to-do list sounds simple, but that can be a full-stack project if the data is to be saved outside the browser’s local storage or cookies.

When someone is starting to learn JavaScript, it can be hard to identify the difficulty level of a project beforehand, and that’s the source of the trouble.

Which Projects Often Hinder Learning?

In order to make this discussion more concrete, here are some specific, simple-sounding projects people often attempt too early, and the concepts that are actually involved.

Project	Concepts Involved
Quiz	Arrays, objects, functions, forms, event listeners
To-do list	Arrays, objects, functions, some form of storage (front-end or back-end), DOM manipulation, event listeners
A “little social network”	This is a full-stack project that, in addition to front-end JavaScript, involves back-end concepts including databases, authentication, security, user management, etc.

What’s the point?

The point of this section is not to scare you off from attempting new things. You can arrive at some of these projects faster than you’d expect as long as you don’t start with them from the beginning.

All you need is a better approach.

How to Learn More Effectively

Here are a couple of strategies to avoid the traps associated with doing projects too soon:

• start with concepts
• practice like real life

Strategy 1: start with concepts

Instead of jumping directly into big projects, try learning the smallest pieces of functionality first. This way, you’ll start with a stronger base of knowledge and have an easier time coding things.

For example, show text inside a div with innerHTML. Change the color of a paragraph’s text. Add two numbers together. Write your first function. Get comfortable with variables. Store a collection of things in an array or an object. Make something happen when a button gets clicked. Learn about logic with if and else. Try some loops.

Play with these concepts and get comfortable with them. You’ll soon find yourself able to create lots of things. In addition, your newfound experience will make you much better at deciding which projects to do. As you see yourself succeed more, your confidence will grow, and the momentum will carry you forward much faster than trying to rush into a big project at the beginning.

To be clear, challenges are important, because they help you grow. It’s great to stretch beyond your comfort zone, but not so far that it gets in the way of your progress.

Strategy 2: practice like real life

As you learn, make sure to take some time to practice under real conditions. That means using your own text editor and your own browser and coding something without relying on a tutorial.

The more you practice coding in real-life conditions, the less likely you are to feel stuck when it’s time to create something for real.

This is a great way to avoid the problem of being able to do something with a tutorial but not being able to apply it on your own.

So When Do the Projects Happen?

Once you begin learning the fundamentals of JavaScript, you’ll start to know what sorts of projects are within reach.

While it’s important to challenge yourself, you don’t want to try building an end-to-end digital banking app, for example, before you know how to display a line of text on the screen.

Let’s look at some specific examples of concepts you can learn and mini-projects you can then do. The examples in this table are ordered — each item building on the previous knowledge.

New concepts learned	Possible mini-projects
Variables, functions	Create a greeting function that takes your name from a variable and displays a greeting to you on the page.
Click handling, changing a class	Create a “more information” button that makes a blurb of information appear or disappear. Also, try creating two theme selection buttons. When you click either one of them, a bunch of stuff on the page changes colors and styles to fit a theme.
If statements, random numbers	Create a game where there are two doors and you have to click on the correct one to get the prize.
Get a text input value, JavaScript arithmetic	Create a restaurant tip calculator.
Arrays, loops	Create the front end of a social posting site. Use an array to hold a list of text posts. Loop through that array to display the posts.

Where is this going?

Notice that we’ve done things in a different order this time. Instead of starting with a project and trying to play catch-up with the required concepts, we’ve started with the concepts and built projects based on those.

This has a profound impact on how you learn, because instead of jumping too far ahead and feeling behind, you learn the foundations that let you move forward confidently at each step. The little things you learn build on each other, and soon enough, you arrive at the bigger projects you wanted to do in the first place.

How to Know Which Concepts to Use in a Project

Let’s say you’ve learned some concepts, and you’re starting to try projects.

How do you think about which concepts to use and which concepts to avoid?

To use a non-coding analogy, let’s say you’re building a chair and you want to fasten two pieces of wood together with a screw. You could use your hand and it would work, but it would be painful and tedious. Since you know about screwdrivers, you know they would be better. An electric screwdriver would be much better.

In this example, the more tools you know, the more you’ll be able to look at a problem and know which tool to pick.

To bring this example back to coding, each concept is like a tool. The more concepts you learn, the bigger your coding toolbox, and the more you’ll feel like you know what to use.

With that background in mind, here are some practical ways to think through a project:

• First, break the project down into smaller pieces.
• Write in plain language what you want each piece to do. This way, you can do your thinking without getting bogged down in the details of code.
• Build each piece of the project, starting with concepts you know. If you’ve been learning concepts first (instead of jumping into projects at the beginning), you should have a reasonable tool set by now.
• When there’s a gap in your knowledge, reduce it to the smallest possible piece of functionality and look it up.
• As you’re learning, don’t obsess over perfection. Perfection hurts progress.
• Don’t be afraid to experiment with different approaches and ideas. Those polished tutorials you see online often go through a lot of experimentation before being presented anywhere.
• After you’ve tried a project yourself, look up similar projects in order to learn from other people’s approaches.

As you take these steps with more and more projects, you’ll begin to feel more comfortable picking the right concepts for the job.

The rest is just practice.

Key Takeaways

Projects can be among the best and worst ways to learn JavaScript. The difference is in the timing.

• Projects too early = trap. One of the most common ways people fail to learn JavaScript is to jump into a project before knowing enough of the basics to understand what’s reasonable. This often leads to discouragement and quitting.

• Concepts first, projects second. To avoid the project trap, play with concepts first, and then do mini-projects based on those concepts. That way, you’ll end up with a stronger understanding, better retention, more momentum, and faster progress. You’ll feel less overwhelmed, too.

• Practice like real life. The more you practice under real-life conditions, the less likely you are to get stuck when it’s time to let go of the tutorials.

In closing, it should be said that everyone learns differently. None of the ideas in this article are meant to be hard and fast rules. Instead, they are friendly suggestions that I hope will help you or someone you know avoid the traps I’ve seen too many people fall into.

Now that you’re here, what do you think of all this? Are there any questions, stories, or experiences you’d like to share about learning to code?

Feel free to let me know in the comments.

Frequently Asked Questions (FAQs) about Learning JavaScript through Projects