How to Learn JavaScript Properly

Learn JavaScript Properly (For Beginners and Experienced Programmers)

This study guide, which I also refer to as a course outline and a road map, gives you a structured and instructive outline for learning JavaScript properly. In fact, you will find two study guides below, one for absolute beginners and the other for experienced programmers and web developers.

You do want to learn JavaScript. I presume you are here for that reason, and you have made a wise decision. For if you want to develop modern websites and web applications (including an internet startup), or if you want a high-paying developer job ($75K to $250K+), JavaScript is undoubtedly the best web-development language to learn today, unless you want to develop native iOS or Android apps exclusively. And while there exist ample online resources to teach you JavaScript, finding the most efficient and beneficial method to learn the “language of the web” can be a frustrating endeavor. This study guide streamlines and simplifies the process; it has proven successful in helping thousands, and thousands more read and follow it each day.

Study Groups
People have started study groups for this study guide. You can find such groups on Reddit here and here, and other places, including Code Crew Meetup.

What You will Learn

You will learn the JavaScript language (up to advanced-intermediate, if you follow the “Beginners” study guide; or up to advanced, if you follow the “Experienced Programmers” study guide). You will also learn HTML, CSS, jQuery, and Git. And you will build a simple HTML/CSS website, an interactive HTML/CSS/JavaScript website, and a moderately sophisticated JavaScript quiz application.

Can a Single JavaScript Course Make You Richer?

This Single JavaScript Course Can Get You a Bigger Salary(4 courses in 1—available as a single course for the first time)

Becoming a JavaScript Expert

Learn almost the entire
JavaScript language, advanced JavaScript programming, software engineering for web programmers, and more

21 comprehensive major subjects and over 200 of the most important concepts covered (plus a bonus advanced course)

Over 40 exercises and more than three dozen
projects and applications
(Watching and/or reading JavaScript [JS] tutorials alone won't help you advance your programming career; you need to build real JS projects and applications as you learn. These exercises, projects, and applications are the most important part of your JS training. They will advance your JS confidence and skills and your overall programming and software engineering skills.)

Every concept covered in depth and with clarity (if you don't understand something, we will
update
the course accordingly to add more clarity)

By JavascriptIsSexy: Support the website while you simultaneously save yourself thousands of dollars

How Will Your Life Change After You Learn JavaScript Properly?

Maybe you will look more lovely and have a kinder, more pleasant personality after you learn JavaScript properly. Who knows? I don’t know.

But I do know that you will emerge more confident, more assured in your ability, and amply trained with a highly valued skill—a skill more valuable than most college degrees. For as a JavaScript developer, you will have the capacity not only to create whatever startup or web app you imagine, but also to work, making a handsome salary, as a front-end or full-stack developer, developing modern and futuristic applications. In fact, if you have never developed any kind of application before, you will experience ecstasy, so exultant and euphoric that you will want to enthusiastically practice more and build something—anything, like a hungry chef discovering a furnished kitchen with every tool, every utensil, and a stocked refrigerator.

It is worth noting that unlike just a couple of years ago—when you needed to know a true server-side language (such as PHP, Rails, Java, Python, or Perl) to develop scalable, dynamic, and database-driven web applications—today you can do as much and more with JavaScript alone.

This is the flourishing and glorious age of the JavaScript developer.

Be Empowered

This course outline transcends an entire semester of college coursework. If you complete the study guide, you will have learned enough programming to develop modern web applications, and with a bit of experience and a couple of completed projects, you will have become a sought-after programmer. Indeed, JavaScript developers are in high demand today. But you must prove your worth by developing a few impressive (interesting and non-trivial, though not necessarily complex) web applications.

<h2>How NOT To Learn JavaScript</h2>
<ul>
<li>Do not try to learn JavaScript the first time from bits of unrelated or related JavaScript tutorials online; this is the worst way to learn a programming language. It could work for some after countless such tutorials, but it is an inefficient process that lacks the proper hierarchical structure needed for learning a subject matter thoroughly. And this could lead to your being stuck quite frequently, when you start to build websites and web applications with the language. In short, you will not have the know-how—the comprehensive knowledge—you need to use that language as a tool—as your tool.
</li>
<li>In addition, some will recommend you learn JavaScript from “JavaScript: The Good Parts,” by the venerable Douglas Crockford. While many regard Mr. Crockford as a JavaScript godfather, his book, <em>The Good Parts</em>, is not the best JavaScript book for beginners. It does not explain JavaScript's core concepts in a detailed, clear, and easily digestible form. I do recommend you follow Crockford's advanced videos, however, as part of the <a href="http://javascriptissexy.com/learn-intermediate-and-advanced-javascript/" title="Learn Intermediate and Advanced JavaScript" target="_blank">Learn Advanced JavaScript</a> road map.
</li>
<li>And do not try to learn the language by using only Codecademy; while you will learn how to program bits of small JavaScript tasks, you will <strong>not</strong> have learned enough to build complex web applications. Nonetheless, below I do recommend Codecademy as a supplemental learning resource.
</li>
</ul>

Resources for the Two Study Guides

I have outlined two different study guides below, one for beginners and one for experienced web developers.

Beginners should follow the Learn JavaScript Properly Study Guide for Beginners and get this book:Beginning JavaScript.

Sign up for an account on Stack Overflow (a FREE service). It is a forum for asking and answering programming questions. This website will be considerably more useful than Codecademy for answering your programming questions, even very basic, seemingly stupid (remember, there is never a stupid question) questions.

Sign up for an account on Codecademy. We will complete 4 Codecademy tracks. Codecademy is an online platform to learn programming: you can write code on their website, right in your browser. (It is also a FREE service.)

Resources:
— Beginning JavaScript (4th Edition)
— JavaScriptIsSexy.com (4 articles)
— Codecademy.com (4 tracks)
— CodeSchool.com (1 short course)
— Notice for Visual Learners: If you are a visual learner, that is, if you prefer to see lots of images, schematics, and the like when learning a topic, you may find JavaScript and jQuery: Interactive Front-End Web Development more appealing than the Beginning JavaScript book. If you do get the JavaScript and jQuery book, note that the chapters are similar enough that you can use it (instead of Beginning JavaScript) to follow this study guide, though you will have to modify the sections a bit.

Learn JavaScript Properly Study Guide for Beginners

Prerequisite: Completed at least some high school (no programming experience necessary)

The Level of JavaScript Covered in this Study Guide: Absolute Beginner to Intermediate

How to Get the Best Out of This Study Guide

Type out and test every example code you encounter in the book. You can type the code and tweak it (experiment with it) in Firefox’s or Chrome’s console. The browser console is an area of the browser where you can write and run JavaScript code. Or use JSFiddle. JSFiddle is a web application that allows you to write and test your code online, right in your browser. You can test all sorts of code, including a combination of HTML, CSS, and JavaScript (and jQuery).

Don’t use Safari. I recommend Chrome, but if you use Firefox, get the Firebug Add on for Firefox; use it for testing and debugging your code.

Codecademy.com: Work through the JavaScript Track on Codecademy. Specifically, work through these sections: “Introduction to JavaScript,” “Functions,” “‘For’ Loops in JavaScript,” “‘While’ Loops in JavaScript,” and “Control Flow.”

Week 6: Build a Real-World JavaScript Quiz Application

At this juncture, you have learned enough to build a solid JavaScript web application. Don’t proceed any further until you can successfully build this application I describe below. Don’t be afraid to ask questions on Stack Overflow, and do reread sections of the book to properly understand the concepts.

You are building a JavaScript quiz web application (you will use HTML and CSS as well) that will function as follows:

It is a simple quiz that has radio button choices, and it will show the quiz taker his or her score upon completion.

The quiz can show any number of questions and any number of choices.

Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.

Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this (Notice that only one question is in this example array; you will add many questions):

Dynamically (with document.getElementById or jQuery) remove the current question and add the next question, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.

You can ask for help in the comments below or preferably on Stack Overflow. You will likely to get a prompt and accurate answer on Stack Overflow.

Improve Your Quiz

You should be very comfortable with JavaScript, probably feeling like a Jedi. No, you are not. Not yet. You must keep using your newly acquired knowledge and skills as often as possible to keep learning and improving.

Improve Your Quiz Application From Earlier:

Add client-side data validation: make sure the user answers each question before proceeding to the next question.

Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions that the user has answered already, be sure to show the radio button selected, so that the user is not forced to answer the questions again, which she has completed.

Use jQuery to add animation (fade out the current question and fade in the next question).

Test the quiz on IE 9, and fix any bugs. This will give you a good workout 😉

Getting Started with Git; Objective Oriented JavaScript; Improve Your Quiz Even More

Improve Your Quiz Application Even Further:
— Use Twitter Bootstrap for the entire page layout, including the quiz elements to make it look more polished. As an added bonus, use the tabs user interface component from Twitter Bootstrap and show 4 different quizzes, one on each tab.
— Learn Handlebars.js and add Handlebars.js templating to the quiz. You should no longer have any HTML in your JavaScript code. Your quiz is getting more advanced, bit by bit.
— Keep a record of all the users who take the quiz and show each user how his or her score ranks among the scores from other quiz takers.

Later (after you have learned Backbone.js and Node.js or Meteor.js), you can use these technologies to refactor your quiz code and turn the same quiz into a sophisticated, single-page, modern web application built with the latest JavaScript frameworks. And you will store the users’ authentication credentials and scores in a MongoDB database.

Next: Decide on a personal project to build, and start building your project promptly (while everything remains fresh in your memory). Use the book as a reference. And of course be an active member on Stack Overflow: ask questions and answer other programmers’ questions. I am confident you will be able to answer a number of questions.

Prerequisite: You should know at least some programming basics and how to build a simple HTML/CSS website.

The Level of JavaScript Covered in this Study Guide: Beginner to Advanced

How to Get the Best Out of This Study Guide

Type out and test every example code you encounter in the book. You can type the code and tweak it (experiment with it) in Firefox’s or Chrome’s console. The browser console is an area of the browser where you can write and run JavaScript code. Or use JSFiddle. JSFiddle is a web application that allows you to write and test your code online, right in your browser. You can test all sorts of code, including a combination of HTML, CSS, and JavaScript (and jQuery).

Don’t use Safari. I recommend Chrome, but if you use Firefox, get the Firebug Add on for Firefox; use it for testing and debugging your code.

The Road Map to JavaScript Attainment
You will learn just about the full JavaScript language (and jQuery and some HTML5) in 6 to 8 weeks, if you complete this entire course outline. If you don’t have enough time to commit to do all the sections in 6 weeks (which is a relatively aggressive schedule), try to do it in no more than 8 weeks. The longer you take, the harder it will be for you to grasp and remember everything you learn.

Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators

If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.

Read the Preface and Chapters 1 and 2 of JavaScript: The Definitive Guide.

Or Read the Introduction and Chapters 1 and 2 of Professional JavaScript for Web Developers.

Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.

Read chapters 3 and 4 of JavaScript: The Definitive Guide.

Or Read the Preface and Chapters 3 and 4 of Professional JavaScript for Web Developers. You can skip the section on “Bitwise Operators”; it is hardly likely you will use those in your JavaScript career.

And again, make sure you stop and write the example code in your browser’s console (or JSFiddle) and experiment—change some of the variables and tweak the code a bit.

Read chapter 5 of JavaScript: The Definitive Guide. No reading for Professional JavaScript for Web Developers, you have learned the material already in the last chapter.

Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)

