Skip to main content

The Best Way to Learn JavaScript

The Best Way to Learn JavaScript:

Learning something new is scary. For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here. Just follow it, step by step.

Assignment 0: Understand what JavaScript Is and Isn’t

JavaScript is the language of the browser.

Before you actually begin learning JavaScript, take a minute to understand what it is and does.

JavaScript is not jQuery, Flash, or Java. It’s a programming language separate from all of those.

JavaScript is the language of the browser (not exclusively these days, though). It’s primary purpose is to add interactivity to an otherwise static page. In the browser, it’s not going to replace PHP or Ruby for you. It’s not even going to replace your HTML or CSS; you’ll use it in conjunction to them. Also, it isn’t as terrible to learn as you might have thought or heard.

One more note: you’ve heard about jQuery, which is probably the most widely-used JavaScript library. Or maybe you’ve heard about one of the other popular JavaScript frameworks, like Mootools, YUI, Dojo, and others. Where do these fit into the picture? Consider them a collection of JavaScript helper utilities; you’re still writing JavaScript when using them, but it’s heavily abstracted JavaScript. It saves you a ton of work.

You might even have heard someone say that you should start with jQuery (or another library) and learn JavaScript after. I respectfully yet strongly disagree. Get a good handle on JavaScript first, and then use libraries. You’ll understand what you’re doing much better; and, consequently, you’ll be writing much better JavaScript.

Assignment 1: Work Through the Courses at

Codecademy is a relatively new website that bills itself as “the easiest way to learn how to code.” You’ll be the judge of that! Currently, there are only two course: “Getting Started with Programming” and “JavaScript Quick Start Guide.” This is an awesome way to dip your toes in the JavaScript pool. Very similar to the Try Ruby exercises, you’ll follow short lessons, writing code inside the browser and watching the results. All while earning points and unlocking achievement badges.


If you’re already familiar with another programming language, you can probably start with the “JavaScript Quick Start Guide”; if this is your first time taking up programming (beyond HTML and CSS), then you’ll find the “Getting Started with Programming” course immensely helpful. Codecademy is free, but signing up is required.

Assignment 2: appendTo’s Screencasts

The folks at appendTo have a fantastic set of screencasts geared specifically for beginners. If you want to learn JavaScript the right (and easy) way, definitely work along with these lessons. Visual training is always a plus!

“Level up your skills with our on demand, pragmatic training solution. No signup required. No catch. No kidding.”

Assignment 3: Read A Good JavaScript Introduction

Eloquent JavaScript

Once you work through the courses at the Codecademy, you’ll want to get a more thorough introduction to JavaScript – an introduction that will introduce you to the all the types, operators, control structures, and more.

A handful of good introductions, if I may:

  • A Re-introduction to JavaScript – This introduction is on the Mozilla Developers Network, and certainly does the language justice. It’s a dense work, with almost as many code examples as paragraphs.

  • Eloquent JavaScript – This book, by Marijn Haverbeke, is available freely online, but you can also get it on Amazon if you’d like a hard copy. It goes beyond the MDN intro, because it covers not only the JavaScript language, but also coding style and using JavaScript in the browser. Also, “eloquent” isn’t an overstatement.

  • Getting Good with JavaScript – Okay, yes, this is my own book, but there’s another reason I’m including it here. It’s really pretty different from the other two intros I’ve listed here; I only cover what you’ll need to know to get up and running as quickly as possible. Also, it comes with over 6 hours of screencasts, so if that you’re thing, check it out. (And yes, this one costs.)

Assignment 4: Install and Learn Firebug (or the Developer Tools)


Once you start working with JavaScript in the browser, you’ll want to install Firebug and get familiar with it. Firebug is a plugin for Firefox that assists you in building and debugging your web pages: think of it as the surgeon’s knife for web developers. Don’t use Firefox? Like Safari or Chrome better? No problem: check out the built-in developer tools, which are very similar to Firebug.

You can open the developer tools panel by pressing Option + Command + I on the Mac, or Control + Shift + I on the PC.

You’ll learn a lot by opening up your tool of choice and just clicking around while on one of your favourite websites. Here are a couple of resources that will get you up to speed:

Assignment 5: Read a Book

So now you’re familiar with the basics. However, there’s a lot more to learn. While I could recommend a list of books that would bankrupt you, I’ll keep it to four of the highest-quality books you’ll find anywhere:

These first two are general, in-depth JavaScript resources that take what you know from the introductions to a much deeper level; sure, they’ll be some overlap from the introductions, but not much: just enough to keep you comfy.

(Note: while all these books are available on Amazon, I’ve linked to the publishers’ websites, so you can check out the sample chapters available.)

  • Professional JavaScript for Web Developers – Written by Nicolas C. Zakas, this book could hardly cover more than it does. If you’ve seen any of Zakas’ work before, you’ll know he’s incredibly thorough. Besides covering the JavaScript language, this book will give you a good handle on using JavaScript in the browser.

  • JavaScript 24-hour Trainer – This awesome resource was put together by Jeremy McPeak, who writes for Nettuts+ as well. It’s not just a book: it comes with over 4 hours of video tutorials on DVD. There are 43 lessons, covering everything from syntax to coding guidelines and code optimization.

While those books are great for understanding the JavaScript language and how to use it in the browser, there’s a lot more to learn. And while those books do go into some patterns and practices, here are two books devoted to those subjects that I think you’ll find useful.

  • JavaScript Patterns – Written by Stoyan Stefanov. I just finished reading this book, and, boy, do I wish I had read it sooner. After reading the resources above, you’ll know how to write JavaScript, but this book will teach you how to organize it, an important skill that isn’t as common as you’d think.

  • JavaScript: The Good Parts – Written by Douglas Crockford. This little gem will explain what’s good and what’s bad about the JavaScript language.

