Projects Can Sometimes Be the Worst Way to Learn JavaScript

Yaphi Berhanu
Yaphi Berhanu

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.

Projects Can Sometimes Be the Worst Way to Learn JavaScript

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.

It's a trap!

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

Why is learning JavaScript through projects sometimes not the best approach?

While projects can provide hands-on experience and practical knowledge, they may not always be the best way to learn JavaScript. This is because projects often require a certain level of understanding of the language, which beginners may not have. Additionally, projects can sometimes be overwhelming and complex, leading to confusion and frustration. It’s important to have a solid foundation of the basics before diving into projects.

What are the prerequisites for starting JavaScript projects?

Before starting JavaScript projects, it’s crucial to have a good understanding of the basics of JavaScript, including variables, data types, functions, loops, and conditionals. Knowledge of HTML and CSS is also beneficial as they are often used in conjunction with JavaScript in web development projects.

How can I effectively learn JavaScript without relying solely on projects?

There are several ways to learn JavaScript effectively without relying solely on projects. These include online tutorials, coding bootcamps, and textbooks. Additionally, practicing coding problems on platforms like LeetCode and HackerRank can help reinforce concepts and improve problem-solving skills.

What are some simple JavaScript projects suitable for beginners?

Some simple JavaScript projects suitable for beginners include creating a calculator, a to-do list, a weather app, or a simple game like Tic Tac Toe. These projects can help beginners apply the concepts they’ve learned in a practical way.

How can I overcome challenges when working on JavaScript projects?

When facing challenges while working on JavaScript projects, it’s important to break down the problem into smaller, manageable parts. Use debugging tools to identify and fix errors. Don’t hesitate to seek help from online communities like StackOverflow or GitHub.

How important is understanding JavaScript frameworks for projects?

Understanding JavaScript frameworks like React, Angular, or Vue.js can be very beneficial for projects. These frameworks can simplify the development process and provide useful features. However, it’s important to have a solid understanding of JavaScript fundamentals before diving into these frameworks.

Can I learn JavaScript by only doing projects?

While doing projects can provide practical experience, it’s not advisable to rely solely on projects to learn JavaScript. It’s important to also study the theory and fundamentals of the language to gain a comprehensive understanding.

How can I choose the right JavaScript project to work on?

When choosing a JavaScript project, consider your current skill level and interests. Choose a project that is challenging but not overwhelming. It can also be helpful to choose a project that aligns with your career goals or interests.

How can I stay motivated when learning JavaScript through projects?

To stay motivated, set clear, achievable goals for each project. Celebrate small victories along the way. Join a coding community or find a mentor to provide support and encouragement.

What are some resources to help me with JavaScript projects?

There are many resources available online to help with JavaScript projects. These include online tutorials, coding bootcamps, forums like StackOverflow, and documentation on the official JavaScript website.