Or read chapter 6 of Professional JavaScript for Web Developers. NOTE: Only read the “Understanding Objects” section.

Any of the 3 is fine, although the 2 textbooks go into more detail: the extra detail you can skip confidently, if you read and thoroughly understand my post.

Read chapters 7 and 8 of JavaScript: The Definitive Guide

Or read chapters 5 and 7 of Professional JavaScript for Web Developers

At this juncture, you should be spending a lot of time writing code in your browser’s console and testing if-else statements, for loops, Arrays, Functions, Objects, and more. It is critically important that you know (and keep practicing) how to code independently (without help from Codecademy) in your browser. By the time you get back to Codecademy, you shouldn’t need any help or hints. Every assignment should be easy for you.

If you are still struggling with Codecademy, go back to your browser and keep hacking away. This is where you will learn the most. This is analogous to Lebron James honing his skills as a youth in the “streets” (the neighborhood basketball courts), or to Bill Gates hacking away in his basement.

There is tremendous value in your hacking away and learning bit by bit on your own. You have to see the value in this strategy, and you have to embrace it and trust that it will work.

False Sense of Accomplishment When Using Codecademy
The biggest problem with Codecademy is that the hints and little code snippets help you so much that you have a false sense of accomplishment when you are progressing through the exercises easily. You wouldn’t know it at the time, but much of what you are doing is not on your own.

Now, Codecademy is still great for helping you to learn how to code, particularly in the manner in which it guides you through the process of developing small projects and small applications from very basic code constructs like if statements, for loops, functions, and variables.

Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).

While you are on Codecademy, go ahead and build the 5 little Basic Projects on the Projects track. After this, you are done with Codecademy. And this is a good thing, because the more you work on your own, the faster you will learn and the better prepared you will be to start programming on your own.

Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide.

Or read chapters 8, 9, 10, 11, 13, and 14 of Professional JavaScript for Web Developers. This book does not cover jQuery, and the jQuery coverage on Codecademy is insufficient. Follow this jQuery course—it is free: http://try.jquery.com/

And you can read chapter 19 of JavaScript: The Definitive Guide, if you have the book, for more on jQuery.

Get The Ultimate JavaScript Editor: WebStorm

Before you build your first project, if you plan to be a JavaScript developer or use JavaScript often, you should take a break now and download a trial copy of WebStorm. Learn how to get started with WebStorm here (written especially for this course).

WebStorm is unquestionably the absolute best editor (IDE) for programming JavaScript. It costs $49.00 when your 30-day trial period expires, but it is probably the best investment you will make as a JavaScript developer, besides buying the book you are using in this course and learning JavaScript.

Make sure you set WebStorm to use JSHint. JSHint is a “tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions.” The cool thing with using WebStorm is that JSHint automatically adds a red line under errors in your code, just as a spell checker does in a word processing application. So JSHint will show you all the errors in your code (including HTML errors) and make you a better JavaScript programmer, even as you are learning. This is extremely important. You will thank me later after you realize how much WebStorm and JSHint have helped you become a better programmer.

Moreover, WebStorm is a world-class, professional-grade IDE for coding professional JavaScript web applications, so you will use it a lot. And it integrates Node.js, Git, and other JavaScript frameworks, so even after you have become a rock star JavaScript developer, you will be using it, unless a more compelling JavaScript IDE comes out in the next few months.

It is fair that I also mention Sublime Text 2, which is the next best JavaScript editor. But it is not as feature rich and complete (even with numerous add-on packages) as WebStorm. I use Sublime Text 2 to make small edits to files of different programming languages, including JS files. But I don’t use it to program full JavaScript web applications.

Your First Project—A Dynamic Quiz

At this juncture, you have learned enough to build a solid web application that is manageable. Don’t proceed any further until you can successfully build this application I describe below. As I noted earlier, if you are stuck, ask questions on Stack Overflow and reread sections of the book to properly understand the concepts.

You are building a JavaScript quiz application (you will use HTML and CSS as well) that will function as follows:

It is a simple quiz that has radio button choices, and it will show the user her score upon completion.

The quiz can show any number of questions and any number of choices.

Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.

Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this:

// Only one question is in this array, but you will add all the questions.var allQuestions = [{question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer:0}];

Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.

You can ask for help in the comments below or preferably on Stack Overflow. You are likely to get a prompt and accurate answer on Stack Overflow.

Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)

Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.

Or read chapters 20 and 23 of Professional JavaScript for Web Developers.

Remember to keep typing out all the example codes in Firefox console and tweak each piece of code to experiment with it to really understand how it works and what it does.

At this point, you should be very comfortable with JavaScript, probably feeling like a Jedi. You are not quite a Jedi yet, you must keep using your newly acquired knowledge and skills as often as possible to keep learning and improving.

Improve Your Quiz Application From Earlier:
— Add client-side data validation: make sure the user answers each question before proceeding to the next question.
— Add a “Back” button to allow the user to go back and change her answer. The user can go back up to the first question. For the questions that the user has answered already, be sure to show the radio button selected, so that the user is not forced to answer the questions again, which she has completed.
— Use jQuery to add animation (fade out the current question and fade in the next question).
— Test the quiz on IE 8 and 9, and fix any bugs. This will give you a good workout 😉
— Store the quiz questions in an external JSON file.
— Add user authentication: allow users log in, and save their login credentials to local storage (HTML5 browser storage).
— Use cookies to remember the user, and show a “Welcome, First Name” message when the user returns to the quiz.

Weeks 7 and, if necessary 8 (Classes, Inheritance, more HTML5)

Or read chapters 6 (only the “Object Creation” and “Inheritance” sections this time) 16, 22, and 24 of Professional JavaScript for Web Developers. NOTE: The reading in this section of the book is the most technical reading you will encounter in this entire road map. It is up to you if you want to read all of it. You should at least learn the Prototype Pattern, Factory Pattern, and Prototypal Inheritance. You don’t have to know all the other patterns.

Improve Your Quiz Application Even Further:
— Use Twitter Bootstrap for the entire page layout, including the quiz elements to make it look more professional. As an added bonus, use the tabs user interface component from Twitter Bootstrap and show 4 different quizzes, one on each tab.
— Learn Handlebars.js and add Handlebars.js templating to the quiz. You should no longer have any HTML in your JavaScript code. Your quiz is getting more advanced bit by bit.
— Keep a record of all the users who take the quiz and show each user how her score ranks amongst the scores from other quiz takers.

Later (after you have learned Backbone.js and Node.js), you will use these two technologies to refactor your quiz code and turn the same quiz into a sophisticated, single-page, modern web application built with the latest JavaScript frameworks. And you will store the users’ authentication credentials and scores in a MongoDB database.

Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind).

<h2>Continue Improving</h2>
<ol>
<li><a href="http://javascriptissexy.com/learn-backbone-js-completely/">Learn Backbone.js Completely</a>, if you want to be a front-end developer or learn how to develop web applications with a JavaScript front-end framework.
</li>

Alternatively, if you want to develop complete applications, that is, the front-end and the backend, learn Meteor.js properly.

At this point, you will definitely need my book, MongoDB for JavaScript Applications, to help you build your own jQuery, Backbone.js, Node.js, or Meteor.js applications, since none of the noted resources, or any other book for that matter, cover MongoDB in depth for JavaScript applications.

Words of Encouragement

I wish you success with your studies and in your JavaScript career. Never give up! When you are struggling and feeling incompetent (you may from time to time), always remember that most (probably all) programmers, new and experienced alike, feel this way sometimes, or have felt this way at some point during their programming career.

Remember to dig deep and don’t get frustrated; just carry on and stick with the task until you figure it out, for a worthwhile reward awaits you when you triumph in the end: programming is fun, liberating, and lucrative. The ecstasy one gets from building an application is a powerful feeling that you must experience to understand. Even more satisfying, however, is the empowerment you experience when you realize you have attained the skill and knowledge to build applications from scratch, to change the world with any idea you dream up.

The moment will come when you realize that all the difficulties you endured were worth while. Just as the millions before you have triumphed, so too, you will vanquish the toughest bugs, master the incomprehensible topics, and overcome the seemingly impossible tasks.

Feel free to share your links with us below when you build something, even if it is a tiny, itsy-bitsy project.

@ratnabh Tell me a bit about yourself and what you want to learn and your career plans. I will help you out.
This message is for everyone else as well who is lost about what to learn and who want to change their career to become a programmer or improve their programming skills for a better programming job.

Feel free to email me. See the About page for my email. I rarely check my gmail email, so if you want a relatively quick reply (within a week; I am quite inundated right now), email by BovAcademy email.

Jeff, I am happy to hear you have started learning JavaScript. Congratulations, you will be very happy you did, because you can do a lot, just about everything, with JavaScript nowadays.

As for a server-side language, the hot languages for startups and modern web applications are Rails, Python, and Scala (for larger web apps). But, with your JavaScript skills, you can use Node.js or Meteor.js (the future for web application development), and you need not learn a new programming language.

And it is worth noting that Meteor.js and Node.js are two of the fastest growing server-side frameworks today. So, if I had to tell you to learn one server-side language, I would say learn JavaScript very well, enough that you can use it skillfully to make any web application. Then learn Meteor.js and or Node.js and you would be preparing yourself for future web application development.

Having said that, it is always good to know at least one server-side language, and you cannot go wrong with Python or Rails, especially Rails.

I finished the web fundamentals course on Codeacademy and started JavaScript track, but I’m gonna switch to your course because it’s definitelly true that everything seems easy on Codeacademy but not so much when you try it on your own!

Just a short question, is there any special reason why you suggest Rails over Python (i guess we are talking about Django framework here)? Is it because of the better library or it’s just your personal preference? People say Python is more similar to natural language and thus easier to master.

Thanks for the reply!! I had learned enough PHP and Javascript to slap together a site, but perhaps as I work through this I can rewrite my little project using node instead. Thanks again for the awesome roadmap! Already most of the way through chapter 3 and looking forward to getting back into codecademy.

That is very good question, and I did ponder adding a web project to accompany the advanced chapters in the two JS books. But because I had not done the proper research to find the ideal project for the advanced chapters, I did not add a project to the post.

I will do the proper research over the next 2-3 days and update the post above with a web project for week 4.

I’d really appreciate an Angular.js tutorial. I’m trying to pick a “goto” javascript framework (yes, I know one tool doesn’t fit every job but it’s nice to have one you know well enough to prototype apps) and Angular is looking good, except I have no idea how to manipulate the DOM, and since it’s new there aren’t many resources.

I’ve been trying to get to be able to write production level JS code. I’ve played around with JavaScript for a while but haven’t really used it for anything other than simple programs similar to the ones at Codecademy.

I’m looking to venture into building Web Apps, and this could really help. Thanks

Have you ever taken a look on CodeAvengers.com. I stopped learning JS on codecademy after realizing I was making little improvement. I learned Java back in college, so I had little experience with coding and most syntax used in programming languages (that’s not to say the two are similar but some thought process is common in different languages). Avengers was more thorough and forced you to work on tasks as opposed to academy’s way of chewing things for you. Plus, it was very easy for me after a week to be able to use my coding experience to build a simple website that, say, asks you for 2 numbers and gives you the sum and/or product. Learning on academy feels very different to applying JS on html. It doesn’t even tell you how to nest your script on HTML code.

