Learn JavaScript – step by step study plan and resources

by Casey Pitman

So you’ve made it this far. You’ve learned some HTML and CSS. You’ve probably made a few basic websites and you are wondering what comes next. It’s time to learn JavaScript!

Today we’ll take a look at what JavaScript is and what it can do. We’ll discuss what you need to know to get started and where you can learn the skills you need to start coding like a pro.

So what is JavaScript and why should I learn it?

JavaScript is the third and final part of the modern web development trinity. HTML, CSS, and JavaScript work together to create dynamic, interactive websites. 

Imagine a car. HTML is the frame of the car, the structure that holds the car together. CSS is the body, the beautiful painted exterior other drivers see.  JavaScript is the engine that gets the car moving.

JavaScript is one of the most popular programming languages in the world. You would be hard pressed to find any web developer who doesn’t work in JavaScript in some way. JavaScript is primarily a client-side language, meaning that it runs in the user’s browser. Therefore JavaScript is a necessity for anyone who works in front-end web development. 

In recent years, thanks to Node.js, JavaScript can also be used as a server-side language. The flexibility to use JavaScript on both the front end and back end makes it one of the most powerful tools in any web developer’s toolbox.

Hear it from a pro

Check out JavaScript Explained by Andy Sterkowitz. He gives an overview of what JavaScript can do and why you should definitely be learning JavaScript as part of your transition into tech. Andy is a pro, and what’s more he is self-taught like most of you.

What do I need to start to learn JavaScript?

If you’ve made it this far, you already have a computer. You’ve probably already settled on a text editor you like. There are several good (and mostly free) options from which to choose. If you haven’t settled on one yet, check out our list of options and things to consider when choosing your text editor.  There is no one-size-fits-all editor. Each of them has pros and cons. Try them all and go with the one that works for you. 

You will also need a good modern web browser. There are several options here. Chrome, Firefox, and Safari are the biggest names. I strongly recommend Chrome (or at least a Chromium derived browser like Brave) as your primary browser for JavaScript coding for one simple reason: powerful developer tools. When coding in JavaScript you will encounter bugs and mistakes. There is no way around it. It is part of the process. All modern browsers contain developer tools to help in debugging, but Chrome and the Chromium derived browsers sport the most robust developer tools around. Do yourself a favor and stick with one of those. 

The last thing you will need is patience and persistence. JavaScript can be hard; it can even be infuriating. You will spend hours chasing down a bug only to find your app is crashing over a simple typo or missing semicolon. It’s going to happen. Don’t get frustrated. You can do it. Bugs are part of the game. Even the pros spend a good chunk of their time chasing down bugs. The most important tool you can bring to your JavaScript journey is a willingness to solve problems and a growth mindset.

There’s so much information! What do I REALLY need to learn?

When it comes to JavaScript there is a lot to learn. From syntax to structure, from libraries to frameworks – a simple Google search can turn into an overwhelming rabbit hole. That’s why you start with the basics. In this case that means starting with vanilla JavaScript. When developers talk about vanilla JavaScript, they are talking about the language in its most basic form. No add ons, no libraries, and no frameworks (more on those later). 

A clear understanding of vanilla JavaScript will form the bedrock upon which you will build your skills as a developer. I cannot stress this enough: you need to master vanilla JavaScript before moving on to all the fancy bells and whistles. 

Here’s where you need to start:

[checklist_in_post]

