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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
- Google also offers Google Analytics Academy—essentially a short course on how to use Google Analytics to be sure your site is achieving your goals. See also this SEO cheatsheet.
- Google also has a variety of official blogs about specific issues and services.
- If you have challenging questions about details that seem to be answered nowhere else, try stackoverflow.com for programming questions and doctype.com or css-discuss.org for HTML/CSS issues.
- If you just want to browse the latest news about the web, check out Mashable.com, The Next Web, DZone.com, SmashingMagazine.com, and Reddit’s web design topic. Doctype.tv is a good podcast/show about web development.
- I guess you might want to make money at all this out in the world somehow by organizing it into paid projects. If you step through each link on my old team’s process description, you’ll see basically how we organized a project. This tutorial has a few ideas about where to start as a freelancer, and this list of 42 questions to ask every client seems spot on. I’ve also heard good things about several of these sites used to track hours and generate invoices, but how would I know, really. More recently, Dudley Storey has put together a fairly comprehensive reading list on the business aspects of being an independent web developer.
- If you’re not big on free-lancing and want a steady job somewhere, working through this guide will certainly give you the skills, but to get your first real job, you’re going to want an online portfolio. Prospective employers will take a portfolio site very seriously. Just mentioning the keywords from this guide in your resume will get some attention, but linking to sites where you’ve used all this will get you more.