Thanks for posting this helpfull guide:-)
For your information, the URL to the Javascript track at Codecademy you use in your article points to a newer version of this track. The URL to the track you are reffering to is http://www.codecademy.com/tracks/javascript-original

I just want to mention I am beginner to blogs and truly liked you’re web-site. Likely I’m want to bookmark your blog . You certainly have incredible articles and reviews. Thanks for sharing with us your website page.

Hi ther Richard Bovell.
First of all i wanted to thank you cuase i got stucked while ago and now things getting real good!
but i see now that your post is not a to the date with the code academy site i spouse they changed the site (the are no further section then 8) so if you can post a new guide using the code academy it will be very appricited!!!
and agian thanks!

Just wanted to confirm that this book is indeed appropriate for the beginner w/o a background in programming. Many of the reviews warn beginners that this book isn’t for beginners so I’m a bit concerned.

Excellent question. I went and took this directly from the book:
________________________________
WHO THIS BOOK IS FOR
This book is aimed at three groups of readers:
➤ Experienced developers familiar with object-oriented programming who are looking to learn JavaScript as it relates to traditional OO languages such as Java and C++.
➤ Web application developers attempting to enhance the usability of their web sites and web applications.
➤ Novice JavaScript developers aiming to better understand the language.
________________________________

But since you are using Codecademy along with the book, and taking in to account the manner in which I setup the course outline, I believe you will make it through the course, though you should go at a much slower pace.

Codecademy will be very helpful for you (you needn’t have any programming background), and definitely read the corresponding chapters in the book so that you can better understand what you are learning on Codecademy.

Great. I’m going for it. I’ve been doing the JavaScript track on CodeAcademy already and have had great success with the general syntax. Sometimes I’m getting bogged down on the logic side of things. Hopefully the book will better shed light on why and how to structure my code.

I just want to say I am all new to blogging and site-building and definitely loved you’re website. Almost certainly I’m going to bookmark your site . You absolutely have tremendous articles. Regards for sharing your web page.

I actually tried Eloquent JavaScript when I was learning JavaScript a while ago, but I did not find it as thorough and as instructive as I needed it to be, to teach me JavaScript properly. So I didn’t use it it much and I went ahead and buy the 2 books I noted in the post.

The Main problem i have had when learning to code is not having a complete roadmap to follow. Its so annoying, and i have just been dumping money everywhere.

This is an exciting solution because no matter how abstract the concept i am leatrning may be at a particular time, i am confident that if i go through it, i will be able to build something at the end. That and as the Javascript language has been the most friendly to me over the past 3 months(and i have tried ruby and python).

I’ll complete this course and report black; in fact i might even run a live blog about it.

Thanks a lot for providing this guidance. It’s really super-helpful if someone picks a selection of resources among the vast amount of what’s out there.

I just started this course by taking the ‘Web Fundamentals’ track on Codeacademy, and it seems they have changed the structure a bit. There are no chapters 7 and 8 on JavaScript anymore in this track. So you might want to check your course elements that involve Codeacademy tracks and chapters.

Also, I was really surprised to see that the tracks and lessons on Codeacademy are actually free (they are, aren’t they?). Maybe include this explicitly in your course outline, so that people won’t be put off by thinking they would have to pay for it.

Try throwing in a spaced repetition program such as [Anki] to help you retain your knowledge. The problem is syntax and retention and if you use those flash cards that you create you’ll be well on your way on the path to mastery!

Hi Richard,
Thanks for sharing this. In your opinion would it be ok to buy the JavaScript ebooks and learn off the Kindle?
My initial thoughts were the screen is quite small and might be a pain having to flick back and forth as you tend to do with a large technical book. What do you think?

@Peter T
I used to prefer reading from PDF eBooks, until I got my iPad and quickly learned that no matter the subject matter, it is a pleasurable, engrossing experience reading on the iPad. So I buy all my books for the iPad nowadays. Making notes, adding bookmarks, and searching the book are super easy compared with reading a paper book or PDF book.

And I suspect the experience is similar on the Kindle. So, if the Kindle is your preferred reading device, you should get the books for the Kindle.

Thanks for this post. This is exactly what I needed. I have absolutely no programming background but am now getting more and more comfortable with the language.

I wanted to reach out to get some tips on applying all this material in the reading b/c 1,000+ pages is A LOT of reading. I’ve followed your instructions to practice on Codecademy. My experience with Codecademy has been inconsistent — some of their lessons are great but others not so much.

With all the reading, there are a lot of concepts that aren’t really sinking in. What other ways would you suggest that I get these concepts soaked in and apply my learning. I have been supplementing your track with youtube videos on concepts I don’t fully grasp. Should I just start building my idea now or wait till weeks 5 & 6?

I do realize the roadmap is not ideal (it could be a lot better) for beginners, and it is not streamlined for people who already have some programming experience.

To fix this problem and to make the instructions more tailored, I will create two separate roadmaps: one for beginners and one for experienced programmers. And I will create an eBook to help both groups.

In a few days (within a week), I will create the new roadmap for beginners. Stay tuned.

Wow, thanks man. This is great. I am starting this roadmap ASAP. I have already been on Code Academy and Treehouse, but this is such a detailed and intentional roadmap. I think it will work well for me. I am looking forward to the beginners road map.

I just started with your suggestions on learning JavaScript. I’ve been trying to learn for a few months using codeacademy and tutorials in the net. This is the first time I’m going to follow a book. Hope it helps.

Excellent post. I’m learning Javascript during the last month with the Team Tree House Course and with the book Eloquent Javascript, but I think that I’m now in a good level. Do you recommend to start from scratch and follow this guide? Now I’m starting with jQuery and with backbone

It seems Codeacdemy has changed it’s track structure. Javascript fundamentals doesnt have anything like Chapter 11 and 12. Chapter 8th is the last one.
You are referring to http://www.codecademy.com/tracks/javascript , right?

Thanks, Arun, I will update the article in a few days to reflect the Codecademy changes. I have to make two new roadmaps, as I have noted above; one for absolute beginners and one for programmers with some experience.

I’ve tried this approach to learning a language before and I find that it hinders the process more than anything. You get caught up in syntactical details instead of seeing the big picture the author is trying to convey.

My personal recommendation is to read the chapters, and then think of a feature that each thing you read about can be used for in the context of a larger application. Alternatively, if you still want to type out the examples, maybe use a see, copy, do approach where you read the chapter once, copy the examples, and then use them in your own app. This takes a fair bit longer though!

Maybe Richard has some other ideas on how to get the most out of the reading material.

Thanks for the challenge! I’v been flirting with JS for ages but never found it never stuck I even ticked of all three of your starter ‘not to’, made me laugh.

I’v been doing a 9 week online course ‘Introduction to Databases’ and the more formal structure has made it far more beneficial than lots of little blog post opinions scattered all over the web. So really looking forward to your path as well.

Just got the books through as well, was a heavy box. Feel like I got good value, just may take a while

Richard, you’ve put together an amazing resource here. So, thank you for that.

I’m very excited to follow the more regimented program that you’ve offered here. I don’t want to take too much of your time here. However, I was wondering if you’d answer a few very short questions for me and your audience:

1. Aside from learning from tutorials, scattered knowledge in books, etc… what is the most common mistake novice programmers make when learning Javascript?

2. Do you know of anyone who struggled with programming, but learned JS (or another language) regardless of their ineptitude? If so, what about their approach was effective in your opinion?

3. After completing your course, what type of application could a student build to impress potential employers – showing off their JS proficiency?

It is my fault. I was too optimistic with the time estimate. I know a lot of readers are waiting eagerly for the update. I am hopeful the post will be helpful.

I will upload the absolute beginner update shortly (about 1-1/2 hour from now). With the advanced and experienced programmers posts to follow a few hours after that.

To everyone waiting eagerly: I am sorry about the delay. Drink a cup of tea or coffee and watch some Oscars and come back in about 2 hours :). It will be ready for sure by then. Or read chapter 1 of “JavaScript, The Definitive Guide” in the mean time.

Thanks so much for this, Richard. I am an entry-level .Net developer who learned mostly all I have on my own, and from my programmer brother who informally tutored me. So I have some know-how, but am not there yet. Considering how important JavaScript is to know for a .Net guy, I was glad to find your course and started the first iteration of it (that was just replaced with this new format). I was about 2 weeks in. Any advice on where I should go in this new format? Thanks!

I am also about two weeks in. I had been going back and reading the first chapters of The Definitive Guide anyways. So I plan to keep with that (which sort of jives with the new roadmap). In addition, I was going to finish up the codecademy from the first two weeks of the original roadmap then do step 4, 5, and 6 for weeks 3 and 4 on the new roadmap. That should get me to the project point. I will probably start the project now anyways, even before I get to the jQuery part of the roadmap….just to start noodling around with something of my own.

Sounds good, Jeff. Since you have the “JavaScript: The Definitive Guide” book, it is easy to transition indeed, and this new track a lot easier and more effective. The old one had too many unimportant chapters from the other tougher book.

Ben,
I was just about to add some notes for you, but then I remember the old track had the “JavaScript: The Definitive Guide” book, too, so it is very easy to transition to this new track. This new track is actually a lot easier (and more effective, I imagine) than the old one.

Hey Richard, I was in the middle of learning javascript from your old post reading Nicholas Zakas Professional Javasscript etc… I think it has tremendously helped me… Now should I keep reading that and still go along with this new revise post… ????? thanks

Quick Update – Even tho Nicholas Zackas is a bit confusing at times, he does break down each concept that i do understand… I actually purchased the book, so re reading this post assumes I will have to buy The Defenitive Guide Book and start from scratch????? thanks

The last year I restart to learn JavaScript and I found Object-Oriented JavaScript very useful. For me, it’s more easy to understand some concepts like variables scope with that book that with “JavaScript: The Definitive Guide”.

Hi Jesus,
I promptly added back the Professional JS for Web Developers book yesterday, after many readers requested it. So you can use **either** book now. Ever time I referenced one of the books I referenced the other.

@Ben S, @Sean, @jesus miguel, @Anthony, and others who have purchased the “Professional JavaScript for Web Developers” book or otherwise stared the old track, I just updated the post with complete coverage for the Professional JavaScript book. This updated roadmap is more streamlined and better than the old one.

I noted which chapters of this book you should read in each section. Now you can follow the entire course with either book.

“Professional JavaScript” is still my preference, but it is best read if you have at least a bit of web dev experience, while the other book is better for first-time programmers.

Nice to you to update the roadmap with “Professional JavaScript for Web Developers” I think that people who started to learn JS some time ago and is now, as me, trying to learn in the proper way could find this very useful.
For these people I think that Object-Oriented JavaScript by Stoyan Stefanov is also a good lecture.

Hello Skyler,
First, I apologize for the change that was indeed disruptive for some readers, for a day. But I promptly added back the Professional JS for Web Developers book yesterday, after many readers requested it. So you can use either book now. Ever time I referenced one of the books I reference the other.

