Getting Started

Back in the old days, the Internet was a much simpler place. A URL to a text file made everybody happy. Then came hyperlinks, letting us put URL links in text files to refer to other text files! People went crazy!

Then came HTML, which let us structure our content and style it. As time passed, smart people realized that blending style and content in one document was a horrendous sin – so HTML begot XHTML and CSS (which are now on the verge of begetting (?) the latest incarnations: HTML5 and CSS3). Somewhere along the way came JavaScript (JS), which let us manipulate objects on a web page without having to refresh the page, but it was slow and messy. (but JavaScript has grown up now too, and many people just call it Ajax, because it sounds so much more avant-garde that way)

As the Internet started to explode, people demanded a better experience; they wanted to be able to have dynamic pages, and not the same old static crud your parents were used to. Henceforth PHP and ASP were born, to serve unique pages to different users, based on data in a database. The era of websites was slowly coming to an end - it was time for web applications to take control. But developers weren't satisfied with PHP and ASP alone, so other programming languages joined the web party - Ruby, Python, Java, Arc etc. Luckily, the Internet is an open and flexible place and it didn't mind all this competition at all - “the more, the merrier!” it exclaimed.

But developers were restless and unsatisfied. They cried out: “Every time I make a web application, I do the same things, over and over. Can't it be easier?” Yes, yes it can. Soon enough “frameworks” started popping up, which imposed certain rules and standards, thereby creating a new layer of abstraction. These frameworks brought together many of the various technologies used in developing web applications, creating shortcuts for doing boring, repetitive things, and in general, made development orders of magnitude simpler, faster, and easier.

So… here we are today: we've got xHTML, JS, CSS, and a bunch of backend frameworks. You ask: “What do I start with? What do I need to learn?” Patience… let's dive in a little deeper and see see how all these elements fit together…

HTML

HTML files are simply text files that contain the data that makes up a webpage. If you view source in your browser, that's what you see. You'll also find links to external files like images, and CSS and JS files. (It's bad form to include too much JS or CSS within your HTML). HTML is structured following the rules of XML, and usually looks something along the lines of:

<html>
	<head>
		<title>Shows up on the Title Bar of your browser</title>
	</head>

	<body>
		<p id="bob">I'm a paragraph!</p>
	</body>
</html>

If you save a file as *.html, your browser will try to open it as a web page.

CSS

Whereas HTML is the blind data carrier, CSS helps structure and style it. CSS files are also text files, but ending in .css, and are structured very differently from HTML. Here's a sample:

body {
	background: red;
	color: white;
	}
	#bob {
		font-size: 2em;
		}

The above CSS tells the browser to find the body tag in the HTML, and changes the background to red and the text color to white. It then finds the object with bob as an id, and changes it's text size to 2em (em is a unit). Fyi, the indentation in the code doesn't matter.

Ajax

JavaScript allows for code to be executed after a page has already loaded. This enables lots of crazy cool stuff – Google Maps exists because of JavaScript. JavaScript lets you refer to objects in a page and manipulate their properties. (Much like CSS, but more powerful. Also CSS only gets 'run' when the page is loaded, not after.) Raw JavaScript is a bit messy, so developers now use JavaScript frameworks, which make coding much easier. For example, the following script would change the width of an object with id=“bob” to be 200px wide after the object was clicked (using the MooTools framework).

$('bob').addEvent('click', function(e) {
		e.stop(); 
		morph.start({
			width: '200px'
		});
	});

The term “Ajax” is now popular when referring to JS, but it is not synonymous with JS. It actually stands for “Asynchronous JS and XML,” a method of using JS to pull in new data into a web page after it has already loaded.

Backend

Unfortunately, HTML, CSS and JS are still not enough to develop a web application. For these, you need communication with a database, and a layer (or multiple layers) of code to serve certain pages depending on user requests.

Currently, most web applications use relational databases to store the data (it is still sent as HTML/XML). (Fyi, if you've ever used Microsoft Access, then you've played with relational databases.) This data consists of everything the web application deals with – but not the actual code. For example, Facebook stores all the information it has about you: name, birthday, favorite books, etc. (and that's a really big etc.) in a database. The CSS and JS are still in text files. Relational databases like MySQL are often used, and are queried using a language called SQL.

Many programming languages can now run on a server. PHP is almost ubiquitous, and all you need to do is save a file as *.php to your server, and when you navigate to it using your browser, it renders it as a web page. For example, the following code

<p><?php echo 2+3; ?></p>

would be converted to

<p>5</p>

when opened by a browser. (Note: all the conversion is done on the server, before it even hits the browser, which is opposite of JS, where the code runs in the browser)

But just creating a bunch of PHP pages isn't very good programming practice. Taking inspiration from enterprise applications, MVC frameworks were developed for a variety of languages. (see the Frameworks page) These integrate all the required web technologies to develop full scale web applications.

These frameworks are a bit too much for a “Getting Started” article, so here's where we'll stop for now.

Moving On...

You: “But wait! You didn't answer my questions!” Me: “Whoops, you're right. Here we go…”

What do I start with? Definitely with HTML. Then, if you're focusing on front-end, look into CSS and a JS framework. If you're focusing on backend, dive into a back-end framework.

What do I need to learn? A good web developer has a handle on everything we've mentioned so far, but they also usually specialize in a certain function. So, try a little bit of everything, and then stick to what you enjoy and you're good at.

Hungry for more? Read Chapter One of the Web Style Guide and check out the Useful Resources.