What a Web Page is Made From

HTML

HTML is a set of tags you wrap around the different parts of your page to specify what each bit is. If you have a paragraph of text you wrap it up in <p></p> tags like this:

<p>Call me Ishmael. Some years ago – never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</p>

CSS

CSS is the instructions your web browser uses to style the content of your page. You write a bit of text called a selector that specifies exactly what you want to style – as broad as “every <p> tag” or as specific as “the third <p> tag inside the <section> tag that I named articles” – followed by a list of attributes and the values you want to apply to them. Here’s how to make all your paragraphs purple:

p {
    color: #8000FF;
}

JavaScript

JavaScript is what happened when somebody said “What if I could make it so that the text in my paragraph turned orange when a user clicked on it?”

document.getElementById('first_paragraph').onclick = function() {
	paragraph.style.color = "orange";
};

The next somebody said “What if clicking the text made an ad appear, too?” Then somebody on the Chrome team at Google said “What if clicking the text could give the web page access to USB devices?”

Three or Four Ways to Make a Class-Like Thing in JavaScript

Assign a function to a variable. Have it take some arguments (or not) and then inside the function assign those arguments to properties. Create methods inside the function by assigning functions to this.functionName properties. Create a new instance of your class-like thing using the new keyword.

var Dog = function(name, color) {
    this.name = name;
    this.color = color;

    this.bark = function() {
        console.log("Woof! Woof!");
    };
};

var spacey = new Dog("Spacey", "Black");

Assign an empty function to a variable. Now add properties and methods to your variable by assigning them as properties of that variable’s prototype property. Create a new instance of your class-like thing using the new keyword.

var Dog = function() {};
Dog.prototype.name = "";
Dog.prototype.color = "";
Dog.prototype.bark = function() {
    console.log("Woof! Woof!");
}

var spacey = new Dog();
spacey.name = "Spacey";
spacey.color = "Black";

Use the class keyword followed by the name of the class and some braces. Inside the braces, create a constructor method that sets up your properties. Add additional methods outside the constructor but inside the class braces. None of these methods, including constructor, are prefaced with the function keyword or assigned to variables. Create a new instance of your class-like thing using the new keyword.

class Dog {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    };

    bark() {
        console.log("Woof! Woof!");
    }
};

var spacey = new Dog("Spacey", "Black");

Mix and match all of the above. Just go nuts with it. Create a new instance of your class-like thing using the new keyword.

class Dog {
    constructor(name) {
        this.name = name;
        this.bark = function() {
            console.log("Woof! Woof!");
        };
    };
};

Dog.prototype.color = ""

var spacey = new Dog("Spacey");
spacey.color = "Black";