In addition, you can follow this new roadmap with a seamless transition from the old one (no disruption). The new roadmap is much better than the previous one, because the previous one had too much unnecessary technical reading and a few other shortcomings, which I fixed and improved in this new track.

Thanks for the quick reply. I appreciate the effort in bringing back the Professional JS for Web Developers book.

After I first saw the update, some of the steps that I had already been working on got removed and I was a little confused as to whether I should continue on with the old course or transition to the new course.

I guess it was just a bit of a shock : ]. I’ve taken the time to re-examine the new course and I’ve figured out how I can transition from the old to the new.

The new refined course actually does look a lot better, and more strait-forward. Thanks for keeping this up to date, and thanks for this great course!

Amaury,
I answered this question on the Backbone.js post. here is my response:

First, if you follow the Learn JS Properly course, you will see that you will learn jQuery at the same time as you are learning JS.

1. I recommend you learn JS properly (it includes jQuery), then read the “Effective JavaScript” book (it is one of the books I recommend in the Advanced JS roadmap). And it is easy to read: it is comprised of 68 excellent JS tips.

2. Then learn Twitter Bootstrap.

3. Now, it is very tricky to recommend a JS framework, because there are so many good ones to choose from and they are as similar as they are different. For now, I would say learn Backbone.js, because it is relatively easy to use, it is lightweight (not a big behemoth), there are many Backbone.js resources, and it is the most popular. No need to learn knockout.js plus backbone.js.

4. Then learn Node.js, and you are good to go. You can skip the rest, they are not necessary; most are alternatives to what you would have learned already.

Hey Richard, I have trouble learning client side javascript. There are so many things you need to memorize and its really difficult to do so. Do you have any tips that can help me enhance my knowledge on this specific topic. Thanks

Aarsh, you don’t have to memorize all the technical stuff. As long as you know how to use the concepts and you can program, you can Google or keep a JS book next to your computer. The best programmers don’t waste time memorizing the endless stream of technical details.

Learn JS properly, then learn Backbone.js, then you are good to go. Give yourself 6 – 8 weeks, and stick to it. Don’t quit.

First, my thanks for this guide to thorough learning of Javascript. It looks very well thought out, and the fact that you’re revising and improving it as the materials you refer to change and users give their comments means it will be valuable to many people for a long time to come.

My knowledge of Javascript and other web languages is very limited (at present), so I have one question: If I want to get content from a server-side MySQL database, then it seems to me that I can’t use client-side Javascript. Is that correct? and if so, is there a way round this, or do I have to use something like PHP for the parts of a web page that depend on database access?

@Vic, JavaScript is used to talk to MySQL databases, the technique is called AJAX and is standard practice now a days.
There are many ways to do this, you can do it all in PHP or you can do it with JavaScript ( writing to the page )

Hello,
I am excited about just starting out on this course track, though I have yet to purchase the books. I however have had a chance to peruse the opening chapters of both of them. Although I do not have a web development background, I must admit I like the presentation and the style of Zakas slightly more than that of the Definitive Guide from what I’ve initially seen. Would the difference between the two have an significant effect later on in if I went with Professional JS despite my background? Many thanks.

Can you tell us more of what WebStorm offers that makes it better that ST2? I have been using the trail but I am not sure what features to look for and there is a slight learning curve, considering I am so used to ST2 and my work flow is so integrated with ST2.

Seth,
I really should write a blog post comparing the two, because this requires a thorough review. Nonetheless, if you are already very comfortable with Sublime Text 2, you should keep using it for now.

Later, when you are ready to develop complex JavaScript web applications, you will have outgrown Sublime Text 2 and that would be a good time to look into WebStorm.

Indeed, there is a moderate learning curve for WebStorm, but it is similar to using Sublime Text 2, except it has many more specific JavaScript features and integration with JavaScript libraries and frameworks, including Node.js, CoffeeScript, jQuery, and a lot more.

It would really help if you made an article about WebStorm. I need someone to tell me about features, so I have a solid reason to pay for it. Maybe include in article some extra links about using the program.

Richard,
Thank you so much for this tutorial on learning JS. As a designer, I found myself using jQuery widgets a lot on webpages, but I always wanted to learn JS properly.

Now I am on week 3-4 and starting to grasp Objects, but I have run into a problem regarding the ‘hacking’ away part of the lesson: Most everything that I think of doing to practice with JS has already been solved by either jQuery UI or CSS3, and I can’t really think of any good exercises that I could experiment with to further develop my skills. Do you have a resource that could give me some practical problems so that I can practice solving them? I’m not looking for a Codeacademy-type hand holding, but left to my own devices, I can’t think of any good problems that I can solve at this level of skill.

I think you should build the quiz application I noted in the post above. It will help you develop a complete JavaScript web application that starts off simple and gets increasingly more advanced. See the details in the post above.

BTW, I am sorry about the late reply to your post. I don’t know how I missed your comment. I have only now stumbled upon it.

I am working through this track slowly but surely. Things are starting to fall into place. I am also building my first web app with Meteor as I go (I need to apply while I learn, if I just read, I will not grasp anything and will probably fall asleep). So I am learning JS, JS programming and the Meteor framework at the same time. I will get there, I will get there, I will get there.

i just wanted to say thank you, before reading your blog post i didnt have a road map to follow in order to learn javascript, i also got stuckevery time on codeacademy javascript challenges, by now its been almost a month since i started reading the books and following the roadmap…..im so exited because today with the knowladge in javascript and using jquery i made the challenge of make my own dynamic quiz application and it feels so good to know im improving!!!!!!…im so looking forward to keep improving and improve the quiz as it follows!!!!!

Thanks for the brilliant post. I’d just like to ask you one thing before I dive headfirst into this. Could you consider another link than Amazon? O’Reilly might be a good alternative or at least an option. They’re a very progressive publisher leading a lot of modern trends. Plus they’re in support of a more open web not limiting their eBook downloads to a proprietary format. Of course if you’re going to do all the work to write this I wouldn’t mind supporting you.

Richard, I’m using the Professional JavaScript for Web Developers guide. In week 4, you ask us to read chapter 19 of JavaScript: The Definitive Guide for the JQuery chapter. Is there another resource that covers this or do we need to purchase a second book?

Very food question, Linda. I just updated the roadmap. Instead of learning jQuery on Codecademy or in the JS the Definitive Guide book (as I had originally recommended), I now recommend this link:http://try.jquery.com/

Hi Richard, congrats for your excellent work. I am currently on week 4 and I am a little confused about the “Javascript or jQuery” subject and can’t figure out the right answer.

Should someone has a very solid understanding of JS and only then move to jQuery, or he has to learn both parallel?

As far as the quiz is concerned, should I write it in pure JS or jQuery?

I really want to hear your opinion because you have real experience. My aim isn’t just to start coding and see quick results. I ‘d like to be able to use HTML/CSS/JS for a lot of uses, even for mobile apps for example. Not just some webpage effects etc…

@Antonis
In hindsight, I think I should recommend jQuery (for DOM manipulation) for the first go at the quiz (and not pure JS), because everyone will be using jQuery afterwards anyway.

So, no need to use pure JS for DOM manipulation in the first iteration of the quiz.

However, if anyone wants to use pure JS, go for it; you will learn how to manipulate the DOM with JS, which is important to know as a JS developer, in case you ever have to do it without jQuery. And you will also understand how jQuery actually works. But it is not necessary to use pure JS for the DOM manipulation, if you can do it much easier and quicker with jQuery.

Hello, I am beginner, I am learning with “Professional Javascript for Web Developers” book but I was wondering if real life developers(front-end) use everything covered in the steps often or necessary to know them? or some topics are rarely used?

No. No one uses everything from a programming book in real life, just like no one uses most of what he learns in school in real life. In the roadmap above, I recommended you skip many parts of the book. See the roadmap for more.

As I wrote to Sean below:
Derek Sivers is the first to complete the quiz and post his code, you can checkout his code and learn from his efforts. Here is his code in pure JS:https://github.com/sivers/jsisquiz

Hey Richard, im a bit confused about the Quiz.. Im wondering how will i access the object in the array.. Im trying to access the array/object such as..
allQuestions[0] or making acessing the property of that object/array such as allQuestions.question..

Im guessin it would be a bit easier if i created three seperated objects or arrays such as below.. thanxx
var allQuestions = {};
var allAnswers ={};
var Choices = {};

Never mind I figured it out :), to access a object inside an array as the Quiz stated, one would need to do the following:
allQuestions[0].question; etc..

what was confusing me , as well as getting errors, was the second choice array inside of this array.. i just took that second array out (choices) and i figured it out.. Richard was that a good idea to take that second array out?? thanks

I love the link to Derek Sivers quiz code. I just pushed another revision to my own quiz app so I am at a point where I am looking forward to sitting down and looking over his code to see how someone else approached the application.

I just finished the 1st version of my quiz in pure JS and wanna share with you guys! Here it is: http://jsfiddle.net/zryHu/ . I think that I have written some parts not with the best way, but the main purpose was to get it work!
My code is heavily commented so maybe someone finds the help he/she needs!

I have to say that I am -incredibly- grateful for this post. I started a few weeks ago and I’m already feeling great after completing the first iteration of the quiz project, and I’m continually motivated to learn more and learn about JavaScript every single day. In just the last few weeks, I went from knowing next to nothing to actually building things and even learning CoffeeScript in the process. Thank you for the great post and helpful information!

Hey whats up Richard, I finished my Justin Timberlake Quiz. Its Pure JS, it still needs some work, hopefully you’ll check it out.. http://seanshoats.com/jtquiz.html
Im loving javascript.. my main goal is to build modern mobile apps & web apps using javascript and node.js etc….
Hopefully my quiz can be some help to some guys who are stuck like I was lol….. thanks so much for this blog!!! Richard You Rock!!

Thank you taking the time to provide guidance and clear direction. I have tried many times to become proficient in javascript. I am fortunate to now have a mentor. I stumbled upon your site looking for information on backbone.js
In my area NYC surrounding the income compensation is worth the effort. Thank you for providing a clear path to achievement

I know this might be outside the focus of this website, but since it still is related to web development I would appreciate an article about “how to learn php properly”, especially since a lot of programmers learn it the wrong way.

The ‘bug’ is actually my fault, not R. Bovell. When R. Bovell first wrote about my 2oahu.com blog, I was using WordPress and I kept everything under blog/. However I recently decided to ditch WordPress and went for Pelican and in the process switched around the urls. I did include html forwards in the new site for more popular pages but my deployment script for deploying the html files didn’t know about the html forwards.

I’ve updated my deployment script to make sure the html forwarders are included.

Hi Richard,
I’m trying to work through the tutorial and made it already to week 5-6. But I’m having a bit problems implementing the changes.
Questions: Is there any possibility for code review? e.g. somebody looking through the code and suggesting how to do things “better”. Also, do you have any suggestions for keeping a better structure? I’m trying to stuff things into functions to keep somewhat the different effects seperated, but is there any recommended way of doing this?
Thanks so much for this great roadmap!

Thanks for your questions, Peter, and sorry about the late reply. There is a study group on Twitter that would be very happy to help you out with the code by reviewing your code and answering all of your questions.

