Overview of What You'll Be Learning In This Course
A big part of what's hard up front is all the terminology people throw around when talking about programming and web development. Some of it is unavoidable due to this being a separate field of thought, study, and practice, and then some of it just people inflating their egos by using esoteric and/or academic terms to describe something that could be described in much simpler terms. Some of these words you really need to know (like HTML tags, functions, scope) and some you can just ignore (like monads and functors.) We'll try to differentiate that for you. But if there's a word you keep seeing here often or hear often in context of what you're studying, it's probably a good time to go look it up and get a good grasp on it.
Let's fundamentally define what you're going to be learning in this course.
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 langauge. 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.
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.
- The HTML is the structure. It's going to contain all the text, the various images tied to the text, and it will generally group things together. Just like the drywall in your house, HTML doesn't do anything other than exist. It relies on other things to do things for it and to it.
- The CSS is the blueprint. It's all the rules of what goes where, what color it is, what size it is, what font it is, what the decorative background images are, like HTML, CSS doesn't do anything, it's just a set of rules that describe what things go where and how they look.
A Note About This Course's Website
In this course you'll see two different types of code samples. This is specific to this website and not to the web at large. The first is when it has a light yellow background and only has one section, like this:
<h1>This is a code example. It's not editable</h1>
Then there are code samples like this that have white backgrounds and are in two pieces. These are editable and you can see the results instantly! Check it out:
<h1>This is a code example. It is editable!</h1>
You'll see these throughout. If you see one that is editable, please play with it. You'll learn a lot by experimentation.