How to Learn JavaScript Properly

February 24 This Year

Two separate roadmaps to learn JavaScript properly for readers with different programming backgrounds:

Learn JavaScript Properly (For NON-JavaScript Programmers and First-time Programmers)

Duration: 6 to 8 weeks.
Prerequisite: Completed at least middle school (no programming experience necessary).
Continue course below.

Learn Intermediate and Advanced JavaScript
(This links to a separate article)


This course outline gives you a structured and instructive roadmap on how to learn JavaScript properly and thoroughly, from absolute beginner to attainment.

You do want to learn JavaScript; it is why you are here, and you have made a wise decision, for if you want to develop modern websites and web applications (including an internet startup), you need to know JavaScript. And while there are more than enough online resources to teach you JavaScript, finding the most efficient and beneficial method to learn the “language of the web” is not easy and could be frustrating.

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, database-driven web applications, today you can do as much and more with JavaScript alone.

This Entire Course Outline Has Been Revised
This post has gotten much more popular than I could have imagined (more than 110,000 views as of this writing). And after much feedback from readers, I realized the roadmap I originally wrote could be improved.

My biggest surprise from the original roadmap was that many first-time programmers were following the course to learn how to program. This has led me to write two separate roadmaps for users with different programming experience.

In addition, I have rewritten most of the roadmap. Virtually the entire outline is new. This updated roadmap includes much new information:

  • The two biggest changes:
    — First-time programmers use JavaScript: The Definitive Guide, while users with at least a bit web development or programming experience use Professional JavaScript for Web Developers.
    — Focus more on writing your own code in the browser console or on JSFiddle or use WebStorm IDE (see below), instead of relying heavily on Codecademy.
  • New Codecademy track; And how Codecademy gives you a false sense of accomplishment and how to overcome it
  • Use Stack Overflow for questions
  • And more.

Side Note: This post was featured on Hacker News front page and on Reddit.

How NOT To Learn JavaScript

  • 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 you need to
    use that language as a tool—as your tool.
  • In addition, some will recommend you learn JavaScript from “JavaScript: The Good Parts,” by the
    venerable JavaScript godfather Douglas Crockford. While Mr. Crockford, who is immensely knowledgeable in
    JavaScript, is seen as the Einstein of the JavaScript world, his book, The Good Parts, is not a
    good JavaScript book for beginners. It does not explain JavaScript’s core concepts in a thorough, clear,
    easily digestible form. I do recommend you follow Crockford’s advanced videos, however, as part of the Advanced roadmap.
  • And do not try to learn the language by using only Codecademy, because while you will know how to program
    bits of very small JavaScript tasks, you absolutely will not have learned enough to build a
    web applications. I do recommend Codecademy below as a supplemental learning resource, however.

Resources For This Course

UPDATE: A study group was just created (on April 8) for this roadmap on Reddit by Reddit user d0gsbody. He and the members of the group are very helpful and motivated. I recommend you join the group; they will keep you motivated and help you on your way to learning JavaScript. It is difficult to learn JavaScript from scratch on your own. Here is the link to Learning JS Properly – Study Group: Week 1.

We are using either of two JavaScript books, one is ideal for first-time programmers and the other is better if you have at least a bit programming experience.

  • You can use either of the following two books:

    This first book is my personal preference because the author explains the topics very well and it covers up to advanced JavaScript topics. However, it is best used if you have at least some very basic understanding of web development. Therefore, if you have at least a bit of programming or web development experience (it needn’t be in JavaScript), buy this book:
    — The paperback Version: Professional JavaScript for Web Developers
    — The Kindle Version: Professional JavaScript for Web Developers

    Or:
    Buy this book if you have no programming experience:
    — The paperback Version: JavaScript: The Definitive Guide
    — The Kindle Version: JavaScript: The Definitive Guide

  • 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. This is an online platform to learn to program: you write code on their website, right in your browser. (It is also a FREE service).
  • JavaScriptIsSexy Blog Posts on Objects, Closures, Variable Scope and Hoisting, Functions, and more.