Its such as you read my mind! You appear to grasp so much about this, like you wrote the guide in it or something.
I feel that you just can do with a few % to force the message home a bit, but other than that, this is excellent blog.
A great read. I’ll certainly be back.

Hey Richard, I was wondering on my journey to learning javascript, should I also learn php/msql to create data driven as well as CMS web apps? Where a user has complete control in the backend (admin settings etc)…Or Should I learn node.js for this, I thought node.js is mainly for server side driven apps
( chat apps etc.) Thanks!

This is an interesting question, Sean. If you want to know (and you should) how to develop general websites, customize CMS and blogs, and the like, it makes sense to learn PHP/MySQL. Many huge web apps are built with PHP, so it is worth knowing. But you should still Node.js or at least Meteor.js.

Hey richard.
First i want to thank you it is a great guide for learning JS.
Now lets get to my problem
Im trying to build the first edition of the quz and im stuck for a long time.
Basically i have done an object that looks like your array example.
And i made an html basic file with h1 as a title qusetion
A 4 li with radio buttons.
And a next buttons.
Just to note i all of rhe html tags are empty the only one who as value and attributes is the next button.
And my simple thinking was for every qistion in allqustion object.is to show the first qusetion (position 0) and append it to h1 using jQuery.
Next for every choice append chicice ( start with position 0) to li num1 after that go to the next li abd append the next choice. Untilthere are no li tags to fill.
Now when the client click next i check the value of the radio if its not undfinded meaning it is not empty procced to next qustion by earsing the current h1 value and doing the same as i explained above for qusetion position 1.
If the value of the choosen radio button is equals to the qusetion answer. Then correcAnswer get +1 to it.

I think that the way i think of how to build this app is fine.
I just cant seem to “translate” it to javascript code.
I have read all the chapters agian from the js book and still im stuck.
Is there any hope for me to learn JS?
im really intresting in learning js/meteoe/node.js/backbone.js

Hi Brian,
Thanks for your comment and for posting your code. I am sure both will help other JS developers who are also learning JS.

I took a cursory look at your code and it looks good. As you look at others code later on in your dev career, you will learn a lot about how adv. developers code, but for now, keep learning and coding. As long as your projects are working as expected, you are doing fine.

When you learn JS frameworks like Backbone.js, you will see how they better organized your code and make your entire code look very professional

After completing the Javascript track at Codeacademy and realizing that, while I learned quite a bit, I still have no idea how to implement JS, I found your course, “How to Learn JavaScript Properly” using Javascript: The Definitive Guide (I have the other recommended book as well, but I figured I’d work through once with the beginner book and once with the more advanced). I am having some difficulty in determining how to enter the code and try it out using Firebug. Nothing that I can find seems to allow me to enter the code form the book, run it, and see how it works. I have tried looking up tutorials for firebug, but to no avail. Can you explain how to go about entering the code and testing it? Also, is it necessary to enter everything, beginning with chapter 1.1 core JavaScript?

You have a few options for entering the code and running i:
1. On Chrome. ,Safari, or Firefox, open the console.
— On Chrome, at the very top of the window on your monitor: Select View > Developer > JavaScript Console.

— On Firefox, at the very top of the window on your monitor: Select Tools > Web Developer > Web Console.

— On Safari, at the very top of the window on your monitor: Select Develop > Show Error Console.

When the console opens, you can type any JavaScript and click run or just press the enter key.
If you want to type a line of code and add more code below that line, do Ctrl and Enter.

Try it out, type:
console.log (“Testing”);
And press enter, you should see the word “Testing” shown right there in the console.

2. You can use an online tool like JSFiddle or JsBin.
— On http://jsfiddle.net/ simply type any JavaScript code in the box labeled “javaScript” and then press the Run button at t

You don’t really need Firebug at all. Firebug allows you to view the HTML elements (the DOM) on the page and use the console for JavaScript and such, but Firefox has added all this functionality within the browser itself without the need to install Firebug plugin, so you don’t need Firebug anymore like you did a few years ago.

I actually recommend you use Chrome, which does as much as Firebug did and a lot more.

My quiz is in an object variable creatively named ‘quiz’ and this is the method for loading the questions, when its done it assings retrieved data to the allQuestions property of the quiz object and calls setPlayerName() method that prompts user for a name and starts the quiz.
Here is the quiz app, in its current state, questions are really just fooling around, I was more concerned about functionality so far.

Hi Richard,
right now im trying to get my quiz app improved,
and has you wrote we need to read chapters:
Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.
Or read chapters 13, 20, and 23 of Professional JavaScript for Web Developers.

and then to make an external JSON file for out questions.
well those two books lack explanation on JSON, i didnt saw any reminder for the getJSON at those two books,
so my question is do you have any other good source, that really take it deep with JSON?

another question is:
if we learn JSON, dont we need AJAX too?
i mean those two are really going hand in hand..

so my question is do you have any other good source, that really take it deep with JSON?

In the “Professional JavaScript for Web Developers” book, chapter 20 (JSON) is a very short chapter and it covers EVERYTHING you need to know about JSON to develop JavaScript web applications.

if we learn JSON, dont we need AJAX too?
i mean those two are really going hand in hand..

JSON is a data structure that is used to transfer data to and from the server and to save data in an external source, such as a file or in localStorage in the browser. On the other hand, AJAX is a method for communicating with the server asynchronously.

You can use JSON as the data format to transfer data while communicating with the server via an AJAX call. So you are correct that JSON and AJAX do go “hand in hand.” But you don’t have to know AJAX to use JSON, although you will eventually have to know both technologies to develop production-ready JavaScript web apps.

and now iv just finsihed reading your post on the final part of your post: OOP In JavaScript: What You NEED to Know.

and i think i got it…the only thing i didnt understood is, why creating objects (from constructor function), and creating a child objects…
beacuse i thought we need to save our questions in an external JSON file, and of course we cant make functions and so on in JSON.
so do you wnat us to use OOP on our quiz JS file make it toJSON() or JSON.stringfy send it to the server and then retrive it??? isnt it an unnessecry duplication?
im abit confuse and lost

Also, if you are open to feedback, I think it would really help people to do the free Chrome DevTools course before starting. As a newbie, I didn’t understand your many references to the console and to writing code in the browser until I did that tutorial.

Lastly, I think people should do the jQuery course before trying to finish the basic project (at least one required jQuery and I couldn’t do it). Perhaps the jQuery course should also come before reading about the DOM in the JS for Professionals book because I found the book to abstract until I had a visual of what the DOM was and how it could be manipulated.

I agree with you about learning Dev Tools first, and I will add that bit to the post. Thanks.

I also know that learning jQuery before building the quiz makes it much easier to develop the quiz, but the goal is to know pure JavaScript enough that you can use it to build a an app like the quiz. It is not essential or important that one use only JS, especially since most developers will use jQuery in their careers anyway. But the challenge of using JS will force you to learn JS well. And by the time you get to jQuery, jQuery will be a walk in the park.

Much success to you in your dev career and thanks for the tips. Keep coding.

I have heard good things about PhoneGap, but I haven’t used it. It is indeed one of the best bet for mobile JS web apps, based on what I have read.

Besides PhoneGap, other technologies such as jQuery Mobile and even frameworks like Backbone.js (used along with responsive HTML/CSS frameworks like Bootstrap 3) are worthwhile technologies for mobile JS development.

The only tough part is persisting the data (users who take the quiz along with their scores). The best way to do this is to use a database, in which case you will need to use MySQL or a NoSQL database like MongoDB (I recommend MongoDB).

Steps:
1. Before a user takes the quiz, present the user with a simple text field asking for his name or email. Then when the user completes the quiz, save his name/email along with his score to the database.

2. And when you show the user his score, upon completion of the quiz, also show him the average score of other users—you can get this by fetching all the scores from the database and calculating the average. You can also show the highest and the lowest scores, so the user has an idea how his score compares with the best and worst scores. Again, you can get this data from the database.

I will put together a MongoDB tutorial, but I don’t think I will complete it soon. I will likely add it to the book I am writing. But you can find some good MongoDB tutorials online, although I haven’t find any that was thorough enough. They were good enough to get started though.

I am sure there are some excellent CSS-only books out there, but I would recommend the following book because you will learn CSS3, HTML5, and Responsive Design in one go (You have to learn all 3 eventually, so you might as well do them together):Responsive Web Design with HTML5 and CSS3

Hi! Wow! This looks like a fantastic resource, thanks for posting!
I’m just not entirely sure which book I should get. When you say “at least a bit of programming or web development experience,” well I’ve taken and passed a couple of intro to programming classes on plain old Java and Pascal before that, and I can make a very basic web-page in HTML and alter CSS (though I’ve never written it myself). Does that qualify as at least a bit? I’m just not sure if that’s enough that I should get the not-a-complete-beginner book.

You are definitely qualify as having some web dev experience, so get the Professional JS book. You will be fine because I actually explain nearly ALL the important JavaScript concepts on my blog, so you can always just read some of the blog posts, if there are some concepts that you don’t follow in the book.

Really a wonderful post.. Though I am a web developer and using javascript in my projects, I haven’t learnt javascript using any books. After reading your blog I think it’s time to get a book and learn javascript progressively and completely. I’m going to start suggested learning plan.. thanks a lot:)
Subbu

Hey Grzegorz!….. if you are looking for a succes story i can tell you that i was in my way to learn javascript to be a Front End Devoloper. 9 months ago I finished my studies as an artist in the university and i decided to start programming because i love the web, i took the roadmap in this Blog and almost 5 months ago i found job as frond en developer in this digital agency http://www.enigmind.com . I didnt sent and and email to Richard but a post a comment beeing so greertfully because of this great path to learn Javascript. Right now im not the greatets Front End developer, i still have too much to learn but if it wasnt for this path i will be probbably still looking for a job. Sorry for my bad english but this is not my main lenguage. Cheers.

If you read many of the comments above, you will see that many readers have been learning JS and developing the quiz application and improving their web-dev skills along the way. And I imagine they will eventually be world-class JS developers

FWIW – I type out everything and I’ve learned what I need to be careful of when typing – what I’m likely to make a typo with. I think typing it all out, while tiresome, will help it stick in your brain. At least, that’s what I hope will happen.

Thanks so much for this! What a great resource! I was struggling figuring out how to teach myself so having something to follow makes it much easier.

In addition to CodeCademy, I am using Code Avengers. I think it’s a better resource with CodeCademy in that a) it makes you do more of the work and b) it has better help resources if you get stuck.

I am also using JSBin to test my code because I like that you can turn off the sections you don’t need at the moment which gives more space to see your code on a smaller screen. It also gives you tips if there is something wrong with your code.

I’ve been working my way through this although a little bit more slowly than recommended. However when I started chapter 14 of Professional Javascript for Web Developers I found the code not working and it felt like I was missing something vital.

After skimming the two skipped chapters I found that Chapter 13 has you create an object called EventUtil that’s used pretty heavily in chapter 14. Might be beneficial to have people read the beginning bit of 13 before moving to 14

I ended up going through 12 and 13 and not skipping either of them to get back on track. I think you could probably get away with skipping 12 though as the two extra chapters add quite a lot of time(I think there were over 100 pages or so between them.)

Feel free to reach out to me on skype or twitter(brett_warner on both) if you need a study partner to bounce ideas off of. My pace is slightly slower that ideal though on this course.

