So you want to be a web developer?

I originally wrote this document as a personal email to friends and used it subsequently as a training manual for students employed by Web Services at Rice University. I’ve updated it occasionally over the years, but the reading lists at The New Code, the Front-End Developer Handbook, the Modern Frontend Web Development Guide, and the various Awesome Awesomeness guides are more current and complete resources with many of the same goals.

To address several questions and needs I’m aware of at the moment, I’m going to describe one good path to acquiring all necessary technical skills for becoming a professional web developer at no cost, up until you actually try to turn your work loose on the world. Obviously, there are other ways to approach this, and one of the pleasures of the job is getting to explore those other paths on your own over time. Have fun.

I. Tools

  • Get Google Chrome and install Web Developer and ModHeader. Note that Chrome already has a built-in tool that is the most useful of all: the Web Inspector. A brief tutorial explains the basic idea of what it does, but don’t expect to understand the details until you’ve learned HTML and CSS from other resources. Google has thorough documentation you might refer to later. If by chance you’re using Safari instead of Chrome, it has the same tool, but you have to enable it, and it looks a little different.
  • Also, get Firefox or perhaps Firefox Developer Edition and install these plugins: Web Developer Toolbar, Live HTTP Headers, Modify Headers, Tamper Data, Colorzilla, SQLite Manager, and User Agent Switcher. Firefox has its own page inspector too. A few of these Firefox plugins have no equivalent in Chrome, and some are amazing tools for learning about the web–especially Tamper Data.
  • Eventually, your ideal development environment is probably a Mac with a Windows virtual machine on it, so that you can run/extend all desktop browsers (without too much effort). Current browsers comply reasonably well with the settled standards, but you can’t assume they are the same–not even if they are the “same” browser with the “same” version number on different platforms. Microsoft distributes numerous free Windows virtual machines with different versions of IE that you can use for testing. If you don’t want to pay for a VM hypervisor for them, use VirtualBox.
  • Your computer probably did not come with a good, user-friendly text editor that does syntax highlighting. Atom and Sublime Text are available for all platforms, although Sublime Text will nag you if you don’t purchase a license. Vim is also available for all platforms, but it’s not very friendly to new users. TextWrangler for the Mac and Notepad++ for the PC are also options, if for some reason you have problems with one of the others.
  • Get the GIMP and Inkscape. Install them and bookmark their documentation pages. They are OK for most developer needs, if you can get used to their interfaces and you don’t intend to take graphic design seriously.
  • Get an FTP/SFTP client for transferring files to a server: WinSCP for Windows, Cyberduck for OS X, or FileZilla for any platform. If you’re on a Mac or a Linux machine, you may enjoy treating SFTP connections as if they were filesystem folders using OSXFUSE or SSHFS, respectively.
  • At several points later in this document, I’m going to mention a few software packages that normally execute on servers, but you can run them on your local machine and force your own computer to act as if it were a server. BitNami provides quick installers and virtual machines for a variety of web-related software packages. Installing their distributions is often the fastest way to get started, but don’t go crazy trying out random stuff without knowing how to secure it or turn it off. Just come back to this point when you’re comfortable with the basics and install the minimum necessary server software for working through this document.

II.  HTML and CSS

  • Let’s assume you know nothing about the web. Watch this video to learn the absolute basics. By the end, you’ll have an extremely simple web site.
  • If that felt too basic, skip this step. But if elementary video tutorials were the right speed, Microsoft has a more complete set of video tutorials for total beginners.
  • Now you’re ready to work through the WebPlatform.org tutorials on HTML and CSS. Invent your own exercises for trying out the things they teach, or take a stab at some of the student exercises from thenewcode.com, where Dudley Storey has also organized and elaborated on the WebPlatform tutorials to build up a complete reading list for CSS. You should gradually build up an example site that illustrates many basic points. DevDocs provides a handy searchable interface for the tags and properties you’ll be learning about–bookmark it for future reference.
  • As you go through the WebPlatform tutorials, also take time to play with your browser’s developer features and plugins, especially Web Developer, Eye Dropper / Colorzilla, and your browser’s Web Inspector.  You should gradually understand more and more of what they do.
  • Next, download Bootstrap, read its documentation, and rebuild your example site using at a minimum Bootstrap’s grid system. I used to recommend 960 Grid for this, but Bootstrap does so much, so well. LayoutIt is a site that can help you create a nice Bootstrap-based layout quickly.
  • The Web Platform documentation occasionally discusses features of HTML5 and CSS3, but the lessons on HTML 4.01 and CSS 2.1 are still thoroughly applicable–the newer standards extend, rather than break, the old standards–so definitely learn the old stuff. On the other hand, it’s OK to use some new features, and CanIUse.com is a site that tracks all in one place what new features are available in which browsers.
  • If you’re an experienced programmer trying to pick up details about web technologies and want to know exactly what a browser does with HTML and CSS, here’s a tutorial on how browsers work.

