A Roadmap to Learning JavaScript for Free

Posted: 03 Oct 2014 03:00 AM PDT

This is a structured collection of free educational JavaScript resources aimed at giving learners a good understanding of the programming language.

There are many ways to tackle the task of teaching yourself how to program in JavaScript. Books, online courses, workshops, tutorials, and blogs about the subject are abundant. But the shear quantity of learning materials — and their varying degrees of quality, accuracy, and reliability — can quickly overwhelm anyone considering a journey into JavaScript.

To make it a little easier, I’ve constructed a list of eight resources that will help you learn JavaScript at no expense financially.

JavaScript is a forgiving language, in that it doesn’t take much time and effort to get going with it.

What does take a considerable amount of time and effort is learning how to use JavaScript effectively and efficiently. Choosing to educate yourself using resources that champion JavaScript development best practices at all points of your learning experience will save you from a lot of headaches and frustration.

I reviewed hundreds of resources I’ve bookmarked over the years, and ended up only including eight of them in this learning outline. Instead of creating a long list of JavaScript resources and then giving you the burden of figuring out which ones to read, I’ve done the heavy lifting for you.

Some Tips

Before going over the learning resources, let’s talk about some things that will help you get the most out of your journey into JavaScript.

Give Yourself Enough Time to Learn

JavaScript is a hard language to learn properly. You will not be able to write good JS code overnight.

And let’s just get this out of the way: JavaScript is notoriously known as a, shall we say, less-than-perfect programming language. It has many idiosyncrasies that trip up novice and advanced programmers alike. And because of this, it’s all the more crucial to understand the language’s fundamental concepts and development best practices so that when things aren’t working out like they’re supposed to, you’ll have an easy time figuring out why.

There will be times in your learning experience where you’ll be so annoyed with JavaScript that you’ll just want to give up. You’ll start thinking "Maybe this isn’t for me" or "I’ll just stick to HTML and CSS" or "There’s no way I’ll be able to learn all of this." JS has that effect on every developer that’s ever had to use it.

Patience is key to learning this amazing, but often misunderstood and misused, language.

Assuming you have a life outside of JavaScript, it might take you four to six weeks to completely read and thoroughly understand the following learning materials. Commit an hour or two a day going through the suggested resources, distraction-free, and do it in an unrushed pace so that you’re completely absorbing the content.

Apply What You Learn

What I love most about JavaScript is it’s a practical skill. You can use it right away regardless of where you are in your command of the language. And it’s easy to set up an environment for experimenting with code: You just need a text editor, a computer, and a browser, and you’re good to go.

As you’re learning the language, think of projects you can work on that give you the opportunity to immediately utilize what you’ve learned. Create a simple calculator (like a percent-difference calculator for example), a random number generator, and later on, a client-side browser app (like a to-do list that uses the Local Storage API).

Practice makes perfect.

Roadmap to Learning JavaScript for Free

There are eight freely accessible resources in this roadmap to learning JavaScript. I have arranged the following educational materials in a logical way to give you an optimal learning structure that progresses in difficulty. There are online books, an interactive course, and single-page guides included here.

Beginner

If JavaScript is completely new to you, you definitely need to start here. And even if you’re a already a pro, it never hurts to review the basics.

1. JavaScript Road Trip Part 1

This Code School online course is a gentle introduction to JavaScript: It covers the fundamental aspects of the language such as variables, expressions, and how to reference JS files in HTML. It takes about two hours to complete this course according to the course description, but take it at your own pace. Part 1 of this course series is free, the subsequent parts are not.

2. Eloquent JavaScript

Eloquent JavaScript

This free online book is a detailed explanation of JavaScript, and it doubly serves as an intro to basic programming concepts. If you’re new to the world of programming, there’s a lot of content to digest in this book, so take your time and stick with it because the results will be worth it.

3. MDN JavaScript Guide

MDN JavaScript Guide

This guide by the Mozilla Developer Network covers everything you need to know in order write JavaScript code. It’s for programmers who are just learning the language. It goes over the very basics as well as intermediate-level topics such as closures and inheritance.

Intermediate

The following learning resources are best suited for people who already have a good grasp of JavaScript.

4. You Don’t Know JS [Book Series]

You Don't Know JS [Book Series]

This book series published by O’Reilly Media has its drafts hosted on GitHub for anyone to access. The series covers subjects such as the hoisting behavior of JavaScript, event/behavior delegation, code patterns, and more.

This is a 5-part book series, with each book in different stages of completion (others have already been published, while others are still in draft):

Scope & Closures
this & Object Prototypes
Types & Grammar
Async & Performance
ES6 & Beyond (still in the planning phase at the time of writing)

With 450 people watching the project on GitHub and 35 contributors, the content of this JavaScript book series has the benefit of being thoroughly and publically reviewed by many developers.

5. A Re-introduction to JavaScript

A Re-introduction to JavaScript

This one-page guide is a good overview of the key concepts of JavaScript. This is a perfect read for JavaScript developers who need to review the important features of the language.

6. JavaScript Garden

JavaScript Garden

The JavaScript Garden project documents JS’s "quirky parts": It provides tips for sidestepping common JavaScript-programming mistakes and bad coding practices.

Advanced

The following resources will help you fine-tune your JavaScript skills as well as expose you to professional-level development practices.

7. JavaScript Patterns

JavaScript Patterns

This is a collection of popular JavaScript code patterns for common tasks such as declaring variables using a single var statement and writing efficient for loops. It also has jQuery patterns.

8. The JavaScript Trilogy [Videos]

The JavaScript Trilogy

If you want a deep and detailed discussion of JavaScript, watch this three-course series by Douglas Crockford, a key leader and educator in the JavaScript community. The first part covers JavaScript’s history (the early years of the language’s design and development) and the last video is a close look at some JavaScript code patterns like the singleton-constructor pattern.

Part 1: The JavaScript Programming Language

Part 2: An Inconvenient API – The Theory of the DOM

Part 3: Advanced JavaScript

About the Author

Example of a website with a large background image: Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.