The Best Way to Learn JavaScript for Free

Want to learn JavaScript? Here is a simple, direct way to learn JS, without having to spend any money. (16 minute read)

Who this is for: Anyone new to coding who wants to learn JavaScript, those who already know how to code and want to specifically learn JS, and people who want to learn to code but don’t know where to start.

What you need: Any device that can access a webpage.

Ideal to have: A device with a large screen (tablet) or a device with a physical keyboard (laptop, desktop, Chromebook, etc.).

Introduction

Learning your first programming language is often a very difficult task for anyone looking to become a developer.

No matter which language you start with, learning your first programming language feels like it has a very steep learning curve to it, even if you’re already tech savvy.

But the first question is always which language should you learn first?

If you couldn’t guess from the subject of the article, I’d say start with JavaScript.

Reasons to start with JavaScript:

  • If you plan to build anything for the web, you’ll need to know JavaScript.
  • You can now use JavaScript for things beyond building web pages and apps.
  • Since JavaScript is built into every browser, you can get started learning JS on any type of device.

That last point is the most important of all.

Other languages, such as Python, are often regarded as more beginner friendly, but they require a lot of initial setup before you can even start playing around with it.

But if you only have a smartphone or tablet, that initial setup might not be an option.

Since you can play with JavaScript on any device that has a browser, it’s much more accessible to folks who might not want to buy a more expensive machine to learn coding, or who might not be able to afford such a machine at all.

Even if you can afford a more expensive device, I’d still say start here, both with JavaScript and this plan for learning JavaScript.

And the best part about this plan is that it’ll work on any device that can access a web browser, and all resources recommended are free.

This is also the most direct way I’ve found to learn JavaScript, and this is the guide I wish I had when I was first learning to code.

Step 1: Crash course (MDN crash course)

To start, read thru this crash course on JavaScript:

I’d also suggest checking out the excellent JavaScript Crash Course For Beginners video, which is around 2 hours long, but I recommend the other resource first because not everyone has fast enough internet or large enough screens to watch the video.

If you already know how to program in another language, you’ll learn a lot from the MDN crash course right away.

If you’re fully new to programming languages, then it will feel a little overwhelming, which is normal.

The idea here isn’t to learn every concept right away, but more to gain exposure of the concepts at the core of JavaScript, so they’ll seem at least a little familiar later on.

As you progress thru this plan, you can go back to these crash course resources to gauge how much you’ve learned since you started!

Reading thru the crash course, and/or watching the video, is all you need to do on your first day.

Everyday after this will be combining step 2 and 3 together.

Step 1.5 (optional): Paid video course from Colt Steele

NOTE: This is a recommended but optional step. If you have around $20, have high speed internet, and also have a large screen device (so anything bigger than a smartphone), I’d recommend doing this. If you lack all three of those things, skip below to Step 2.

Colt Steele is a very good teacher, and recently he put out a great JavaScript Course, called The Modern Javascript Bootcamp Course on Udemy.

It’s about 50 hours worth of videos, and covers the bulk of what you’d need to learn about JavaScript.

There are a number of other paid JavaScript courses out there, but the majority have at least one of two issues: they are either incomplete in covering enough JavaScript content, or they are very outdated.

This seems to be the one JavaScript course I’ve found that covers enough JavaScript content, and is also up to date.

For those who prefer video lectures over written learning, I’d do this course first before following Step 2, or even as a replacement to the resource in Step 2.

(with that being said, the resource in Step 2 covers a lot more content in more detail, but I also think this course is enough for most people)

Even though I structured this guide to include only free resources, I think it’s good enough to be added despite costing money.

But again, only use this course if you can afford it, have fast enough internet to stream video, and have a large enough screen to be able to see examples from it.

While the list price is $199.99 for the course, Udemy frequently runs discounts and deals, so you can get most courses for under $20 (I ended up paying $9.99 when I bought this one)

If you setup or log into a Udemy account and it’s not being offered at a discounted rate, you can click the link in the description of this promo video for this course from Colt himself to get a discount.

Otherwise continue onto Step 2.

Step 2: The textbook to use - javascript.info

It used to be that the best way to learn how to program was from reading a big, single textbook. And while books are still great, they quickly become outdated, not to mention the cost and access issues associated with any physical good.

Instead of a physical book, use this online JavaScript textbook instead: javascript.info

It’s an extremely clear, well written walk thru of all the different concepts in JavaScript, broken up into about 160 different sections, or about 700 pages if it was a physical textbook.

