They say it takes 6-12 months to learn JavaScript. But… what’s the best way to do it and how do we speed it up our learning curve?
Of course, how long it takes depends on many factors – your past experience, how much time you have, what other things you have going on in your life, etc.
But the way you learn is important too. Knowing how to learn JavaScript fast means knowing how to learn in general. With the right approach to learning, you could shave months off your learning curve. Which begs the question…
What’s the Best Way to Learn JavaScript?
The best way to learn JavaScript is to primarily learn by doing, and complement that with a deep study of how the language works (through JavaScript books, PDFs, courses, and tutorials).
Or, that’s my opinion at least.
Where you start – learning by doing or learning JavaScript with a PDF/Book/Course whatever, depends on your personal preferences.
People have different approaches to learning.
- Some like to experiment – dive in, try things out, and see what happens.
- Others prefer a little guidance and like to follow some instruction – at least in the beginning.
If the first description sounds like you, then you’ll want to dive in and just start making stuff.
If the second description sounds like you, you might want to look into the best book to learn JavaScript, and do the exercises in it.
However, note that you can’t learn JavaScript purely through books. Books, courses, tutorials, etc. are all great – but you need to put what you learn into practice.
To use a concert analogy, learning JavaScript with books is like the supporting band – but learning by doing is the headline act. That’s where the real payoff is.
To Learn JavaScript Fast, Learn by Doing
If you prefer to learn by experimentation, then just start.
Seriously. Right now. (well OK, you can finish reading this post first).
Don’t worry about what the “right” thing to make is. Just begin!
Here are some ideas:
- Make the text “Hello World” appear on the page with JS
- Make an alert box with JavaScript
- Make a blue box appear on a web page using JavaScript.
- Make that blue box turn red when you click it.
- Make it turn back to blue if you click it again!
- Make a sidebar menu that slides out when you click a button
- Detect the user’s mouse coordinates, and print them to the console
- Make an HTML element move to a random place when you click it
…or, just think of something cool you liked about a website you saw… or a feature you wish it had. And try to make it. If it’s too hard for your current level, no problem – just work on something easier, and maybe come back to it later.
…or, make a side project. Something interesting and exciting to you. A simple app. A basic JavaScript game. Zuckerberg started making a site to rate the attractiveness of students on campus (on a whim, and while drunk, if The Social Network is to be believed). He did alright out of this approach.
Learning by doing really is the best way to learn JavaScript.
Anything you work on will help you. You might wonder, what’s the point of making a box appear, or changing its colour? When would that ever be useful?
Actually, quite often! If you can do that, then you know how to create HTML elements with JS. You know how to make an invisible element visible. You know how to edit an element’s CSS properties with JavaScript.
This is bread-and-butter web dev stuff that will come in handy almost every day.
But… what if you really don’t know how to do it? What if you don’t have the first clue about how to make a box appear on a web page using JavaScript? Well…
Learn JavaScript Faster by Learning Google Fu
Google is a key part of learning JavaScript – or any coding language for that matter.
This never stops. Whether you’re writing your first line of code, or you’re earning $250k at a huge tech company, you’ll be using Google and Stack Overflow daily.
This might sound weird. I mean, imagine if you went to the doctor, described your symptoms, and they said “Hold on, let me just Google that.” You’d probably see that as a sign of incompetence, right?
But development is not like other jobs. This video by Colt Steele is quite illuminating – he asked a developer with 7 years experience to share his Google search history for a week.
On one day, the dev made over 100 coding-related searches. And remember, he’d have read several pages from each search page. So we’re talking hundreds of Stack Overflow questions, GitHub issues, and blog posts read. In one day. By a highly-skilled dev.
So if you’re Googling how to write a for loop in JavaScript for the 11th time this month – don’t worry, you’re in good company. You’ll be Googling every day. Expect it, embrace it, and most of all get good at it.
So say you’re trying to make that box appear. You could start by searching “how to make a box appear with JavaScript.” You might not find exactly what you need, but maybe something close. You can try pasting in someone’s example code into your project. Try to make it work. Check the error messages in the Console. If you don’t understand them, Google them too!
PS, quick tip: if you can’t get something to work, try searching for “javascript [the command, or method you’re trying to use] not working”. For example, if you can’t get that damn box to appear, then “javascript createElement not working”, or “javascript addClass not working” might be useful…
Step by step, bit by bit, you’ll get there.
What’s the Best Book to Learn JavaScript?
The best book to learn JavaScript for beginners is Eloquent JavaScript by Marijn Haverbeke (at least, in my opinion)
Of course, this is subjective, but Eloquent JavaScript is top of many people’s lists and is a kind of a classic in the JS world (and it’s free, too, as long as you’re ok to learn JavaScript with a PDF).
One reason I think this is such a good book to learn JavaScript (PDF here, by the way), is that it gives you a solid grounding of programming principles in general, as well as the nuts and bolts of JavaScript specifically.
This is important, and something that many beginner books either gloss over or ignore completely. As Kent Beck said, when you’re making software, you should “make it work, make it right, make it fast” – in that order.
Many beginner books and courses just teach the first part – make it work. But making it right is important too.
This means things like:
- Writing code in a way that’s easy for other people to read
- Making your code extensible
- Writing small functions that do only one thing
- Using consistent naming for your variables, classes, and functions
These are things that you may not learn purely by doing. While I maintain that learning by doing is the best way to learn JavaScript, I do think it’s useful to get some book learning in too. This will help you learn the craft of coding.
Just remember to actually use what you learn in the books. Don’t expect to get better by only reading. As the great Bruce Lee once said…
What’s the Best Book to Learn JavaScript for Intermediate Coders?
If you’re already past the basics, then there are two options that are highly regarded and often recommended: “Secrets of the JavaScript Ninja” by John Resig and Bear Bibeault, and “You Don’t Know JS” by Kyle Simpson.
If Eloquent JavaScript is the bachelor’s degree, then these are the master’s degree.
Secrets teaches more advanced topics like timing, asynchronous code, and cross-browser strategies, and strategies to improve performance.
And You Don’t Know JS is not a single book, but a series of them. These books go VERY deep into specific areas of JS. For example, there’s one 98-page book just on scope and closures!
Special mention should also go to Clean Code by Robert Cecil and The Pragmatic Programmer by Andy Hunt and Dave Thomas. Although not specific to JavaScript, these are classics in the programming trade, and teach you how to write your code in a way that’s easy to read, maintain, and extend.
Best Book Format to Learn JavaScript – PDF, or Physical?
It’s personal preference, but in my opinion, if you want to use books to learn JavaScript, PDF format is probably the way to go (or epub, HTML, or any other format you can read from your screen).
Why? Simply because you can copy and paste code from the book.
Now, these days pretty much all print books will put their code up on GitHub, so you’ll be able to clone these repos or get them from the GitHub website. But having the PDF right there on your screen just saves you a step.
Digital versions also tend to be cheaper, and since coding books are often bigger than your average paperback and run into the 600+ page mark, physical versions are pretty cumbersome.
That said, if you personally prefer a physical book on your desk, then do it your way.
Get Other People to Read Your Code
A way to really supercharge your learning is to get other people to read your code and provide feedback.
Let’s go back to the concert analogy from earlier. So, learning by doing is the best way to learn JavaScript – the headline act. Book learning is important, but not so useful by itself – the supporting band. That means code review must be… erm… the taxi that takes you to the concert venue?
Ok, I think my analogy is breaking down here. Look, the point is, getting feedback from more experienced JavaScript developers is super important and useful. You’ll still get to the concert without it, but it’ll take you longer and the ride won’t be as smooth. Aha – the taxi analogy does work after all!
The reason code review is so useful is that it’s specific to the code you’re writing. If you read some new principles, concepts, or patterns in a book, that’s great and will help you write better code. But you might not have a full grasp of when to use them, or why.
Good code review can fill those gaps for you. It will tell you, in this part of your code, this approach is better, and this is why.
Reading Other People’s Code
It’s also incredibly useful to read other people’s code – as long as it was written to a high standard.
A great way to do this is to look up open source projects JavaScript on the web. Or if you see something cool on a website, you could try looking at their source code to see how they’ve done it.
Although, your mileage may vary on this approach as the code might be minified (white space removed to make the file size smaller – it’s basically unreadable, but there are tools online that will try to unminify it for you) and/or obfuscated (variable and function names are replaced with generic labels like a, b, c, etc. to make it harder for people to read and copy).
Final Note on Vanilla JS Vs. Frameworks and Libraries
When I first started learning JavaScript, I was advised to stay away from libraries like jQuery, Vue, React and the like, and just learn plain vanilla JS.
The reasoning was that using a framework is a bit like buying a painting to hang up on your wall instead of painting one yourself. Either way, you end up with a painting on the wall. And by buying one, you’ll probably end up with a better painting. But you wouldn’t have improved your painting skills.
For example, if you use jQuery to make an ajax request, you’re not actually learning how to make an ajax request with JS. You’re using someone else’s code to do it for you – and be honest, you haven’t looked at the jQuery source code to see how they do it, have you? (don’t feel bad, I haven’t either).
However, now I think I went too far with that philosophy. If I could go back, I’d tell my past self to start learning frameworks a little earlier.
For one thing, it’d help me actually start building things faster.
But another reason is that, like it or not, integrating frameworks and libraries is simply a key part of modern front-end development.
To learn JavaScript, you’ll have to learn how to write code that plays nice with code other people have written. As long as you don’t only use libraries, you’ll be good.
But, which framework should you experiment with?
Well, a really cool one you can check out is fullPage.js. FullPage is an awesome tool that helps you build beautiful full-page websites, similar to these 20 one-page website examples.
With fullPage.js you’ll quickly be building highly-polished sites that are up there with the top brands, quality-wise. I mean that literally – fullPage is used by companies including EA, Sony, and ebay!
If you’re already using React or Vue, fullPage integrates perfectly with them so no worries there. It also works seamlessly with WordPress, (including Gutenberg, Divi, or Elementor, if you use those for some reason). It’s really cool! Check out some examples of what it can do here: fullPage.js examples.
If you want to jump directly into React (although usually not recommended), check out our list with the best online courses for React.js or the best books to learn React.
A few JavaScript guides and tutorials to learn something new:
- Force to Wait 1 Second with JavaScript
- How to Create a Sticky Navbar with CSS & JS
- Change Selected Option in JavaScript [With Examples]
