You Can Learn How to Code
young man learning javascript

How Long Does It Take to Learn JavaScript?

The question all aspiring web developers want to know is: how long will it take to learn JavaScript? One question I field regularly is, can I learn JavaScript in a week? While you can learn some JavaScript in a week, getting to an intermediate level required for entry level jobs will take closer to nine months. Many people find they can pick up HTML and CSS relatively easily but discover that it takes them lo. Since JavaScript is an essential skill for all front-end web developers, it is important to learn it well and to develop a mindset that will allow you to work through frustrations.

Today, I am going to address the skills you must acquire to become a Junior Front-End Web Developer and attempt to give you a realisitc idea of how long it takes to acquire these skills. It may take you more or less time, depending on your experience level and if you are strategic in how you approach your JavaScript education.

Learning JavaScript Requires a Strategic Approach

It took me a longer time than necessary to learn JavaScript because I tried to learn jQuery first. I had heard that it was easier to learn than JavaScript, so I decided to start with it. This was my first mistake. When I started to learn jQuery, I didn’t yet have a strong understanding of DOM manipulation, and I ended up getting the JavaScript and jQuery syntax confused. I could have saved myself a lot of time and frustration had I learned vanilla JavaScript first, so that is what I recommend now if you are starting to learn JavaScript.

There is a lot of confusion about which parts of JavaScript to learn first, so I will outline a path. After you are comfortable with jQuery (step 2), you will likely have enough knowledge to land a job as a Junior Front-End Web Developer. Your first goal should be to get to that point, where you are comfortable with intermediate JavaScript and can build a jQuery project or plug-in on your own.

Step 1: Learn Vanilla JavaScript

Vanilla JavaScript refers to JavaScript code that is not enhanced by any libraries or framewoks. The level of difficulty ranges from the very basics of the language to intermediate and advanced programming concepts, including hoisting, closure, and prototypal inherritence in object-oriented programming. In order to get a job as a front-end web developer, you should have at least an intermediate knowledge of these concepts. You certainly don’t need to have mastered functional programming or understand every aspect of the prototype chain, but hoisting, load order and closure are important concepts for you to understand before you hit the pavement with your resume.

Vanilla JavaScript is making a resurgence, now that compatibility across browsers is less of an issue. To see some examples of Vanilla JavaScript, you can check out this website on Vanilla JS. Even though the website was created as a joke, it can give you a feel for the JavaScript language if you’re not yet familiar with it.

Depending on how much experience you have, you can learn the fundamentals through intermediate JavaScript in six to nine months. One course that helped me speed up my education was Colt Steele’s The Web Developer Bootcamp, about which I wrote a detailed review that you can check out if you’re looking for a course to help you learn JavaScript.

Step 2: Learn jQuery and React

jQuery is the most common JavaScript library. Web developers like to use it because it allows you to accomplish more with fewer lines of code. There is some confusion about whether or not jQuery is actual JavaScript. The answer is yes, jQuery is JavaScript. The syntax, however, is slightly different. jQuery is a good choice if you’re building a plug-in, complicated animation or an image slider. If you’d like to see some examples of jQuery, you can take a look at W3Schools, which has examples and explanations for many jQuery methods.

It will likely take a few more weeks to learn enough jQuery, which you can also learn through the Web Developer Bootcamp course.

Once you have learned jQuery, you can learn React.js next, which is another very popular front-end library that was invented at Facebook. In this post, I outline some free and paid courses where you can learn React.js.

Step 3: Learn Relevant Front-End Frameworks

Before we discuss which libraries you should learn, I’d like to mention an important difference between libraries and frameworks. While libraries allow you to pick and choose the features and methods you’d like to add to your existing code, frameworks have their own unique structure into which you add your code. Frameworks have their own syntax that you’ll have to adapt, which is why it is important to have a solid understanding of the JavaScript language before you start to experiment with frameworks.

So, which JavaScript frameworks should you learn? It will largely depend on what kinds of projects you’d like to build and where you’d like to work. Those two things will dictate which framework you’ll learn first. Ember.js, for instance, is great for web apps that are rich in features. Angualr.js, on the other hand, is ideal for complex projects and if stability is required. It is a solid framework that is supported by a large community of developers.

The other consideration is, which companies would you like to work for? My recommendation is that you take a look at the websites for the comapnies you’d like to work, examine the source code and then identify the frameworks they use (if any). It is important to note that because JavaScript frameworks come and go, you will not be able to learn them all. With that in mind, you can make strategic decisions about which frameworks you’d like to learn. You can concentrate on one or two and build a couple of web apps that require the frameworks of your choice.

