Learning to Code: The Roadmap I Wish I Had Had

Description: What is this roadmap about? (Background / context) (Impose word limit of 250 words)

For someone without programming experience, starting in web development can feel very daunting. You’re in that uncomfortable first stage of competence (“you don’t know what you don’t know”), so you might think that you have to spend months assembling a foundation in computer science before you can build a website of any sophistication.

Not so! Web development and CS are different enough that you can start learning the former without having a strong base in the latter. I say this largely based on my own experience.

This roadmap is an attempt to help others get started in web development. It’s meant to be a lay of the land, “here’s what you need to do” type guide for your first couple of months, the kind of map that I wish I had been given when I first started coding.

About the Author (Why are you qualified to write this roadmap? What was your journey?) (Impose word limit of 250 words)

I’ve been working as a professional software engineer for the past four years, but I’m entirely self taught. I studied neurobiology in college and was in the middle of law school when I first became interested in coding. I fell in love with it pretty quickly, but have always wished that someone who have told me the steps to take! I wasted a lot of time working on the wrong things, and with the wrong resources. This is my attempt to spare you the same fate!

(Optional) What will this cost (money)


(Optional) How long will this take (in hours)?

20-30 hours

The Steps

  1. Learn Ruby and Rails, Concurrently

There are lots of languages and web frameworks to choose from. Don’t fret over this choice too much. Just pick something! I recommend Ruby (language) and Ruby on Rails (framework) because the documentation on Ruby / Rails is outstanding.

So you probably know what a programming language is (at least the gist of it). But what’s a web framework? My understanding is this: before frameworks came along, people used to have to set up a lot of the same stuff every time they decided to make a new website. Since this was a major pain, programmers developed frameworks like Rails to take a lot of the repetition out of web development. People like to say that Rails stands for “convention over configuration.” What this means is that Rails makes web development easier by assuming you want things done the conventional way.

Resources to use for this step:

There are a ton of Ruby/Rails resources out there. Here are the ones you should use.

Part I) Read Michael Hartl’s wonderful Rails Tutorial. A word of warning: although Hartl’s tutorial is amazingly clear and comprehensive, it is not a walk in the park. Go through it slowly and look things up whenever something doesn’t make sense. If you find yourself just mindlessly going through it and copying/pasting his code just so you can finally “finish” the tutorial, STOP yourself. When things don’t make sense, go to one of these resources immediately:

  • Google. Someone will likely have written a blog/forum post about the very thing you’re wondering about. Turn to Google first for any questions you have.
  • Stack Overflow. It is amazing how quickly a programmer out there will answer your question (my questions are often answered in under an hour), however specific it might be. Also, most of the questions you’ll come up with have already been asked and answered on Stack Overflow.
  • Railscasts. Ryan Bates has over 300 screencasts on all Rails-related topics. This is a tremendous resource.
  • Rails Guides. These really professional seeming guides are written by members of the core Rails team. They’re challenging to understand at times (since they’re written for experienced programmers), but many of the introductions are accessible.

Part II) At the same time as Part I, start learning Ruby. Hartl will teach you how Rails works, but if you don’t know Ruby, Rails will feel entirely like magic. Here are the resources you should use to learn Ruby, presented in the order in which you should use them:

  • Go to Codecademy to gain a solid foundation in Ruby and HTML/CSS. (Disclaimer: I used to work as a developer at Codecademy.)

* (Optional step but highly recommended: If you want a fun challenge, go to projecteuler.net and do a some of the problems with the stuff you learned from Codecademy.)

  • Go through this excellent Ruby Tutorial. As you read it, open up your terminal (e.g. iterm on a mac), open up irb (the interactive ruby shell), and immediately start playing around with the syntax you’re learning. (And look up “terminal” and “irb,” if you don’t know what they mean.)
  • At about the same time as the above, download and start going through the Ruby Koans. They’re a series of fun/informative exercises that cover most of the basics of Ruby.
  • Finally, read Eloquent Ruby. Eloquent Ruby assumes some degree of familiarity with coding generally, so don’t start reading this until you’ve gone through the Koans and the Ruby Tutorial. Eloquent Ruby will not just teach you how Ruby works, but about how you should use Ruby (i.e. the way that Ruby programmers have determined is best practice).
  1. Learn Front End Stuff

An rough definition of “front end” and “back end” goes something like this: the “back end” in web development is where you store and organize the data on a website. For example, a site like Yelp has to remember lots of things: its users and their profiles, huge amounts of restaurant info, which user said what about a particular restaurant, etc. Yelp stores this information on servers, big computers sitting off in some remote location. When you search for “Pizza in San Francisco,” your computer sends a request to Yelp’s server. Yelp’s server sends back the requested information to your browser in the form of HTML, which your browser renders (i.e. turns the HTML into text and images and arranges the text/images in the right way in your browser window.). This latter part – the set of instructions about how data should appear in the user’s window (as opposed to which data should be sent back) — that’s the “front end.”

Resources to use for this:

  • Learn HTML/CSS at Codecademy and Mozilla’s set of documentation/tutorials. HTML is the markup language that governs the structure of a page, e.g. there should be a header, followed by a paragraph. CSS is the language that determines how a given page should be styled, e.g. the header should be in size 18 font, and the paragraph below it should have blue text.
  • Learn Javascript. Javascript is a language that’s become an integral part of nearly every aspect of web development. You should get to know it really well. Initially, you’ll probably just use jQuery to help configure how how the elements on a page should behave (e.g. the header should initially be hidden but should fade into the page when the user clicks a button), but eventually you will likely use all sorts of fancy front end and back end Javascript frameworks.

