Introduction
The House Metaphor​
To understand a website, we must understand how it is built. We build a website iteratively.
- 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 each sucessive tool fits neatly into this workflow. The difference is that subsequent tools are more and more powerful solutions to modern problems. Remember, it is not the engineer's goal to reinvent tools the tools we already have. Instead, we use those tools to push the next generation of innovation.
So where, then, does the story of web development begin? Well, it begins with a humble story about a house.
HTML - The Frame​
Why do you need three languages? Let's make the imperfect metaphor of building 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