Web Development Fundamentals

Building Static Sites

HTML

HTML is the most basic structure of a webpage. All other languages, frameworks, etc. that are on the web form themselves around the foundation that is HTML.

It's primary purpose is to put text, pictures, and links onto a website. If you're only doing that, it will remain pretty simple. As you begin learning more of the tools it has to offer though, you will realize that it can do quite a bit more. With a Macbook, a little practice, and some patience, HTML can help us send information across the Internet to another website or computer, embed an entire other webpage into the one we're building, or even make text move horizontally across the screen at our desired pace. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

HTML is an integral part of any website. Despite it's importance, without the help of it's two best buds in the whole world it's still pretty simple.

CSS

CSS is what allows us to make a webpage look the way we want it to.

By linking your HTML page up with a set of CSS rules, you can make your website conform to a more visually appealing standard than black text on white background. You can create large sweeping rules, like making all of the text bright shiny blue and the background a daring shade of magenta, or you can be more surgical and tell every element on the page specifically where to be and how to look.

Often we will use a hybrid approach, telling this section to look like this and this other section over here to have brighter text and a shadowy backdrop.

An Introduction to JavaScript

Javascript is what allows us to make a webpage move and think. If HTML is the bones, and CSS is the skin and hair, then JavaScript is the muscles, the heart, and the brain.

With Javascript, we can change almost every facet of our webpage based on just about anything. A JavaScript file has nearly complete control of the page that it is tied to. It can read from the page, and write to it as well. It can send information over to other pages. It can make things on the page move, or even make the user stop.

Oh, the user!

Yes, JavaScript is generally where we start to think more deeply about the people who come to visit our websites. What sort of things are they going to want to do, and what should the webpage do in response? When they make a choice in that dropdown menu, it should probably close itself. When they click the SIGN UP button, that probably means they want to be taken to a screen that will accept their desired username and password. Oh, whoops! They clicked it by accident! That 'Return' button should probably remember where they came from and what they were doing.

JavaScript is certainly the most powerful of the three.

Why not just one?

HTML is really not smart enough to do everything on it's own, and CSS lacks the basic structure for it, but with the power and adaptability of JavaScript we could actually write an entire webpage using only it and an HTML file that will accept it's utter dominance! So why all the fuss about the other two?

Well, as you begin to work on bigger, cooler apps, you'll come to realize that things can get messy fast. Without separating the responsibilities out into different and distinct places, you will end up with a massive behemoth of a (java)Script that no one, not even you, will ever want to work on. It's a bit like asking why we don't put all of our clothes into one big drawer instead of having separate ones for socks and shorts.

Do you really want to dig through all of it anytime you need anything? For the very same reasons, I'd rather go to the CSS file if I want to make a style change.