So for starters, you should definitely learn jQuery. It’s fun and intuitive. These mini-tutorials should get you started: http://docs.jquery.com/Tutorials.

Next, get a solid foundation in unadorned, vanilla Javascript. The best way to do this is to follow this amazing roadmap on Javascript is Sexy. If you dig around more on Javascript is Sexy, you’ll find lots of useful terrific roadmaps, e.g. this one for intermediate / advanced javascript.

From there, you can start picking up front end frameworks like Backbone and Angular and backend frameworks like Node. (But this is something I’d do only after building a site with basic Rails and jQuery). Again, I refer you to Javascript is Sexy for Backbone and for Node, but only when you are ready.

  1. Learn the tools of the trade (the command line, a solid text editor, version control)

Being a good developer involves more than just learning about languages and frameworks. You also need to pick up the tools of the trade – the day to day implements that you’ll be using in order to build your applications. Among these tools, three are very important: the command line AKA the terminal, your text editor, and version control. Let me talk briefly about each of these.

The command line AKA the terminal is the best way for you, the developer, to interact with your computer. Gone are the days of folder icons and double clicking. It will be through the command line that you accomplish basic tasks like creating, copying, and deleting files and folders. You can and will do much, much more than that, of course. The thing to keep in mind here is that the command line can seem very intimidating (that’s probably why movie directors seem to love showing the iconic black screen and green text, when they’re trying to show a hacker at work), but you only need to know the basics to become a competent developer. The rabbit hole here goes very deep, but you only need to descend to the depths if you’re interested. To learn the command line well, start with the Codecademy course.

You’ll want a richly featured yet simple text editor to organize your files for you and to let you easily edit and and save them. My favorite text editor for Ruby/Rails/Javascript is still Sublime Text. You can go crazy configuring it, but I wouldn’t spend too much time on this early on. Just install it and use it to open, edit, and save your files.

Finally, let’s talk version control. (This is probably the least intuitive tool among the three.) Put roughly, version control systems let programmers take snapshots of their code (formally called “commits”) at any point in time. By the end of a project, a programmer will have accumulated hundreds or thousands of these snapshots.

The importance of version control wasn’t immediately obvious to me. When I write an essay, I don’t keep track of every small change I make to my Microsoft Word file. Why should it be any different when I write code?

It turns out the answer is (at least) two-fold. First, programmers sometimes write code that causes unexpected problems. When this happens, it’s great to be able to easily revert to the last working version of their code. Second, programmers often work together on the same project. When they do this, they need to be able to easily merge their code. Version control systems like Git (by far the most popular) make it easy to do both these things.

Hartl will introduce you to Git, but he won’t explain much. To learn more, go here:

  • Git Introduction. Made by the folks at Github (an amazing website that lets programmers easily share code and work on projects together – you should sign up on Github very early on).
  • Understanding Git Conceptually. A well written, concise yet thorough explanation of how git works. Read this before going through Git Immersion.
  1. Learn How to Deploy (i.e. Heroku)

When you develop your website, most of the time you’ll examine it in your “development environment,” — that is, on your own computer – NOT on the internet.

The rationale behind having a development environment is simple: it takes time to push your code onto a remote server (i.e. a server that’s actually out on the internet). And since you’ll constantly be inspecting your website as it’s developing, it’d be very annoying to have to wait 20-30 seconds for the remote server to receive and process your code before you could see the effect of your changes.

When you’re feeling ready, Heroku makes it really easy to deploy your code (Hartl explains how to do this). Here’s the info on setting up Heroku with Rails 4: https://devcenter.heroku.com/articles/getting-started-with-rails4. If you want to set up a custom domain name, Heroku provides an extensive tutorial on this too:http://devcenter.heroku.com/articles/custom-domains.

Thoughts for the Road: What’s next?

This should be enough material to last you for a couple of months, but it won’t take you much farther than that. But hopefully by then you’ll already be building and learning from your own projects! Here are some parting thoughts:

  • Pick a project idea that really excites you and start working on it much earlier than when you feel ready. I recommend starting your own project even before you’re done with the Hartl tutorial. Working on your own project is the easiest way to get hooked on this stuff.
  • As good as the resources I’ve mentioned here are, they cover only a small slice of what you need to know to build your own website. Expect to have to look stuff up all the time. Don’t worry – even the best programmers still need to do this.
  • You’re going to run into bugs and other problems frequently. This can get frustrating, but try to keep cool and think systematically. Read up about debugging best practices and come up with a list of bugs that crop up routinely. Come up with a reaction plan for when these problems appear (example line of reasoning: Okay, so my users can’t sign in properly. What could be causing the problem? Well, it could be A, B, or C. If it’s A, then I would expect that…). Write or talk out loud, if it helps. But don’t just sit there and stare at the code and hope for an epiphany.
  • Work with and learn from other (aspiring) programmers. Coding and talking about coding with other people is hands down the fastest and most fun way to learn (I especially recommend pair programming). Of course, the best possible thing you could do for yourself is go to Recurse Center.

Good luck!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s