I get questions from time to time about how to get started in web development. So I thought I might write out a guide. What follows is a not-too-terribly-technical introduction to what you’d need to get started, with some directions to follow if you want to get further into it.
This is the first in a series of posts on web development. When you finish this, be sure to check out Web Development 102: Tools.
Before You Dive In
The first thing to ask yourself, of course, is why are you doing this in the first place? There are lots of careers out there more lucrative and, honestly, more worthwhile than web development. At its best, the web is a step in the democratization of publishing that began with Gutenberg. At it’s worst, the web is a huge morass of advertising and miss-information. Surely you be healing the sick, or feeding the poor, or contributing in a more substantive way to the cultural conversation. Right?
But I digress, you’ve decided that building websites is something you want to do. You have your reasons, just as I have mine. So let’s get started.
How the Web Got Started
In its original conception (in 1990), the web was a tool for physicists to talk with each other. Tim Berners-Lee invented both the first web browser and the first web server. Berners-Lee was the first to successfully implement the idea of hypertext–of being able to click on a word on a page and be taken to another page. Now that web sites can do so many things, it’s hard to remember what a revolutionary idea this was. There were lots of ways to transmit information, but the idea that you could build a web of pages linked together wherever it made sense in the text to do so was new (at least in implementation, the idea of “hypertext” dates back to an essay by Vannevar Bush published in 1945).
So, web pages (and, later sites) were originally text-heavy. They were almost entirely made up of structured text. Text could be divided with headings (in a hierarchy from most to least important), organized into paragraphs, arranged into bulleted or numbered lists, and so on. Inline images were possible. Tables came along later and were the first tool for controlling layout.
What the Web is Now
Today, static web pages are pretty much a thing of the past. What you have instead are web site, and the pages on those sites are generally composed of a template filled with data pulled from a database. Such database-backed sites are, today, the rule, rather than the exception.
Originally, web pages were consumed mostly on desktop and laptop computers. That’s still a popular way interacting with web pages. But, of course, a lot of web surfing these days happens from a wide variety of mobile devices. And this complicates the job of delivering content to those devices in a way that makes it easy to consume while still making it (relatively) easy to maintain.
The scope of web development is often described as a split between the front-end, the back-end (or server-side), or full-stack (i.e. both). Some developers specialize in the front-end, others specialize in the back-end. Those who cover both, which is increasingly the case, are called full-stack developers. We will examine each area in turn.
HTML and CSS
HTML is, of course, the foundation of web design and development. HTML is not a programming language; it’s a markup language. Through a system of tags, it allows you to mark up text so that web browsers (at their discretion, but adhering, more or less, to accepted standards) display it in a certain way.
People designing web pages wanted more control over the look and feel of web pages, and browser manufacturers were happy to oblige them (while attempting to create competitive advantage) by adding new tags that other web browser manufacturers (in order to eliminate competitive advantage) were quick to adopt. The web had, from fairly early on, had a standards body, the W3C (now just W3) to keep this trend from getting out of hand, but, for quite some time–really until the birth of HTML5–it was problematic, at best.
At some point, the W3 made a clear division between structure and look/feel. The structure of a page would be handled, as it always had, by HTML. The look and feel would be handled by another language, CSS. This move, really, was genius, especially in terms of maintenance. A site, no matter how many pages it might contain, could be structured a certain way and site-wide changes to its look and feel could be made by editing one file.
So there’s two for your list: HTML and CSS. They are the bedrock of the web. They are the first two things you should learn like the back of your hand. There are many places on the web where you can learn HTML and CSS. I recommend the following:
- Online Course: Codecademy: HTML & CSS (Free)
- Online Course: Code School: HTML/CSS Path
- Book: A Book Apart, CSS3 for Web Designers
- Book: A Book Apart, HTML5 for Web Designers
- Online Course: Codecademy: jQuery (Free)
Responsive Web Design
Sites must perform well on a variety of mobile devices. In the early days of the iPhone, having a separate mobile site was the preferred solution. Today, with a few exceptions, the preferred solution is to have one site that responds to different screen sizes (really, to different view-port sizes. The view port being the area of the browser window to which you, as a designer/developer, have access). Through very clever utilization of a previously under-utilized part of the CSS spec called “media queries,” a very clever developer named Ethan Marcotte devised a way to use CSS to restyle web pages on the fly based on view-port size and screen orientation (i.e. portrait, landscape). Responsive isn’t a separate language: it’s all done in CSS. But it is a new way of thinking about web design. So, while you’re better off implementing responsive using Bootstrap, it’s good to understand what you’re doing by reading Marcotte’s brief, eye-opening book:
- Book: A Book Apart: Responsive Web Design (highly recommended)
On the contrary, the back end offers many platform choices. And, while developers often become familiar in more than one of them, there is a tendency to specialize in one or, perhaps, a few. Which should you choose? Ideally, you would learn many and use the best to solve the particular problem at hand. But life is too short, and most server-side technologies are general purpose, meaning pretty much anything one can do, the others can as well. So let’s examine a few solutions.
The old standby in web development is PHP, a C-inspired language written for web development. You’ll find people tend to have strong opinions about PHP, especially strong negative opinions. I’m actually a fan. I’ve developed many sites in PHP and still find it a very convenient language to know, especially when customizing WordPress and other CMSes built on PHP. Often paired with a MySQL database server, PHP is a capable solution to a wide range of problems (PHP is database agnostic, meaning you can pair it with any server-side database you like). When running on Linux and using the Apache web server, the combination of PHP and MySQL is often referred to as the LAMP Stack.
If you use PHP, I recommend you pair it with a good MVC framework, as this eliminates a lot of the issues that those who dislike PHP will mention to you. Laravel is the most popular these days. I’ve done a lot of work in CodeIgniter. Facebook runs on a highly-optimized PHP-derived platform called HHVM and a PHP-derived language called Hack.
Ruby on Rails
One of the server-side solutions people will tell you about after telling you they hate PHP is Ruby (a language) especially when combined with Rails, an MVC framework. Ruby itself is a beautiful, elegant language. I often recommend it to people new to programming. Ruby on Rails has been used to build some great software, notably Basecamp, of which I am a huge fan. Ruby/Rails is often combined with MySQL, though it is database agnostic.
Another technology popularized by Google is the AngularJS platform which is similar to Meteor in that it is often combined with Node and MongoDB. While Angular is, itself, a front-end framework, combining it with Node, MongoDB, and Express.js gives you what is often referred to as the MEAN Stack, which is an increasingly-popular platform.
This section is already getting long. Did I leave out your favorite? I hope not. There are other platforms out there. If you’re into Microsoft, their ASP.NET MVC platform is really quite good. And, of course, Java has been a contender since not long after PHP got started. These days, Java often combined with Spring MVC or Struts (both MVC platforms) to create web solutions.
I’ve talked a lot here about platforms, because platforms are confusing, especially to beginners. And this Web Development 101 may indeed require a Web Development 102 to complement it (and now, it does). But, if you’re new to this whole thing, what I’ve sketched out here should give you some idea, at least, of the technologies that compete in this space.