Projects Can Sometimes Be the Worst Way to Learn JavaScript

Many JavaScript beginners will get a seemingly simple suggestion: "Do more projects."

Granted, projects are often an effective way to learn any programming language. The problem, however, is that many people try complex projects before they have enough basic knowledge, resulting in misjudgment.

This is very important because trying large projects too early is one of the main reasons why many people give up learning JavaScript.

To avoid this, this article will cover the following:

• Travels and reasons that JavaScript beginners often encounter when trying projects
• Examples of projects that often cause learning interruptions
• How to avoid these pitfalls and learn more effectively
• When and how to start a project
• How to choose the right concept in the project

This article is intended to help you strengthen your confidence, whether you are learning JavaScript or other languages.

This article was reviewed by Tim Severien and Chris Perry. Thanks to all the peer reviewers at SitePoint for getting SitePoint content to its best!

Common misunderstandings that lead to failure

I often hear people who want to learn JavaScript say, "I'll just do a simple slide."

They try to make slides and usually one of two things happens:

1. It's too difficult and they will tell themselves to "do it later", which usually means giving up forever.
2. They successfully made the slideshow, but because they learned too much content at once, they could not apply it later. This can lead to frustration, and again lead to giving up.

Why is this happening?

The trap of trying complex content too early

JavaScript beginners usually choose slideshow as their first project because it sounds simple.

But after trying, they found it much harder than they thought. Making a slide may involve arrays, functions, loops, animations, timings, event listeners, DOM operations, and more. For beginners, this can be an overwhelming number of new concepts.

Suddenly, this project that was supposed to be simple became too difficult. This difference from initially expected can have a negative psychological impact. "If I can't even do this simple thing," the learner will tell himself, "then I may not be suitable for learning JavaScript."

Or, some people will successfully create a slide, but it will be pieced together with a lot of tutorial helps, knowing very little about what is actually happening. In this case, you often hear the saying: "I can follow the tutorial, but I can't apply it myself."

Either way, the end result is usually a sense of frustration, which may prevent people from learning JavaScript.

These happen not only on the slides, but also on other projects that learners try prematurely. For example, a to-do list may sound simple, but if the data needs to be saved outside of the browser's local storage or cookies, it could be a full full-stack project.

When someone starts learning JavaScript, it is difficult to determine the difficulty level of the project in advance, and this is the root of the problem.

What projects usually hinder learning?

To make the discussion more specific, here are some seemingly simple projects that people often try too early, and concepts actually involved.

Project Concepts involved

Questions Arrays, Objects , functions, forms, event listeners To-do list Arrays, objects, functions, some storage method (front-end or back-end), DOM operations, Event Listener "Small Social Network" This is a full-stack project. In addition to front-end JavaScript, it also involves back-end concepts, including databases and authentication , security, user management, etc.

What is the significance?

The focus of this section is not to scare you and prevent you from trying new things. As long as you don't try these projects from the beginning, you can complete some projects faster than you expected.

You just need a better way.

How to learn more effectively

The following are some strategies to avoid premature project-related pitfalls:

• Start with the concept
• Simulation of real scene exercises

Strategy 1: Start with the concept

Don't jump directly into large projects, try to learn the smallest function block first. This way, you will start with a stronger knowledge base and write code more easily.

For example, use innerHTML to display text in a div. Change the color of the paragraph text. Add two numbers together. Write your first function. Familiar with variables. Stores a series of contents in an array or object. Some events are triggered when the button is clicked. Use if and else to learn logic. Try some loops.

Try these concepts and get familiar with them. You will soon find yourself able to create a lot of things. Additionally, your newly acquired experience will make you better decide which projects to go on. As you see more and more success you have, your confidence will increase, and this motivation will push you forward faster than rushing into a big project from the beginning.

To be clear, challenges are important because they help you grow. It is good to break through the comfort zone, but don't go beyond your progress.

Strategy 2: Simulate real scene exercises

As the learning process, make sure to spend some time practicing under real conditions. This means using your own text editor and browser to write some code without relying on tutorials.

The more you practice coding under real conditions, the less likely you will feel stuck when creating real projects.

This is a great way to avoid being able to do something with the tutorial but not being able to apply it yourself.

So, when will the project start?

Once you start learning the basics of JavaScript, you will start to understand which projects are within reach.

While challenging yourself is important, for example, you won't try to build an end-to-end digital banking application until you don't know how to display a line of text on the screen.

Let's look at some concepts you can learn and specific examples of small projects you can accomplish. The examples in the table are ordered – each project is built on previous knowledge.

New Concepts for Learning Possible Small Projects

Variables, Functions Create a greeting function, get your name from the variable, and display a greeting to you on the page. Click on processing, change class Create a "More Information" button to make the summary of the information appear or disappear. Also, try creating two theme selection buttons. When you click on any of these, a lot of content on the page changes the color and style to fit the theme. if statement, random number Create a game with two gates and you have to click the correct one to get the prize. Get text input values, JavaScript arithmetic Create a restaurant tip calculator. Arrays, loops Create the front end of social posting websites. Use an array to save a list of text posts. Loop through the array to display the post.

