Learning JavaScript for Non-Developers

I remember being exposed to JavaScript for the first time in 2016. I was transitioning from a Quality Assurance Analyst role to a Front-End Developer role at the digital marketing agency I was working at — which was daunting since I didn’t know how to code! There were so many resources out there, so much advice, and so little time. I had to start cranking out client-side features pronto since I already got the job.

Several years and roadblocks later, I’ve created a list of some pointers and free resources that brought me from newb to.. intermediate? Hopefully it will get you ramped up faster than it took me. This guide’s intent is to get you past beginner JavaScript and build a proper foundation (not getting your first job asap).

Why JavaScript?

JavaScript started out as just a client-side scripting language in the browser, but it is now ubiquitous and works on servers and IoT devices, and is used to create mobile and desktop apps.

Lay out a Roadmap

I hopped around a ton of resources, frameworks, and other people’s code when I first started learning JavaScript because most of the material I was exposed to was way too advanced for the level I was on. Below is a roadmap I’d recommend following:

  1. freeCodeCamp’s “Javascript Algorithms and Data Structures” section
    freeCodeCamp is the best resource for learning vanilla JavaScript hands-on without worrying about environment setup, frameworks, platforms, etc. It’s completely free and I’d recommend it as the first place to start since it doesn’t assume any current knowledge of programming or JS. You also get a certification / portfolio projects at the end :)
  2. Practical JavaScript | Watch and Code
    After going through all of fCC’s exercises, learn how vanilla JavaScript is used in the real world with Practical JavaScript. Gordon Zhu, a software engineer who used to work at Google, provides a free learning bundle and a premium one. The free one is good enough for now although you might be tempted to purchase the premium one after you’re done.
  3. Chrome Dev Tools
    Practical JS introduces Chrome Dev Tools, which is really useful for debugging. You can learn it in depth on Google’s site. It does a good job of going through all the features in an understandable way.
  4. JavaScript Function Executions
    What is a call stack, heap, queue, event loop? These phrases would pop up on Stack Overflow or various other forums in answers to complex problems. I would always google for an answer — but the concepts were so abstract that I couldn’t really wrap my head around it. This video of Philip Roberts explaining function executions with visuals that finally connected the dots for me.
  5. You Don’t Know JS
    This is a 6 book series available for free on GitHub written for developers who have gone through all the standard JavaScript exercises and tutorials. It takes you through the trickier parts of JavaScript that most developers struggle with such as scopes and closures.
  6. Eloquent JavaScript
    There’s a lot of JS books out there that are highly recommended for beginners. One of the books I kept seeing was Eloquent JavaScript so I decided to dive into it early on, and gave up after a couple chapters because I couldn’t really follow the writing. Unpopular opinion but I do not recommend it as a first book, although Marijn Haverbeke’s poetic style makes it a pleasant read when you have an intermediate understanding of JS.
  7. Frameworks and Libraries
    Now that you’ve got JavaScript pretty much covered, there are so many tools that have been created by other developers to make your life easier. Some of the most popular ones are Bootstrap, Jquery, React, Angular, Vue, Express, Meteor, React Native, Node, Ember, Mithril, Polymer, Electron, etc. The reason frameworks are so far down the list is that if beginners are introduced to a framework too early on, their programming foundation isn’t set yet and they become ingrained in said framework. You don’t want to be binded to a framework since it makes it harder for you to switch to another one when you need to.
  8. Data Structures & Algorithms
    Programs are comprised of data and algorithms. You’ve already touched on some data structures already at this point (arrays) and you’ve been writing algorithms (loops). When I first embarked on learning these topics, I was thrown off by all sorts of foreign words like big O, DP, bloom filter, etc. I’d proceed to Wikipedia and be bombarded with even more foreign phrases and explanations that were way over my head. I’m still working on deepening my understanding of these concepts, but these are some great resources I’ve found so far:
    Big O Notation
    Computer Science Concepts Explained

Good luck and let me know if there’s anything I missed!