Learning JavaScript - a Curriculum for Beginners

Introduction

My first foray into coding was four years ago and it did not end well. I started with the Python course on Codecademy, which was great… until I tried to actually build a simple website on the actual internet and not inside of Codecademy’s learning console.

I spent about eight hours trying to figure out Django and ran into so many issues just trying to get a dev environment set up. The docs were confusing and meant for more advanced developers.

I hadn’t learned the fundamentals of working with the command line, git, and hosting/deployment. On top of that, I was working on a Windows machine, which was not as developer-friendly, at least back then.

I gave up and didn’t come back to coding for another few years, this time in the context of writing custom JavaScript variables for Google Tag Manager (GTM).

I took the Codecademy JavaScript course and was able to Google around enought to code out small but important functions that actually did something real, albeit in GTM’s tightly controlled environment.

But. I still wanted to actually make stuff on the web.

After much searching for high-quality tutorials for true beginners, I stumbled upon Michael Hartl’s excellent Learn Enough to Be Dangerous series and things really started to click for me. I am deeply indebted to the hard work he’s put in to creating truly amazing tutorials.

I dove into the Ruby on Rails Tutorial and learned a lot about MVC, deployment, and even built a simple web app that actually did something with a database. It’s not a great app or anything, but it was a great learning experience.

After I built onfire.co, I took some time off as I started a new job.

In the past six months, I’ve returned to coding as something that I really want to pursue and this time I’ve taken a more focused approach to learning full-stack JavaScript, again with the help of the “Learn Enough” tutorials, Wes Bos’s excellent series of ES/JavaScript tutorials, along with some other books and resources.

Since I know that other beginners are probably in a similar situation as 4-years-ago me or 6-months-ago me, I thought I’d share my curriculum and my overall approach to learning coding.

I’m still very much a novice but I’ve found it to be tremendously rewarding, frustrating, and exciting (sometimes all of those at the same time).

As a background, before I started all of this, I did have a lot of experience with the web, via my digital marketing career. I’d spent a lot of time hacking around WordPress sites, and tweaking CSS from existing designs.

I was familiar with the web, the DOM, and Chrome dev tools, but I couldn’t build anything from scratch.

My Approach

Tackling all of this can seem daunting, but if you invest time in learning the basics from the ground up, you’ll have a great foundation for when you get to the more advanced topics.

That’s why I recommend learning HTML/CSS and the basics of deployment before you move on to more advanced things like JavaScript and Node.

The challenges of setting up dev environments will be much easier to face once you have developed some technical sophistication.

Build your own projects along the way

Tutorials and courses are awesome. We’re lucky to have so many great ones available, often for free. But I think it’s a mistake to go through a tutorial without then applying what you learned to a real-world project.

You don’t want to be the person that studied Spanish for four years in high school and now can’t speak a word of Spanish. You want to take the courses and then go live in Spain for a month, immersed in the language.

There’s a huge difference between understanding what you’re learning in a tutorial and applying what you learned.

The application of the skills and knowledge is where the real learning happens as you’re forced to build things from scratch and speak with the locals (to continue the Spanish metaphor).

I recommend an approach that alternates between studying/completing a tutorial and then immediately building a project that utilizes those skills.

Building a real-world application, no matter how simple or uncommercial, will keep you motivated to learn as you’ll be creating real stuff.

If you take an HTML course, then you should design a website in HTML. After you learn CSS, rebuild your HTML website with CSS. Then add some jQuery functionality. And so on.

The projects that you choose should be challenging, but not so challenging that you are completely overwhelmed or need to learn a completely new language or framework.

And you should build projects that actually solve a problem for you, no matter how small.

For instance, you can start by building a personal website for yourself or a family member. Later you can move to building simple web apps that solve a problem like displaying some useful information using an API, and eventually build up to projects that are so useful that other people will want to use them (and maybe even pay you for the privilege).

I’ve had a lot of success with this approach and I’ve since modified it a bit where sometimes I will build my side project as I’m going through the tutorials.

So I might watch the first eight videos in the React for Beginners course and then start a new project where I build out as much as I can with what I’ve learned so far, then jump back to the tutorial and sample project.

Eventually, one of these projects might be worth shipping in a real sense, where I try to get real users and build it up. But that’s not important right now – my main focus is learning, not building an online business.

There’s no exact science to this and you have to try different approaches to figure out what works for you.

The sooner you start putting real things on the web, the better

As I mentioned in the introduction, my first foray into Python did not end well. At first, it felt awesome to work through the Python lessons on Codecademy.

I learned a lot. Each lesson was challenging, and I could feel that real progress was being made.

But here’s the problem with Codecademy – you’re just writing in their web console.

It’s cool to write a function that returns a value – at first. Then you’re like “OK, but I want to be a web developer, and like, you know, make websites that like do stuff.”

And so, with that feeling in mind, I went to create an app in Python. Which totally failed. I couldn’t get the environment set up. I think I spent like eight hours trying to figure it out.

When I came back to coding, I started working with the Ruby on Rails tutorial (I’ve since focused more on JavaScript but Rails is also great to learn).

The amazing thing about The Rails Tutorial was that it guided me through setting stuff up in the command line, using Git, and the really cool thing (for me, at least), was showing me how to deploy an actual website via Heroku. I was so excited the first time I ran git push heroku master and then saw my site up on an actual domain.

The bottom line is: you want to get out of the Codecademy environment and get to real web deployment as quickly as possible.

It doesn’t matter if what you’re deploying isn’t very good – what matters is the feeling of empowerment that you will have when you actually push something to production.

Keep shipping.

The Curriculum

I’ve put together a basic learning path that you can follow. I’m currently working through this myself. For each step, I include some ideas for potential side projects that you could work on.