It’s also frequently updated, so you don’t have to worry about errors or information being out of date.

Just start with the first section, read it and continue from there.

(there isn’t a way to keep track of your progress thru the site itself, so an easy way to do so is save the link with the most recent section you’re on, or simply keep track of your overall progress in a spreadsheet)

A big part of learning to code is also implementing code to see the results and getting used to the concepts, so you’ll need more than just this textbook. You’ll also need to be able to practice writing code.

Step 3: Practice problems to solve - Edabit

There are a bunch of websites that give you coding problems to solve, which is a great way to learn and improve your programming abilities, especially when coupled with a great textbook like javascript.info.

But the problem with most of these websites is that they’re designed for folks who already know how to code, not those just getting started.

Edabit solves that problem.

It’s free to setup an account, and it’s designed with beginners in mind, starting off with simple problems and progressively getting harder.

On top of that, each problem has a Resources tab which can point you to the right documentation for solving a problem, which will help you learn and in turn reinforce the new concepts you’re learning.

Be sure to check out the Solutions tab after you solve a problem on Edabit, to see how others have solved it, and learn from their different approaches.

The only downsides with Edabit are that it isn’t the easiest to use on a smaller screen device, and the site can be a little slow to load, but it’s still the best option for those looking to practice JavaScript.

Between javascript.info and Edabit, you have two of the best resources to learn JavaScript.

Now you just have to put them together.

Step 4: Alternate between javascript.info and Edabit

Once you get past your first day of the crash course article, you’ll be faced with the question of where to start first: javascript.info or Edabit?

The answer is to alternate between them.

Being able to move from one to the other will help keep things fresh and interesting, and allow you to alternate between different modes of learning, helping you reinforce the material you’re studying.

Use this approach:

  • Read one javascript.info section, then…
  • Solve three Edabit challenges.
  • Repeat.

The only downside to this approach is that the two resources don’t perfectly line up. Since they were made independently from each other, some beginner problems on Edabit, such as those concerning regex and recursion, aren’t covered until much later on in javascript.info.

The simple solution to this is to remember it’s okay to skip problems on Edabit until you learn those topics, or skip ahead in javascript.info so you can tackle them in Edabit.

Other than that, it’s simple: read one section on javascript.info, then solve three Edabit challenges, and repeat!

Step 5: Do a little bit every day

With 160 sections to read, and almost 1000 practice problems to solve, it’s easy to feel overwhelmed.

For tackling a big task like this, the best approach is quite simple: do a little bit per day, and do it each and every day.

Even if all you do is read one section and complete three practice problems in a day, as long as you do this every single day, you’ll make real progress.

Focus more on making sure you keep a daily streak going, that’s much more important than how much work you put in per day, especially when you’re starting out.

After a while a keeping a streak going, you’ll feel like you have real momentum behind what you’re doing, and at that point it becomes much easier to do a little more each day, without feeling overwhelmed.

Step 6: Tips for success

Here are some helpful tips that will aid you on this path.

A: Stick to the plan

Might seem obvious, since I just outlined the plan that will help you learn JavaScript, but it’s easy to get distracted.

Before I had this plan, it was hard not to jump from one shiny new resource to the next, and after a while I realized I was making a lot of effort without making much progress.

So start here, use the plan, and work on it daily until you know all the content.

B: Repeat any section or content as needed

There are going to be times when you come across a concept, read the material on it, do practice problems, and still feel like you don’t “get it.”

Too many people assume you only need to be exposed to a concept once to fully grasp it.

It rarely works that way.

I can’t count the number of times where I didn’t understand something right away after being taught it.

But there’s a simple solution to this issue: go over the material again and again until you understand it.

It won’t matter in the grand scheme of things if it takes you two times, five times, or 20 times of rereading a section in javascript.info to understand it. What matters most is sticking with it, reviewing content until you understand it.

I think most people struggle more with learning than they might admit, and the few who do learn things the first time, every time, are the exceptions, not the rule.

So I’m here to give you permission to reread that section, or go over that practice problem, again and again until you get it!

C: Commit to learning in public

A little bit of outside pressure can go a long way in helping you stick to your goals.

This is something that more formalized learning environments provide quite well. You’re expected to learn something, and there’s social pressure to keep up.

When you’re learning on your own, even with a guide like this, it can be hard to stick to whatever schedule you set.

A great option for learning in public is to do the 100 days of code challenge.

The rules are simple:

  • Work on learning to code for an hour a day.
  • Each day, tweet about your progress and what you did with the #100DaysOfCode hashtag.

