Out of the sea of learning options, I found these to be the most effective
It’s not easy teaching yourself web development, even with all of the hundreds of resources now available online. My biggest problem was that I couldn’t find one place where I could go from beginner to advanced at a pace I felt comfortable with. I would end up jumping from one tutorial to another, frustrated when the next tutorial was either too easy or too difficult.
It makes sense that there is no one-stop solution; people have different learning preferences and different goals for learning in the first place. My goal was to be able to build RESTful applications and become proficient enough to enter hackathons. I did not have the goal of getting a job as a computer programmer. If your goals are similar to mine, I would recommend these resources to learn web development, JavaScript in particular.
When learning the fundamentals of JavaScript
freeCodeCamp
Far and away the best free resource to learn the ins and outs of JavaScript is freeCodeCamp. This is a nonprofit website that can take you from beginner to job-ready if you are diligent in finishing the challenges. Quincy Larson and his team have built a powerhouse in terms of synthesizing small exercises with larger projects that apply your knowledge. Some of the basic JavaScript challenges may seem tedious, but looking back, I can say they are all used in practical applications and are worth knowing.
The curriculum is constantly expanding too. When I first found the website, it focused primarily on HTML, CSS, and JavaScript. Now it includes lessons on data visualization, back-end development, version control, and developer tools. It’s possible this will be the only resource you will ever need, but at the very least it will show you the fundamentals of JavaScript.
When learning a front-end framework or library
Code School
Code School uses a mix of video tutorials and in-browser activities to help beginners in a wide range of technologies. The courses all have a fun theme and each video starts with a cheesy song: everything screams “beginner friendly”. I found Code School to be at its best when trying to learn a particular JavaScript framework like Angular or React. They do a great job of breaking down the commonly used tools and the advantages of using them. Lessons are also reinforced using mini applications based on the theme for the course. Even though the videos seem like they’re designed for grade schoolers, these tutorials will show you enough to get started on any real world applications.
I’m stretching the definition of “free” when I recommend this site. Most of the courses require a subscription, but some of them are accessible for free and Code School is known to open up all courses for free at certain times of the year. You could also just pay $29 for a month of knowledge-bomb goodness.
When building your first application
So at this point you’ve learned how JavaScript works and have been exposed to some tools to help build JavaScript applications. Now it’s time to actually make an application of your own. This part isn’t as easy… When faced with a blank text editor, it’s like you forgot everything you learned. You’ll also realize you have gaps in your knowledge like using the command line and structuring the files in your application. That’s where code-alongs come in!
Codementor
Code-alongs are basically where you can see people build a piece of software from scratch. An experienced coder will tell you his or her thought process behind each build-step and bug that needs fixing. There are plenty of people doing code-alongs on YouTube and Twitch, all you have to do is find one where the instructor is building something similar to the application you want to build.
I personally love the code-alongs put out by Codementor and TechWarriorz on YouTube. They go at a nice pace for beginner/intermediate learners and really get you excited about what you can build using JavaScript. These are videos you can just watch, but I highly recommend building along with the instructors to cement your learning.
Like I said earlier, this handful of resources won’t apply to everyone. I can only speak for myself and hope this post will help others on their journey to learn JavaScript. If you have other resources you would like to recommend, I would love to hear about them in the responses!