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.
[sc:mongodb-book]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.
Table of Contents
- 1 What You will Learn
- 2 How Will Your Life Change After You Learn JavaScript Properly?
- 3 Be Empowered
- 4 Resources for the Two Study Guides
- 5 Learn JavaScript Properly Study Guide for Beginners
- 6 Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators
- 7 Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)
- 8 Get The Ultimate JavaScript Editor: WebStorm
- 9 Your First Project—A Dynamic Quiz
- 10 Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)
- 11 Weeks 7 and, if necessary 8 (Classes, Inheritance, more HTML5)
- 12 Words of Encouragement
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.
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.Experienced programmers and web developers should follow the Learn JavaScript Properly Study Guide for Experienced Programmers and get this book:
— The paperback Version: Professional JavaScript for Web Developers (3rd Edition)
— The Kindle Version: Professional JavaScript for Web Developers (3rd Edition) - 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.)
- JavaScriptIsSexy.com (this blog 🙂 ): We will read 4 articles
- CodeSchool.com: We will complete 1 free course
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.
Watch this Firefox’s and Chrome’s Console Tutorial on YouTube.
And watch this Chrome Dev Tools Tutorial (also on YouTube) to learn how to use Chrome Dev Tools.
Also, work all the end-of-chapter exercises.
Let’s get to work.
Weeks 1 and 2
Week 1: Making a Website with HTML and CSS; Learn JavaScript Data Types, Functions, Control Flow, and Loops
- Codecademy.com: If you do not already know HTML and CSS, complete the Web Fundamentals Track on Codecademy.
- Codecademy.com: Then follow the Make a Website track to make your first little website, using what you learned above.
- Beginning JavaScript: Read Chapter 1 (Introduction to JavaScript and the Web) and Chapter 2 (Data Types and Variables).
- Beginning JavaScript: Read Chapter 3 (Decisions, Loops, and Functions).
- 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.”
- Beginning JavaScript: Read Chapter 4 (Common Mistakes, Debugging, and Error Handling).
Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery
- Beginning JavaScript: Read Chapter 5 (JavaScript — An Object- Based Language).
- JavaScriptIsSexy.com: Read my article, JavaScript Objects in Detail
- Codecademy.com: Work through the last three sections of the Codecademy JavaScript track: “Data Structures,” “Objects 1,” and “Objects 2.”
- Beginning JavaScript: Read Chapter 6 (Programming the Browser).
- Beginning JavaScript: Read Chapter 15 (JavaScript Frameworks), and stop just after you complete this section: “Digging Deeper Into jQuery”.
- Codecademy.com: Work through the entire jQuery Track on Codecademy.
Weeks 3 and 4
Week 3: HTML Forms and Frames; JavaScript Strings; Build Your First Interactive Website
- Beginning JavaScript: Read Chapter 7 (HTML Forms: Interacting with the User).
- Beginning JavaScript: Read Chapter 8 (Windows and Frames).
- Beginning JavaScript: Read Chapter 9 (String Manipulation).
- Codecademy.com: Now, make your first cool website. Work through the entire Make an Interactive Website track on Codecademy.
Week 4: JavaScript Date, Timers, and Cookies
- Beginning JavaScript: Read Chapter 10 (Date, Time, and Timers).
- Beginning JavaScript: Read Chapter 11 (Storing Information: Cookies).
Weeks 5 and 6
Week 5: JavaScript “this,” Variable Scope, and Hoisting, the DOM, JavaScript XML, and AJAX
- JavaScriptIsSexy.com: Read my post JavaScript Variable Scope and Hoisting Explained
- JavaScriptIsSexy.com: Read my post Understand JavaScript’s “this” With Clarity, and Master It
- Beginning JavaScript: Read Chapter 12 (Dynamic HTML and the W3C Document Object Model).
- Beginning JavaScript: Read Chapter 14 (Ajax).
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):
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) 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 😉
- Store the quiz questions in an external JSON file.
- Add user authentication: allow users to 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.
Week 7 (Extra Credit)
Getting Started with Git; Objective Oriented JavaScript; Improve Your Quiz Even More
- CodeSchool.com: Take the FREE Try Git course.
- JavaScriptIsSexy.com: Read my post, OOP In JavaScript: What You NEED to Know.
- 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.
Resources:
— Professional JavaScript for Web Developers (3rd Edition)
— JavaScriptIsSexy.com (4 articles)
— Codecademy.com (2 tracks)
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.
Watch this Firefox’s and Chrome’s Console Tutorial on YouTube.
And watch this Chrome Dev Tools Tutorial (also on YouTube) to learn how to use Chrome Dev Tools.
Also, work all the end-of-chapter exercises.
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.
- And work through sections 2 to 5 of the JavaScript Track on Codecademy.
Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)
- 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.
- 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.
- 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).
Or watch these WebStorm tutorials; they might be the best WebStorm tutorials.
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)
- 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 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.
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. 🙂
Pingback: JavaScript is Sexy | JavaScript is Sexy
Excellent! I am just starting to learn javascript and getting a good outline like this is perfect! Thanks!
Hey, i wanna be learn JavaScript, so its compulsory for we start a c programming level then learn a java script?
Please Reply,
Panks
No programming knowledge or experience required.
Hi Panks,
C programming is not required to learn javascript . If you want, I will teach you javascript. Please reach me on my email.
Regards,
Sanjay
Hello Sanjay,
I want to learn java script. will you teach me?
Regards,
Sumit Kumar
contact me….I want to learn tooooo….
i’ll be gratefull 2 u..
thanx in advce
I need help in understand JS, Is there any way that you can contact. Please, I would appreciate your time so much.
Is there any way that you can contact me. *
Is your offer to teach JavaScript still good? I would also like to learn. Thanks!
Me too wanna learn javascript. please mail me the details. thanks in advance
Hi Sanjay,
I am looking for some good javascript tutorials and got Codecademy – it was fun doing it, but could not get much out of it.
Can you please guide me?
Thanks,
Sri
Hello Sanjay, I have basic programming skills. But on my new job, I need to learn JavaScript rather quickly.
Thanks for any help you can provide.
Dan Steward
Sanjay, would love to learn Js xxlesterlongxx@gmail.com is my email. would appreciete if you would reach out. thank you
Hi Sanjay,
I want to have kids from you. Please send me your email :))
Look forward to hearing from you.
Yours truly,
Princess
Hi Sanjay, am new to this … Ca you teach me too?
Hello Sanjay,
I want to learn javascript. can you guide me in learning javascript?
and teach me also bro
Hi Sanjay,
I’m HTMl &css is good well.
But javascript is begining level only…
you will teach with me..
Regards,
R.Prem
Sanjay,
Please teach me too bro.
Many thanks
http://www.psonline.xyz/ online photo editor
hey how to start this course?
@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.
How did it go?
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!.
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.
Angular also!
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?
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.
Hi Richard,
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.
Hi Richard,
do you have any suggestions for web application projects we should be attempting in week 4?
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.
Thanks! and thanks for the quick reply!
Look forward to seeing what the web project is.
Yeah I would like your suggestions for which web application projects we should do in week 4. So that way we can learn JS in properly way.
When I create the new roadmap, I will recommend an application.
Be very interested in a post on angular.
Thank you for the post. It would be interesting if you cover ember.js also
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
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.
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 🙂
Here is my journey
http://go.hodspot.com/2012/06/javascript-from-scratch.html
Pingback: Martin Codes – Cool Link Stash, September 2012
So one has to read the whole book? That’s how one usually does it anyway.
that’s great article. I’ve just started Javascript yesterday 😀
Finally, some guidance! I was hopelessly jumping from one book review to another and now I see hope!! 😀
Thank You so much!!
Looking forward to working through this and Backbone!
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.
Anyone complete this track? How many hours each week did you spend at it?
Pingback: Pilgrimage to JavaScript Glory: Noob to Expert | JavaScript is Sexy
Pingback: 16 JavaScript Concepts You Must Know Well | JavaScript is Sexy
Took delivery of the first book today… its massive! Looking forward to getting stuck in. Thanks for your guidance.
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.
Woww, awesome, please keep up the good tutorials on javascript… Thanks so much!!!
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!
Agreed! This post is excellent, all we need is an update to the codecademy track.
http://www.codecademy.com/tracks/javascript-original
Thanks alot Wilson van Heugten
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 🙂
Pingback: Learn Node.js Completely and with Confidence | JavaScript is Sexy
Pingback: Learn Backbone.js Completely | JavaScript is Sexy
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!
@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.
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.
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.
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.
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!
Challenge accepted!
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
Pingback: tamapolis : Javi Agenjo's personal blog » Blog Archive » A Year in Javascript
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.
You made some good points, Flo. I will find some time soon to update the post to match the new JavaScript track on Codecademy. And I will note that it is free 🙂
Pingback: Dev & stuff to look into | Pearltrees
Pingback: How to Learn JavaScript Properly | Modern web development | Scoop.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!
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!!
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
Pingback: How to Learn JavaScript Properly | Software Development Solutions | Scoop.it
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.
Pingback: Boston web developer and web designer : Erik August Johnson : Blog
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.
Pingback: [Bookmark] Tips Belajar Javascript dengan Betul | Robotys.net
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 🙂
Good work.
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!
@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.
Thanks Richard!
Looking forward to the new roadmap.
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.
@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.
Pingback: Q Leren Programmeren
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
What do you think about the book Eloquent Javacript?
thanks.
Pingback: February Roundup of Javascript Resources for front-end developers - petersena.com
Thanks for this wonderful article. Will learn it in my forth coming holidays.
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.
Excellent article, great information.
Pingback: Weekly Reading Summary - Beyond Isolation
Do you suggest typing out all of the code examples in Professional JavaScript for Web Developers?
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.
Pingback: Learn Web Fundamentals: JavaScript, HTML-5, CSS3, & .XML | Omni-Optx
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 🙂
Great article. It will be helpful is we can get links or ideas about a project..
Thanks
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?
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.
@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.
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!
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.
Thanks for this great post. I’m just wondering when the announced “master in 1 week” blog post will come. Any news on that?
Richard, What are your thoughts regarding Derby.js?
http://derbyjs.com/
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.
Waiting for the post updated ..
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.
Hey I know if not going to be exactly a 7 PM. Lol
Andy, most importantly do not be a “LAMBON”.. Ki… a..S
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.
You were not too optimistic with time but you forgot that tonight were the Oscars 🙂
He he he. Nah, I didn’t watch the Oscars, but I will later.
Hey Richard have you tried out sublime text 2? I personally use this one because if its vast features
I do use it, but not for full JS applications. Only to edit files. I added a note about this to the post.
Pingback: Learn Intermediate and Advanced JavaScript | JavaScript is Sexy
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 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.
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.
Do you have “JavaScript: The Definitive Guide”?
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?
Thanks much for pointing that out, John O. I had forgotten to delete a bullet point. I just fixed it.
Glad I could help. This blog is doing wonders for me and my Final Year Project in college. Thanks for that.
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
Sean,
No, you don’t have to buy the Definitive Guide book. See my 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.
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.
I thought I was losing my mind ( I could have sworn, I was suppose to read the Wrox book first)
@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.
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!!
Thanks much, Anthony. I am happy to hear the site is helpful.
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.
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
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!
After someone learn Javascript in what order should he/she learn these technologies:
> Node.js
> Knockout.js
> Backbone.js
> JQUERY
> Coffescript
> TypeScript
> Bootstrap
Thanks
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.
Thanks Richard for the information. I am good to go now…
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?
If you know PHP, use that on the backend, along with jQuery AJAX on the client.
Otherwise, learn Node.js, it is very easy to learn; you only have to learn some of the Node.js API, to get started.
@Richard and @Anthony
Thanks, that clears it up for me. I know just a little PHP, but I’d rather get Javascript thoroughly under my belt and use that.
The Ajax PDFs will be useful when I get to that point.
@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 )
Here are some PDF’s on AJAX
http://dl.dropbox.com/u/5884010/Slideshare_AJAX.zip
Pingback: Codecademy JavaScript Track: Status Report | Somehow Doomed
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.
Use Zakas’s book if you like it and understand it. It is better and it covers up to advanced topics, so in the long run, it is a better book.
Will do, thanks!
Pingback: Learning javascript — 2oahu.com/blog
Pingback: Learning javascript properly — 2oahu.com/blog
Pingback: Bitbucket, WebStorm and Learning Javascript Properly. — 2oahu.com/blog
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…
Yes, Object-Oriented JavaScript is considerably easier than in many languages. And it is definitely used extensively to develop JavaScript web applications.
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!
Thanks, Paul,
You should created a tutorial for getting started with WebStorm. I imagine many users will need such a tutorial, which I had planned to write but I simple don’t have the time to do it.
If you do, I will link to in in the Learn JS post.
BTW, I like the image of the tropics that you have on your website. It makes me want to take a vacation.
Done. It’s at http://2oahu.com/blog/webstorm-javascript/
Please leave comments with any suggestions/comments.
The pics are from Oahu that I took on my visits. 🙂
Very good work, Paul. Thanks much. I added a link on the post.
Pingback: How to become a developer | James Anderson
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.
Pingback: Using WebStorm effectively to Learn JavaScript Properly — 2oahu.com/blog
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.
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.
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,
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.
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?
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!
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.
Pingback: mjinubygrcxe4zssxctv
Pingback: Learn JavaScript | Juicy Web Design
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.
Meteor.js is great. I plan to use it to develop my next two projects. I highly recommend it, even though it is still in its infancy.
Meteor is awesome and I highly recommend it as well.
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.
The Prototype Pattern is on page 184 of Professional Javascript for Web Developers.
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!!!!!
Congrats, Jhonnatan. I am very happy to hear about your progress, and I am sure many others will be inspired by your determination.
Pingback: Thoughts on starting over with JavaScript by
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 🙂
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.
Thanks for the information, Emiliano (great name by the way 🙂 )
I will look into adding some of the links to O’Reilly books.
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.
@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.
Pingback: Learning JavaScript | Tech Ramblings
Pingback: My JavaScript Adventure | aggie's notebook
Very thorough and wonderful resource. I’ve been sharing this link. Thanks for taking the time to do this!
Pingback: Share Only | Pearltrees
Pingback: sexywebdesigner
Pingback: Introducing Myself | sexywebdesigner
Pingback: Learning JS Properly | codingIsBananas
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/
Pingback: Learning JS Properly | coding(isBananas);
Pingback: RT @orlybg: How to Learn JavaScript Properly http… | @thisgunforhire
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 🙂
If you want to develop websites or web applications, you should definitely learn JavaScript.
Pingback: Learning JavaScript | somenotesforself
“Don’t use Safari”? Why not exactly?
Safari developer (debugging) tools are not as good as the developer tools on Firefox and Chrome.
Pingback: Learning JS Properly – Study Group Index | coding(isBananas);
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
Pingback: Learning JS Properly – Week 2 | coding(isBananas);
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!
Right? I love the author for writing this. It’s so hard to find a path on how to learn tech it’s not funny(frustrating?).
I feel the same way, this is marvelous.
JavaScript is so Sexy
Great comment, Franklin. 🙂
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
@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.
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
Way to go, Josh. Excellent, Mate. I like that you went for an OOP quiz. I will link to both yours and Derek’s in the article above in a few days. Heck, I will tweet about your effort right now 🙂
If you aren’t already, you should join the Reddit study group at the link below (or at least drop by and show them your quiz):
http://www.reddit.com/r/learnjavascript/comments/1bx5uq/learning_js_properly_study_group_week_1/
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!
Very Cool, Antonio. Excellent job. Keep adding on to it, and very soon you will be developing full-scale JS applications.
Richard,
From the book “Professional JavaScript for Web Developers.”,?
which topics are the most important?
@Acami In the roadmap above, I list the specific sections of the book that are important to read.
Pingback: Bitbucket, WebStorm and Learning Javascript Properly. | 2oahu.com
Pingback: Using WebStorm effectively to Learn JavaScript Properly | 2oahu.com
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
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.
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
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
Pingback: Learning JS Properly – Week 3 review and Week 4 Assignments | coding(isBananas);
Outstanding guidance for those developers( like me ) who are new in javascript..
Pingback: Structure at Last- Found a Study Group | B's Blog
Pingback: Lengthy load times - DesignersTalk
Awesome article mate…just what I needed to learn javascript
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!! 🙂
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.
I like it.It’s cool.
Pingback: Be Your Own Dojo « factotum.dk
Pingback: JS is Sexy Week 4- Spot the Bug | B's Blog
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
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.
Pingback: JS is Sexy Week 5- Dynamic Quiz | B's Blog
Hey!
Good job on the course so far. I just wanted to point out a little ‘bug’. I think that the link for web-storm description has changed from http://2oahu.com/blog/webstorm-javascript/ (doesn’t work) to http://2oahu.com/posts/2013/webstorm-javascript/. It’ s not that hard to find the correct one, but would be nice if you changed it here as well.
@Martins
Hello, this is Paul running 2oahu.com.
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.
Sorry about that Richard.
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.
The group members, especially the organizer, are very helpful and they have been helping out each for weeks now. Here is the link:
http://www.reddit.com/r/learnjavascript/comments/1ceefw/learn_javascript_properly_omnibus_post/
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.
Pingback: Best Learning Resources for Meteor.js | XNFA ZEN
Pingback: Poll Results: Best Books to Learn Programming While Having Fun
Pingback: Issue 37 – Ballerinas In Business Suits | TLN
Great guide!
I was wondering– what’s the difference between Ruby Mine and Webstorm? They are both by jetbrains but Ruby Mine seems to include a few more features than Webstorm.
What would you recommend?
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.
Hello !
Thank you so much for this helpful post. I’m just wondering how many hours per week you had in mind in your estimate?
Is it full-time study or more like 2,3h/day?
I just would like to know the pace I’m about to face!
Thanks again,
– Vincent
I would say about 10 to 20 hours a week would be good. Or try for at least 2 hours every day.
Pingback: Client Side Development with OpenERP | FVDSN's Blog
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
Pingback: Progress report – day 41 | Learning on my own
Do I also need to learn HTML5 and CSS3 apart from Javascript, Backbone, and Node.js?
Thanks
I asked the question because I want to be a web developer not a web designer.
Thanks
Yes, as a web developer, you have to learn HTML5 and CSS3 for sure. Fortunately, those are the easiest technologies you will ever learn as a web developer.
Hey Richard,
Thanks for this informative post. I followed along with the reddit group and found it to be helpful to have a group to study along with.
Someone told me to write about the process to better understand what I am learning. So my blog follows each week of your program, maybe it will help other people going through the program.
More importantly, I would like to share the two live dynamic quizzes I have created. The first one in pure JS that I did and the second which utilizes jQuery: http://www.briandavishall.com/projects/
You can find the code of those dynamic quizzes at my GitHub account:
https://github.com/hallbd16
Lastly, I would greatly appreciate anyone who would critique my code. What would you do differently and why? As a noob coder, I figure this is a critical step in learning.
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 🙂
Well guys here is my quiz check it out and tell me what you think of my quiz:
http://jsfiddle.net/boazmier/ru8Qj/5/embedded/result/
Hi Boaz,
Sorry, man, I was inundated the last few weeks and only now I am able to respond properly.
So it looks like you have overcame the trouble you were having and you completed your quiz. Good job.
You quiz is pretty and slick 🙂
Why is an answer already selected by default for each question?
Pingback: aggie's notebook
Thanks for great article. it is one of the best on internet!
Have a look at my progress with quiz:
http://owlgraphic.com/quiz/
Hi Owl, I really like your quiz, Mate. It is slick and smooth, and the timer makes it exciting and nerve wrecking 🙂
Do you have this code for viewing on Github? I really like what you did with this quiz and want to see how you did it.
Hi Jesse,
Unfortunately i don’t have it on Github but you can see js file in source of site:
This is a direct link to quiz.js:
http://owlgraphic.com/quiz/quiz.0.2.js
Quiz is wrapped in jQuery plugin template so look inside object: var Quiz = { ..}
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?
Hi Jay,
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
That helps…but what do you use Firebug for, then?
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.
Ok. Thanks much. Last question (for now): Should I enter all code from the book, beginning with the first introduction to variables in section 1.1? If not where should I start?
Hi Richard,
Thanks for helping us learn JavaScript! Quick question on the quiz. When it comes time to:
— Store the quiz questions in an external JSON file.
I’m stuck at this part. It seems most people use jquery .getJSON but when I try this it appears the rest of my script runs before getJSON callback completes.
What are some recommended ways to import the quiz questions from a separate JSON file?
Thanks!
Jason
HI Jason,
Post your code here and I will help you figure out the problem.
Also, if you read some of the comments above, you will find links to the source code of other beginners’ completed quizzes. Take a look and see how some of them have solve the problem you are having.
Hi Richard,
I looked through the other quiz before posting. Most of them moved the quiz data into a second JavaScript file, then imported it using a second script tag in the HTML.
For example, I saw many practice quiz do similar to:
quiz-data.js
arrayName = [{},{},{}]
quiz.html
Where the external data is really just another JavaScript file. This works but it is not much different than before.
I was expecting to import the JSON as objects (not a variable or function) and from within my JavaScriprt.. Not from additional HTML script tags.
I have my data formatted as an array of objects:
quiz-data.json
[{},{},{}]
I tried to load the data using .getJSON, but it loaded it asynchronously after the rest of my JavaScript had finished running.
I changed it to $.ajax and disabled async and this did the trick (until I can re-write my quiz in async style).
My current function to import JSON.
http://jsfiddle.net/EeYha/
This works, and I’ve learned more about working with JSON data, but I’m still not sure how to do this if we didn’t use jQuery, or if there is an easier way.
Thanks again.
My practice quiz is here – http://jasonlong.com/startrek – Looking forward to using templates and backbone soon!
It was very resourceful of you to look for a solution that could work for you specific case, and this is standard practice in the life of a programmer. So you did the right thing.
AJAX without jQuery is a bit tedious, and quite frankly, I don’t think I have ever seen anyone in last few years use AJAX without jQuery, except for demonstration purposes or to teach pure JS AJAX.
You can put your quiz inside a function (at least the part of the quiz to start the quiz), let’s say an init() function which will get the quiz started.
And then you can call the init() function after the AJAX data loads asynchronously:
alert(getQuestions());
I had similar problems with loading json file. I was first trying with getJSON() method but it didn’t work. So I tried $.ajax() today and managed to make it work with async: true.
Here is the code:
getQuestions: function () {
$.ajax({
type: ‘GET’,
url: ‘data/questions01.json’,
context: this,
dataType: ‘json’
}).done(function (questions) {
this.allQuestions = questions;
this.setPlayerName();
});
}
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.
http://gruximillian.bitbucket.org/
And here is the source:
https://bitbucket.org/gruximillian/gruximillian.bitbucket.org/src/
Hope this helps someone about this issue in the future.
And thank you Richard for this great post!
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..
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.
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.
Pingback: Learn to Programming for Free | Code Self Study
Pingback: Learn Computer Programming for Free | Code Self Study
Hi Richard,
I have created my first jQuery plugin that allows users to create an image slider that is populated via content from Instagram. It supports both a hashtag search and a @username feed.
You can find it here: http://christill89.github.io/instaslider/ or on github at https://github.com/christill89/instaslider
I’d love to get your feedback on it!
Thanks
Chris
Chris,
I just checked out your code, and I have to say I am impressed. Very good work, Mate. But the demo on your site doesn’t appear to be working. I am using Chrome.
Thank you very much!
I know, the demo is hosted on my blog and good old godaddy has just gone down yesterday. It should be fixed over the weekend.
Thanks
hey richard
hey richard
I have made my little web quiz.
http://boaz.comze.com/Quiz/index/index.html
im stuck the re-selecting radio button dosent work i have no idea what to do..
Sweet little quiz there, Boaz. I didn’t understand the PJ question. But as a soccer fan, I love the Messi question.
Anyway, very good work, Man. Keep it up.
Ok , i have finished my web quiz finally ( version 2).
check it out here: http://boaz.comze.com/Quiz/index/index.html
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 🙁
Do you think its worthwhile doing the advance projects on codeacademy as well?
http://www.codecademy.com/tracks/projects
Hi Jalil,
Doing those advanced projects will definitely help. But be sure to follow and read these 16 JS concepts:
http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/
Dear Richard,
Thank you very much for you work in putting together this tutorial. I know that it wasn’t trivial and it’s been very helpful in my studies.
Here is my first go at the quiz: http://jsfiddle.net/zenstunna/BJfZY/
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.
Thanks again. Rock on.
Hi ZenStunna,
You made the quiz look very easy. Very good work, Mate.
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.
Pingback: Jak się nauczyć | Pearltrees
Thank you so much for this blog!
Could give any advice for app development in PhoneGap?
What kind of JavaScript’s topics should I learn?
Sorry for my bad English and Thanks again!
Well, I personally don’t have much experience with PhoneGap. Is there a reason you need PhoneGap in particular?
No, I want to develop apps for mobile and tablet devices. PhoneGap is cross-platform and easy to use, so I chose it.
Do you have any suggestion instead of PhoneGap?
Thanks in Advance!
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.
Thank you so much, Mr. Bovell. I’m looking forward
to your new posts, especially about mobile JS
development related topics.Your posts are great. I have never seen like those before.
P.S. I am not a native English speaker, so I’m so
sorry about my poor English!
Hey Richard,
Thanks for taking time to write such a brilliantly structured article on the JavaScript roadmap. Really appreciate your efforts!. Helped me a lot.
I have read many more JS articles of your’s and they simply rock!.
You rock, too, Sandeep. Thanks a lot.
Pingback: Client Side Development with OpenERP | maytasoft
Pingback: ECMA / JavaScript | Pearltrees
Hey Richard,
i have a question:
you write —
— 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.
my question is how to you suggest to do so?
Good question, Boaz.
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.
Pingback: PAF #1 – Ebooker | Potato Life
Hi Mr. Bovel. Do you have any suggestion(book or roadmap) for CSS, please? I am at week 4, and I have made the quiz and it works properly, but it isn’t look so good(because of lack of appearance).
Sorry for my poor English.
Thanks in Advance!
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
And the book is very easy to read and short.
I actually wrote a blog post about this:
http://javascriptissexy.com/learn-html5-css3-and-responsive-web-site-design-in-one-go/
Thank you so much for great advice!
Pingback: Javascript | Pearltrees
Pingback: Learning JavaScript | yevpod
Pingback: New is always better… | Iggy's Box
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.
Thank you so much!
-John
HI John,
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.
I completed a basic quiz #1 using Angular.
Here’s the code for the ng-curious:
https://github.com/TylerCuster/quiz-quiz
Tyler,
Thanks a lot for posting your Angular.js quiz. It is very interesting to see your quiz and compare it with the others—considerably less code to begin with.
I would encourage other JS newbie developers to look at your code and go learn a bit of Angular.js to get a feel for what it is like to develop with a popular JS framework.
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
Looks like a solid learning path, thanks for posting this!
Hopefully in 2 months I’m gonna be on the right track to take a step forward with my front end career.
Did you received any mails with succes stories from people who completed this roadmap?
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.
Thanks very much for sharing this, Jhonnatan. And much success to you with your dev career.
No Sir, thanks to you for this excellent blog, follow every post!
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 🙂
Pingback: JavaScript Crash Course | Salute The Robot Victory
Regarding :
“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.”
Even the code in The Definitive Guide Preface chapters, like the “Loan calculator”?
Hopefully you can clear this up?
Cheers,
Egbert
Well, the idea is to type out all the example code that you will run or test, so that you get to properly understand each line.
But if you are not running the code or there is huge block of code that you think typing out will not help you, no need to type it out.
OK, thanks for that!
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. 🙂
Yeah, doing that too now, it helps!
Yep, there we go.
Pingback: Javascript | Annotary
Pingback: Learning JavaScript Free Online: Phase 1 | Learning to Code
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’m tracking my progress here: http://codeontheroad.wordpress.com/
You are welcome, Mandy. Keep the hard work and don’t give up 🙂 You will be very happy when you accomplished your goal.
Pingback: Introduction to JavaScript (Unit 1.1 Getting Started with Programming) | KARTIKA'S BLOG
great stuff!! can’t wait for your article on meteor.js. in the meantime, i suppose i’ll have to purchase tom coleman’s discovering meteor.
I will definitely write about Meteor.js, but I prefer to do so after I complete the huge Meteor.js project I am developing right now.
Yes, I agree that getting the Discover Meteor book is the best bet at this point, since there is really no other book on Meteor.js.
Hey Richard,
Can Javascript query sql and MYsql db’s?
Definitely!
Yup I’ve learned javascript/ still learning advanced javascript thanks to Richard, and im now learning mysql/php along with it and I can tell you ajax works flawlessly with mysql db.. 🙂
Very good to hear, Sean.
Hi Richard,
Great course and site! I was wondering what you thought about Angular JS.
Angular.js is Great. I will write about it on the Modern Developer Toolkit site:
http://moderndevelopertoolkit.com/
Hi Robert,
Great post/guide.
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
Tiredness from a full day of Javascript, I intended to type Richard I swear.
Hahaha. No problem at all, Brett. I am glad to hear you are coding a lot. Thanks for the tip about chapter 14 and 13.
I agree with Brett, Chapter 14 has completely thrown me off
Hey Sam,
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.
Pingback: How to Learn JavaScript Properly – Genesis | Bobby Showalter
hi Richard am interested in learning java script but I got no programming experience any suggestion, by the way thanks this site is so useful in helping make my mind up
You don’t really need any programming experience to learn JavaScript. It is a great language to start with. Join one of the study groups and get started as soon as you can.
Pingback: A Slightly More Formal Approach to Learning JavaScript « David's Personal Blog
Pingback: JQuery i nasıl öğrenirim? | Ibrahim OZGON
Hello Richard,
I’v stared the javascript roadmap (go into week 3),but i have a question.
is in the javascript roadmap we will be also learn dealing with cross browser compatibility and cross security issues ?
thanks
Yes, you will learn about cross-browser issues during the course. Good luck.
Pingback: Properly Update #1, Chrome Cast Excitement | David's Personal Blog
Hi Richard,
Is there any particular reason you’ve skipped chapter 13: events, in professional Js for web developers?
Samuel,
No we didn’t skip chapter 13, it is under “Weeks 5 and 6.”
Apologies, just thought it was easier to digest before going into chapter 14. Nonetheless your roadmap has been a big help! I Thank you 🙂
Pingback: How to Learn JavaScript Properly | Web Developm...
Pingback: Learn JavaScript Properly – A Course On JavaScript | Otto Uusihakala
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.. 🙂
I am glad to hear, Raj, and I am sure you will be a great JS developer.
What’s up everyone, it’s my first visit at this website, and piece of writing
is in fact fruitful designed for me, keep
up posting these articles or reviews.
Hello, My version of the JS Quiz is here: https://github.com/wanwu/js-dynamicQuiz
(Note this uses jQuery for DOM traversal & elements.)
On jsFiddle here: http://jsfiddle.net/wanwu/mAcaM/embedded/result/
(code / editor: http://jsfiddle.net/wanwu/mAcaM/)
Many thanks to Richard for putting together this superb course and guide. You rock.
Congratulations, Wanwu. Very good work there on the quiz. Now, keep learning and keep coding and go build amazing stuff!
Hi all,
Finished quiz up to week 7. Maybe useful for someone else.
Here it is on github:
https://github.com/wanwu/js-dynamicQuiz
– 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.
Paul
Excellent work, Paul. You code like a pro already. You went with the whole kitche sink on your quiz 🙂
I like that the user can go back and change her answers and that you added cookie.
Pingback: Day 35. JAVASCRIPT: WHERE TO START & WHAT IS GSAP?
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.
Thanks,
Benj
Good question..
I had a similar question.
Vanilla JS vs. jQuery…. Seems like:
– for DOM traversal
– browser compatibility
– general UI
jQuery and other frameworks offer substantial benefits?
I had a long question on it but I can’t seem to post it here – am getting a ‘firewall blocked’ message?
Regards
Paul
… 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?
Paul, I fixed the issue where you couldn’t create a new blog post. Could you copy and paste your content and create a new blog post? This will make it easier clearer.
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.
The ORIGINAL question was about AngularJS n ot Vanilla..
That reply was to Paul, sorry. I just replied to your post.
Good questions indeed.
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.
Pingback: Thanks Jessica Hische. Now I want to learn to code... - DesignersTalk
Pingback: Javascript | Pearltrees
Pingback: Getting Good at Digital Strategy | Jon Litwack
Pingback: Thanks Jessica Hische. Now I want to learn to code... - Page 2 - DesignersTalk
Pingback: Code Diary - 1% Project
Pingback: Programming and web development - coding | Pearltrees
I would rather recommend Ruby on Rails as a prototyping language, if you’re the startup guy or entreprenuer, trying to learn how to code, on the internet.
Why Ruby on Rails on JavaScript?
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.
Hi James, I’m sorry about being a bit tardy.
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.
Hello. hmm, well, one quick and stupid question maybe…
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 ….
thx
Hi CC,
A few others have asked similar questions and the answers are above. I will answer here again.
1. You can use a web-based JavaScript editor like http://jsbin.com.
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.
Here is my first try at doing anything in JavaScript – really enjoying it so far. Not very good at the moment but I’m going to keep at it: http://jsfiddle.net/greenhulk01/LY36A/33/embedded/result/
Good effort there, Phil.
Keep implementing newer concepts and keep improving your JS skills.
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.
Just thought the practice may help fellow learners like me.
I like your site, Adam.
I just tried the first question on your homepage. It might be best to have the user enter a code-related answer, instead of an essay-type answer in the form of an sentence.
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 .
Haha ! Ignore the question ! It’s correct -_- . Sorry !
A other question 🙂 : I didn’t understand the section of “Document Modes” in Chapter 2 ! Any other reference to get it ? !
Thanks !
Good question, Adnane.
You can ignore that discussion abut Document Mode completely. The author was sharing some background information about a compatibility mode for IE5.5 and older browser.
As a modern developer, you wouldn’t be needing the information discussed in “Document Mode” in chapter 2. It is practically useless to you. It was more relevant about 4-5 years ago.
I answered your other question before I saw your updated comment that it was a mistake on your end. 🙂 No problem. I still have to update this post.
Thanks so much ! I really appreciate it 🙂 Good luck !
Thanks much for bringing this to my attention, Adnane.
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.
Help!
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..
I wish that you were correct Stanley. But I don’t think so … I am just typing out the very simple stuff as it appears in the first few chapters. It is not at all difficult to duplicate exactly.
I am wondering if I am somehow using JSFiddle incorrectly or something (?) since this is all new to me and I have no way to tell which end is up. (???)
Hi there,
Have you tried running the examples in a browser console rather than through JSFiddle? That might be a good way to narrow down whether it’s a code issue or a JDFiddle issue.
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.
yes my reply was for you.sorry for the bad English,i wrote it when i was sleepy.good luck with learning javascript.
hey Richard,
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 🙂
I AM excited about this journey
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.
I find myself using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide on top of it with greater success.
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.
This is what i came up with, it’s a good learning experience.
http://jsfiddle.net/Atlas_/smuC7/1/
Awesome tutorial… really motivated me to go beyond simply doing tutorials, and actually start building applications.
Here is my Quiz app… I need to add better quiz content, but fairly happy with overall application logic and UX. I will continue to refine and improve as I learn more about JavaScript.
http://jsfiddle.net/basixmike/nxv57/
That is a sweet little quiz, Mike. 🙂 Good work and keep coding, Mate.
Next week I’m starting a new Learn JavaScript Properly reddit study group.
Post a comment if you’re interested in joining.
http://www.reddit.com/r/learn_js_in_seattle/comments/1tziaa/new_study_group_starting_january_2014/
Would love to join your group!
I would love to join the group too.
Hi Matt,
Thanks for starting the new study group on Reddit. I just tweeted the link. And I will add the link to this blog post in a couple minutes.
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
Great guide.
By the way, when you make quiz, here is suggestion for app you can make:
1. Music player(html5 webstorage to store songs, audio API, bootstrap for design so it can be used everywhere, jquery for DOM and animations etc);
; )
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!
Give Zakas a go. It might be easier.
Hey friend, I had same problem. Definitive Guide was very dry for me, and I could not understand anything.
So I started to search other ones. Very good book with exercises that helped me is:
http://www.amazon.com/Smarter-Way-Learn-JavaScript-technology-ebook/dp/B00H1W9I6C/ref=sr_1_3?s=books&ie=UTF8&qid=1394646022&sr=1-3&keywords=javascript
Its very easy to understand, very little text, much more exercises. I recommended you, its cheap to.
Hello folks. i am very interesting in starting next Monday. Does anyone wants to form/create new/study group?
Code Academy is a joke…
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.
Highly recommend taking CodeAcademy OUT of this.
And what do you recommend for Javascript instead of codecademy?
Try this! codecombat.com
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.
Richard,
Since ECMAScript 6 is around the corner, people who are learning ECMAScript 5 or Javascript now are just wasting their time?
Tha same goes with AngularJS since AngularJS 2 is around the corner too?
Thanks
Are there any major differences in AngularJS and AngularJS2? I firmly believe that only the syntax changes, but the concepts still remain the same.
Hi,
This post has been a huge help to me as I learn javascript.
I was wondering if there is a reason for skipping chapter 5 of “professional javascript for web developers”?
I am nearing the end of week 2. I want to make sure I learn everything properly!
maybe a late reply but it was merely recommended reading ch. 6 first. In the next step was to read ch.5
Do you have any thoughts on IntelliJ and how it differs (better or worse) than webstorm. I’m using ST2 now but I’m sure to migrate to a more javascipt centric IDE once I’m at that level.
here is a go for a pure javascript quiz,
I think I could have done it easier, man did it take a lot of work.
I will now do the same quiz with jquery in 1 hour
http://jsfiddle.net/Mehmetcan/sFr5f/78/
Here is my second try with jquery and with some nice advancements
http://jsfiddle.net/9N542/19/
I tried reading “JavaScript for Web Developers” and I just could not get through it. It’s about the driest, most boring technical book I’ve ever (tried) to read. I do_not recommend it.
Hi Richard,
I just want to sincerely thank you for posting the JavaScript roadmap. I just started week 1 and it’s been great. And your site has so much useful information.
Thanks!!!
Thanks for the great course! JavaScript is my first programming language, and this guide made learning it much less intimidating.
My code for the quiz project:
https://github.com/umgauper/JavaScript_Quiz/blob/master/js/quiz.js
Hi,
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.
Thanks,
Ric
I love this, I started and finished this roadmap a while back but can’t stop coming again for new stuff.
To everyone: join the “learnjavascript” network on jellyblub.com
thanks sir or madam
Hi,
Thanks, nice job!
Is there a group starting in Autumn 2014?
Thanks!
Just curious but why can’t the 5 little projects be found via the Codeacademy front end? What am I missing?
Now I am sure that there is someone who knows exactly how I feel trying to learn programming. Those words of encouragement are awesome! I will be back to give my testimony. Thanks for the push.
Pingback: Working Progress - May 3
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!
Pingback: Learn Meteor.js Properly | JavaScript is Sexy
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.
Hello,
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?
Thanks for the post
Brackets (www.brackets.io) is also a great editor for developing web applications.
Hi,
i am going through “Javascript: the definitive guide”, but for some reason only certain examples compute in firebugg or jsfiddle … am i doing something wrong?
thanks for your help!
Yvan
Pingback: So I want to be a Front End Web Developer…. | A blog about HTML, CSS, and Javascript
Pingback: Design Process: Font Quiz - JMN
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.
Pingback: sexy.com | JavaScript is Sexy
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.
That is very disappointing
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.
Richard,
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.
Thanks for your time and effort here.
Rick
Hi Rick,
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?
Thanks,
Joe
Hi Joe,
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.
Joe,
I see that Richard has already responded and has the old guide still up for us ‘legacy’ folks.
Thanks Richard.
Rick
Hi Richard,
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.
Pingback: Working Progress - October
Is it November 10th yet
Hi Richard,
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.
Pretty please.
Regards,
Daniel
Since ecmascript 6 is around the corner, I do not think this study guide is %100 useful anymore..
Hi, I’m wondering if the second edition of the Professional Javascript book would be adequate for following this walkthrough. Are the two editions significantly different?
Andrew
Richard,
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!
Brendan
Hello,
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?
Pingback: Crazy Week | Valkyrea Learns To Code
Hi, thank you for this excellent tutorial 🙂
Pingback: Codecademy… Javascript | Valkyrea Learns To Code
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.
Pingback: I’m using a different book – Beginning JavaScript by Paul Wilton | Dustin Henrich
Eagerly waiting for the new JS courses to launch! And, you will actually help people with marketing themselves to find the dream job? WOW!
When will these 4 courses of javascript will be coming ?? Can’t wait for it !!
Pingback: 「译」如何正确学习JavaScript – 千月殿 -
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!
Hi Paul, Kamrul, Himel and Everyone else inquiring about the upcoming courses:
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.
And here are a few career paths you will be able to choose from:
I plan to take your courses when they come out…
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…
Hi Joe,
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.
Hello again,
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.
Joe
a big thanks for the study guide!, I am now on first week, im taking my time now each day, im glad to share this to my friends!
I bought javascript 7th Edition Bible by Danny Goodman. Can I still follow your lessons by following the right section in the book I have corresponding to each of your lesson?
hai sir, is it possible to learnt java script in w3 school or not.may i know best way to learnt java script please
How to learn java script in the easiest way
please guys some one could help for learning java script
🙂
I just switched from Ruby to JavaScript and it is really weird for me. I want to learn JS from the ground up, ins and out about this language.
Cheers
Hi Richard,
I was wondering if the courses will offer any “taster” for people to try and see how it’s structured before paying?
Thanks
Hi Natalie,
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.
Pingback: Programming | Pearltrees
Pingback: Development | Pearltrees
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.
Pingback: JS | Pearltrees
Pingback: Goals for 2015 | Jonne Sälevä (j0ma)
Pingback: My path to learning Javascript | Anthony Skelton
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.
Thanks
Pingback: How to Learn JavaScript Properly | JavaScript is Sexy | The Winding Journal
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?