• Linking your JavaScript to your HTML
• Variables – declare, assign, mutate
• Data types – string, number, Boolean, arrays, objects
• Basic operators
• Boolean logic
• If / else statements
• Ternary operators and switch statements
• Loop logic and iteration
• For loops
• While loops
• Regular expressions
• Functions
• Function expressions and function declarations
• Calling a function
• Global scope vs. local scope
• The “return” keyword
• Anonymous functions
• Functions as arguments
• Recursion
• Arrays
• Array manipulation
• DOM access and DOM manipulation
• Event handling
• Modifying HTML
• Modifying CSS
• Object properties
• Object methods
• The “this” keyword
• Object creation
• Object prototype
• Closures
• Updates (ES6/2015 – specifically let, const, .map, .filter, and .reduce

[/checklist_in_post]

 

JavaScript learning resources

That’s a lot. I get it. Luckily there are a ton of resources available to the budding JavaScript coder, and a lot of them are free. No single resource is going to be your one-stop JavaScript learning resource. Try them all. Find the ones that mesh with your particular learning style.

FreeCodeCamp (free)

FreeCodeCamp is absolutely the place to start. Odds are you’ve already been working your way through their Responsive Web Design curriculum for HTML and CSS. Moving on to their JavaScript Algorithms and Data Structures curriculum is a natural next step. 

FreeCodeCamp eases you into its curriculum with an assumption that you are a complete beginner. As you work through small, bite-sized modules your knowledge base expands exponentially. And it’s fun! As you finish each module, you’ll want to go straight to the next one just to see what’s next. 

FreeCodeCamp reinforces the concepts you learn by wrapping up with five major projects of varying difficulty. They are by no means simple, but few things match the feeling of victory you experience when you conquer the toughest of them (I’m looking at you, Cash Register…).

While FreeCodeCamp covers nearly every concept you’ll need as a JavaScript coder, it does lack some of the depth you’ll need. It exposes you to a lot of concepts but doesn’t always cover why things work the way they do. Luckily there are other resources to complement the skills you pick up from FreeCodeCamp.

Google / Stack Overflow (free)

Here’s a little secret about coding: Everyone Googles. From the novice to the senior developer with years of experience –  if you aren’t Googling code snippets or some odd bit of syntax, you aren’t doing it right. Programming isn’t about memorizing everything – it’s about learning to think logically and to solve problems. Sometimes this means knowing when to look for help. I promise that  any problem you run into, someone has run into it before and they’ve posted about it on Stack Overflow. Members of the  developer community are a helpful bunch. And Stack Overflow is where we hang out.

Think of Stack Overflow as Reddit for coders. Users can browse or post questions for other uses to answer. The best answers get upvoted, which is helpful when you are presented with a dozen answers to your question and you don’t know which one to roll with. Stack Overflow accounts are free (though there are paid versions for businesses). They also boast a developer job listing section, so keep that in mind for later.

Mozilla Developer Network (MDN) (free)

You’ll be spending a lot of time at Mozilla Developer Network if you aren’t already. MDN offers a well-organized and comprehensive site that essentially functions as an encyclopedia of web technologies. 

MDN entries include in-depth definitions, syntax, browser support information,  and use cases for just about any web technology concept. They offer multile examples and code snippets demonstrating uses for concepts, as well as editable demos that allow you to experiment with whatever concept you are researching.

Speaking of Mozilla: remember our old friend Jeremie, from Mozilla – the one with the funny French accent? Here he is with his JavaScript video:

W3Schools (free)

Think of W3Schools as MDN-lite. Like MDN, W3Schools functions like an encyclopedia of web technology concepts and even includes the same basic components: definitions, syntax, examples, and live demos. W3Schools is a bit lighter on the technical details, which makes it a great place to search if you need a quick answer.  I often find myself using W3 Schools when I need a quick reminder about the syntax of a concept I’m using.

Udemy (paid)

The online learning platform Udemy can be both a blessing and a curse. Udemy is known for having courses on just about anything. Do you want a course on aquaponic gardening? They’ve got that. Juggling? They’ve got that too.

It’s only natural that Udemy would have courses on web development. And that’s where the curse comes in. Turns out just about anyone can create a Udemy course. And it seems that just about everyone has a JavaScript course on Udemy. A quick search for JavaScript shows over 9,000 results on Udemy. Course quality can be hit or miss. That’s why paying attention to reviews and recommendations is a must. 

I am a fan of Jonas Schmedtmann’s The Complete JavaScript Course. Jonas assumes all his students are starting from zero experience. He covers all the must-knows one needs to become a proficient JavaScript coder. Jonas’s course differs from other resources because he takes the time to explain the inner workings of JavaScript. He explains not just that something works, but how and why it works.  If theory and a peek under the hood are your thing, this is the course for you. 

I have also heard good things about Modern JavaScript From the Beginning, by Brad Traversy. I haven’t tried this course myself,  but it has been recommended to me by multiple people. Have you taken this course? Leave your thoughts in the comments below. 

Note on pricing: Though Udemy offers the occasional free sample course, it is primarily a paid service. Most classes run around $100, BUT Udemy frequently offers huge discounts. If you have patience and keep an eye out for sales, you can get courses for a fraction of their normal cost. Sales seem to pop up every few weeks.  I’ve never paid more than $10 for a course. 

Eloquent JavaScript by Marijn Haverbeke

I am not a huge fan of textbooks as coding resources. It seems kind of antithetical doesn’t it? Eloquent JavaScript is a detailed look at modern JavaScript concepts. It tends to be heavy on theory and may not be the right resource for the complete novice.  It can, however, be a helpful resource for the seasoned JavaScript coder looking to more fully comprehend advanced topics. This is the resource that FINALLY helped me to understand recursion. 

Eloquent JavaScript is available in paperback and Kindle versions, but the author also offers a web version of the complete text for free here.

Where next?

Stay sharp

Now that you’ve got some JavaScript tools in your toolbox it’s time to put them to use. As with any skill, if you don’t use it, you lose it. Keep those skills sharp by solving problems on sites like Codewars, Topcoder, or LeetCode. Remember: coding isn’t about memorizing syntax and keywords. It’s about thinking logically and solving problems. Sites like these push your problem-solving skills to their limits with increasingly difficult problems. They are also quite addictive. I’ve been known to spend days puzzling over a particularly difficult problem. It’s worth it though. I’ve emerged a much stronger coder because of it. You will too.

Build stuff!

The best way to learn is by doing. Start thinking of something you’d like to build and build it.  Your project doesn’t have to be the next Twitter. It’s all about the building process. You’ll learn more building your own projects than you’ll ever pick up from tutorials. One of my first projects was Choice Bot, a decision making app. Despite its simplicity, it forced me to focus on structure, organization, and integrating several different concepts. It helped to solidify my learning and did wonders for my confidence as a JavaScript coder.

Frameworks & libraries

Once you’ve got a good handle on vanilla JavaScript you are ready to explore frameworks and libraries. Frameworks and libraries are essentially prepackaged bits of code that developers can use to streamline their code. They make coding faster and more efficient by taking away a lot of the heavy lifting. 

There are TON of frameworks and libraries out there.You’ve probably heard of some of the more popular ones – jQuery, React, Vue, and Angular are everywhere. Each library or framework has its own particular syntax you’ll need to learn. Eventually you will want to pick up some knowledge of a few of these to increase your chances of landing that dream job.

Server-Side JavaScript

JavaScript gained popularity because of its utility as a client-side language that runs in the user’s browser. That has changed in recent years because of the rise of Node.js – a JavaScript runtime environment that can run JavaScript outside the browser. This makes it possible to run JavaScript on the server-side. Even as a front end developer, you will want to have at least a passing familiarity with back-end operations. Node.js is a good place to start.

Regardless of which resources you use, the key to truly mastering JavaScript is patience and practice. You will make mistakes. You will experience frustrations. Don’t see these as negatives. Each challenge is a chance to learn and master something new. Don’t give up. 

Need some advice or inspiration? Check out these follows for some great JavaScript tips or that little bit of encouragement you might need.

• @WellPaidGeek
• @Getify
• @florinpop1705
• @andysterks
• @caseypitman11 (that’s me!)
• And of course, @Transit2Tech

---

Next, we’ll be looking at some of the most useful frameworks & libraries for both JavaScript and CSS. In the meantime, if you need a quick recap, you can go back to:

• Learn HTML – study plan and resources
• Learn CSS – study plan and resources

Or, if your need to see the big picture, head over to the Roadmap to web dev.

About the author

Casey Pitman is a self-taught web developer living in Texas, US. He is transitioning from the public school classroom to a career in front-end development with a focus on JavaScript. He is a lifelong learner who gets a thrill from solving difficult and complex problems.

You can find Casey on: Twitter / GitHub / LinkedIn /Portfolio