The Roadmap 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

  1. If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.
  2. 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.

  3. Very Important: Every example code you encounter in the book, type it out and test it and tweak it (experiment with it) in Firefox’s or Chrome’s browser console. Or use JSFiddle. Don’t use Safari. I recommend Firefox—add the Firebug Add on to firefox and use it for testing and debugging your code. The browser console is an area of the browser where you can write and run JavaScript code.

    And 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).

  4. Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.
  5. 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.

  6. 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.
  7. And work through sections 2 to 5 of the JavaScript Track on Codecademy.

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

  1. Read my post JavaScript Objects in Detail

    Or read chapter 6 of JavaScript: The Definitive Guide.

    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.

  2. Read chapters 7 and 8 of JavaScript: The Definitive Guide

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

  3. 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.

  4. Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).
  5. 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.
  6. Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide.

    Or read chapters 8, 9, 10, 11, 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.

  7. Work through the entire jQuery course at http://try.jquery.com/

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 like 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. 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)

  1. 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.

  2. 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.
  3. 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.
  4. 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)

  1. Read chapters 9, 18, 21, and 22 of JavaScript the Definitive Guide.

    Or read my blog post, OOP In JavaScript: What You NEED to Know.

    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 roadmap. 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.

  2. 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.
  3. 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.
  4. Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind). Use JavaScript the Definitive Guide (or “Professional JavaScript for Web Developers,” if you own it) as a reference when you are stuck. And of course be an active member of Stack Overflow: ask questions and answer other programmers’ questions.

Continue Improving

  1. Learn Backbone.js Completely
  2. Learn Intermediate and Advanced JavaScript
  3. Learn Node.js Completely and With Confidence
  4. Read my forthcoming post on Getting Started with Meteor.js
  5. Read my forthcoming posts on the Three Best Front-end JavaScript Frameworks

Words of Encouragement

All the best with your studies. Never give up! When you are struggling and you are feeling dumb (you may from time to time), always remember that many (probably most) other new and, even experienced, programmers around the world are probably feeling the same way.

It is difficult in the beginning when you are learning to code for the first time, especially if you are pass your teenage years. Teenagers have no fear and nothing to lose, and much time to waste use on whatever they are passionate about. So challenges may appear as only brief roadblocks to them.

But after your teenager years, you want results fast because you don’t have sufficient time to kill on figuring out seemingly trivial matters for many, many hours. But this is where you have to dig in deep and don’t get frustrated; just carry on and stick with the task or finding the bug until you figure it out, for a worthwhile reward is awaiting you when you triumph in the end—programming is fun and lucrative.

The joy and intense pleasure one gets from building an application is an awesome feeling that must be experienced to be understood. Even more satisfying, however, is the empowerment you experience when you realize you have attained the skill and knowledge to build applications from scratch.

There will come the moment when you realize that all the difficulty you endured was well worth it, because you became a programmer and you know your future is very bright as a JavaScript developer. Just like the thousands upon thousands before you: You survived the toughest bugs, you survived giving in and giving up, and you triumphed over finding many excuses to quit.

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

 
Thanks for your time; please come back soon. Email me here: RichardB@window.location.hostname, or use the contact form.

