As an IT professional with a focus on web and mobile a question that’s put to me from time to time from is “How hard is it to make a website and what’s involved?”. The first part is no a brainer – basic web is easy – anyone can do it, I don’t care how “non-tech” you think you are. Yes there are degrees and it can become exceedingly complicated but the underlying concept, the methodology – that’s easy. From there it’s just a question of putting in the time to scale it to what you want it to be. Now the second part of the question – that’s a little more tricky. How to summarize all that “web stuff” into something accessible and easy to understand? It’s really easy to get bogged down in details. Finally, after years of mixed results – I’ve finally hit on an analogy I find resonates with just about everyone. My web “elevator speech” is what follows.

The web page – your online home

Let’s start by narrowing the topic – strip away all the unnecessary. Forget websites, databases, networks or any of “the web”. Instead we’re going to focus on the case of a single web page and how it parallels the construction of a physical building – it’s all about the phases of construction and purposes they serve. From a high level when we build a web page there are three distinct phases we need to concern ourselves with – structure, style, and interactivity. These are implemented with HTML, CSS, and Javscript. Perfectly fine if you’ve never heard of one or all of these – we’ll get there. As it turns out the phases of home construction track fantastically to these three and the purposes they serve – an almost perfect analogy. Zero technical prerequisites and no knowledge of home building required – just good common sense.

Structure

When a building is created we start by pouring a foundation, framing out walls, and putting on a roof – things that define the overall shape of the building – it’s structure. These activities provide a lattice that can be used to turn a building into a home, office, whatever. From a simple single room with a flat roof to a 50 room mansion, elaborate or simple, the end product for this phase is the same – a building with potential but not terribly useful as is. Hopefully we’re building with purpose but that purpose isn’t going to be realized in this phase. We’ll need things like lighting, furniture, cabinetry, bathrooms, water – things that will make you want to use the space. This phase however is structure only. HTML fills this role when creating a web page. HTML or “Hyper Text Markup Language” provides structure to the page by creating a frame that can be added to. You can create a page with HTML alone but it’s not going to be a place people will want to visit much less linger – it will appear too bare bones, too basic. The “Hyper” in the acronym tends to throw people off – ignore it – just think “Text Markup Language”. The purpose of marking up the text, also know as applying tags, is to provide instructions to your browser on how to display it. Tags come in pairs – there is a beginning tag and an ending tag. Within a given tag we may place more tags or text. Kind of like we have outer walls and inner walls that form rooms and inside those rooms walls that form closets. It’s a layering process. That’s as far as I’ll go into HTML here. I’ll get into specifics in a subsequent article. For now all we need to know is both buildings and pages need something to give them structure. Structure is absolutely essential but if that’s as far as you go the final product will be of limited use.

Style

Style has connotations of being an extra, occasionally yes but more often than not it’s essential. Without proper and sufficient styling a space won’t realize it’s potential. A floor, walls, and a roof won’t cut it for accommodations – likewise a page consisting of only HTML isn’t very useful. For a building we add things like window coverings, carpeting, cabinetry, and furnishings. We don’t just add whatever wherever either. We do it with purpose – with an eye towards cohesion, flow, functionality, and beauty. Will this be an office or a home – use dictates style. We achieve this same goal by adding “CSS” to a webpage. CSS stands for Cascading Style Sheets. Essentially it’s another form of text markup but with a different focus. It’s used to set stylistic attributes on the HTML we’ve placed on the page. That HTML might represent a button, image, or text for example. The attributes specified might be the color of the text, sharpness of the image, or the size and position of the button. Best practice, we define these attributes in separate files (a sheet) that we attach to our HTML but can also slip it into the same file as our HTML. It’s cascading in that a style applied to an outer tag is applied to inner tags unless it’s explicitly set for the inner space. Tying it back to the physical building – if I tell my painter to paint my bedroom red he will paint the walk-in closet red as well unless told otherwise. Furnishing and coverings make a space not only more beautiful but more usable – CSS does the same for web pages.

Interactivity

We’re just about there but there’s something missing. Our building – we’ll say it’s a home – is now an attractive space you would enjoy spending time in. What it lacks however is “go juice” – the ability to be interactive. It needs electric and water – maybe gas. We need to interact with our space to take full advantage of it, adjust the lighting, temperature, or just flush a toilet. Javascript fills this need for the web page – it allows the page to respond to our actions and requests. When we flip a switch a light turns on, when we click button we might have inputs validated and sent off to a server. Adding HTML and CSS made our page attractive and useful, adding a scripting language takes it to another level. It makes the page come alive. With well written javascript the sky is the limit – from displaying a message to the ability to re-write the entire page. Really powerful stuff.

Summary

The intent of this article is not to teach web development but to define the process and the steps. It’s almost always easier to learn the how once you understand the big picture. In the following series of articles we’ll learn to create a web site by first creating a page – structure and style – make it interactive with javascipt, and then repeat the process to create an entire site. This trifecta of tools – Html, CSS, and Javascript are commonly referred to as the front end as they pertain to development targeted for display in a web browser. In part II we’ll be discussing the back end – server side development. Along the way we’ll learn about a number of useful tools collectively known as LAMP.

Next up: An introduction to LAMP