Getting Started With JavaScript for Web Development

Take a second and read through the following bullet points:

  • You’re interested in learning/improving on web development skills.
  • You’ve read some articles about JavaScript, but you don’t really know where to start with AngularJS/2/4/5/6+/React/Redux/Next/Webpack/Vue/GraphQL
  • You followed a ‘Hello World’ tutorial and ended up installing nvm, Node.js (LTS), npm, express, Gatsby, yarn, Jest and Mootools (yikes)
  • You’ve built a few small projects using a framework, but feel like you don’t really know JavaScript

If any of these points apply to you, you should definitely read on. If none of these points applies to you, then I’d just appreciate it if you read on. Either way,

Something’s rotten in the state of web development

Learning web development in today’s environment is a complicated ordeal, and it’s been that way for the last few years (at least). For a beginner, there’s almost too much information aimed specifically at someone who’s never written code. Much of the content is poorly organized, or based heavily on trends. Then, paradoxically, once you’ve gotten the basics down it can be hard to find good content aimed at novices. Even if you do manage to teach yourself from piecemeal and sometimes outdated content, it can be hard to feel confident in your abilities outside of the narrow scope of your studies. Trust me, I’ve walked down this path, and these are the problems I’ve faced.

It wasn’t always this way.

In the past, web development consisted primarily of knowing some HTML and CSS, and then sprinkling in some JavaScript for a little bit of interactivity. If you were really a pro, you might even know some PHP and SQL (which made you a full-stack developer). While those skills are still technically enough to build fully featured web apps, the developments in the JavaScript language over the past few years and the increase in demand for apps with a high level of interactivity have led to the explosion in JavaScript heavy solutions for building applications on the web.

Now for the part you’ve been waiting for. In this series of articles I aim to introduce the beginner web developer to the tools of the trade in a sane, easy to follow way, without the use of frameworks or any other unnecessary “magic”. Contrary to how it may seem after spending some time reading about web development, it is actually possible to build a web application in 2018 without the use of a front-end framework or complicated build tools.

Don’t get me wrong, however. I’m not evangelizing against the use of front-end JavaScript frameworks, or saying that you shouldn’t be interested in learning them. What I am saying is that there is something to be said for having a complete understanding of the tools and processes you plan on using. When you have a firm grasp of the fundamentals, learning tools based on those fundamentals becomes a much easier task.

In this series of articles, I’m going to try my best to teach JavaScript in a way that sticks, while still exposing you to practical challenges and projects. Some people learn best by learning as much theory as they can before applying any of it. Others learn best by just jumping right in. My plan is to hand you the book, but then push you in. Let’s see how it goes.

Table of Contents

1. Basic Concepts

-A Super Simple JavaScript Project: Rock, Paper, Scissors


Originally published at tndl.io on December 7, 2018.