Last Updated on August 1, 2017

Many of us use websites each and every day, in fact, we’re using one right now to share this blog. We use websites to order lunch, shop for a new outfit, research a vacation, and so much more. It’s hard to imagine our daily lives without them. But have you ever wondered what really goes into building a website?

As a Web Developer, I am often asked to explain the different elements of a website. My father works in real estate so to explain the elements of a website I’d like to draw a few comparisons.

Server Code

Let’s say the building owner’s representative, Jack, is currently monitoring a downtown skyscraper for office space. He wants to ensure the project is compliant with all building codes, meets the owner’s expectations, and follows safety guidelines. Jack will start his day reviewing blueprints in the office and checking the project schedule to make sure the project is on time and accurate before visiting the job site.

Jack’s office is similar to a website server. A web server is a computer, likely located in a different town, that generates source code, which is then interpreted by a browser. So, before Jack visits the job site, he gathers his paperwork and does any last minute considerations. The materials he brings can be considered the source code of the website which the server generated. At Scheffey, we think through the best way to write server code so each web page is loaded quickly and efficiently.

HTML

When Jack arrives at the job site, he checks in with the construction manager for the required permits. These are always important to have up front as the project would be void without the necessary paperwork. His initial observations of the project are as follows: steel beams are placed on each floor to provide structure, doors are adhering to accessibility code, and windows are strategically located relative to the various office spaces.

Jack’s initial assessment of the project correlates to how HTML works with a website. The required permits are to the project as the web page’s title and description are to the website. The steel beams act as website menus, sidebars, and footer. The skyscraper windows translate to web page imagery, headings, and any hidden content pertaining to search engine optimization.

The regular user does not see explicit HTML, just as the office worker does not see the steel beams. But without either, both would collapse. At Scheffey, each web page is built around modern technology that uses semantic elements like menus, sidebars, and footers built to appropriate standards and specs.

CSS

Jack then proceeds to enter the building and look closer at the carpet choices, wall colors, bathroom fixtures, and other various elements. The owner has specific tastes and wants things a certain way; so it is Jack’s role to ensure each item on the checklist is correct.

These small, stylistic details are the metaphor for CSS on a web page. CSS, or cascading stylesheets, defines the styles of web pages and how they appear on the site. The bathroom fixture, carpet choice, and wall colors may not be tantamount to the building collapsing due to incorrect steel beam usage, but it is important because the details give the building its charm.

The owner wants to attract tenants and the details can make the building stand out, just as aesthetically pleasing websites attract visitors. At Scheffey, we understand this principle and take extra steps to accommodate out client’s desire to have the website match their vision.

JavaScript

Let’s say Jack knows that the interior door lock selection is a more expensive option, so he goes to check its operation. Each door lock is a modern, app-enabled switch so managers can enter and leave their offices with ease. He also knows the elevator operation is important so he inspects those as well. He tests the buttons, tracks the time for the car to arrive, and gauges comfort when riding the elevator.

These actions represent a small selection of functions the building could include when complete. A boiler room, a kitchen, or mailroom also provide actions for the building. On a website, JavaScript dictates how elements behave. A user scrolling the web page is like an elevator, a turning lock is like a mouse-click, and a hot stove is like an animated image. At Scheffey, usability is important. We make sure the user experience is a smooth process and gets our clients the results they intended.

By walking through a typical project for a real estate representative we were able to illustrate the components of a website regarding Server Code, HTML, CSS, and JavaScript. Without each technology, websites feel incomplete just as Jack could not complete the skyscraper without an elevator, doors, or steel beams.

A lot goes into building a website, just like a lot goes into building a skyscraper. But you don’t have to go it alone. If your website needs a refresh or you are looking for a brand new site, give Scheffey a call and we’ll help you get started.