Been looking for a proper guideline like these among the sea of resources about javascript for some time…thank you a lot Richard for all your efforts.. I promise to be a top class javascript developer one day, thanks again Sir..

– Add a “Back” button
– Shows history of answers to questions
— Use jQuery to add fade animation animation (fade out the current question and fade in the next question).
— Store the quiz questions in an external JSON file.
— Add user authentication: allow users log in, and save their login credentials to local storage (HTML5 browser storage).
— Use cookies to remember the user, and show a “Welcome, First Name” message when the user returns to the quiz.

Hi Richard, i’m on the course, and I learned to “like” the Flanagan book which I first found totally unsuitable to learning because of being quite complicated. Fact is, this book is thorough and can’t see how to master the language without this book. Examples are often unnecessarily inexpressive and complicated though.

Anyway there is a LOT to learn: ECMAscript, client side DOM and BOM, Nodejs, framework, templating, testing… What confuses me is what should I do for DOM manipulation.
IF I learn jquery, is it necessary to go trough the dom-bom manipulation chapters of the Flanagan book about standard JS manipulations ?
And is it viable to not learn jquery at all if one uses a framework like AngularJS ?
I would appreciate a bit more of guidance about the DOM/BOM/JQUERY/Framework antagonisms.

… Some more from my probably too long question/comment! [ I guess that’s why I can’t get it to post ]:

– I’ve read that for cross-browser compatibility, and simplicity, the jQuery DOM API makes a lot of sense over vanilla Javascript unless you are a highly proficent in Javascript.
– I realise that there is a performance hit – download times as well as memory usage and performance for using any library, including jQuery
– Still, I don’t think my vanilla Javscript skills would be able to compete with jQuery at this time!
– Would it be sensible to at this point use jQuery for DOM manipulation and events?
– Any thing else you would suggest I defer to libraries at this point?
– How about backbone, angular and node.js – given I want to gain these skills would I really struggle if I didn’t go into the advanced Javascript stuff?

Indeed, jQuery makes it easy for the front-end developer to traverse the DOM and develop sites that are compatible with all browsers. You are correct, so using jQuery is recommended for production applications.

Note that jQuery is actually built with Vanilla JavaScript, so everything that you can do with jQuery, you can do with Vanilla JavaScript, but it is just a lot more work.

There is no antagonism for any of the frameworks and DOM and BOM, though.

As a front-end developer, you will likely use a ton of jQuery in your career, so it makes sense to definitely learn jQuery thoroughly. Whichever source you find to be the best for learning jQuery, use that.

Now, even though you may know jQuery very well, it will still be useful (though not necessary) for you to read the DOM and BOM chapters. So, read the DOM and BOM chapters, if you can, to get a fundamental understanding of the stuff works and then learn jQuery.

As for Angular.js, I will be writing about this and all the other JS frameworks on moderndevelopertoolkit.com. For now, you still want to know jQuery, which is probably the easiest thing to learn with the most utility in all of web development.

Hello, first of all I am so glad I stumbled upon this outline. Very helpful because most of the time I felt lost trying to learn javascript before. So now I have a question for you. I am trying to get a internship as a Front-end Developer and was curious to how you measure completion of this course with being qualified skill wise for an internship? I already know HTML5 and CSS3 fairly well and I am currently half way done with this course and I must say I am feeling already more confident in my javascript knowledge. But I was curious to what your insight was? Btw, thanks for this outline.

1. First, I don’t think you need to complete this entire course to get an internship. With an adequate enough of familiarity of HTML5 and CSS3, you should be fine.

2. I think if you complete this course and you practice afterwards by building a few applications, you will improve you readiness for a front-end job markedly. You should learn jQuery completely and, if you have sufficient time, learn Backbone.js, too.

So you should complete this course whether you get the internship position or not, and start building some small applications afterwards. This alone will allow you to learn an essential skill and make you marketable as a JS developer.

well, i want to learn javascript. want to learn the programming. but, what software? i mean, i can copy the code yes , but to where? and how do i know it is correct?
i am mac user… and now i want free software as i just want to try and learn, nothing about profession yet. any suggestion? i am kinda lost in the java world ….

2. To create your code and save them, you can use any editor like Sublime Text (which is great, and you can get it free) or Smultron (which is also free). And then you can open the .js (to HTML with embedded JavaScript) )file in the browser to test the code.

3. You can also test the code right in the browser’s console. You can Google for screenshots on how to do this.

hi Richard,am Stanley and am 18 years.i just want to say thank you very much for this course,its is really helping me.but i have a couple of questions which are troubling me very much and they are disrupting my progress.
(1)am just finishing chapter 9(professional javascript book) but i have trouble understanding regular expressions used in this chapter,honestly speaking the book didn’t cover much about regex.So,should i worry about them?(because i have a regular expressions cookbook but it has too many pages and i feel like it will slow me down on your course).

(2)do i need to understand and remember everything inorder to move forward?i mean things like navigator/location/math properties or function module or prototype patterns.

(3)do i need to memorise all the code.like memorizing the
useragent detection script or all the code i have encountered in the book.this is has been my biggest problem,thats ‘why i didnt include it on number.most people dont answer me clearly.

(4)is it normal for me to just read code but fail to write.because right now i just cant write any real program like sliding images or making a date.(if its normal ,then after reading which chapter should i attempt this to do this things(mind you,am on chapter 9[zachas book]).

(5)when do you know you fluent in javascript and ready to move on to a server sided language(i know about node,js but i have always wanted to learn php or ruby)?

(6) someone asked how many hours you had in mind for this course and you said 2 hours but the thing is i stay home all day.so the question is,should i stick to 2 hours? and if not,how long should i take to finish this?i fail to give myself a deadline.can you give me one since i stay all day.i learn better with deadline and am a recovering procrastinator.so i need to fix my productivity.

(7)lastly,how long has your website been around.i cant help but notice how its ranking well on google.if its knew,did do you do a lot of seo or it just went on top.am asking this because when i finally learn this,i want to enter a tutorial and a learning web design niche .is it possible to make it top ten?

am so sorry for all this question,i just have never had satisfactory answers.please try to answer and i know your busy.thanks again for this sexy post and am telling you posts are always sexy.you are heaven sent for javascript learners.

Hi there! Thanks for posting this awesome guideline. I’ve been following it for a few weeks and I thought i’ll recommend a wonderful resource to practice programming in JavaScript.
codewars.com gives you step by step community build challenges to hone you JavaScript skills in particular areas, be it Algorithm design or basic fundamentals.

Actually you have to fix the code to make it work (like adding the semicolon) In the first example (most are randomly generated) you have to use the this keyword to reference the name variable in the parent function.

Hi Richard ! Thank you so much man , I really appreciate what are you doing for us , you’re really helpful , I was obsessed in learning Javascript 😀 😀 , I started learning it 2 times ago ! and I stumbled in both of them . And now I’m good with your Roadmap ! It’s awesome 😉 I have just completed the chapter 2 !

But I have a question (I don’t if you will reply it soon, but ..) about Codeacademy I think the track is changed !
Because you said in (week 4) : “Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).”
but when you look at the track you will find ” sections 6, 7, and 8 are about the loops o.O ” ?

That was my question, and I will thank you twice 😀 Wishing all the best for you ! Bye .

I have to spend some time updating some of the blog posts, especially this “How to Learn JS” one. I will try to do that in late December when I have a bit more time. I am too inundated to get to it sooner.

Thanks also for the compliment. I am glad to hear the website is helpful.

Hello,
Here is “not a dumb question” number one:
So I am going through this course of learning and, in accordance with your advice, I am writing out the code that I am coming across (in the Definitive Guide) into JSFiddle and … NOTHING ever happens ??? No results. Nada.

I have just finished chapter 3. And still … nothing. Am I to assume that this is normal? -Or am I totally missing the boat here? This is making my comprehension level drop significantly it seems since everything I’ve read is all just hypothetical stuff.

its normal Rookie.it happens to me each and every day.it has has to be a mistake in your code,maybe you forget to call the functions or you made some typos.simple things can break you code,yesterday when i was trying to make a javascript date,just one simple typo made it fail.just look clearly.Am pretty sure Richard has good solution..

Hi Dylan,
No, I have not. I do have the Firebug thing set up on my Firefox … but I really don’t know how to use it. I tend to get caught up in the minutiae (do I need to have an HTML file set up? -should I have an external JS? -or embed it in the HTML? etc. etc. etc.). Perhaps there is a simple “how to” type of tutorial out there about Firebug (?).
Most of my time so far has been going through the very beginnings of the codecedemy stuff and reading from both books.
I guess I will monkey with Firebug console thing to see if I can make sense of it.
Thank you for your response.

Well,if thats the case,then try to download notepad++(the best free editor) and then make an html and js file and the link them.to create an html/js file,open new file and then then select language(its on the toolbar) and the in the js file,paste the following code:
var scope = “global”;
function f() {
alert(scope);
var scope = “local”;
alert(scope);
};

f();

i substituted console.log with alert.and always do when using a text editor because when you write console.log,the change occurs only in the console.

if this doesnt work,go to chrome/firefox developers tool and then check the error and the line where the error occured.this should help find errors quickly.

Stanley -I am assuming that you are responding to me (?).
If so, I don’t think that your advice would work for me as I am on a Mac and (I was under the impression) that notepad++ was for pc computers, etc.

Maybe I could pull that kind of a move in TextWrangler or Dreamweaver or something?

This stuff is difficult enough as it is without trying to jump through all of these other hoops with outdated tools, etc. -Frustrating.

am sorry for my silly questions.recently i have just understood that the only way to learn programming is practice,practice,practice.i used to think that i had to memorize and know each and everything before i could start practice programming.i think it was because i was afraid i might fail.now i have learnt to face my fears because doing them makes a difference.That being said, i have started breaking and reversing other peoples code and seeing what works and doesnt,its cool to see how mistakes build you up.Currently,am now grasping the DOM,i hope in the few weeks i ,might be able to program some real cool applications from my brain and i cant wait to start the quiz project and practice * 1000.and i just found some interesting quotes,maybe it might motivate others who were/are in the same boat:
“Experience teaches slowly, and at the cost of mistakes.”
James A. Froude
“Inaction breeds doubt and fear. Action breeds confidence and courage. If you want to conquer fear, do not sit home and think about it. Go out and get busy.”
Dale Carnegie

Hi, i don’t know what to say but i have a long story with this blog and especially with this post I’ve read this post 6 months ago and i love it so much but i did’t bookmark it and it’s been a 3 week that i’am looking for this post and I’ve finally found it and this’s really one of the best and complete posts about Javascript thank you

Hi Richard , I have a little problem in understanding “Accessor Properties” ! the problem is : why I use underscore as a prefix of a variable ? !
I read this
” The underscore on _year is a common notation to indicate that a property is not intended to be accessed
from outside of the object’s methods. ” p 177.
But I didn’t get it :/
Thanks ..

Hey like the tut and trying to follow it but can’t say i am big fan of Professional JavaScript for Web Developers, it’s very dry and eager to give you a history lesson along and meaningless info at the time with unnecessary long way to explain something, sometimes ending up missing the point.

