Introduction
The House Metaphor​
To understand a website, we will first understand how it is built. A website has three main facets:
- Structure: We first map out the structure of the website. We define the sections of the websites that we will style and functionalize later.
- Style: Now that we know where everything will go, we have to define how it will look. Any modern website should have a well-defined design that is appealing to the user.
- Function: Not every website is functional, but for the ones that are, we have to exactly define and execute the functions that give our website the desired functionality.
We begin with the fundamentals, but as we move through the semester, you will find that even more complicated and powerful softwares fits neatly into this workflow. Remember, it is not our goal to reinvent the wheel every time. Our modern web development toolbox is meant to simplify the basics and allow us to do bigger and better things with web development.
So where, then, does the story of web development begin? Well, it begins with a humble house.
HTML - The Frame​
Why do you need three languages? To understand, let's use an imperfect metaphor: a house. To build a house you need tools (like your text editor, your browser, your command line.) After you have tools, you need all the building material: the 2x4s, the shingles, the dry wall, the windows: all the things you need to put together to make a house. This is the HTML, or hypertext markup language. However this house thus far isn't going to be very pretty to look and not very functional. It's not going to have any color or any sort of elaborate structures. It's going to be bland, inert, and boring.
Likewise, you can create a website that's just HTML but it's going to be a black-and-white text document with no style or interactivity.
CSS - The Furnishing​
In order to arrange, style, and generally make this house more useful, you're going to have some blueprints. In an overly-reductive way, you could think of the blueprints as being a set of rules: this 2x4 goes here, that shingling goes on the roof, this particular wall be blue, and this window goes here. You define a bunch of rules that dictates that if some item matches this condition, then some rule is applied to it.
If it is a 9x15 wall, it goes on the south side of the house. This is the CSS of your house, or the cascading style sheets. CSS is a series of rules that define that if you are an HTML thing that matches this condition, then apply some style to it. If you are the first paragraph in an article, your font size is 25px and your font color is blue.
JS - The Functionality​
Okay, so now we have a well arranged and nice looking house. Now, being the modern age and me wanting all the gadgets, I want to install a whole slew of smart home devices. I want it so when I pull in the driveway with my smart-enabled car that the garage door opens, the lights turn on, the thermostat turns on the heat, the TV is set to continue my favorite TV show, and the smart cooker begins cooking dinner.
I am adding behavior to my house; I am adding a layer of programming on top of what exists. This is like frontend, or client-side, JavaScript. It's adding a layer of behavior on top of your website. Do you want to pop up a message if a user clicks a button? Do you want to refresh the stock-ticker on the page so it's accurate? Do you want to change the picture that's showing on your page every few seconds? These are things you'd typically do with JavaScript. And like all the smart home devices, having JavaScript on your page isn't always necessary.
This website, for example, probably wouldn't need javascript (it's actually just markdown), but any interactions that you see (for example the scrolling sidebar on the right or the dropdown menus on the left) use Javascript to add animations and additional spice to the website.
Contributors