Feel free to skip around, make it your own, or suggest additions/modifications.

1. Learn Enough HTML to Be Dangerous

HTML is the simplest and most fundamental language on the web. Even if you stop here, you’ll have basic skills that can help you in pretty much any job that involves the web.

Possible Side Projects:

  • Build a simple personal website
  • Build a simple website for a friend or family member
  • Design an HTML email for your newsletter
  • Figure out how to host your website on a basic shared hosting site
  • Figure out how to set up a domain name and point it to your hosting site

2. Learn Enough Git to be Dangerous

Learning git is essential to becoming a web developer and this course can be done pretty quickly. Getting the basics of git will save you a lot of time down the road and you’ll need to know it to work in most professional environments.

Possible Side Projects:

  • Add the website you built in step 1 to a git repository and push it up to Bitbucket.

3. Learn Enough CSS & Layout to Be Dangerous

HTML is great, but nobody builds sites now with just HTML. To get a good looking design, you’re going to want to use CSS.

As you’re learning CSS, you’ll want to strengthen your skills in Grid and Flexbox. Here are some free resources:

At this point, you might want to get familiar with Sass. I recommend Koala for compiling Sass to CSS (it’s free).

Possible Side Projects:

  • Take whatever site you build with HTML and redesign it using CSS.
  • Design a site in HTML/CSS from scratch for a friend or family member’s business.
  • Create a blog for yourself with a custom design, perhaps by writing your own custom theme for WordPress or a static site generator like Hexo.
  • Whatever you do, make sure it’s responsive!

4. Read Hello Web Design

Now that you’re desiging stuff, it’s a good time to understand the basics of good web design. Tracy Osborn’s book is an excellent and practical introduction to web design for non-designers.

You can do this step in conjunction with step 3.

5. Learn Enough Command Line to be Dangerous

OK, I know, you want to jump into JavaScript, but I recommend strengthening your fundamentals a bit more before jumping into the more technical stuff.

If you’ve followed the curriculum up through here then you’ve probably already been using the command line a fair amount, but this will help to solidify the foundation.

Possible Side Projects:

6. Take the Codecademy Introduction to JavaScript course

Time to start learning JavaScript, although if you’re like me, you couldn’t wait and you skipped ahead.

Possible Side Projects:

  • Add some vanilla JavaScript functionality to one of the projects you’ve already built.
  • Create a simple tool that solves a small problem for yourself (I built a simple link generator for Google Calendar).

7. Take the Codecademy Introduction to jQuery course

jQuery is super useful and powerful, and very easy to learn once you have the basics of JavaScript down. When you get stuck, you can refer to the jQuery documentation, which is well-written and a good resource for getting a grasp of the fundamentals.

Possible Side Projects:

  • Add some jQuery functionality to one of the projects you’ve already built to give it more interactivity.

8. Read Beginning JavaScript

OK, I don’t think you need to read this book cover to cover.

And I don’t know if this is the best book to use, but I found it helpful for understanding core concepts of JavaScript. I read through some of the chapters and did the exercises, and skimmed through other chapters. Now I use it more as a basic reference.

The reason I recommend something like this book is that I see a lot of questions from newbies on Stackoverflow that are having issues because they have no grounding in the fundamentals and are just hacking away.

I’m all for hacking away, but you want to get the basics on scope, functions, variables, cookies, control flow, etc. It’s not that you have to memorize all of these concepts and their exact syntax – it’s that you want to know what questions to ask and where to go digging when you run into issues.

9. React for Beginners

This is where I am in the curriculum as of February 20, 2018.

At this point, things might diverge for you (or for me) and you can make it your own. I picked React because I liked it and I like Wes Bos’s tutorials, but you might want to learn Angular or Ember or some other framework, or maybe you skip a front-end framework for now and move on to backend stuff because you have an idea you want to build that needs a database.

Possible Side Projects:

  • Build a single-page app that solves a problem for you or just does something cool.
  • Try integrating an API into your app so you can work with data from another site/app.

10. ES6 for Everyone

Time to get more of a grounding in ES6, ES7, and ES8 (the course has been maintained to incorporate the new versions of ES).

Some of the JavaScript syntax and concepts used in the React course were above my head and I wanted to get more of a firm grounding in advanced JavaScript, which will provide a good foundation when I move on to Node.

11. Learn Node

Now it’s time to build full-stack applications with Node, Express, and Mongo.

  • At this point, you have the tools to build so many different things that you can just follow your interests!

12. Further Learning

Here are some technologies that are on my list of things to get familiar with:

Notes and Tips on Learning to Code

Some general notes and tips I’ve picked up while learning:

  • Always type out the code whenever you are going through a tutorial or an example from a book! Don’t copy and paste! You want to practice the actual typing of the code. This will train your brain.

  • Learn to use the console in Chrome and Firefox (Firefox is especially good for working with CSS Grid).

  • As you progress, you will alternate between frustration and elation. Learn to be comfortable being in over your head. It will take years before you completely understand what you’re doing.

  • Find dedicated time to practice and learn. Large blocks of uninterrupted time are great, if you have that luxury.

  • Everyone has imposter syndrome, even the experienced full-time developers.

  • Building side projects along the way has an additional benefit beyond the learning. It gives you a way to measure your progress. You can look back and laugh at how simple the first project you bult in JavaScript was. And you’ll remember how hard you struggled with it and know that it would now be easy for you to tackle.

  • Some people prefer text tutorials and some people prefer video. I generally prefer text, only because many of the video ones out there are boring and my mind wanders very quickly. If you’re struggling to learn something, the problem might be the way the information is being communicated.

CSS, HTML, command line, deployment, es6, git, graphQL, hosting, javascript, learning to code, node, react, terminal, tutorials, web design, webpack