Atlas, I understand what you mean: Some people don’t like to study from books like Professional JS for Web Developers, for the reasons you have mentioned.

I have written articles on some of the core topics covered in the book, so you can use those articles, if necessary. But since you have found a way to learn the language that works for you, stick with it.

Hi Richard , I’m reading the chapter 7 of JAVASCRIPT® FOR WEB DEVELOPERS !
But I’m confused (Scopes, Private values, private functions, function expressions, the function type ..) ! I found it more than a time WHY? !!! I just want to get it simply , resuming all what I need about that . I wish you understand my question, because I really need help
Thanks so much .

You can skip Chapter 7, if you are having trouble understanding it. The only lesson from Chapter 7 that is essential is the one on “Closures.” But I have written a full article on closures on this blog. So just skip Chapter 7 and read my article.

Richard of Stanley, besides the roadmap here, do you recommend any other resources like learnstreet, etc? What about eloquent javascript? Seems like the most popular choice for beginning javascript students.

Hi. I have a question regarding what book to buy. You stated that anyone with programming experience can get Professional JavaScript for Web Developers, I have programming experience in C/C++ and JAVA but no web development experience.
Do I still get the Professional JavaScript for Web Developers book or the other one?
Thanks

Hi! I just read the first 2 chapters of the Definitive Guide, and although I have some experience with HTML & CSS, even did some JS on Codecademy before I started the book, I DID NOT understand most of what the first chapters were talking about. I thought when it said the book is for people with no prior experience in Programming, that everything would be explained from scratch, but it doesn’t seem so. Should I not worry and try to keep going, or is there a FOUNDATION that I need to make sure I have in order to understand JS’s logic. I wasn’t great in Math, but I do have a BS (not in CS though)… I feel super discouraged, and don’t know what to think. Help..Thank you!

I am coming from a similar position and I would suggest getting Professional Javascript. I have bought both books and even though Zakas covers much more complicated material it is explained as well as it possibly could be.

Some examples are given using complicated mathematical examples but they are actually not as complex as the examples in The Definitive Guide!

Example: Section 6. “Search Text for Your Name” – step 5/7. What the fuck is the point to this exercise? NONE. IT DOESNT EVEN SPELL OUT YOUR NAME (regardless of whether or not all of the characters of your name are in the body text).

Obfuscation != good learning. Retarded examples that are completely pointless, and furthermore don’t make sense != good learning.

Very grateful for this site–there’s a lot of good work here. I’ve tried several sites, and each has taught me something. I like your approach. But:

After faithfully following your “Learn JavaScript Properly” plan, I attempted the “quiz” exercise you described. It was like hitting a brick wall. I’d done every exercise and experimented with code, right up through Try jQuery, and–blam. Just–stymied.

Getting and displaying objects in arrays (quiz items) on a page? Didn’t learn how to do that. Tying Javascript/jQuery and form elements (radio buttons, etc.) together? Nope–didn’t really see that in the book or exercises.

Several other bits, but–am I missing something? The project and the learning just seem so far apart at that point.

I’m worried about the same thing. “Professional Javascript” is a great book (if a bit old at this point), but it’s very abstract. I mean, even when typing out examples and stuff it’s just a bit of a ‘duh’ feeling since of course alert() does exactly what the book just described alert() doing.

I feel weird not doing ANY examples at all until halfway through, and then plowing through a massive example. I’m worried I won’t know where to start (I’m about to complete week 4). Did you do anything to get around this, James?

Hi,
I am new to programming. I went through the tutorial as suggested. I am unable to complete the quiz exercise on my own.
But I can understand the examples done by others and use their code.
What I have done wrong ? or What am I missing? Please help me out.

I just went through Code Academy’s 10 hour JS course and it helped me grasp some concepts I could never truly easily grasp. I would advise anyone to give it a shot. Your advice not to seems poorly-given. This course is step 2 for me.

If I want to learn javascript faster than 4-6 weeks, how many hours do you think I need to put in on a daily basis. I have some background on javascripts but never have written them myself ever, only have read and understood what they r doing. I would appreciate your response. And thank you for putting together this information. It is certainly very helpful.

Hi Richard thanks for the great post. I’m pretty much done with the professional javascript for web developers books, and did the try jquery course already. What would you recommend I learn next? Handlebars js, bootstrap, node js, backbone, or your intermediate/ advanced roadmap? Thanks in advance!

Hi Richard,
I am Nicholas. I congratulate you for your post. It is really great. I assess you to be one of the great programmers. You do take all levels of abilities in to consideration to deliver your subject matter (you are a great teacher). As a .net developer I have read many blogs & articles and few are helpful especially to the new and average developers because they assume readers to know some concepts. as a result you get stuck and confused reading their articles. (Most do not give you guidelines at all and are very inpatient)

But Richard, with your advise, I have followed through to learn javascript properly, now learning backbone and Node.js. I cannot believe my eyes Richard you have made me a better javascript developer. To all reading this, as Richard said, you will be a better programmer if you make the harbit of writing programmes yourself. With the outlines in this blog, you will saved yourself many years of becoming a better developer. Many thanks Sir.

This is a really insightful page that I keep coming back to. However, if I may suggest one improvement, the page seems to be very big while majority of the page is taken up by comments. This can give an impression of a very daunting post, yet most of the pae is filled with comments and not the actual post.
Is there a way that the comments section can be optionally loaded on the initial page load?

First of all: considerable thanks to the author for drawing up this course outline!

Secondly: perhaps silliness on my part, but it took me a while to figure out that the 6-8 weeks schedule refers to a (close to) full time commitment. I started this course alongside a job that eats up about 50 hours of my time per week, and I found that the schedule is too aggressive for me.

Lastly I would like to share my experiences with the two books mentioned by the author. My background: I have studied international management and started working in a support function for a software development company two years ago, in part due to the bad economy in Europe, in part due to an academic background that isn’t exactly high in demand. I have now moved to a new role in product development which requires me to understand JS.

I started with an old copy of The Definitive Guide (1998), then after one chapter got my hands on the most recent print. By chapter 4 I was slightly panicking; I would read a page three times and wouldn’t understand it at all.

I then started over with the Javascript for Professional Webdevelopers book. Although I still encounter difficulties (which is natural), I have found this book to speak my language much better than the Definitive Guide. “My language” meaning that the writing is more attractive to a non-technical reader, examples are clearer.

Just my two cents. If you feel you fall into the same category as I do – coming from a non-technical background – do yourself a favor and compare the two books first, then decide which one you’ll use. I can imagine that JS for Professional Webdevelopers is easier to digest.

I started this last week, and just ordered javascript the Definitive Guide yesterday. I check in today and decide to go to the top of the page only to find that you are changing your track to follow a different book.

Hi Rick, I am changing the book for beginners. I am not changing the regular road map. If you have ever programmed before or if you know just a bit about web development, the book you bought is the best book. But if you have never written code before and you don’t know anything web development, then one of the two new books will be ideal for you.

Thanks for the reply and for the heads up. I decided to make a copy of the lesson plan as it currently is with the reading references to the Definitive Guide. I have some minimal programming experience, but no web-development programming experience. So it is slow. My main interest is to be able to support and modify some .hta apps.

Sorry if I missed it somewhere in the comments, but I started the guide a few weeks ago and noticed it has been recently updated. Do you have a link to the old guide, that way I can keep that as a reference?

Look at the beginning of the actual study guide (not the beginning of the article), you will see two tabs, “Study Guide for Beginners” and “Study Guide for Experience Programmers.” Click on the latter tab. That is the previous study guide. I have not changed it, though I may do so soon. I will add two more Codecademy tracks to it (the “jQuery” track and the “Make an Interactive Website” track). I don’t plan to make significant changes to it.

Just thought you might like to know regarding your Important Update (October 27, 2014):
The Beginning JavaScript book is actually gonna come out with a 5th edition on March 16, 2015…
You may want to update your readers about that.

Thanks for the tip, Kobe. I might have to change the study guide again in a couple of weeks to use the new edition of the book. But not will change anyway, since the 5th edition of the book may be quite similar to the 4th edition.

Have just came across your website today looking for JavaScript learning resources and really like the roadmap you have set out. I have seen that you have mentioned a new update to this post coming in the next few days and you have mentioned two new books. JavaScript and JQuery: Interactive Front-End Web Development and Beginning JavaScript. Will the new update to the road map include both these books or just one? and if so which one.

Just looking to order the book as soon as possible for when the update comes.

So for those of us who want to use the old guide, could you pretty please leave it up? I don’t want to have to get more new books and I think they’re still good (more in depth) compared to the ones you mentioned that are replacing them with.

I’m still in the early steps of your roadmap (which is fantastic by the way) but had a question about your database recommendation. Is there any reason you specifically recommend MongoDB? Are there particular application types that it works best for? Curious to hear your early thoughts on Amazon Aurora, given it’s probably a very attractive pricing model. Thanks!

After reading the 2014 comments I’m a little confused… Is this now up to date? I’m starting fresh and I don’t want to go down the wrong track learning old information and/or using a book that is old or difficult to use. Can you please tell us if the track is completely up to date? Also the books…

Yep, this is the absolute latest study guide. It is indeed up to date and the books are too.

Someone mentioned that the 5th edition of “Beginning javaScript” is coming out in a few months. But that book is many months from being ready, so we can’t wait on it, and there is no reason to wait. We are using the 4th edition, available for sale now.

I just finished the first two lessons of your original plan and now see that you have this new set of courses. Should I continue with the previous plan that I am already doing or just wait for the new course to come out?

Thank you so much for this wealth of information on javascript. I had a quick question. There is a new edition for Beginning Javascript due out in March of 2015. I realize you probably don’t know what is in the new edition of the book, but has javascript changed significantly since the last edition (2009) to warrant waiting for the new edition? I realize it’s only 3 or 4 months away, but if it there is a significant difference is it feasible to get started here without the Beginning Javascript book? Thank you for your time.

Are these upcoming courses something about MEAN (or similar equivalent) JS stack ? As You’ve mentioned self JavaScript is just 35% of what we need to know. The other courses (Meteor, Node, ect) seems to be served in a little bit “messy” order as it’s unclear what (framework?) should be learnt after (or progressively alongside with?) JavaScript.
I’ve started to learn JS totally from scratch (not following this site as I’ve found it just recently) around 2 months ago and I see progress! I want to change my fortunes in job market and I’ve found programming an interesting experience as I feel more and more a valuable person (and proud of myself!). Now I want to keep the momentum (despite many failures and sometimes the feeling I’m just doing myself a fool) and this site seems to be a promise it’s possible to became a web programmer/coder if there’s a dedication to it. Finally there’s a hope and light in the tunnel for people seeking for a change.
Thanks!

First, we will release the course website within three weeks and then the courses will follow soon afterwards. The courses will not be free, but they will be well-worth the cost. Here are just a few of the benefits you will get and why our courses will most beneficial and rewarding to you:

— Clear and Comprehensible Lessons
Our courses are painstakingly written and organized and exhaustively edited to ensure you move through the lessons effortlessly and comprehend the topics with ease. We use new and proven techniques to maximize understanding.

— Build Real World Apps
You will build a usable real-world application throughout each course, and you will also build your own unique app (that we have pre-architected for you) at the end of each course.

