As someone who designs and develops websites, I’m often asked: What goes into building a great site? For those who don’t create website code, it can seem mysterious and unapproachable and at times the investment of time and money can seem daunting. To better explain what it takes to create a functional and well-designed website I like to use the analogy of building a home from the ground up. It’s a concept most people have experience with and it parallels building a website pretty well — so let’s break each web component down and build this house together.

Putting Together the Blueprint: Design and User Experience 

Before we begin to code, we need a design from which to work. Like a blueprint for a new home, web designers usually begin by plotting out pages on paper or using design software like Photoshop. This gives the website developer something to work from that includes specific measurements.

Many times agencies will take some time at this point to do a bit of user experience research. User experience (UX) design helps to ensure websites work in a way that users enjoy and that meets your goals. Just like you wouldn’t design a house with stairs to nowhere, UX makes sure a website functions in an expected and meaningful way.

Starting Construction: Building with HTML and PHP

Now that the plans are in place, it’s time to start building. When it comes to web developers, that usually means HTML and PHP. These two coding languages provide the basic structure for the website.

HTML, or HyperText Markup Language, serves as a building block for any web page. It determines where content goes and how various elements fit together. Think of it as creating the rooms and boundaries. HTML helps to construct areas for things like the navigation, sidebar or footer.

PHP (which originally stood for Personal Home Page) compliments HTML and works alongside it to make things easier. Using our analogy, PHP acts like prefabricated construction materials. When crews are building a house, they don’t usually construct a door or cabinets from scratch. Instead, they use doors and cabinets that are pre-built to help speed up the process. PHP works similarly by allowing developers to reference pieces of code many times throughout the site.

Interior Design Time: Styling with CSS

The walls are up, so it’s time to get creative and add some style — that’s where CSS comes in. CSS, or Cascading Style Sheets, help a design come to life. Without it, your website wouldn’t be much more than a blank white page with text and links. Just as an interior designer makes a house more attractive by adding paint, light fixtures and flooring. CSS makes a website more attractive by adding colors, images, fonts and other styles.

Hooking Up the Utilities: Adding JavaScript for Functionality

If HTML was the structure and CSS was the style, JavaScript is the utilities. It would be pretty inconvenient to live in a house without electric lighting or running water. You could survive, but not without having to make some major adjustments. Like electricity, JavaScript adds functionality to your site to make it more interactive.

If you’ve ever visited a website using animations, photo galleries, pop-ups or other interactive elements, chances are it was using JavaScript. You might take these little touches for granted, but they do a lot for creating a cohesive user experience. You might take turning on a light switch for granted, but think of life without these luxuries!

To Be Continued… Moving In

We hope this house analogy helps you understand the basic building blocks of a website, but Lessing-Flynn’s team of experts are also always here to help with questions on any of the concepts listed in this article. Check back for part two to better understand what happens after your website is built!