My Three Months of JavaScript Learning

While writing my Looking Back 2017 post, I had set Learning JavaScript Deeply as my major goals for 2018. As planned, I started learning JavaScript from January 1 and maintaining a daily learning journals. To facilitate this process, I have setup two private learning site Learn Code & JSBlog, where I collate learning resources and write my learning notes. This post is overview of my learning/coding progress for the first three-months of 2018.

My Learning Schedule

Beginning New Year 2018, I have been learning JavaScript a few hours (2-3 hrs.) on daily basis (except few days off here and there). Before assessing my learning progress, I have to make it clear that I am a spare time learner. I have a regular daily (11-12 hrs) job responsibility and I have to fit my learning schedule according to my daily day job, some days I get more done than others. My learning hours are erratic except early morning (before work) 1-1.5 hrs., often I couldn’t get more consistent learning hours. Nevertheless, I make an every attempt to devote couple of my early morning hours to learning/practicing JS.

Occasionally, when there are not many activities at my day job, I spend some time on coding otherwise I mostly spend spare time reviewing or searching learning tutorials.

My Learning Road Map

During the first week of January, I did research to determine my JavaScript learning path and decided to follow the road map suggested by Zell Liew. I set up an Learn Code ( mostly a private site) and later yet another JS Blog site to document my JS learning log site.

Overview of Time Spent in JS

As I indicated above, I could afford to spend only a couple of hours daily in JS learning. Following is an overview of my time spend on JS learning:

  • January – About 10-days in CSS Grid to create HTML / CSS based Sandbox / demo site with CSS Grid layout. Setting up learning road map and CSS Grid layout. I spent about 10 days in JS learning.
  • February – March: Devoted entire time to JS learning and about week or in re-evaluating learning roadmap. After some blog posts research, I discovered another good JS tutorial site – The Modern JavaScript Tutorial.  After some initials reviewing, I appears to me that this is useful and resourceful site. I have been spending some time going over this and completed Part 1: JS Fundamental section.
What I learned
  • Non-structured (Self-learning) can be frustrating. In self learning, our best friend is google for everything we don’t know. Because there are numerous resources, tutorials, post etc on every topic but figuring out the most useful one is a daunting task. In addition, these tutorials, posts etc varied wildly in their content and may not be suitable for the beginners.
  • There is no single learning resource: Unlike in class room where subject instructors recommend books and other resources, self-learner has to figure out themselves based on trial and errors.
  • Learning from W3schools tutorials: The JavaScript tutorials are short with hands-on exercise but with little explanation. Still these tutorials are great to get basic understanding of JS syntax.
  • Understanding of variables, scopes & hoisting. Understanding of JS variables and its declaration & use requires a better understanding of terms like scope, hoisting, closure etc. It really confused me for while but only through ES6 updated tutorials, these concepts become clearer to me.
Lessons Learned
  • Learning JS Fundamentals is Must. Because JavaScript is often known by most programmers as “broken language”  it is suggested that without fully understanding the basic language, life may become much harder at later stages when understanding more advanced topics.
  • Learn from a Few Tutorials: Concentrate on few good tutorials to learn basics JS language first.
  • Learning variables: Because most tutorials are written pre ES6 and not updated, understanding variables through these tutorials is very confusing. When declaring variables using var keyword, to get full grasp of terms like variable scope, variable hoisting etc becomes very confusing even for experienced JS developers.
  • Learning Objects & Functions: As it is often said “Everything is Object in JavaScript”.
Goal for Next 3-months
  • Now that I have identified better tutorials & learning guides, I plan to focus on understanding the basic JavaScript language and handling DOM.
  • I plan to devote next 3-months to better understand & practice JS language, its terminology (eg. scope, hoisting & scope etc) from The Modern JavaScript Tutorial.
  • Time permitting, start some practical small projects to practice my learning.
Learning tutorials posts (in-preparation)

