Finding the Best Way to Learn JavaScript

The ”best way to learn javascript” search query returns around 784 million results and it’s no wonder why: with JavaScript almost becoming the lingua franca of modern development, more and more people are joining in the fun of programming. In this article, we’ll explore various methods and resources that can help you bootstrap the JavaScript learning process.

But First of All… Why Learn JavaScript at All?

To improve the learning process, you first need to understand the importance of learning JavaScript. This is an essential prerequisite because it can provide you the necessary motivation — and help you sustain it when the learning process becomes too difficult or boring. Some people pick JavaScript up because it’s trendy — with buzzwords like “React”, “web apps”, and “web dev” flying around, it may seem that JavaScript is the technology that every person on Earth should master.

However, choosing programming languages (or occupation in general) based on trends isn’t always the right move — there was a time, after all, when Internet Explorer was the hottest browser on the market. ¯_(ツ)_/¯ Instead, we can analyze the factors that make JavaScript worth learning — this way, you’ll have a solid understanding of why JavaScript is so important nowadays:

• Together with HTML and CSS, it allows for all the great features of modern websites. While HTML and CSS are responsible for structure and styling respectively, JavaScript powers interactivity, helping the web go beyond simple “Hello! This is my personal home page.” websites.
• Just like HTML and CSS, JavaScript is a standard — this means that, as a technology, it’s maintained by a standards organization called Ecma International. This organization ensures that JavaScript can progress without making drastic changes and splitting the web community apart. You might remember another web software called Flash; as a proprietary technology owned by a single commercial company (Adobe), it failed to become one of the web standards, in part, due to being too closed-in.
• Thanks to constant improvements, JavaScript is becoming more and more powerful, taking the definition of “web interactivity” further than we can imagine. A striking example is the web apps — websites so rich with functionality and complexity that calling them “websites” doesn’t do them justice (e.g. YouTube, Google Maps, and Figma)
• The vibrant community around JavaScript makes learning this programming language much more engaging — join the discussion on the JavaScript subreddit, check some of the trending projects on GitHub, and make sure to visit the best JavaScript conferences!

With “Why?” out of the way, let’s move to “How?”; that is, how to learn JavaScript the best way?

Beginning the Life-Long Journey of Learning

When starting to learn something new, we often expect that there must be a single way — a website, a book, or a course — that will serve as the definitive answer to the question posed in this article’s title. By extension, we wish we could write something like this…

Alright, folks! You probably googled “best way to learn JavaScript” and landed on this page — well, you’re in luck! Here’s the answer: download our Ultimate JavaScript Course for Advanced Beginners 2020 — and in just 30 days, you’ll be so proficient in JavaScript that job offers from Facebook and Google will start piling up in your inbox!
That’s it — that’s the whole article! PayPal us 1% of your salary if you manage to find a job in the following year!

The reality, however, is different: there isn’t a single ultimate way to learn JavaScript; rather, there are various methods and resources you can use to keep improving in this area. We’ll split them into 3 steps — our experience tells us that this system is the optimal way of progression.

Step 1: Understand the Syntax

The terms “programming” and “coding” are often used interchangeably. However, this isn’t the right approach: programming is a far more general concept. Coding, therefore, is just one of the tools that the developer uses to carry out programming’s intent — solve a problem, that is.

Still, writing and reading code is an absolutely essential skill that every developer needs. To acquire it, you need to understand the syntax of the language you’re using so that cryptic messages like

<script>
  alert( "I'm JavaScript!" );
</script>

become not so cryptic after all.

One of the biggest hurdles that beginners face is looking for the “ideal book” (or course, for that matter). With dozens and dozens of various learning resources available on the web, beginners often struggle to actually start learning, preferring to hop from one tutorial to the other.

Here’s an important takeaway that only gets obvious in retrospect: you should stop looking for the “ideal JavaScript book” because it doesn’t exist. In fact, any learning resource will be acceptable because, at this point, you need to grasp the very basics of JavaScript. Even though different resources have different teaching methods and approaches, you only need them for the quick introduction to the language: “Alright, here’s what JavaScript can do — and here’s how you do it…”

The resource you choose, of course, has to be good enough, containing no factual mistakes (like “JavaScript is a low-level programming language primarily used in machine learning…”), stay up-to-date, and come from a reputable source (i.e. an experienced JavaScript developer).

A great resource that can help you learn JavaScript syntax is javascript.info. It satisfies all the requirements we’ve outlined above, providing a well-structured overview of JavaScript syntax. As an open-source website, it can gather feedback from various JavaScript developers and fine-tune the learning roadmap — this means that it’ll be far quicker to react to language changes than single-author books and courses.

