NON TECHNICAL OVERVIEWS OF TECHNICAL THINGS: HTML, CSS and JS

At Oak City Labs we develop using a particular stack of technologies we are not only comfortable with, but believe to be the most effective tools in solving whatever challenges come our way. Too often when a developer says “We use X framework or Y library”, it sounds like utter gibberish and has no real meaning to non-technical people. This disconnect is the inspiration for my blog series: Non Technical Overviews of Technical Things.


Hey there!

Welcome back to my series of non technical overviews of technical things. This week I’ll be discussing the basics of how a website is born. Well, you see, when a mommy website and a daddy website love each other very much…

Just kidding! Modern websites are composed of the following three components:

  • HTML (HyperText Markup Language) - Content and Structure

  • CSS (Cascading Style Sheets) - Appearance

  • JS (Javascript) - Functionality

If you have heard these terms before but have no idea what they mean or how they affect your website, have no fear! Soon you will have a grasp on the basics of how websites are made so that you can appear hip and knowledgeable to all your colleagues.

Via

House Analogy

Take this house:

Via

Pretty swanky house, right?

Right. Now, let’s divide this house into its structural, aesthetic, and functional components.

  • Structure and Content - Structurally we have the foundation the house is laid on, the walls, floors, ceilings, supports, frames, etc. For content, we have the potted plants, the couches, chairs, tables, TVs, beds, appliances, nerf guns, and anything else that gets placed inside the house.

  • Aesthetic - For appearance, we think of the way the house looks. This component spans everything from the type of wood on the floor to the color of the walls to the way the furniture is arranged. Anything that changes the way the existing pieces of the house look is lumped into this category. This includes changing the width and height of structural elements, as well as how much space exists between structural components like the couches and TV.

  • Functionality - Think electrical, gas, water, internet. Anything that makes the house work like a house should as compared to a hollow, functionless shell.

Structurally, a few rooms in our house might look something like this html file:

Aesthetically, we can add some color, borders, and widths of certain things like in this css file:

Functionally, we can specify interactions with elements from the html in a js file:

Now, this code is far from complete, but I want to highlight a few things about it by using the door as an example:

  • An element gets defined in the html file:

  • A style gets defined in css so that anytime that element appears in the html file, it has the same style:
  • Finally, functionality for the door gets defined in the js file we saw above:

The website a user sees is essentially the structural, aesthetic, and functional components working together to create an experience.

Finally, I want to give a quick real-world example of these three components.

Navigate to Google in Google Chrome browser:

 

Right click, hit ‘Inspect’:

 

The developer console will open at the bottom of your browser

 

Search for and highlight the line that starts with <body ……>

 

On the right side, you’ll see the following:

Highlight the #fff as seen above, change it to #000 as seen below, and hit enter:

Boom! Google is now black. You just used hex codes and css to change the color of Google!

Now, you might be wondering whether other people can see the changes you made or not. The quick answer is nope, nobody else can see what you did. Why? Because when you access a website, the HTML, CSS, and JS files for that website get copied from their computer to yours. Any changes you make to the files that were downloaded to be viewed in your web browser are ONLY on your computer. You can make Google look black, white, rainbow-colored, filled with unicorns, or even covered with custom poetry, but in the end only you can see your changes! And if you refresh your page, all your custom changes disappear and the files look the exact same as the ones from the server.

I bet you’re wondering now how the files from the website you’re accessing get to your computer in the first place. The quick answer is websites on the internet are all hosted on servers. Server is a fancy word for a computer that host publicly accessible information via the internet. Last time I described the web server framework we use at Oak City called Flask. Flask helps us manage all the different pieces that go into creating our mobile and web apps, but in this instance, it is largely responsible for allowing the HTML, CSS, and JS files of our websites to be downloaded and accessed by users.

What We Learned

  • Websites are comprised of three components: structural, aesthetic, and functional
  • These components, respectively, are called HTML, CSS and JS

  • These files are copied from servers to users’ computers when websites are accessed.

The internet is an exciting place where you can watch cat videos, promote your business, or brag about your sock collection. Or all three, at the same time. You could make a website with a video of your business that sells hand-knitted cat socks. That’s a free business idea for you right there. Don’t forget about me when you’re famous!

I hope you found this post informative. Fun fact, building websites is one of our specialties here at Oak City Labs! Drop us a line if you’re interested in chatting about having a website made for you or your business.