III.  Graphic design

  • Web developers often don’t do graphic design. Design and programming are separable skills. But it’s important to know the basics, regardless, and self-employed developers are fairly likely to do their own graphic design.
  • Work through some GIMP tutorials and some official and unofficial Inkscape tutorials.
  • Browse iStockphoto.com and its terms of use. Browse some Google Image Search and Flickr results from CreativeCommons.org and read the brief terms of use for all six Creative Commons licenses.
  • Use your HTML/CSS skills to place some images you’ve created/borrowed into your little Bootstrap-based web site. You may want to revisit the chapter on background images and sprites from Web Platform, because grid-based designs and clever use of background images go very well together in making a clean, contemporary, CSS-based design.

At this point, it’s worth wondering whether you want to proceed further and become a web developer. Your HTML and CSS skills already qualify you to work as a web content editor. You might want to focus on graphic design, drop a bundle of money to get Adobe Creative Suite version whatever, and play with the countless free Photoshop/Illustrator tutorials on the web to acquire truly pro graphic design skills. A free account with Tumblr or DrupalGardens.com will give you a great deal of control over the design of a web site via custom CSS, and you can look at CSS Zen Garden to see how radically a site can be transformed with CSS and graphic design skills alone–no programming.

IV.  JavaScript

  • Since you already have a test site to play with, read the article from the Web Platform called “Your first look at JavaScript.”  As you work through any other JavaScript exercises, refer to that article for how to put the code into your own site.  One of the very first things that article teaches you is how to use the alert() statement, which is very useful for quick debugging of a JavaScript program–just sprinkle a few alert() statements in-between other lines of code to inform you of the state of your program as it executes.
  • And in both Chrome and Firefox, you can open up the console to see errors.  Right-click the page and select “Inspect Element,” then go to the console tab. There, you can see warnings, errors, and return values in the window on the left and also type in your own JavaScript snippets just to try things out.  Note especially the logging functionality–you don’t really have to write alert() statements after all.  The console will show everything you put in the log, either from the script you have embedded in the page or from the scripting window to the right.
  • If you don’t really know how to program, then you have a choice.  Either read the remaining JavaScript chapters at the Web Platform site (they’re pretty good) or work through the interactive textbook Eloquent JavaScript.  Codecademy and Code Maven offer interactive lessons in JavaScript for beginning programmers, but I’d still recommend Web Platform and Eloquent JavaScript.
  • If you already know how to program quite well and want to mainline your JavaScript lessons, then consult Axel Rauschmayer’s free online book Speaking JavaScript, have a look at Addy Osmani’s Learning JavaScript Design Patterns, and/or go to YUI Theater and watch these videos featuring Douglas Crockford, Yahoo’s JavaScript guru: The JavaScript Programming Language; An Inconvenient API–The Theory of the DOM; and Advanced JavaScript.  As you watch them, it’s important to know that early on he speaks as if this function for creating objects were built into JavaScript. What current browsers support instead is a nearly identical method called Object.create(). Here’s a good summary of further issues related to JavaScript objects. Crockford also has more recent videos linked from his web site, but I haven’t watched them.
  • Now, something very important: jQuery is going to save you from having to do a lot of the ugly bits of making JavaScript interact with the browser.  Work through the general tutorials: “How jQuery works” and “Getting Started with jQuery.”  There’s also a new site called learn.jquery.com where the Using jQuery Core tutorial is most relevant for beginners.
  • FixingTheseJQuery is a great slideshow about debugging JavaScript that I’d have mentioned much sooner if it didn’t mention jQuery so often.
  • Whenever you want a page on your web site to do something interesting without having to reload the page, you can start from the assumption that jQuery or some jQuery plugin will solve the problem, given sufficient googling for the right widget.  Noteworthy examples include jQuery UI and Validation.
  • However, much of the web’s complex JavaScript applications are now built using client-side frameworks, for one thing so that you don’t wind up with a bunch of jQuery spaghetti code. There are many frameworks to choose from: Angular.js, ReactBackbone.js, Ember.js, Knockout.js, etc.  You can compare their code side by side by unpacking the TodoMVC sample applications.  But note that it’s not entirely a fair comparison.  They all have features the others lack, and the sample application doesn’t demo them all. The short of it is that Angular and React are currently leaders in this space.
  • Incidentally, for more elegant, more powerful JavaScript, you should also consider using lodash, a library that provides numerous functions common in other languages that support a particular style of programming. Lodash and its predecessor underscore are among the most popular dependencies for JavaScript projects, especially in server-side JavaScript programming.
  • Oh, at some point while learning JavaScript, take some time to review either the Idiomatic JavaScript style guidelines, or Crockford’s style guide, or Felix’s Node.js style guide. Follow one of them consistently.
  • You might also enjoy browsing JSter or JS Patterns for libraries and tips on best practices. Stats.js.org also ranks the most popular JavaScript libraries, although many of them are for server-side programming only.

