I am embarking on a journey to a deeper understanding of the Javascript programming language. I have completed a handful of courses on JavaScript, and interact with it regularly as I build user interfaces in React and Next.js in my current role. The reliance on pre-built components and the necessity of rapid project delivery have left me grappling with not understanding how all of my code really works. I need to gain a firm handle on plain old JavaScript so that I can move past getting things to ‘work’ and understand why and how they work.

My current role

I want to talk about my current role a bit to give a clearer picture of where I am in my programming knowledge. My first post gives more detailed information about my background however a couple of years back I completed a few HTML and CSS tutorials and the very basics of JS. My Mom needed a website for her business at the time so I built one using Webflow. Webflow is a no-code platform but it allows for full customization and therefore requires you to understand HTML and CSS, otherwise you won’t accomplish much. JavaScript is handled by adding what they call ‘interactions’ but you really don’t need to understand how JS works to use these.

After building this Webflow site for my Mom, I spoke with a friend who is a developer, who happened to be in need of a Webflow developer for a couple of projects he had coming up. In fact, he was going to look online for a freelancer the next day and I said that I would love to give it a shot since I completed a site recently. That was a couple of years ago and I have been contracting with his agency ever since.

The first year, it was mainly marketing sites built on Webflow, plus some HTML emails, and app user interfaces using CSS frameworks like Bulma and Tailwind CSS. I was not required to add any interactive elements, simply to build the UI. I started using some Javascript to implement custom solutions on various Webflow projects where a native solution did not exist. In time, I started building projects in React and Next.js. This meant that I was using JavaScript technically, but so much of it is pre-built when using component libraries. I know that I would have saved myself a ton of time getting these projects done if my foundational knowledge was better. So here we are.

My goals

JavaScript goes deep and wide just like any programming language but I want to:

• Get a firm handle on the foundational concepts and the pillars that are necessary to work as a developer for any company.

• Be prepared to successfully pass technical job interviews.

• Contribute to open-source projects

My plan

I am using a variety of free and paid resources, feel free to add any of your recommendations in the comments. I have broken up my learning into phases based on the way concepts are grouped in the book series You Don’t Know JS by Kyle Simpson. In his Frontend Masters lecture series, Kyle Simpson mentions that you can read the first edition and second edition for free on GitHub, however, I purchased the paperback copy of Getting Started to show some support. Plus, reading a physical copy is so much more enjoyable.

The approach I am taking is to explore Javascript by topic. I want to explore that topic in the variety of resources that I have and then move on to the next topic. This is in contrast to completing each resource from start to finish and then moving on to the next. The second important piece of my projects is to build a small project daily and push it to GitHub. To start I am using Wes Bos’s JavaScript30, to complete 30 small projects in Vanilla JS. Let’s get those green squares baby.

Once you set your commit email address, you can add additional email addresses to your GitHub account, and any contributions made under that email will also appear on your profile. After updating my commit email address and making it my primary email on my account, I added my old email address and then my commits under that email address appeared.

Phase One

• Programming Essentials

  • Topics

    • Values

    • Variables

    • Operations

    • Expressions & Statements

    • Decisions: If & Else

    • Loops

  • Resources

    • You Don’t Know JS Yet - Up & Going (1st Ed) Getting Started (2nd Ed)

    • Front End Masters - Getting Started with JavaScript (free with signup)

    • 100 Devs Class 10, Class 12, & Class 16 (Loops)

    • FrontendExpert - Javascript - Javascript Basics & Variables & Scoping

    • Fireship JS in 100 seconds, Crash Course, & History of JS

Phase Two

• Javascript Pillar 1 - Types / Coercion

  • Topics

    • Types

    • Arrays

  • Resources

    • You Don’t Know JS Yet Types / Grammar

    • 100 Devs - Class 19 & Class 20 (Arrays)

    • FrontendExpert Javascript - Arrays

    • Fireship Modern JS Course - Array Tricks, Destructuring

Phase Three

• Javascript Pillar 2 - Scope /Closures

  • Topics

    • Functions

  • Resources

    • You Don’t Know JS Yet - Scope & Closures

    • 100 Devs - Class 14 (Functions)

    • FrontendExpert- Javascript - Closures

    • Functional Light by Kyle Simpson - Chapters 1-4

    • Fireship Modern JS Course - Closures, Nullish Coalescing, Higher Order Functions

Phase Four

• Javascript Pillar 3 - this / Prototypes

  • Topics

    • Objects

  • Resources

    • You Don’t Know JS Yet - this / Object Prototypes

    • 100 Devs Class 21 & Class 22 (objects)

    • Frontend Expert Javascript - Objects & This

    • Fireship Modern JS Course - Prototype Chain, Destructuring, Spread, Optional Chaining

That is the nuts and bolts of my process. I will be sharing my progress along the way. Happy Scripting!