Crash Course on Modern Web Development

Step 0: HTML/CSS/JS and basic tools  1~2 weeks

The prerequisite to become a modern web developer is having a good grasp of the tools of the trade. 

HTML/CSS/JS

The foundation of the web.

• HTML
• CSS, CSS Layout
• Coding An HTML 5 Layout From Scratch
• Javascript

Git

Organize your work, get globally available versioned backups, and collaborate efficiently with your colleagues.

• Learn Git in 15 minutes
• Git Immersion
• GitHub/Bitbucket

Text editor

All these text editors have broad support for the tools mentioned in this article. Therefore, which one to use is mainly a personal choice. Pick your poison! I'm using Atom with vim-mode nowadays.

• Atom
• Sublime Text
• vim
• Emacs

Social

Social profiles are the modern CV. Join meetups to find people with similar interests, open source and share your work, and get paid while doing it.

• GitHub
• Gittip
• Flattr
• Bountysource
• Twitter

Step 1: Learn Ruby and Ruby on Rails  1~2 months

Ruby, together with Ruby on Rails, has become the staple of web application development in the startup world. Be it as the API server for your single-page Javascript application, or a full-fledged solution serving your server-rendered web app, Rails covers all the needs of a starting to mid-level  (~1 million monthly impressions) web app.

Ruby

• TryRuby
• RubyMonk
• Ruby Koans

Ruby on Rails

• Rails Getting Started
• Ruby on Rails Tutorial
• Ruby on Rails Screencasts
• One Month Rails (paid)

Get acquainted with the community

• Talks
• User Groups
• Conferences

Task: Build an open source web app

• Create a new repository on GitHub
• Check the Open Source ethos (licenses, procedures, etc)
• Examples: www.opensourcerails.com, Gittip, NewsBlur…

Step 2: Refine your skills  2~3 months

General programming

• Code Academy
• Coursera
• Code School (paid)

Frontend

CSS + HTML5, JS.

Concepts: 

• Responsive design
• Caching
• Performance
• Browser independence

Frontend frameworks:

• EmberJS + Rails integration
• AngularJS + Rails integration
• Backbone + Rails integration
• React + Flux + Rails integration

Here's a nice comparison of the three.

Backend

PostreSQL, NoSQL (MongoDB and friends) Redis, Sidekiq, RabbitMQ…
Concepts: 

• Emailing
• Algorithms
• Databases
• Caching
• Security
• Performance
• Consistency
• Concurrency
• …

DevOps

• Deploying tools Capistrano, Chef, Vagrant, Docker…
• Sysadmin tools: bash, sed, awk, grep, man, curl…

Task: Refactor and optimize your app

Step 3: Branch out to an alternate technology  1~2 months

• Clojure
• Elixir
• Go
• Rust
• Scala
• more…

Task: Apply it to your app

Rewrite the front/backend of your app, or extend it with new functionality, using what you've learned so far.

Step 4: Dip your toes into the unknown  1~3 months

• Android
• iOS/Mac OS X
• C/C++, Java, Python…
• Windows development (Mono!)

Task: Expand your market

Extend to a mobile device or native platform.

Step 5: Present yourself

• Create your own personal page, example
• Start a blog, document your learnings, share your insights
• Add your profile to professional networks:
• LinkedIn
• AngelList
• XING
• Synthesize it all on your CV

Step 6: Make some money!

Monetize your creation

• Google Play Store / Apple App Store
• (Micro)payments: Bitwall, Square, Stripe...
• Ads

Join a company

• Prepare for the interview
• Find a company you like. Examples:
• Heroku
• Soundcloud
• XING
• Wuaki
• Railslove

Freelance

• Fiverr
• Elance
• ODesk

Start your own thing!

• Startups: angel.co
• Incubators/accelerators: Y Combinator,  Berlin Startup Academy…
• Facebook groups: Berlin Startups, Barcelona Startup Jobs…

Mostly, have fun!