V. Python

  • There are many, many languages you could use to generate web pages for delivery to a browser.  There’s enormous diversity on this point, because your site visitors do not and really cannot care what server-side language or environment you use to send them a page of content.  Browse DZone.com for a few minutes to see people advocating the use of Java, Ruby, Python, C#/ASP.Net, Scala, Groovy, Erlang, Lua, Perl, PHP, server-side Javascript, etc., etc. There’s no consensus, so you get to pick.  Quite a few options are genuinely good, and server-side JavaScript has caught on to such an extent that it is now often the only language a web developer needs to use.
  • But let’s make this simple: if you only know JavaScript, it is not a mistake to also learn Python.  Rice University and MIT both agree it’s worth your time–it’s currently the first language students use in the Computer Science program at either school.  It’s fast, easy to use, readable, and featureful. It shows you things about programming that are very common but not normally done in JavaScript. And there’s no question that it’s common in web development, system administration, scientific computing, and engineering (see NumPy/SciPy, Pandas, and NLTK for example).
  • To get a taste of Python, visit http://trypython.org and (if you need to) click to install Silverlight so that you can run TryPython’s Python interpreter in your browser.
  • If you are still new to programming, the online book you want is Learn Python the Hard Way.  It’s not the hard way–that’s a joke.  It’s the very simple way of re-typing the author’s code to see how it works. At some point, also take a look at Python Tutor, which has some brilliant interactive visualizations of what Python does as it executes some basic code. If you want a more detailed introduction to Python, begin working through Dive Into Python.
  • If you think of yourself as an experienced programmer, just work through the tutorial right there at TryPython.org.  Alternatively, work through Google’s four hour class on programming with Python.  Another approach is to use Python Koans, an interactive tutorial where you learn Python by making tests pass.
  • After all that, browse the Python documentation at http://docs.python.org/ to see what else is there. There’s also this free book on Intermediate Python.
  • While learning Python, take some time to review PEP-8 — Style Guide for Python Code. Follow it consistently.
  • As a shortcut to getting a Python-based web site up and running, visit Google App Engine and sign up for a site of your own.  Work through Google’s “Get Started” guide to using Python in App Engine, and you’re set.
  • At this point, you are now capable of developing fully functional web applications from the ground up.  But … Google App Engine really is a shortcut and a slightly odd one at that.  You’re still a couple of technologies away from knowing how web developers usually work.
  • By the way, as you begin writing longer programs and creating complete sites, it’s worth taking a few minutes to learn how to use git for version control.  Here’s a git tutorial that assumes no background knowledge about how version control works. You can use git to save versions of your programs as you write them, and if you develop reusable code of some kind, release it to the world for free via GitHub.  GitHub offers a brief online git tutorial, and here’s the entire text of the book Pro Git. Git Immersion offers some more practice exercises, and “Git from the Inside Out” is a good intermediate-level description of Git internals.

VI. SQL

  • Most web sites have databases behind them.  Most databases are SQL databases.  Accordingly, most web programming involves writing code that stores or retrieves data from a SQL database and formats some response as HTML for consumption by an end user.
  • GalaxQL is a brilliant interactive tutorial that will teach you all the SQL you’ll need to know, using very interesting examples, and there is now a version that runs in a web browser! Some great things about it include the kind of data it allows you to play with (stars, rather than the usual payroll examples) and the visualization of what you’ve selected, but SQLZOO and Learn SQL the Hard Way are also good tutorials that may help reinforce the lessons you learn.
  • GalaxQL is based on SQLite, and although its syntax is essentially the same as other SQL databases, SQLite does not work well for server applications.  Other flavors of SQL you might wind up using include Oracle, Microsoft SQL Server, PostgreSQL, or MySQL.  They are all fine, but I suggest PostgreSQL wherever possible.
  • It’s conceivable that you’ll really enjoy SQL.  A good SQL-based solution to a problem can make you feel very clever.  If that sounds like you and you want to know more, fire up PostgreSQL or MySQL on your machine (they’re included with DjangoStack), look up Joe Celko’s books on Amazon, and have fun. There’s also this brief introduction to how SQL databases really work.
  • Incidentally, a lot of people have been excited lately by progress made in scaling up web sites by using databases that aren’t based on SQL: the technology is generally called NoSQL.  If you worked through this document in order, you already encountered a sort of NoSQL database called Bigtable when you used Google App Engine.  You may also want to play with MongoDB, Redis, Riak, or Neo4j, just to see what’s up.  SQL databases aren’t going away though–this is just an interesting “right tool for the right job” question that’s out there right now.