233 Comments

  1. April J
    September 9, 2012 at 1:26 am · Reply

    Excellent! I am just starting to learn javascript and getting a good outline like this is perfect! Thanks!

  2. Eduardo
    September 9, 2012 at 6:52 am · Reply

    I’m also trying to learn Javascript, and I know that sometimes it’s difficult to impose oneself a discipline to learn a new language. Because of this, I appreciate your advices. Thanks!.

  3. Richard Bovell
    September 9, 2012 at 10:41 am · Reply

    You are welcome, April and Eduardo.

    Note that I have just updated the post above with the jQuery course on Code Academy, which I mistakenly forgot to add.

  4. Jatin
    September 10, 2012 at 12:51 pm · Reply

    Angular also!

  5. Jeff
    September 11, 2012 at 10:42 pm · Reply

    This is fantastic!! I started with week 1 just yesterday! I would always get into codeacademy and would either get stuck or stop…this is a great roadmap that is easy to follow.

    Any advice for a server side language, such as PHP?

    • Richard Bovell
      September 12, 2012 at 9:55 pm · Reply

      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.

  6. Jeff
    September 14, 2012 at 8:01 am · Reply

    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.

  7. Andrew
    September 16, 2012 at 4:19 am · Reply

    Hi Richard,

    do you have any suggestions for web application projects we should be attempting in week 4?

    • Richard Bovell
      September 16, 2012 at 9:50 am · Reply

      Andrew,

      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.

  8. Colin Jack
    September 17, 2012 at 10:54 am · Reply

    Be very interested in a post on angular.

  9. Julio
    September 17, 2012 at 2:34 pm · Reply

    Thank you for the post. It would be interesting if you cover ember.js also

  10. Michael
    September 17, 2012 at 2:49 pm · Reply

    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.

    So yeah +1 for angular

    • Richard Bovell
      September 17, 2012 at 7:17 pm · Reply

      Colin and Michael, I will likely add a post on Angular.js in about 3 – 5 weeks, sometime after I add the Node.js and Backbone.js posts, amongst other.

      Julio, I am not sure about ember.js yet, but with enough requests, I will add it down the road.

  11. Ameen
    September 18, 2012 at 6:41 am · Reply

    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 :)

  13. Bassam
    October 12, 2012 at 11:30 am · Reply

    So one has to read the whole book? That’s how one usually does it anyway.

  14. tuan anh
    December 21, 2012 at 9:35 pm · Reply

    that’s great article. I’ve just started Javascript yesterday :D

  15. Vaishali
    December 26, 2012 at 10:49 am · Reply

    Finally, some guidance! I was hopelessly jumping from one book review to another and now I see hope!! :D

  16. RyanF
    December 28, 2012 at 3:45 am · Reply

    Thank You so much!!

  17. Mark
    January 14, 2013 at 12:42 pm · Reply

    Looking forward to working through this and Backbone!

  18. Bwaxxlo
    January 14, 2013 at 3:05 pm · Reply

    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.

  19. Henry
    January 14, 2013 at 3:46 pm · Reply

    Anyone complete this track? How many hours each week did you spend at it?

  20. UserName
    January 20, 2013 at 12:33 pm · Reply

    This website is greatN_X_D_S.

  21. Mark
    January 21, 2013 at 9:48 am · Reply

    Took delivery of the first book today… its massive! Looking forward to getting stuck in. Thanks for your guidance.

  22. Wilson van Heugten
    January 24, 2013 at 12:30 pm · Reply

    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

  23. Waldo Biddick
    January 25, 2013 at 12:42 am · Reply

    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.

  24. Sean
    January 28, 2013 at 3:35 pm · Reply

    Woww, awesome, please keep up the good tutorials on javascript… Thanks so much!!!

  25. Boaz
    January 29, 2013 at 3:43 pm · Reply

    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!

  26. Rameş Aliyev
    January 31, 2013 at 11:04 am · Reply

    Thank you a lot Richard, I’m in JavaScript world about 3-4 year, but i fell something missing in my knowledge and this program will fix it :)

  27. Tom Phillips
    February 4, 2013 at 6:52 pm · Reply

    Hello Richard-

    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.

    Cheers!

    • Richard Bovell
      February 4, 2013 at 8:18 pm · Reply

      @Tom Phillips

      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.

      • Tom Phillips
        February 4, 2013 at 8:28 pm · Reply

        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.

  28. Dustin Koerner
    February 6, 2013 at 6:06 pm · Reply

    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.

  29. Matt
    February 7, 2013 at 4:12 am · Reply

    Do you have any thoughts on the book Eloquent Javascript? I have heard it recommended quite often for beginners, plus the web version is free.

    • Richard Bovell
      February 10, 2013 at 4:13 pm · Reply

      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.

      • Anthony
        February 26, 2013 at 1:08 pm · Reply

        I didn’t jive with that book as well, in fact the Wrox book is a good read, I like his approach and style, Zakas is a guru!

  30. Mack
    February 9, 2013 at 11:21 pm · Reply

    Challenge accepted!

  31. Felix
    February 10, 2013 at 1:55 am · Reply

    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 again for creating it
    Felix

  32. flo
    February 10, 2013 at 12:23 pm · Reply

    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.

  33. Ahad Bokhari
    February 11, 2013 at 10:21 am · Reply

    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!

    Check these links out:
    Want to Remember Everything You’ll Ever Learn? Surrender to This Algorithm

    The 20 rules of formulating knowledge in learning

    Using spaced repetition systems to learn and retain technical knowledge.

    Good luck!!

    • Anthony
      February 26, 2013 at 1:12 pm · Reply

      Thanks for the links, that’s my problem, remembering the syntax.
      I code in js, ruby, python and php as well as playing with BackboneJS and friends, so remember the syntax is a problem

  34. Michael Walmsley
    February 12, 2013 at 12:26 pm · Reply

    Anyone wanting to learn JavaScript should definitely give http://codeavengers.com ago. It is much more fun and effective for beginners than CodeCademy.

    CodeCademy is good… but CodeAvengers is better.

  35. Peter T
    February 12, 2013 at 6:48 pm · Reply

    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?

    • Richard Bovell
      February 12, 2013 at 7:30 pm · Reply

      @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.

  37. AstonJ
    February 13, 2013 at 12:17 pm · Reply

    Wow – thanks for this awesome post!

    I did something similar for Ruby & Rails (http://astonj.com/tech/best-way-to-learn-ruby-rails/) and have been looking for something similar for JS for ages!

    I will let you know how I get on :)

  39. Matthew
    February 14, 2013 at 5:22 pm · Reply

    Hey Richard,

    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?

    Thanks!

    • Richard Bovell
      February 15, 2013 at 1:20 pm · Reply

      @Matthew and others who are having trouble with this roadmap.

      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.

      • Matthew
        February 16, 2013 at 2:12 pm · Reply

        Thanks Richard!

        Looking forward to the new roadmap.

      • Seth Hall
        February 17, 2013 at 7:12 pm · Reply

        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.

    • Richard Bovell
      February 22, 2013 at 8:19 pm · Reply

      @Matthew

      Definitely start building your project or building small projects ON YOUR OWN (not in Codecademy) as soon as you can. Do this from day 2.

      And signup for an account on Stack Overflow and ask questions there when you are stuck.

  40. Divine
    February 14, 2013 at 10:32 pm · Reply

    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.

  41. Pedro
    February 15, 2013 at 12:11 pm · Reply

    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

    What do you think about the book Eloquent Javacript?

    thanks.

  42. Sandy
    February 16, 2013 at 3:10 am · Reply

    Thanks for this wonderful article. Will learn it in my forth coming holidays.

  43. Arun
    February 16, 2013 at 7:32 am · Reply

    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?

    • Richard Bovell
      February 17, 2013 at 1:54 am · Reply

      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.

  44. Juan Solano
    February 16, 2013 at 9:49 am · Reply

    Excellent article, great information.

  45. Henry
    February 18, 2013 at 5:52 pm · Reply

    Do you suggest typing out all of the code examples in Professional JavaScript for Web Developers?

    • Andre Lashley
      February 20, 2013 at 12:13 am · Reply

      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.

  46. Paul
    February 20, 2013 at 6:23 am · Reply

    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 :)

  47. Acami
    February 20, 2013 at 3:26 pm · Reply

    Great article. It will be helpful is we can get links or ideas about a project..

    Thanks

  48. John DeVries
    February 21, 2013 at 5:03 pm · Reply

    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?

    • Seth Hall
      February 21, 2013 at 5:10 pm · Reply

      Great questions John. I am looking forward to the answers. Thanks for a great blog Richard. It will be essential to my further education as a developer.

    • Richard Bovell
      February 22, 2013 at 8:13 pm · Reply

      @John
      I answered all of your questions. Look at the bottom of this post (above the comments), I added a section called: Frequently Asked Questions and Answers.

      @Seth
      See my answers to John’s questions in the FAQ.

      • John
        February 24, 2013 at 9:09 pm · Reply

        Thank you SO much, Richard. GREAT tips there. Going to get started this week! I’ll make sure to document the process on my blog and link back here!

  49. HowToSolutionsNET
    February 23, 2013 at 3:34 am · Reply

    Great article.

    I always learned javascript / jQuery just enough to solve any problems I had and never bothered to learn it properly.

    Resources on this post seems like a good way to do it.

  50. Ab
    February 23, 2013 at 5:04 am · Reply

    Thanks for this great post. I’m just wondering when the announced “master in 1 week” blog post will come. Any news on that?

  51. William
    February 23, 2013 at 1:26 pm · Reply

    Richard, What are your thoughts regarding Derby.js?

    http://derbyjs.com/

  52. Peter
    February 24, 2013 at 2:15 pm · Reply

    Thanks so much for that posting/roadmap. Really love the approach.
    One thing I would find great is small projects to work on while moving along.

    Somewhat the courses all are somewhat decent explaining a if/then statement but more help for practical applications/small projects would be awesome.

  53. Acami
    February 24, 2013 at 3:49 pm · Reply

    Waiting for the post updated ..

    • Andy
      February 24, 2013 at 7:12 pm · Reply

      1. You posted this early.
      2. “after 7pm PST” means some time after that time. It does not mean right at that time.
      3. Most importantly, don’t whine.

    • Richard Bovell
      February 24, 2013 at 7:33 pm · Reply

      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.

  54. aarsh
    February 25, 2013 at 5:22 am · Reply

    Hey Richard have you tried out sublime text 2? I personally use this one because if its vast features

  55. Ben S
    February 25, 2013 at 8:45 am · Reply

    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!

    • Richard Bovell
      February 25, 2013 at 11:30 am · Reply

      I suspect there are quite a few who are in the same position as you. I will add a section to the roadmap about this tonight.

      • Jeff
        February 25, 2013 at 12:20 pm · Reply

        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.

        • Richard Bovell
          February 25, 2013 at 9:47 pm · Reply

          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.

    • Richard Bovell
      February 25, 2013 at 9:45 pm · Reply

      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.

      Do you have “JavaScript: The Definitive Guide”?

  56. John O
    February 25, 2013 at 1:34 pm · Reply

    In Week 1 and 2 of this course steps 4, 6 and 8 are conflicting unless you mean to redo the track over and over? Would you be able to clarify this please? Or are they referring to a different track?

  57. Sean
    February 26, 2013 at 6:59 am · Reply

    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

  58. Sean
    February 26, 2013 at 7:25 am · Reply

    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

  59. jesus miguel
    February 26, 2013 at 7:25 am · Reply

    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”.

    Thank you for your work creating a roadmap to learn JavaScript.

    • Richard Bovell
      February 27, 2013 at 11:10 am · Reply

      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.

  60. Anthony
    February 26, 2013 at 11:44 am · Reply

    I thought I was losing my mind ( I could have sworn, I was suppose to read the Wrox book first)

    • Richard Bovell
      February 26, 2013 at 12:52 pm · Reply

      @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.

      • Anthony
        February 26, 2013 at 1:37 pm · Reply

        Richard,

        I would like to thank you for all your hard work, this site is a great resource. The backbone, JavaScript tutorials look great as well as all the other material on this site.
        Great job bud!!

      • jesus miguel
        February 26, 2013 at 6:41 pm · Reply

        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.

        Thank you to help us to become JS ninjas.

  61. skyler
    February 27, 2013 at 5:14 am · Reply

    I just started this about a week ago, i’m already on week two and now its all changed T_T, now i’m just confused

    • Richard Bovell
      February 27, 2013 at 11:04 am · Reply

      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.

      • skyler
        February 27, 2013 at 1:53 pm · Reply

        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!

  62. Amaury
    February 27, 2013 at 4:42 pm · Reply

    After someone learn Javascript in what order should he/she learn these technologies:
    > Node.js

    > Knockout.js
    > Backbone.js

    > JQUERY
    > Coffescript

    > TypeScript
    > Bootstrap

    Thanks

    • Richard Bovell
      February 27, 2013 at 10:29 pm · Reply

      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.

  63. aarsh
    February 27, 2013 at 4:47 pm · Reply

    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

    • Richard Bovell
      February 27, 2013 at 10:12 pm · Reply

      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.

  64. Vic
    February 27, 2013 at 8:43 pm · Reply

    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?

  65. Ernesto
    February 28, 2013 at 2:10 am · Reply

    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.

  66. Rashid
    February 28, 2013 at 5:47 pm · Reply

    I was wondering if javascript object orientated is easy to learn and use in the real web applications? Do you use object orientation in your web apps? Thanks…

  67. Paul
    March 1, 2013 at 2:32 am · Reply

    Richard, thanks so much for your awesome roadmap. It really helps.

    As a sort of a thank you gift, I would like to share a tutorial on how to integrate WebStorm, SmartGit, and bitbucket to check all exercise files into a Git repo (in this example, bitbucket.org).

    http://2oahu.com/blog/bitbucket-webstorm-javascript/

    Instead of studying js, I spent most of my free time today writing this up. Hope it helps.

    Thank you!

  68. Robert
    March 3, 2013 at 3:16 pm · Reply

    Hello,

    Many thanks for these awesome guidelines. I really want to learn Javascript, although I am a beginner. I have only HTML and CSS knowledge and I guess Javascript will be helpful in the future.

    A couple of weeks ago I found out about Codecademy, I did a few tasks on Javascript but what can I say, I didn’t like their process of learning.

    I am in my early 20s and as you said, sometimes frustration may be present. However, I am really eager to learn this and if you have the right resources you can do it easily, in my opinion.

    Hopefully in 2-3 months I will be able to create my own stuff and have a good knowledge of Javascript. I also took Javascript The Definitive Guide, as you recommended for beginners.

  69. Seth Hall
    March 4, 2013 at 3:21 pm · Reply

    Hey Richard,

    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.

    Thanks.

    • Richard Bovell
      March 7, 2013 at 12:40 pm · Reply

      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.

      • Seth Hall
        March 7, 2013 at 12:53 pm · Reply

        Thanks for the feedback. I hear what you are saying.

        I will keep trying WS during the trial and go from there.

        A comparison post and an in depth look into the benefits of WS would be good content for your blog,

      • Domen
        March 9, 2013 at 7:36 am · Reply

        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.

  70. Burak
    March 8, 2013 at 9:12 am · Reply

    Thanks for this creating this guide, It’s really helpful track for non-programmers.

    But I find it tedious to study over trivial parts, such as chapter 4, I mean do I really need to read beforehand how “+” operator works, isn’t that obvious how it works?

  71. Jonathan Kempf
    March 8, 2013 at 1:47 pm · Reply

    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.

    Thanks again!

    • Richard Bovell
      March 25, 2013 at 2:27 am · Reply

      HI Jonathan,

      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.

  72. Seth Hall
    March 25, 2013 at 10:46 am · Reply

    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.

  73. Robert
    March 26, 2013 at 5:32 pm · Reply

    Is this a typo in the section for weeks 3 & 4? Where is the “Prototype Pattern” material located? Thanks.

    can read up to “Prototype Pattern.” The other object patterns are quite dense for you at this juncture and they are not necessary for you to know now.

  74. jhonnatan
    March 29, 2013 at 12:43 am · Reply

    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!!!!!

  75. Yuichi
    March 31, 2013 at 8:01 pm · Reply

    Thank you for the great tutorial guide, so helpful for beginner like me who don’t know where to start learning Javascript. I got the book, now I’m ready to learn properly :)

  76. Emiliano Jordan
    April 2, 2013 at 11:17 am · Reply

    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.

    http://oreilly.com/affiliates/

    Again, great work. Thanks.

  77. franklin
    April 2, 2013 at 7:55 pm · Reply

    Hi, I was just wondering if this is still relevant or not. I’m always concerned about stuff being outdated. Also, I’ve programmed in C and some Java. Should I go with “Javascript for Web Developers”?

    Thanks so much for all this info, it is exactly what I’ve been looking for.
    Can one get a job after going through all of this?
    I’m was a ruby guy but man I’m loving javascript so much.

    • Richard Bovell
      April 2, 2013 at 11:07 pm · Reply

      @Franklin
      This blog post is very new; it was originally written about 5 months and it was updated just 2 months ago.

      Yes, get Professional JavaScript for Web Developers (3rd Edition)

      You can definitely get a great job once you have learned JavaScript properly (including jQuery) and then learn Backbone.js. Front-end developers are in great demand right now.

      All the best with your studying and coding.

  78. Eric Elliott
    April 7, 2013 at 7:45 pm · Reply

    Very thorough and wonderful resource. I’ve been sharing this link. Thanks for taking the time to do this!

  79. Linda Gausman
    April 11, 2013 at 2:13 pm · Reply

    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?

  80. Dragan
    April 12, 2013 at 7:47 am · Reply

    Greetings from Bosnia,
    thank you for doing this, it is very helpful for beginners like me, I have a question. I want to learn javascript but also C #, which language is better to start, thanks again :)

  81. Lars Finsen
    April 14, 2013 at 8:05 am · Reply

    “Don’t use Safari”? Why not exactly?

  82. Antonis
    April 15, 2013 at 9:01 am · Reply

    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…

    • Richard Bovell
      April 16, 2013 at 3:07 pm · Reply

      @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.

      • Yuichi
        April 16, 2013 at 3:33 pm · Reply

        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?

        • Richard Bovell
          April 17, 2013 at 7:21 pm · Reply

          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.

      • Richard Bovell
        April 17, 2013 at 7:22 pm · Reply

        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

  83. Mateusz
    April 16, 2013 at 2:30 am · Reply

    Great roadmap!

    I am very aprecieted about all of you articles. It is like a good book, with growing level of complexity, very motivaiting and well structured.

    My javascript developer career will move on a fast track thanks to you :)

    Keep up the excelent work.
    I’ll be your faithful reader.

    Thanks!

  84. Sean
    April 16, 2013 at 3:44 pm · Reply

    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 = {};

  85. Sean
    April 16, 2013 at 5:42 pm · Reply

    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

    • Richard Bovell
      April 17, 2013 at 7:19 pm · Reply

      @Sean, I am glad to hear about your progress and your struggles :) Welcome to the life of a programmer.

      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

      And the coolest part is that he will keep updating his code as he learn jQuery and other technologies. So keep an eye on the link.

  86. Josh Forbes
    April 17, 2013 at 10:48 pm · Reply

    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.

    In the spirit of sharing, here is my code as well: https://github.com/joshdforbes/dynamicquiz

  87. Antonis
    April 20, 2013 at 6:34 pm · Reply

    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!

  88. Acami
    April 21, 2013 at 8:25 pm · Reply

    Richard,

    From the book “Professional JavaScript for Web Developers.”,?
    which topics are the most important?

  89. Dylan Ribb
    April 24, 2013 at 1:53 pm · Reply

    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!

    If anyone would like to see the quiz I’ve built, you can find it here:
    http://dylanribb.com/projects/javascript/jsquiz

    • Richard Bovell
      April 25, 2013 at 8:40 pm · Reply

      Very well done, Dylan. I like the fade and the well organized structure of your UI.

      You should probably show the question number (1 of 10), so the user has an idea which question he is on and how many more questions to come.

    • Boaz
      April 28, 2013 at 9:14 am · Reply

      Hey Dylan,
      first of all i saw the amazing quiz that you did
      and it looks great!
      can you please add some comments explaining what you did in each section of your code?
      it would be very helpful

      • Dylan
        April 28, 2013 at 11:23 am · Reply

        Hi, Boaz.

        Thanks for the feedback. I’ve added some comments to make it easier to understand what’s happening and uploaded the new js file. :)

        Dylan

  90. sneha
    May 3, 2013 at 7:08 am · Reply

    Outstanding guidance for those developers( like me ) who are new in javascript..

  91. Tim
    May 7, 2013 at 10:50 pm · Reply

    Awesome article mate…just what I needed to learn javascript

  92. Sean
    May 8, 2013 at 7:37 am · Reply

    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!! :)

    • Richard Bovell
      May 8, 2013 at 9:09 pm · Reply

      You rock, Sean.
      Congrats, Bro. I am really inspired by you guys. Keep up the good work and keep making your quiz more advance as you learn more advance topics.

  93. Niraj
    May 9, 2013 at 2:52 am · Reply

    I like it.It’s cool.

  94. javascript1618
    May 15, 2013 at 5:47 pm · Reply

    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

  95. adam baker
    May 16, 2013 at 5:08 pm · Reply

    great post.

    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.

    Anyhow, great article.

  96. shishir
    May 19, 2013 at 9:35 am · Reply

    Download any it book for free from “it-ebooks.info” click on the name written in front of download!

    • shishir
      May 19, 2013 at 9:53 am · Reply

      Very very basic question, How to use console of google chrome and mozilla firefox? I type the code when i run it doesn’t work, chrome not even completely writing my code, giving errors! I have worked with Dreamweaver a lot, it was in course! when i found my coding love I started learning from any resource. I have already downloaded these books but didn’t get time to read due to animation homework. i depended on tutorial and codecademy like website.

