Coding a Meteor Demo

Web Development 101

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.

Front-End Technologies

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:

JavaScript and jQuery

HTML and CSS give you a lot of control over how your web pages are structured and styled. But adding interactivity to the front-end of your site (the part visitors interact with directly) is accomplished through JavaScript, which is a full-fledged programming language, though, in places, an odd one. You don’t have to be a JavaScript wizard to develop web sites, but the more you understand of it, the better. Knowing even a little JavaScript will help you solve problems and build interfaces that interact with the user.

One example of this is client-side form validation. If you present a form to visitors, you can check their input in realtime with JavaScript and provide additional direction about the proper data format before the visitor submits the form. If you’re particularly classy, you can use JavaScript to restyle form elements in realtime (e.g. highlighting elements containing valid input in green, and those containing invalid input in red) to help visitors understand what is required.

While learning pure JavaScript should be on your list, jQuery is a framework that, in my experience, takes a lot of the pain out of it, especially when it comes to differences between the ways JavaScript is implemented by various web browsers (or, more specifically, the competing Document Object Models [DOMs] used by the various web browsers).

Bootstrap

Before I leave the front-end behind and start talking about back-end (a.k.a “server-side”) development, I need to mention Bootstrap, because it’s a wonderful thing that will help you get sites off the ground quickly. Bootstrap (originally, “Twitter Bootstrap”) is a front-end framework. It includes an organized set of tools for making HTML, CSS, and JavaScript easier to use for the most common use cases. As with JavaScript, you don’t have to be a wizard, but the more you know about it, and the more you use it, the better:

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:

Server-Side Technologies

The great thing about front-end web design/development is there are relatively few technologies to learn. Once you have HTML and CSS, you’ll be building static sites. Add JavaScript and jQuery, and you’ll be adding the ability to interact to the user’s behavior. Add Bootstrap, and you have lots of help creating an organized and maintainable front-end.

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.

Meteor

JavaScript, the de facto scripting language of front-end web development, can also be used on the server. There have been several attempts at server-side JavaScript. The most successful to date is Node.js. But Node is fairly minimal. It becomes much more attractive when you pair it with a framework. The one I’m most excited about at present is Meteor, which gives you a Node-powered web server, a MongoDB database server, and lots of glue and easy-to-install extensions to make working with them easy. The perk of Meteor, of course, is that you can use JavaScript on both the front and back ends. Another perk is that Meteor, through its implementation of Apache Cordova, provides a way to repackage your web app as an iOS and/or Android app.

PHP

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.

Python

Python is a popular choice for web development, especially when combined with Django (an MVC framework). A lot of development at Google is done using Python.

Angular

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.

The Others

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.

Next Steps

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.

Once you’ve got a bit of HTML and CSS under your belt, and have gone further and learned some JavaScript and jQuery, you’ll have to take the next step and learn something on the server side, assuming server-side and/or full-stack interests you. Your choice of server-side solution will often be dictated by where you work, unless you work for yourself.

5 thoughts on “Web Development 101”

  1. Pingback: Quora
  3. Pingback: Web Development 102: Tools – wheatblog

  5. This has been really helpful. Exactly what I was looking for since a long time. Thanks a lot. :)

Leave a Reply

Your email address will not be published. Required fields are marked *