— Comprehensiveness, Rigorousness, and Continuity
Every course is comprehensive: it covers all the essential and relevant topics, tools, and technologies. Everything you need to learn. Everything. Every course is rigorous: we focus deeply on the material that matters most. And every course has continuity: each lesson builds on the previous one.

— Final Project Used by Real People to Solve Real Problems
You get to choose your final project from a list (each project unique to each student) of projects that we have pre-architected. When you complete the project successfully, either it will be used as part of a global project to end human suffering (yes, many apps are needed) or it will be used as a standalone app to help solve real problems in your community or somewhere else in the world. Of course you can choose to make your own app and do whatever you want to do with it.

— Answers to All of Your Questions
While we couldn’t possibly answer all questions promptly, we will certainly answer every question.

— A High-Paying Job Awaits You
After you complete your final project (your app) and the final exam, we will both prepare you for job interviews (including behavioral, programming, and technical questions), help you set up your Modern Developer Profile, as well as connect you with agencies and employers to find a job, even remote jobs. We partner with staffing agencies and companies of every size around the world.

— Most Apt Format for Learning to Build Applications
Our format (an online interactive text-based class with schematics, images, and animations) is the most apt format for learning to build web applications. (Video screencast is not the ideal format for learning to build applications; you have to rewind and pause constantly and you never have easy access to crucial course material you will undoubtedly want to refer to time and again. Imagine using a video dictionary or paper book dictionary, as opposed to using a text-based digital dictionary.)

— No Monthly Fee, Access the Course Forever
You have full access to the course material upon completion of each course, and forever afterwards, including future updates. Access the content easily and quickly with instant and accurate search, something you can’t do with video courses.

Again, those are just a few of the benefits. When we launch the website later this month, you will be see all the benefits and get more details on each course.

1. I just want to know if I should stop doing your other plan now and instead wait for the courses because it does take a lot of my time and I want to learn everything in the clearest way possible.

2. Also, I noticed you pushed back the courses start date: first it was going to open in 3 days, then in 2 weeks, now you are saying 3 weeks. I imagine you are just putting the final touches on… May we expect a couplre more weeks on top of that as well?

3. How do you expect this to compare, in hireability with hackreactor.com or other bootcamps out there?

4. any programmer home remedy fixes for carpal tunnel? I noticed my wrists are starting to hurt a little…

I am glad to hear you are interested in our courses. You won’t be disappointed.

1. You don’t have to stop learning, but since you are short on time, you really don’t have to follow the current study guide, since we will cover everything (and a lot more) that is covered in the study guide above.

2. The date I posted was really for the “Modern Developer Technology Guide” and the course website. The actual courses are still a few weeks away. Unlike most online courses that teach you just JavaScript or any single technology, our courses teach everything (all the related and necessary technologies and tools you actually have to learn and use to build modern web apps). On top of that, we will build a real world web app throughout each course and continue improving the app in other advanced courses. And, we have to pre-architect a unique final project (web app) for each student. All the final projects will be used to help human suffering around the world. Seriously. I could go on and on, but you get the point. Our courses are comprehensive and require ample time to prepare. The bottom line is that the first course should be ready in late January and the others soon after.

3. Hireability is much different, since they don’t offer courses like we will. HackReactor is ridiculously expensive. Did you see the cost? It is not much different from attending an expensive University, which is totally unnecessary just to become a modern web developer. Nowadays people are dropping out of college to start startups, so why go in the reverse direction? Our cost will be about 60X less than Hack Reactor’s tuition. And you can follow our courses anytime and at your own pace, from anywhere in the world. You will learn as much and probably more and you will build a real project that you can be proud of, since it will actually solve real human problems around the world or in your community. Bootcamp is similar to HackReactor.

4. Yes, your wrist may hurt in the beginning, especially if you suddenly start typing a lot. I would recommend you check out your doctor (or even Google ), since I am not qualified to give you the best advise on carpal tunnel.

I have 3 more general questions about programming. Anyone with true proven industry experience is welcome to answer.

1. A question about age of programmers. I’m 37 and I would take your courses and would be serious to be a developer. I live in San Francisco and it seems that all the programmer here are young guys. Will a company be less likely to hire me based on age?

2. How easy is it to work anywhere in the world? If I wanted to find a job after a year of experience, is it common to find jobs where one can work remotely? Even say in another country?

3. In 2001 I got “MCSE certified” to work as a microsoft network administrator. I never actually worked as one but I did work in a help desk. I noticed that the technology changed compeletely after I learned what I had learned. Does this happen this quickly in programming as well? If I put hard earned time into learning html/css and javascript and the other things; next year will I then need to learn a whole bunch of other stuff or risk becoming an obsolete programmer?

Thanks again – i’m really looking forward to starting this new journey.

Don’t worry; you will get all the details about the courses soon. The course website will provide you with every detail you need. Be sure to enter your email in the “Receive Updates” form above, so that you will receive updates when the course website and the courses are released.

You should put a disclaimer on your pages letting readers know that you gain a percentage of sales from the amazon purchases. You could put it on your about page, where you imply that the only reason you are putting these pages up is to give back, when in fact you hope to gain some profit. And also, the long blurb about the upcoming course that you will be offering is exceptionally distracting when trying to access some of the pages, and the fact that the comments reload the page and put you back at the top is also annoying. The comment hierarchy is also backward–newest comments are on the bottom. Some of the pages are also exceptionally long but there is no navigation to move about them. As it is now, your site reminds me of those body building pages that offer ways to make quick muscle gains. That’s not sexy.

Hi the learning track is aggressive for someone who works, but I’m working my way through it at my own pace. I think the program is good. When will the other courses mentioned be posted? I’m waiting patently.

First of all, I love this tutorial blog. It’s fantastic and it has really helped me break ground learning javascript. A few notes on some of the subject matter when building the quiz.
1. Chrome won’t let you use cookies when using a file from my computer. Firefox will work fine. StackOverflow link: http://stackoverflow.com/questions/15385641/javascript-code-for-cookie-not-working-in-chrome.
2. Chrome won’t let me use AJAX without a server and was throwing me cross-domain request errors when I was running from a file from my computer.

Are there any ways around these two issues without spinning up my own server?

First of all, I love this tutorial blog. It’s fantastic and it has really helped me break ground learning javascript. A few notes on some of the subject matter when building the quiz.
1. Chrome won’t let you use cookies when using a file from my computer. Firefox will work fine. StackOverflow link: http://stackoverflow.com/questions/15385641/javascript-code-for-cookie-not-working-in-chrome.
2. Chrome won’t let me use AJAX without a server and was throwing me cross-domain request errors when I was running from a file from my computer.

Are there any ways around these two issues without spinning up my own server?

I would like to start to follow this study guide, but for me its hard to get the books. Wold be hard for you to add a alternative study guide using one of the free js books from this site: http://jsbooks.revolunet.com/
Or any other free book.

Some background about me: I’ve entered the software industry 2,5 years ago coming from a completely different, non-technical, academic background with slim job prospects in my field of study. I landed a customer support role at a software company and stepped up to the role of product support engineer after two years. I support two senior developers and a senior manager (former developer also).

My job requires me to at least know JavaScript, but the team develops libraries for mobile applications and web applications of all sorts, so a lot of languages are covered across the team. I will not become a developer but I will be responsible for internal technical support and testing the teams releases. My manager is very cool in that he puts his trust in me and allows me to study on the job.

Having no experience with web development, the css and html parts of the quiz were tricky- and looking back I made it harder on myself by wanting to use neat animations from Animate.css. Next steps are to implement to quiz with our company’s software (not the version on jsfiddle) and to expand it using the ‘improve’ section.

so, i started this path about a year back and honestly dropped it. Didn’t like the book, felt it was dry. However I wanted to start it again but may be better with accountability. Is another group of persons doing this again?

I just spent 10 minutes on codeacademy learning how to type “string”.length, 2+2, and confirm(“foo”). It is the slowest, worst way to learn anything I have ever seen in 15 years of college, possibly except for watching videos. If you can’t learn this stuff in 1/10th the time, you shouldn’t be a coder.

For Beginners, I want to be clear how many of the Code Academy lessons I should do in week 1. I have completed HTML Basics, Build Your Own Webpage, HTML Basics II, Social Networking Profile, HTML Basics III,
and Clickable Photo Page. For week 1, I think I still need to complete CSS An Overview, Design a Button for your Website. Is that correct? And CSS Selectors, Sorting Your Friends Build a Resume, CSS Positioning and Build a Resume. Should I also complete these during my first week? Not clear what is considered part of the four tracts that the outline for the first week mentions when it says, “We will complete 4 Codecademy tracks.”.

Jack, stop complaining, it’s petty and rude. If you are jealous about what this guy is doing then do it yourself. You’ll then realize the huge amount of knowledge, time and effort required to produce a piece of work like this. Software development is a lifetime of learning and hard work. The author has every right to earn a small amount of commission if you buy a book that he recommends. He is also giving his expert advice on which books to buy and so helping you avoid wasting money on others that may be unsuitable. That advice alone more than justifies the commission that Amazon will pay. And remember it doesn’t cost you a penny. Why don’t you show your appreciation, buy a book and read it along with all the other free content on this excellent learning resource. You may as well. You don’t seem to have much else to do!

Thank you SOOO much for this guidelines. I’ve been looking for something like this for a time. I was one of those people who tried to learn javascript from here and there without any structure. I’m so excited for this course!

Hi thank you for the superb tutorial, my question is can I read Head First JavaScript programming instead of Beginning JavaScript book because both of these books are meant for absolute beginners. which one is better??? .

Hello, I was feeling lost trying to learn Javascript on my own and I believe your guide will really help me. Thank you for your efforts and I look forward to working through your well organized program.

I’m not learned yet JavaScript, but I wish I will learn this language. This article motivated me to learn JS as soon as possible. Thanks javascriptissexy.com for this excellent guide for beginner and expert.

Hi, visual learner here. I saw your suggestion for JavaScript and JQuery: Interactive Front-End Web Development to replace Beginning JavaScript, and it looks like that is the book for me. But I was trying to get an idea of which chapters would replace which, because they don’t really line up together, and I was wondering if maybe you could update us with the alternate chapters of the second book, if possible. Just so that I can make sure I am reading the right sections.

Anyway, thank you for this great resource, and if I end up having to just get both books then I will do it, because this has been the best resource so far since I can’t afford to take the courses on your site just yet.

Question- Can I substitute CodeSchool with Codecademy to satisfy the study guide? I just subscribed to CS and would like to use that as it seems to be more challenging than Codecademy. Also, should I just follow the same order of topics in CodeSchool to that of what I should be reading in the book?

Apparently a lot of the “try it out” sections in the 4th edition beginner javascript is outdated and doesn’t really work any more. The 5th edition works just fine though FYI.

Thanks for building this guide. I came to the end of codecademy and got stuck pretty hard building my site and trying to contribute to github. After diving into the reading materials and doing these end of chapter exercises I can see why.

I am a designer and programming is totally new to me. I started with Codcademy’s Javascript track like you said. They started with the very basics of programming which was something that really really help me understand the core concepts of Javascript. The book you referred further helped me clarify the concepts. I can’t find any words to thank you for taking your time to show beginner like me a path to learn javascript programming. Thank you very much Richard.