Roadmap for Learning Javascript and Web Development

Learning programming is oftentimes seen as a daunting task, and it's understandable.

After all, as soon as you begin learning a little bit about programming, you start reading on Stack Overflow or some trendy programming blog that you should start using library XYZ to do functional programming in Javascript or you should avoid ever doing ABC method because it's time complexity is inferior to DEF.

The following list of resources is designed for somebody who has never done programming before. The goal of this roadmap is to get you comfortable with creating full-stack web applications.

Going from no programming knowledge to basic understanding:

  • Code Academy provides a very gentle introduction to programming. It's simple gamefied interface is a good starting point. I would recommend only doing the Javascript track for now. For now, I would ignore the jQuery course. This will help you get down the basic syntax of Javascript.

Javascript foundation

  • Code School offers a combination of videos and interactive coding challenges. Overall the instruction material is better than Code Academy, but it also costs money ($30/month, the last time I checked). Many of their Javascript courses are quite good, but for now I would recommend just doing these two:
    • Javascript Roadtrip Part Two - I purposefully left out Part One because it's mostly repetitive with what you learned in Code Academy.
    • Javascript Roadtrip Part Three - At this point, some of this should feel quite challenging
  • Coder Byte has interactive programming challenges that you can solve in your browser. At this point, you should be able to tackle some of the easy problems. Some of the easy problems will feel much harder than the other easy problems. If you have trouble remembering syntax, simply try pseudocoding your answer first. Basically, write in comments, your explanation of your approach in english words. As you get more and more comfortable, it will become easier to translate your pseudocode to actual working Javascript code.

Intermediate Javascript:

  • Object-oriented Javascript by Hack Reactor @ Udacity: Hack Reactor recently co-developed with Udacity a programming course on Javascript. This covers some of the content from the first two weeks of Hack Reactor's full-time bootcamp program, and from what I have seen, looks very similar to what I received from the Hack Reactor on-site program in SF and is high-quality. I would just do the free version of the course.
  • Eloquent Javascript is a widely recommended book for learning Javascript and luckily there's a free official version online that you can read. I don't think you need to read this cover to cover, but if there are any concepts that you find confusing, this is a good resource to use.
  • You Don't Know JS book series provides really nice explanations for some confusing Javascript concepts. Some of this may be overlapping with the Udacity course, so again use this more as a resource than something to read cover to cover.

At this point, you know more of the core concepts of Javascript than most programmers using Javascript. This is more frequent than you'd expect because a lot of people learn Javascript in a haphazard manner.

The goal at this point is to create a simple to-do web application using jQuery, but first you'll need to learn some HTML and CSS, which are easier to learn in Javascript (although they might be more frustrating to use later on!)

Learning HTML / CSS: Remember, the key is to learn basic HTML and CSS. Timebox yourself to 6-8 hours learning the material and then start working on creating a simple to-do application.

  • Try jQuery @ Code School is a free course on Code School. It'll take a few hours to complete, but will be immensely useful.
  • Learning HTML and CSS can be a rabbit hole. There's a lot of nuances to pick up along the way, but because they're not programming languages I think it's fine to learn them in a less structured basis and more of a need-to-know basis. Resources for learning them:
    • The HTML & CSS book by Jon Duckett is the most popular book on Amazon on this topic. Again, I would skim through it. The goal is to create a simple interface, nothing very fancy.
    • Team Treehouse offers interactive tutorials (videos and coding challenge) similar to Codeschool. The biggest difference is that I think Codeschool has more rigorous programming instruction, but Team Treehouse has more web design-type content.

Creating a simple to-do application: So you have learned HTML, CSS, and Javascript and have done a bunch of short coding challenges. The key is to apply all of it in a sort of realistic web application. What better, than to create a to-do list application. There's a whole website dedicated to various implementations of the to-do list using different Javascript libraries.

Your app should allow the user to:

  • Create a task
  • Delete a task

Future sections to include:

  • Algorithm & data structures
  • Deployment
  • Learning Git
    • Codeschool
    • Interactive tutorial?
  • jQuery to Backbone tutorial (MVC)
  • Node.js (codeschool)
  • Express (codeschool)
  • Database
    • MySQL
    • MongoDB / Mongoose
      • Recommend the Amazon book on Mongoose
views