Where will this go?

Please note that we did a different order this time. Instead of starting with a project and then trying to catch up with the concepts needed, we start with the concepts and build the project based on those concepts.

This has a profound impact on the way you learn, because you no longer feel backward when you jump too far, but learn the basics that allow you to move forward confidently at every step. The little things you learn will build each other and soon you will reach the bigger projects you want to do in the first place.

How to choose the right concept in the project

Suppose you have learned some concepts and you start trying out projects.

How do you think about what concepts you use and what concepts you avoid?

To use the non-coded analogy, suppose you are making a chair and you want to hold two pieces of wood together with screws. You can use your hands and it will work, but it will be painful and boring. Now that you know screwdrivers, you know they will be better. Electric screwdrivers will be much better.

In this example, the more tools you have, the more you will be able to see the problem and know which tool to choose.

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

With this background, here are some practical ways to think about projects:

• First, break the project into smaller parts.
• Write in simple language what you want each part to do. This way, you can avoid getting stuck in the quagmire of code details while thinking.
• Build each part of the project, starting with the concept you already know. If you first learn the concept (rather than jumping into the project from the beginning), you should now have a reasonable set of tools.
• When there is a gap in your knowledge, simplify it to the smallest functional part and look for it.
• Don't indulge in perfection during the learning process. Perfection can damage progress.
• Don't be afraid to try different methods and ideas. The polished tutorials you see online usually go through a lot of experiments before they are published.
• After you have tried one yourself, look for similar projects to learn from other people's methods.

As you take these steps with more and more projects, you will begin to feel more comfortable choosing the right concept for the job.

The rest is practice.

Key Points

Projects are probably the best and worst way to learn JavaScript. The difference is timing.

• Project prematurely = trap. One of the most common ways people can’t learn JavaScript is to jump into a project before you understand enough basics to understand what is reasonable. This often leads to frustration and giving up.
• Prefer to learning concepts and then conducting projects. To avoid project traps, first learn the concepts and then carry out small projects based on these concepts. In this way, you will eventually gain stronger understanding, better memory, greater motivation and faster progress. You will also feel less overwhelmed.
• Simulate real scene exercises. The more you practice under real conditions, the less likely it is to get stuck when you are ready to give up the tutorial.

Finally, it should be said that everyone learns differently. Nothing in this article is meant to be a hard and rigid rule. Instead, they are some friendly suggestions I hope to help you or someone you know avoid the trap I see too many people fall into.

Since you are here, what do you think about all this? Do you have any questions, stories or experiences that you want to share about learning coding?

Feel free to let me know in the comments.

FAQ on Learning JavaScript through Projects

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

While projects can provide practical experience and practical knowledge, they may not always be the best way to learn JavaScript. This is because projects usually require a certain level of language understanding, which beginners may not have. Additionally, projects can sometimes be overwhelming and complex, leading to confusion and frustration. It is important to have solid basic knowledge before delving into the project.

What are the prerequisites for starting a JavaScript project?

Before starting a JavaScript project, it is crucial to master the basics of JavaScript, including variables, data types, functions, loops, and conditional statements. Knowledge of HTML and CSS is also beneficial, as they are often combined with JavaScript for web development projects.

How to learn JavaScript effectively, not just rely on projects?

There are several ways to learn JavaScript effectively, not just rely on projects. These methods include online tutorials, coding bootcamps, and textbooks. Additionally, practicing coding problems on platforms like LeetCode and HackerRank can help strengthen concepts and improve problem-solving skills.

What are some simple JavaScript projects for beginners?

Some simple JavaScript projects for beginners include creating simple games like calculators, to-do lists, weather apps, or tic toe. These projects can help beginners apply the concepts they have learned in a practical way.

How to overcome challenges when working with JavaScript projects?

When you encounter challenges when dealing with JavaScript projects, be sure to break the problem down into smaller, more manageable parts. Use debugging tools to identify and fix errors. Don't hesitate to ask for help from online communities like StackOverflow or GitHub.

How important is understanding JavaScript frameworks to projects?

Understanding JavaScript frameworks such as React, Angular, or Vue.js is very beneficial for projects. These frameworks can simplify the development process and provide useful functionality. However, it is important to master the basics of JavaScript before delving into these frameworks.

Can I learn JavaScript by doing projects only?

While doing projects can provide practical experience, it is unwise to rely solely on projects to learn JavaScript. In order to fully understand, theories and basic knowledge of the language must also be learned.

How to choose the right JavaScript project to complete?

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

How to stay motivated while learning JavaScript through projects?

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

What resources can help me complete my JavaScript project?

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

The above is the detailed content of Projects Can Sometimes Be the Worst Way to Learn JavaScript. For more information, please follow other related articles on the PHP Chinese website!