VII.  Django

  • Good news … Web developers very often use frameworks on the server that manage a lot of the ugly, repetitive parts of application development.  Frameworks organize apps in a consistent manner.  Most web frameworks provide an object-oriented abstraction of the database so that you’re often not writing SQL.  And many web frameworks auto-generate the create/read/update/delete functions a database-driven web site typically needs.
  • For Python programmers, the most popular framework that does all that is called Django.  Work through the introductory sections of the documentation.  Almost immediately, it will ask you to choose a flavor of SQL to work with–for now, the answer is SQLite.
  • One of the most common things a web site needs is a content management system (CMS).  A CMS provides a way to create and edit chunks of web content through the web itself.  Django is not a CMS and does not include one.  Django is a rapid application development (RAD) framework that uses the Model-View-Controller pattern (MVC) to help in building web applications.  But you often want both: custom applications and a pre-built CMS.  To that end, there’s Django CMS and Mezzanine.  Try installing them, and take note of how you would still build Django applications alongside them.
  • The general lesson there is don’t reinvent the wheel.  Django Snippets and Django Packages are sites that can help you find chunks of Django code to solve a wide variety of common problems without getting in the way of your custom application.
  • Django gives pretty rich error messages when there’s a problem in your site, but you may find it useful when debugging Django apps to send extra info to the browser with FireLogger.

VIII.  Application Security

  • Whoops, I wonder if your application is secure.  To learn about common web application vulnerabilities, download WebGoat and work through the tutorials.
  • Somewhere in the midst of that, try playing with three of your Firefox add-ons: TamperData, Live HTTP Headers, and Modify Headers.  Observe how an end user can fake all kinds of things in their HTTP requests to your server, no matter how convoluted your form data may be.  You can never trust that what a browser sends to you is anything but what the end user wanted it to be.  Now might be a good time to browse the HTTP spec, which basically defines all the things that an end user is allowed to fake at the same time as it defines how their requests work.
  • Incidentally, those Firefox addons have many legitimate purposes.  We use Modify Headers almost daily to look at sites that have been deployed to new servers before we change their DNS entries or to specify just one member of a server cluster in the URL and still tell that server what site to serve out.
  • It’s likely your web application accepts data from the world, which will inevitably lead to spammers trying to send stuff to it.  So at some point, you’re going to need to learn how to work with ReCAPTCHA or the equivalent.  There is a Django snippet that helps.

IX.  Hosting

  • OK, you are a web developer, but you need a place to run your applications.  If you have no money at all, Google App Engine is still an option for Django developers, but you will jump through some hoops–start by looking at Django-nonrel.
  • If you are ready to deploy a site at a nominal cost, you can find a hosting company at Django Friendly or the Django Project’s more exhaustive but probably not well-maintained list or this list of Heroku equivalents for Python/Django (e.g. Heroku itself and Gondor).
  • The Heroku-like solutions are generally pretty new and interesting.  A more ordinary solution is to get shared Django hosting from WebFaction and get your domain name from anyone who charges less than $10/year and doesn’t try to upsell you a bunch of other junk.  Most importantly, you do not need web hosting from your domain name provider: you’ll be getting that from WebFaction.
  • Once you have a domain name, you’ll need to sign in to your provider’s site and delegate nameservice for the domain to WebFaction.  Typically, that involves digging around for “Advanced DNS options” or “Edit this domain” or something like that.  Here are WebFaction’s instructions on what to do when you’ve found those controls, but I should note that often all you’ll be doing is deleting a few lines that say “yourdomain.com NS ns1.yourprovider.com” and adding lines that say “yourdomain.com NS ns1.webfaction.com,” possibly including a period at the end of each line (look at the examples you’re deleting).
  • Some day, if you need to customize your server or scale up the web architecture on your own to support “the next Facebook,” then dedicated VM hosting with Rackspace or Amazon EC2 might be appropriate, in which case you’ll need to learn more about webserver administration–i.e. how to use Linux and install nginx, Cherokee, or Apache+mod_wsgi.  If by chance you’ve been practicing all these lessons using a Linux desktop or Linux VM, such as those distributed by BitNami, then you’re well-positioned to use freely available virtual machines on highly scalable infrastructure like Amazon’s, paying only for resources and not the OS.  If you haven’t, no worries–it’s not rocket science, but I’m just not covering it here.

X.  Miscellaneous Shout-Outs and Whatnot