Tania Rascia, the author of many JS tutorials in DigitalOcean that I follow and many others JS developers write they learned through writing tutorials about the topic they learn. I have started some drafts posts on variables, let and const and understanding hoisting, scope & closure. I plan to complete these posts in the next quarter. I must develop & improve my writing habit to  complete my learning note posts.

What Other Developers Say?

While preparing this post, I did some Googling to find out what others JavaScript learners say about their learning experience. I found Kleo Patrov’s post in Hasnode very helpful& inspiring. At this stage of my learning, I have some commonality with Kleo Patrov‘s experience(eg. feeling exhausted, frustration, not being able to understand much, etc.).

In his post, Kleo Patrov suggested some secretes of successful developers and when I reflected I seem to possess some of those traits, indicating I least I have a chance to succeed.

  • Love what I Do. I am passionate & enjoy what I am doing (learning JS). This is shared by many successful people especially if it is self-learning. This involves sticking with daily routine, giving up social activities. Like others, I also posses frustrations, burned-out and other symptoms that most learners go through.
  • Look for New Development. This is important for learning any new technology because it is constantly developing.
  • Learning any Programming Language is Not quick. Learning any programming language at any School may take more than 10,000 hrs of learning, followed by practice, practice …. and more practice. It’s just impossible to master any programming language with some tutorial lessons or short on-line courses.
Developers & Blog sites

The following tutorials & blog sites I found most resourceful and helpful in my JS & CSS Grid layout learning adventure.

1. JS Tutorials

The Modern JavaScript Tutorial
From the basics to advanced topics with simple, but detailed explanations. I discovered this while doing research on understanding variables scope, hoisting & closures.

How To Code in JavaScript – Digital Ocean.
JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive.

W3Schools JS Tutorials
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.

MDN JavaScript Guide
One of the best and authoritative guide that shows how to use JavaScript and gives an overview of the language. An exhaustive information about a language feature can be found in MDN JavaScript reference.

2. CSS Grid Layout

Rachel Andrew [ GitHub  | Twitter  | CodePen ]
Web developer, speaker and author. She is the authority in CSS Grid Layout and has popularize its use in web layout through her blog posts, books & conference workshops.

Jen Simmons  [ GitHub  | Twitter  | CodePen ]
Designer Advocate at Mozilla. Creator of Firefox Grid Inspector. Member of CSS Working Group. Teaching you how CSS Grid changes everything web graphic design.

Morten Rand-Hendriksen [ LinkedIn | GitHub  | Twitter  | CodePen ]
Senior Staff Instructor, LinkedIn Learning and Lynda library. He writes about web development and design blog focusing mainly on CSS (grid & flex box), WordPress theme customization & JavaScript.

3. JS Developers

Tania Rascia [ GitHub | Twitter | CodePen ]
Web Designer/Developer. Tania’s How to Code in JavaScript tutorials are concise and well written.

Wes Bos [ GitHub  | Twitter | CodePen ]
Full Stack Web Developer & Trainer. He writes tutorials or blog posts in Front End Dev to ServerSide JavaScript and others.

Dmitri Pavlutin  [ GitHub  | Twitter | CodePen ]
Front-end developer who enjoys JavaScript and React. He JavaScript blogs are well written, through and very informative even for beginners.

Zell Liew [ GitHub  | Twitter  | CodePen ]
Web Designer, Developer & Teacher. Zell is well known writer and writes simple and understandable blog posts in web development and JS.

Todd Motto [ GitHub  | Twitter ]
Todd is a JavaScript developer and mentor specializing in teaching Angular. He writes popular Angular and JavaScript blogs.

Wrapping Up

Before I made my decision to Learn JavaScript, I am fully aware that learning any programming language without previous programming background is not easy. Kleo Petrov has succinctly written that it is even scarier to professional developers. I have just began my JS learning adventure with only small actual hours of learning / practicing. It is often said that to learn any programming language takes more than 10,000hrs with lot of hands-on practice on real-world projects. At this stage, most JavaScript code appear foreign to me, but at least I seemed to have overcome my fear of confronting it head on. The next three-months to end of the year is crucial before making an reasonable judgement on my learning progress.