A Website is like a House. Here’s Why

By

Website House Metaphor

Metaphors are great ways to bridge the knowledge gap between technical and non-technical team members. But instead of bombarding non-technical folks with acronyms and jargon, it helps to first establish a baseline understanding of how different technologies work together. One way I like to do this is by comparing a website to a house.

1. The Frame: HTML (HyperText Markup Language)

A house has rooms, and each room contains furniture and electric appliances. Similarly, a webpage has sections (e.g. header, body, footer), and each section contains images and text. HTML organizes and presents elements of a webpage in a structured hierarchy. Here’s an example of pseudo-HTML describing the elements in our house:

[code language=”html”]
<house>
<second_floor>
<bedroom>
<bed />
</bedroom>
</second_floor>
<first_floor>
<living_room>
<television />
</living_room>
<kitchen>
<fridge />
</kitchen>
<entrance>
<front_door>
<door_bell>
</front_door>
</entrance>
</first_floor>
</house>
[/code]

2. The Look: CSS (Cascading Style Sheets)

Not all rooms, tables, and chairs look the same, nor do words or images on a page. That’s where CSS comes in – CSS defines how elements look, describing their color, size, position, shape, and more. Here’s an example of how we’d use pseudo-CSS to style a bedroom in our house:

[code language=”css”]
bedroom {
width: 12ft;
height: 8ft;
walls: 1mm wallpaper matte;
floor: carpet
}
[/code]

3. The Moving Pieces: JavaScript

You can interact with things in your home – turn on the lights, start the dishwasher, etc. Likewise, you can interact with a webpage by clicking on text, hovering over images, and filling in forms. JavaScript handles all these interactions, and as a scripting language, it can provide rules and logic to determine what should happen next. Try to guess what interactive features this JavaScript code adds to our home:

[code language=”javascript”]
$(“doorbell”).click(function(){
alert(“Ding Dong”)
})

$(“input[type=televisionRemote]”).change (function(){
var buttonPressed = $(this).val();
if (buttonPressed === “powerButton”){
turnOffTelevision();
} else {
goToChannel(“buttonPressed”)
}
})
[/code]

4. What You Can Directly Access: Client-Side, aka Front-End

In your home, you have direct access to most things. You can view your bed and the style of your wallpaper. You can take your doorbell apart and see how it works.

The “front-end” of a website refers to everything that you can directly access. When you open a webpage, HTML, CSS, and JavaScript files are sent to your computer’s browser where they are parsed and then rendered. You can go to any homepage in your browser, open up developer resources, and view the element structure (HTML), styles (CSS), and interactive logic (JavaScript) that helps display the page:

Screen Shot 2013-10-08 at 12.08.06 PM
Inspecting the General Assembly homepage

5. The Wiring & Pipes: Server-Side, aka Back-End

Although you can access most things from within your home, you have very limited insight into the how a power plant is creating and sending electricity to your home, or how your cable company is streaming your channels.

The “back-end” of a website refers to everything that takes place behind the scenes. When you login to any website, your browser requests information (data) from a server, which is really just a computer located somewhere else in the world. Server-side languages such as PHP, Ruby, and Java process your requests, and return data and/or new HTML, CSS, and Javascript files to your browser. Here’s an example of PHP code; try guessing what it does in our house:

[code language=”php”]
<?php
$name = $_POST[‘name’]
$secret_code = $_POST[‘secret_code’];

$doorOpenStatus = validateUser ($name, $secret_code);

if ($doorOpenStatus){
openDoor()
sayGreeting($name);
} else {
echo “You are not allowed to enter this house.”
}
?>
[/code]

6. Organization: Databases (e.g. MySQL, NoSQL)

When watching TV, there are way too many cable channels to keep track of, so you regularly consult your Channel Guide. The guide offers a very helpful table that associates a channel number, with a TV station, with the program that is playing on that station right now. The relationship between these pairs works the same way a database would store and modify user records or data about products. Here’s an example of how you’d use SQL to select a TV program:

[code language=”sql”]
SELECT program FROM premium_channels
WHERE channel == 303 AND title like ‘%food%’
[/code]

Wrapping Up

This is by no means a perfect metaphor, as there are many blurry areas of overlap. For example:

  • CSS can handle some user interactions (i.e. mouse hovers)
  • JavaScript is also now being used as a server-side language
  • Client-side databases are now available for storing data in your browser; no server needed

That said, establishing a metaphor from the start that resonates with your stakeholders will make it that much easier to explain things in future conversations.

What other metaphors have you used to explain technical concepts? We’d love to hear them on Twitter: @GA and @wanderingwenger.

Interested in learning more about web development?

Dive into coding at General Assembly.

Mike Wenger is the Web Product Manager at the Michael J. Fox Foundation for Parkinson’s Research, and a student in General Assembly’s Back-End Web Development course. He is passionate about how nonprofits can best leverage technology.