The ABCs of Web Development

Web development can often be an utterly perplexing affair. Today, aimed at beginners, I'd like to introduce you to twenty six concepts or technologies, each mapping to a letter of the alphabet. Sounds wonky? It probably is! Let's get started after the jump.

Republished Tutorial

Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in March, 2011.

A -- AJAX

AJAX stands for Asynchronous JavaScript And XML and is the main driving force behind all these super smooth web applications you've been using over the past few years.

AJAX, as a technology, has been pretty much all pervasive. GMail? Check. Flickr? Check. eBay? Check. You can even find it in WordPress' administration panel. So what exactly does it do and how does it do it?

At the center of everything is the XMLHttpRequest which allows calls to be sent and received, after a page has been fully rendered without touching the rest of the page. This essentially means that a web application doesn't have to go through the a full page refresh for each and every action. This, in turn, provides a much smoother, much immersive, desktop like user experience.

Related reading

B -- Browser

A browser is the understated structure on which you frame your magnificent masterpieces, be it websites or applications. They aren't limited to retrieving websites though -- modern web browsers are quite the multitasking beasts. My installation, for example, taps into IRC, FTPs into my development servers and syncs my credentials across every device I use.

As you may have surmised, browsers are simultaneously the cause of much cheer and rage to the modern web developer - they're invaluable tools as well as annoying beasts. Any developer who has to make sure that his work has to look perfect in every browser will know the pain.

Related reading

C -- CSS

CSS is one prong of the front end development trident. CSS, which stands for Cascading Style Sheets, is the language with which you define how a page is displayed -- its presentation, if you will.

During the horror days of web development, developers would frequently weave the presentation code into their source. CSS, amongst other technologies, alleviated this greatly by providing a method to cleave presentation from the content.

Related reading

D -- DOM

The DOM, an abbreviation of Document Object Model, is the accepted convention for interacting with HTML [or XML] documents. The DOM API provides a way to traverse and manipulate a document programmatically.

The DOM creates a hierarchy that matches the structure of the parsed HTML document. The children are called nodes or DOM nodes.

If you hear someone talking about the DOM, chances are, they're talking about DOM scripting. This is the term used to describe programmatically accessing and manipulating the DOM through JavaScript. This is the tech behind most modern web sites and applications you see today.

Related reading

E -- Events

Modern web applications are deeply event driven affairs. But what's an event? Most things you do on a web page constitute an event. The trepidatious hover over a funny but possibly NSFW link, clicking on a button, pressing tab to move to the next text field are all valid events.

Event handling refers to the process where we attach a specific chunk of code to be run whenever a certain event is fired. Again, this is one of those fundamental concepts behind modern web development that you'll need to master.

Related reading

F -- Firebug

Any craftsman needs his tools to work efficiently. Web developers aren't deviants from this rule. One of the most robust tools around is Firebug.

Firebug is a Firefox extension that will galvanize your workflow. It lets you edit and monitor a page's every aspect on the fly. I can't quite explain all the features it provides so make sure to hit the links below.

Related reading

G -- Grid

Grids are the visual frameworks on which pages are structured. Ported over from the once burgeoning print industry, grids are an essential part of the modern web development workflow.

There are a number of CSS frameworks catering to exactly this need since building a grid based layout, for a non-trivial number of pages and layouts, can be an exercise in masochism.

Related reading

H -- HTML

If you're reading this today, you probably already have a vague idea as to what this is. If you got tricked into this link though, read on. By the way, welcome to Nettuts! We write about web development, cookies and Justin Bieber.

HTML stands for HyperText Markup Language, the defacto markup language of the web -- it's to web pages as bricks are to homes. HTML consists of several components or elements -- tags, tag attributes and the content enclosed within the tags.

The latest version of the HTML standard, HTML5, is now upon us bringing a number of new features, streamlining the workflow and fixing a few incompatibilities.

Related reading

I -- IE

Ahh, Internet Explorer. The name evokes both awe and anger. Once a hero which brought forth impressive new features to the market, single handedly moving the industry forward, it also dropped the ball by letting the browser stagnate. Till date, it's also the leading cause of alopecia in front ends developers. After a decade of battering, the latest version of Internet Explorer, 9, is once again in the right path towards innovation.

Whatever your stance towards Internet Explorer is, it's an intrinsic and inextricable part of the web development process.

Related reading

J -- JavaScript

JavaScript is the final member of the essential web development trio. JavaScript, which is NOT Java, is the scripting language of the web. Its use in billions of web pages and, more importantly, web sites stakes that claim. You define behavior through JavaScript -- managing events, manipulating the DOM and talking to the server.

Thanks to the incredible adoption of libraries, like jQuery, awareness and knowledge of JavaScript has been growing every year, year after year. I think it's appropriate to say that JavaScript is an absolute must for every modern web developer.

Related reading

K -- Keyword Optimization

SEO relates only tangentially to web development but even then, it's important for a web developer to have basic knowledge of what SEO is and what it does.

Keyword optimization refers to the process of choosing the correct keywords for your website and then optimizing them so your audience can find your site. While you're dabbling with all the tenets of SEO, remember this: content is king. If you have bad content with excellent SEO, users will find you but leave soon after. If you have good content, users will find you and stay.