Currently, three of the most popular frameworks are Angular and Vue. Other examples of frameworks include Ember, Backbone, Knockout and Meteor. Once you have an intermediate understanding of JavaScript, you can build a few projects with a new framework in one to three months, depending on the complexity of your project.

Step 4: Learn Back-End Web Development

Backend web development includes learning Node.js, Express.js and Mongo DB, which is a relational database. Node.js moves JavaScript to the server or back-end side and allows us to run JavaScript code outside of our browser. In addition to node.js, you’ll use npm, the Node package manager. There are an immense number of packages for Node.js, due to the large number of developers who have contributed to it. While these package managers make programming tasks easier, they can be difficult to debug at times, so it’s best to tackle back-end JavaScript once you’ve had at least a year of experience. A diligent programmer can learn the basics of Node.js in a few weeks through the Web Developer Bootcamp course in which you’ll build out a JavaScript project that requires a front end and a back end.

I hope this article has clarified the order in which you should tackle JavaScript topics. To re-cap, you’ll start with vanilla JavaScript. Once you have achieved an intermediate level of mastery of the JavaScript language nad understand complex topics like hoisting and closures, you are ready to move onto jQuery. After you’ve built at least one plug-in with jQuery, you are ready to move onto working with frameworks and back-end JavaScript programming. You can begin applying for junior-level front-end web development jobs once you have an intermediate-level understanding of the JavaScript language and can work with jQuery.

If you have any questions about the JavaScript learning path I have outlined, feel free to contact me at laura.white@youcanlearnhowtocode.com or leave your questions in the comments. I will do my best to help you.

 