Assignment 6: Build Something!

As you worked through the resources above, you should have been following along with the code samples: pulling them apart, and tweaking them to see what happens. But now it’s time to really strike out on your own. It’s time to actually build something.

So, what can you build? There’s a lot you can do. Here are a couple of ideas.

  • A Photo Gallery: Display a set of photo thumbnails and a main photo. When a user clicks a thumbnail, have the larger version of the thumbnail (not the thumbnail itself) replace the current main photo. Bonus points if you can overlay a caption coming from the thumbnail alt tag, or loop through the photos if the user hasn’t clicked one for a minute.

  • A To-do List: This might sound tougher than it is; but I’m not suggesting you build a full-fledged to-do application. Just have a text box with a button beside it; when you click the button, the entered text becomes an item in an unordered list below. Clicking on a list item removes it. It sounds simple enough, but there are several gotchas that it will be good for you to think about as a beginner.

  • An Animating Box: Animation is always tricky, but it doesn’t have to be complex. Have a div with some text in it, and several buttons above. One button can adjust the width; one, the height; and one, the background colour. The key is not to have the changes happen immediately, but over the course of, say, a second. Remember, Google is your friend, especially if you haven’t done any animation in JavaScript thus far.

I’m sure you can think of other projects that will be great practice. Of course, push yourself out of your comfort zone; that’s the only way to learn.

Also, be sure to refer to the JavaScript category here on Nettuts+ for a massive list of tutorials, at all skill levels.

Assignment 7: Begin Learning a JavaScript Library

Use a JS library

If you’ve come this far, you’ll probably realize that there are several things that are difficult to accomplish in a cross-browser way (or at all) in JavaScript. The biggest offenders are probably things like excessive DOM manipulation, AJAX, and animation. This is where a library comes it.

As I mentioned earlier, the point of a JavaScript library is to sugar down the painful stuff. Therefore, now might be the time to look at one. There are a ton to choose from, and I’ll let you decided which to experiment with. Whether it be jQuery or Mootools, YUI or Dojo, their respective sites will give you everything you need to get started. If you feel the need, give one a try.

Most Popular Libraries

While there’s certainly a countless number of libraries available, you should try to stick with a popular choice – at least at first.

Assignment 8: Keep up with the Masters

Drop what you’re doing, and subscribe/follow these developers. This is a requirement.

There are a ton of incredible JavaScript geniuses out there, who are always doing cool stuff that you don’t want to miss. Thankfully, our never-sleeping associate editor Siddharth has rounded up a list of ”33 Developers you MUST Subscribe to as a JavaScript Junkie. Drop what you’re doing, and subscribe/follow these developers. This is a requirement.

But you can do more. This fair website is often posting about JavaScript, so don’t go away. Also, check out the JavaScript Show, a podcast about the latest and greatest in the world of JavaScript. You might also want to sign up to the JavaScript Weekly email newsletter.

Still want more? Check out the JavaScript Category over on the Tuts+ Marketplace.


Thanks for reading! Hopefully, this plan can help you become a JavaScript fanatic. If you’re already familiar with JavaScript, can you recommend any other resources in the comments?


Popular posts from this blog

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Apple has announced today it will drop iTunes support for some older devices from May 25. This includes the first generation Apple TV, and also any PC running Windows XP or Vista. The company is introducing new security changes which will prevent those devices from using the latest version of iTunes.
Apple says that the original Apple TV is an "obsolete Apple product" and will not be updated to support security changes. Only those with the second generation of Apple TV or later will be able to access the iTunes store.
Windows XP or Vista users won't be able to use the latest version of iTunes, but older Windows computers can still use previous versions without support from Apple. Those who do so, however, won't be able to make new purchases or re-download previous purchases on that computer. If you're on on XP or Vista, you'll need to upgrade to Windows 7 or later to continue using iTunes normally.
The writing was already on the wall for these devices: Wi…

Microsoft Reportedly Replacing With Office 365

Microsoft might be thinking about replacing the technology and user interface of with Office 365 if a new report is to be believed. Apparently the company will be migrating all users to Office 365 at some point later this year. Office 365 brings other services as well which include Outlook Web Access. The question that surely must be on everyone’s mind is that why is Microsoft doing this? According to The Verge the reason behind this migration is to make sure that Microsoft Outlook, Exchange and Office 365 platforms are perfectly aligned. In favor of keeping things consistent Microsoft is going to go ahead and add the consumer to the mix as well. There has been speculation previously about impending major user interface changes for, Microsoft’s general manager of Office Apps Rob Lefferts suspected that much. It’s worth nothing that Microsoft hasn’t updated its consumer email service for quite a few months and it even showed the door to G…

Windows 10: Microsoft retires HomeGroup

Microsoft plans to remove the HomeGroup functionality from its Windows 10 operating system. The company made the first step towards that goal in the most recent Insider Preview version of Windows 10 as it disabled it in that build.
In "a note about HomeGroup" in the release announcement of the Windows 10 Insider Build, Microsoft confirms that HomeGroup will be retired.
The company introduced HomeGroup in Windows 7 as a new option for home users to access printers, files, and media in home networks. The core idea was to assign all devices to a single HomeGroup to share access to files and printers between all devices.
It is unclear how popular the feature was and is. It is clear however that it was never the only option that Windows users had in this regard, and it was not the best either for certain use cases. You could not add Mac OS X or Linux devices to a HomeGroup for instance.
The end of HomeGroup
Easily connecting to and sharing the important pieces of your digi…