JavaScript Learning Road Map

Self taught front-end developer, Zell Liew (who is also a writer, designer and speaker) regularly posts inspiring articles on his blog about web development tips & tutorial etc and often shares some very inspiring tips for self-learning. This week I happened to browse his blog and noticed some very useful, inspiring & relevant post about Learning JavaScript.

As a reminder to myself, I am summarizing his tips here to guide my own self-learning JavaScript Journey this year (2018).

Overcoming JavaScript Fear

Learning JavaScript can be scarier to lot of learners especially without formal programming school. Many people fail and loose motivation to continue learning. It is natural to be afraid of JavaScript.

  • JavaScript can be learned. Learning fear is part of resistance. If we give in to the temptation, the fear, the overwhelm, the confusion, or whatever it throws your way this is a precursor to giving up. If some basic steps are skipped, then understanding materials we’ve read, or remembering what we’ve learned becomes more difficult.
  • Learn Slow & Pay Attention to Basics. Dig into documentations, internalize fundamentals, figure out new best practices. Experiment. Code. Fail with your experiments. Start another. Do it over and over, tweaking till you succeed.
Four Phases of JavaScript Learning

Zell Liew compares JavaScript learning phase to similar to growing up (baby, child, teenage and adult). These learning phases are divided into four phases as follows:

Phase 1:

Focus on learning thoroughly the JavaScript syntax to better understand what are things like objects, arrays, functions, etc.

Phase 2:

After becoming comfortable with basic JavaScript syntax, focus on learning methods provided to you by the DOM. Learn about selecting elements, traversing the DOM, adding and removing things from the DOM, adding and removing event listeners, changing styles and classes.

Try building simple things like accordions. Maybe even showing a menu when a button gets clicked. It’s okay to copy-paste at first, but make sure write your component from scratch afterward so you understand the underlying mechanics.

Phase 3:

In this phase, focus is to learn best practices from books and experts all around. Absorb what you can, then, rebuild what you’ve built. Use the new practices you’ve learned to internalize them.

Start learning about object oriented programming (OOP) and functional programming (FP). You’d also want to start learning about querying APIs from places like Github and Twitter.

Phase 4:

At this learning stage, now focus on learning writing clean code, learn JS best practices and following following three learning path:

  • Learn a front-end framework (like Angular, Vue or React). This path prepares to able to build complicated web applications that can take a ton of work if build with pure JavaScript.
  • Learn Node to build a back-end. This will lead to a full-stack developer path. It requires learning to about databases and server configuration etc
  • Dive even deeper into JavaScript. This path leads learning to write better, cleaner code. Eventually, it will help you better at both Node or any JavaScript framework you intend to pick up.

Note: This post was inspired by Zell Liew’s articles which also the source of most content of this post. This post is cross posted from here.