16 comments

    1. Hi William,
      JavaScript is responsible for the interactivity on your webpages. If you ever see an image slider, a new email in your inbox even though you haven’t refreshed the page or some cool animation, all of those things are accomplished with JavaScript. Sometimes you can add animation with CSS, but JavaScript is a powerful scripting language. It allows us to interact with the DOM, or the Document Object Model, in order to manipulate webpages and create engaging experience for users. I hope this helps! If you have any other questions, feel free to let me know.
      Laura

  1. I like the idea of actually checking out the website of the employer that I’m interested in working for. Such a simple concept, but I didn’t even think of it! I really appreciate how you summarized the whole process at the end of the article so I can check each off as I go! Thank you!:)

  2. This is very helpful because you are breaking it down in steps the process of learning JavaScript the right way. It is interesting that it takes 9 months to learn but I am glad you mentioned that because it gives the proper expectation.

    This is such a great skill to learn and it not only can assist me as a blogger but also can open doors for other monetary opportunities.

    Thanks for sharing.

    1. You’re welcome, Nate! There are plenty of people who learn JavaScript faster than nine months, particularly if they are able to attend a bootcamp and learn that way. For a diligent students learning on their own, it can take a little longer. Part of the reason is that JavaScript is such a vast programming language that it’s easy to get distracted and learn things out of order. You are also correct that learning JavaScript will help you as a blogger. You can add more interactivity to your webpages and create delightful online experiences for your readers. You can add animation, images sliders, fun quizzes and web apps… I could go on, but you get the idea! Good luck with your blog, and if you try to add a bit of JavaScript and get stuck, please feel free to get in touch.
      Laura

  3. Thank God for WordPress is all I have to say. I know it has got to be a challenge to get into JavaScript. I think if I desired to it would probably intrigue me enough that I would eventually like its challenges. My hats off to all that are good at using it.

    1. Hi Ronnie,
      The secret is to be okay bumbling your way through JavaScript. On some level, that’s what we all do. There isn’t anyone out there who is an expert in all aspects of JavaScript. It’s simply not possible because the language is so deep. Even Kyle Simpson, one of the most experienced JavaScript scholars and teachers, says that he is not a JS master. That was such a relief when I heard that, so I share it with you as well in case you decide to change your mind and learn some JavaScript. By the way, I started out with WordPress just like you. I still enjoy using WordPress, but a proficiency with a content management system is the first clue that you can handle web technology. I hope I can convince you to give JS a try! It makes your webpages fun and engaging for your visitors.
      Laura

  4. Hi Laura,

    Web development is something I am really interested to learn because I am thinking of getting into freelancing. I am not a savvy tech and I am well aware it will take a lot of time and effort to learn even the basics. You mentioned a time frame of 9 months, well, it could take much longer right? I regret not taking up IT or Computer Engineering. Do you suggest having a formal education?

    This walk-through to learning JavaScript gave me a better understanding of the kind of work I need to put in should I pursue my plan of learning how to become a web developer. Thank you so much. I will be looking around here for more information about JavaScript.

    1. Hi Aysanna,
      A formal training is not necessary at all. Most web developers are self-taught. JavaScript is taught formally at a few institutions, particularly at community colleges, but there is honestly no substitution for putting in the time at your computer. To answer your other question, yes, it can take longer than nine months. It took me longer, but I have seen some web developers make the leap to full-time work in six months of self study. Those who successfully make it through intensive bootcamps can do it in even less time. With my training, though, I found that I really needed to test the code and play with it and look things up when I didn’t understand them. If you keep doing that, you will continue to gain proficiency. If you need any help along the way, Aysanna, please feel free to get in touch.
      Laura

  5. Wow, this is a really good article for me… Outside of my normal projects I have ideas for new web apps that I can’t build without JavaScript. I’m going to keep this bookmarked to refer to it as I learn. Really well made article! Wish me luck as I learn!

    1. Best of luck to you, Izzy! So glad you found this article useful. Feel free to write to me if you have trouble adding JavaScript to your webpages. There are other resources I can recommend.

  6. Coding actually seems kind of easy after reading your post. I am no computer genius whatsoever, and usually when I try to learn I just give up in a heartbeat because it seems so frustrating. Your post seemed to eliminate all of the scary stress of the learning process. I was actually intrigued and very glad I came across this one. Thanks for the information.

    1. Thanks, Angelina! I’m glad this post helped you see that learning how to code is, indeed, possible if you’re willing to put in the time. I wouldn’t say that it is easy, but it gets easier as you build your skills. The more you work with a programming language and can learn how to troubleshoot, the more valuable and in-demand your skills will be. If you need help identifying a course to help you get started, I’m happy to help.

  7. What a fantastic article Laura! I have been running up and down like a headless chicken since February this year because I want to become a web developer by all means. The challenge has been not knowing the exact learning path. I enrolled for a number of courses at Udemy including the Web development bootcamp by Colte Steele but I kept on looking further withought settling for a particular course. Good enough I got a little comfortable with HTML and CSS. Until last week, I decided to religiously follow Colte’s course and I can tell you, I see a big change and I’m almost competing the DOM section. Your article gives exactly the right path to take and helps on exactly what to look for when searching for further resources. What I’m stuck with is how to apply with what I’m learning. Could you maybe have some ideas of small projects I can work on everyday to practice and perfect my knowledge?

    Thank you Laura.

    1. Congratulations, Steven! I’m so glad that Colt’s course is working out for you. Hopefully you’ve continued to move through it and are nearing the end. After completing his course, I’d recommend learning ES6, which is JavaScript syntax that was revised. It’s also called ECMAScript2015. I know, I know, just when you think you’ve learned all the JavaScript you need, you need to learn new syntax. It isn’t too bad, though, and once you complete Colt’s course, you have a couple of different options. The easiest one is Stephen Grider’s ES6 JavaScript. The other option is The Advanced Web Developer Bootcamp, which Colt teaches with a few other people. Personally, I’d recommend Grider’s course because it will get you where you need to go faster. While there are other JavaScript courses that now implement ES6 from the beginning, I have piloted three of them and don’t think they are anywhere near as good as Colt’s course that you are taking now.

      So, now that we have that bit out of the way, onto your actual question. With JavaScript, it’s important to understand objects really well, so I am a big fan of building projects like calculators that make strong use of objects. Once you complete Colt’s course, you will also want to decide if you want to concentrate more on the front end of websites or the back end. One way to tell is if you absolutely love CSS and don’t mind dealing with JavaScript browser quirks, then you can concentrate on front-end projects, such as adding some animation to an existing webpage. You can start small, by adding things like window sliders to an existing website and building up from there to creating complex quizzes. One cool JS project that I was involved in was the Amana Troubleshooting Guide. Think about the JS operating behind the scenes when you click on an option. And finally, one project that I see that never gets old is creating a JavaScript memory game. Others have done that, too, so you can take a look at some examples and then create one with your own code. Really, the possibilities for projects are absolutely endless! Good luck to you, and I hope your JS education continues to go well. I applaud you for sticking with it.

Leave a Reply

Your email address will not be published. Required fields are marked *