You don’t have to do an hour a day, you can do more or less, but the point is to commit in public to doing some amount each and every day.

Use this post as your guide for what you need to do each day, then tweet about what you got done in your day.

This will give you a sense of accountability that isn’t too harsh if you slip one day, but will also motivate you to stick to your daily goals.

Be sure to read Why You Should Do #100DaysOfCode by Caitlyn Greffly for a little more information on this approach and the potential benefits of it.

D: Alter this plan if you have a different approach

I think this approach is the best possible one for learning JavaScript, but that doesn’t mean it’ll be the best approach for you.

If you have a sense of something that would work better for you, then alter this plan to fit your needs.

Maybe you have a different resource you’d like to switch in for one I suggested, or you’d like to change the ratio of reading to challenges. As long as you’ve put thought into it, and you’re being careful not to just make changes for the sake of making changes, then I say go for it!

I want you to read this post and take these ideas seriously, but of course you should do what works best for you.

E: This is a great way to learn JavaScript, but it’s not the only way

There are some very heated debates online about what you should start learning first, and why one approach is better than others.

One of the most heated debates is around learning a language first, like JavaScript, vs learning a framework first, like Reach or Vue.

I think you should learn JavaScript first, then learn a framework next, but the last thing I’d want to do is make someone feel bad if they’d prefer the other approach.

Like in the last point, I want you to take the ideas in this post seriously, but always use your own judgement and think for yourself.

And always avoid anyone who belittles you for choosing an approach that you know is right for you. That seems to be the best advice in these debates.

F: JavaScript is something that everyone can learn

What I’ve outlined here is for anyone who wants to learn JavaScript. No exceptions.

There seems to be less gatekeeping around this than in the past, but there are still plenty of folks who treat tech as something that only certain people can learn, or worse yet, only people who fit certain demographics or personality types are capable of learning.

Let me be clear. People who believe this, repeat this, or say this, are one of two things: stupid or lying.

They might buy into stereotypes, or maybe they’re just in denial, but everything outlined here is learnable by anyone who wants to put in the time and effort.

Not everyone can learn this within a month, or learn every concept on first exposure.

But with enough time and work, you can learn JavaScript. Just put in the work to learning it.

And if someone tells you “it’s just not for you,” ignore them and keep working.

Step 7: Keep going over the material until it’s all done

The plan is pretty simple: cover all the basics in a crash course resource, then go thru both javascript.info and Edabit, alternating between the two, for every one section of javascript.info you read, answer three Edabit challenges.

Keep doing that until you have all the material covered.

You might need to read sections in javascript.info multiple times before you move to the next section. Or maybe you want to read thru it all one time, then cover it again and again until you feel like you really know it.

But stick with it till it gets to that point.

Because these two resources weren’t meant to be used together, there’s a good chance that you’ll finish the javascript.info content before you finish all the Edabit challenges.

That’s okay. If it gets to that point, just focus on finishing all the remaining Edabit challenges, and review javascript.info as needed.

The Edabit problems will get harder as you answer more of them, but that’s okay, it’s great practice to solidify the JavaScript skills you’ve learned from javascript.info.

(and if you get discouraged, go back to the crash course resources to see how much of that content is now obvious to you, you’ll be amazed at how far you’ve come!)

Stick with it, then move to the next step.

Step 8: Next steps

With just this simple approach of going thru crash course resources at the beginning, then alternating between a learning resource and a JavaScript challenge resource, you’ll get very far in terms of learning JavaScript.

It’s a very simple but very comprehensive approach to learning JavaScript.

So what are the next steps?

Start building projects with JavaScript.

Building things, even if fairly simple projects, will help solidify not only your newly found JavaScript skills, but will help deepen your understanding of how all the JS pieces fit together.

There are two big reasons I recommend saving projects till after, and not incorporating them earlier:

  • You’ll need other skills, mainly HTML and CSS, before you can really start building things (I have a good recommendation for learning HTML and CSS below).
  • You’ll need a desktop or laptop computer, as it will be hard to work on projects if all you have is a tablet or smartphone, and I didn’t want that restriction to hinder you with the plan I outlined above.

For learning HTML and CSS, which you should do first before starting JavaScript projects, I’d go to the great HTML and CSS tutorials from Interneting Is Hard.

For projects to do, use JavaScript 30.

Both are free, and that is where, in that order, you should spend your time going forward.

Step 9: Get to work!

This article should give you the straightforward plan you need to get started.

To Summarize:

That’s all there is to it, so get to work! :)