Step 2: Practice Your Knowledge

Once you start learning, you begin to appreciate how fun it is. Book after book, course after course, tutorial after tutorial — and it’s never enough. A few months pass… and you’re still learning. A few months more — and the amount of JavaScript-related knowledge you’ve acquired makes you think: “I can contact any company and they’ll hire me — I’ve read so much material, after all.”

This situation is aptly named “tutorial hell” — an endless loop of learning without actually applying your skills to get some hands-on experience. Developers caught in tutorial hell often struggle to escape from it because it’s hard to pin-point when you need to start developing your own stuff. The oversimplified answer to this problem is “Now”; a more reasonable approach is as follows: Work up a foundation via finishing a book or a course and start developing.

Opinions vary, but experienced developers advise to divide the time you spend learning into two categories:

• Acquiring new knowledge (i.e. reading articles and completing courses) — this should account for ~25% of learning time.
  
• Actually applying this new knowledge in a real-world project — this should account for ~75% of learning time.

The difference between these two categories seems quite drastic: practice outweighs learning three times! However, the reasoning behind this distribution is fairly simple: hands-on experience with development is the only thing that can help you escape the tutorial hell. Solving your own problems is vastly different from the safe environment that tutorials put you in — you have to create your own roadmap and stick to it no matter what.

Choosing the right pet project

It is critically important to come up with a project that you can actually finish: far too many developers have fallen victims to underestimating the complexity of their own ideas. Learning programming is exciting because it opens up a new world of opportunities, so it’s tempting to think that your very first project will be “the new Facebook”.

Instead, you can go for something less ambitious Here’s the million-dollar question: which project idea should you realize? Generally, there are two paths:

Path 1 involves solving your own problem:

• You probably need a personal website to host a portfolio (check these portfolios for inspiration) — watch a tutorial and build a website for yourself.
• If you find yourself constantly looking something up, create a cheat sheet/reference for it (e.g. htmlreference.io)
• Many web services that you’re using provide APIs (Application Programming Interface) to automate interaction with them. Chances are, you can eliminate some of the stuff you normally do manually; for instance, if you’re using Google apps like Docs, Sheets, or Drive, take a look at GScript (which is pretty much JavaScript for Google apps) and see which processes you can automate to save hours and hours of time.

The benefit of Path 1 is self-evident: you know your own problems better than anyone else — and you’ll also be the most motivated person for the job. However, you can also choose an alternate approach, i.e. Path 2.

Path 2 involves choosing a common project idea and implementing it your own way — an extensive list of project ideas can be found here. Last but not least, contributing to open-source projects is another solid way to acquire practical knowledge.

Step 3: Dive Deeper into Advanced JavaScript

At this point in time, you have a solid understanding of JavaScript syntax and a few complete personal projects. Now you need to understand how JavaScript works at a more advanced level. Some of these aspects include:

• Learning JavaScript’s pros and cons: This will help you pick the right tool for the job as you’ll appreciate that JavaScript and JavaScript-based tools have their shortcomings and drawbacks.
  
• Learning how JavaScript performs: Many web pages are notorious for being “bloated”, hogging the resources of the user’s device with heavy JavaScript files. A great developer, therefore, not only knows how to implement a feature — but how to implement a feature responsibly, making it accessible to the widest range of users.
  
• Honing your coding skills: One of the most important ideas of programming is this: “‘Code is read more often than it is written.” Hence, another essential skill becomes important: balancing code complexity/brevity with readability.

Step 3a: Picking a Framework… or Not Picking One

At this point, starting to learn a JavaScript framework seems like a logical step. Modern JavaScript development is practically synonymous with the holy trinity of front-end frameworks — React, Angular, and Vue.js. Despite their complexity, many novice JavaScript programmers want to jump into one of those frameworks head-first without considering the downsides.

Here’s the important takeaway: aiming to become a “React developer” from day 1 because React is trendy isn’t the right approach. JavaScript frameworks are primarily designed to scale large web apps and help them perform better.

Conclusion

Let’s recap the main points we’ve outlined in this article:

• Learn JavaScript syntax: Its code is a building block that can help you realize even the most ambitious idea.
  
• Practice your knowledge: Escape the endless loop of theoretic knowledge and build something.
  
• Dive deeper into advanced JavaScript: Learn even more, build even better.

The methods and resources we’ve outlined above are great, but it’s actually impossible to truly learn JavaScript — this language is constantly evolving and requires developers to keep up with the latest changes, trends, and practices. Therefore, you should strive to keep learning JavaScript on and on!