Trackbacks for this post

  1. JavaScript is Sexy | JavaScript is Sexy
  2. Martin Codes – Cool Link Stash, September 2012
  3. Pilgrimage to JavaScript Glory: Noob to Expert | JavaScript is Sexy
  4. 16 JavaScript Concepts You Must Know Well | JavaScript is Sexy
  5. » What Next?
  6. Learn Node.js Completely and with Confidence | JavaScript is Sexy
  7. Learn Backbone.js Completely | JavaScript is Sexy
  8. tamapolis : Javi Agenjo's personal blog » Blog Archive » A Year in Javascript
  9. Dev & stuff to look into | Pearltrees
  10. How to Learn JavaScript Properly | Modern web development | Scoop.it
  11. How to Learn JavaScript Properly | Software Development Solutions | Scoop.it
  12. Boston web developer and web designer : Erik August Johnson : Blog
  13. [Bookmark] Tips Belajar Javascript dengan Betul | Robotys.net
  14. Q Leren Programmeren
  15. February Roundup of Javascript Resources for front-end developers - petersena.com
  16. Weekly Reading Summary - Beyond Isolation
  17. Learn Web Fundamentals: JavaScript, HTML-5, CSS3, & .XML | Omni-Optx
  18. Bookmarks for February 24th | Chris’s Digital Detritus
  19. Learn Intermediate and Advanced JavaScript | JavaScript is Sexy
  20. Codecademy JavaScript Track: Status Report | Somehow Doomed
  21. Learning javascript — 2oahu.com/blog
  22. Learning javascript properly — 2oahu.com/blog
  23. Bitbucket, WebStorm and Learning Javascript Properly. — 2oahu.com/blog
  24. How to become a developer | James Anderson
  25. Using WebStorm effectively to Learn JavaScript Properly — 2oahu.com/blog
  26. mjinubygrcxe4zssxctv
  27. Learn JavaScript | Juicy Web Design
  28. Recopilación de recursos gratuitos para aprender a programar - pchalaux
  29. Thoughts on starting over with JavaScript by
  30. Learning JavaScript | Tech Ramblings
  31. My JavaScript Adventure | aggie's notebook
  32. Share Only | Pearltrees
  33. sexywebdesigner
  34. Introducing Myself | sexywebdesigner
  35. Learning JS Properly | codingIsBananas
  36. Learning JS Properly | coding(isBananas);
  37. RT @orlybg: How to Learn JavaScript Properly http… | @thisgunforhire
  38. Learning JavaScript | somenotesforself
  39. Learning JS Properly – Study Group Index | coding(isBananas);
  40. Learning JS Properly – Week 2 | coding(isBananas);
  41. Bitbucket, WebStorm and Learning Javascript Properly. | 2oahu.com
  42. Using WebStorm effectively to Learn JavaScript Properly | 2oahu.com
  43. Como aprender Javascript Corretamente! – JavaScript.is (Sexy) | codeinbrasil
  44. Como aprender Javascript Corretamente! | dev beginner
  45. Learning JS Properly – Week 3 review and Week 4 Assignments | coding(isBananas);
  46. Structure at Last- Found a Study Group | B's Blog
  47. Lengthy load times - DesignersTalk
  48. Be Your Own Dojo « factotum.dk
  49. JS is Sexy Week 4- Spot the Bug | B's Blog
  50. JS is Sexy Week 5- Dynamic Quiz | B's Blog

Leave a Comment