21 Comments

A Modern Web Development Syllabus

If you have programming or Computer Science experience, want to take the plunge into web development, and don’t know where to start, then start here. Before you signup for Pusher and Twilio and start copying and pasting Ruby and JavaScript code, you should have a firm understanding of how the many pieces and layers of your first webapp work together.

While not required, I recommend the following pre-reqs:

  • Buy a Mac or install Ubuntu on your dev machine
  • Read The Pragmatic Programmer
  • Learn Vim or Emacs
  • Learn Git & make a GitHub account
  • Use Firefox with the Firebug extension or Google Chrome for development

HTTP

Understand this protocol or prepare yourself for perpetual confusion. Read the RFC, or at least the following sections:

Ruby

Read The Pickaxe if you don’t know Ruby or could use a refresher.

Rails

Read Agile Web Development with Rails 4th Edition

Rails Guides is an excellent free companion resource to the official Rails api docs

Do this Twitter clone Rails tutorial

CSS

Read CSS Mastery 2nd Edition

  • Read chapters 1, 2, and 3 for the basics on CSS selectors, specificity, the box model, and positioning.
  • Read the rest if you want even the slimmest chance of helping your app not look like it has drunken clown makeup smeared all over it.

If you finish that book and your app still looks like someone sat on a bunch of ketchup and mustard packets, read The Principles of Beautiful Web Design 2nd Edition.

JavaScript

Read JavaScript: The Good Parts

Do the following jQuery tutorials:

Read the jQuery Types Documentation and the jQuery API Docs – all of it.

Now would also be a good time to learn Coffeescript

Extra Credit (which is also required)

Make that Twitter clone tutorial app provide a REST api to a single-page Javascript app you write using Backbone.js. Try Mongo as a backing store instead of MySQL or SQLite and use Resque for background processing. Make it work offline:

Extra Extra Credit

Do it again using Ember.js instead of Backbone.js.

More Resources

Independent Study

If you’re bored with everything being a RESTful resource represented in your database, Rails model, Rails controller, Backbone.js model, and view, (or just not sure what to do next) then try a different approach altogether.

Rewrite your sample app using FAYE and Node.js to build your app on a publish-subscribe model of communication between your client and server.

Fin

If I missed anything important, please let me know.