Related reading

The Only SEO Tools You'll Ever Need

L -- Less

Less is a stylesheet language with a few aces up its sleeves. Their website states that LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions and I'm inclined to agree.

LESS is CSS on anabolic steroids. Yes, it sounded better in my head but you know what it means. It brings the concepts of a dynamic language to CSS thereby making humongous stylesheets a lot more easier to manage.

Related reading

M -- MVC

The Model View Controller pattern, better known as MVC, is one of the most used in the web development world. It's an architectural pattern that separates each part of a web application into logical chunks for better maintainability -- models handle data, views handle presentation while the controller coordinates the flow of information between the two.

If you've used a modern web development framework, you've used MVC. Ruby on Rails, Code Igniter and Zend Framework all use this pattern.

Related reading

N -- Node.JS

Node.JS ushered in a new era of web development. It enables running JavaScript on an incredibly fast VM [V8]. The consequences of such a paradigm shift may not be immediately apparent but an hour or so with it will make it clear as day.

Incredible speed as well as the ability to manage thousands of concurrent IO events are the main talking points along with the near universal JavaScript developer user base.

Related reading

O -- Object

Object oriented programming has been widely adopted by the programming community for the flexibility it brings to the table. With OOP you can write few lines of code, make it more DRYer and thus much more easier to maintain.

But what exactly is an object? It's quite hard to explain it in a single, semantically self contained sentence so be sure to hit the links below!

Related reading

P -- PHP

PHP is unequivocally the most popular server side language -- it powers millions, possibly billions, of web pages and applications.

Even in the face of a number of newer, arguably better options to write web applications, PHP has not only survived but flourished. WordPress, Joomla, Drupal, MediaWiki all use PHP behind the scenes. One of the main reasons is the ease of deployment and the relative ease with which you can find hosts supporting PHP.

Related reading

Q -- Query

A query, in our context, can refer to a number of things. A query language is used to interface with external systems to obtain information. SQL is a fine example which is used to obtain information from relational databases.

A query string, on the other hand, are chunks of information that is passed to web application as part of the URL. This data maybe anything from the page the user is trying to access to the authorization ID of a transaction. Query strings are formatted as key value pairs.

Related reading

CodeIgniter from Scratch: Search Results without Query Strings
"Popular Posts By Comment Count" SQL Query in WordPress

R -- Regular Expressions

Regular expressions provide a flexible way to match strings of text with specific patterns. It's written in a specifically language that's interpreted by a parser. All modern languages come with regular expression support.

Related reading

S -- Source Control

Source control is a term prevalent throughout the development community regardless of which aspect they're focused on -- programmers working on everything from bare metal to cloud computing use source control.

But what is it? Simply put, source control lets a team of developers work on the same subset of files with changes made by each member trackable and identifiable. Each version of the code base can be compared, merged or even restored.

Related reading

T -- TDD

Again, one of the common elements among almost all developers. TDD stands for Test Driven Development and refers to the process where code and automated tests to test that code are written near simultaneously. This removes much of the tediousness of software testing and thus, encouraging developers to test more often.

Related reading

U -- Unit Testing

Unit testing is a subset of TFF where small units of the source code are tested to make sure they're production ready. While a unit often refers to a method in OOP, generally it refers to the smallest portion of an application that can be tested independently.

Related reading

How to Test your JavaScript Code with QUnit

V -- VIM

Vim is a deeply polarizing text editor that the famously hip Nettuts editor, Jeffrey Way, uses. Vim is free, open source and supremely feature packed. On the flip side, the learning curve is almost intolerably steep and without the proper resources, you're going to be lost for a long time. Hit the links below to see whether it's worth the switch.

Related reading

Editor's Note: The Nettuts+ team can neither confirm nor deny that the Nettuts+ editor is... "hip."

W -- WordPress

WordPress started out as a minimal blogging system but in its current state is impressively extensible. It's extensible to the point that it's being used as everything from a CMS to an e-commerce system to everything in between.

It also has an almost cultish group of followers consisting of both developers and designers who swear by the platform making it a reliable platform on which to base your upcoming website.

Related reading

X -- XSS

XSS stands for Cross-site scripting. It's one among a number of possible security gotchas you could face when creating a web application.

XSS refers to the act of loading the vulnerable web site or application with malicious scripts in order to gain elevated privileges or sensitive information, often both.

Related reading

Y -- YUI

Yahoo User Interface library is a JavaScript library that simplifies the process of creating interactive web applications. Like most modern libraries, it provides support for DOM manipulation and AJAX out of the box.

While not as well known as jQuery, YUI still has a non-trivial user base. and is actively developed.

Related reading

Z -- Z index

Z-Index is a CSS property that defines how an element is stacked on a page-- it defines how close an element is to the top of the viewport. A higher number means it will appear on top of elements with a lower number.

While this property may be relatively specialized, this comes into play almost right away when you're building widgets or more complicated web designs.

Related reading

That's a Wrap

And we're done. I hope you had as much reading this as I had putting this together. Thank you so much for reading!