Web Reference Guide

HTML

Setting up a new HTML document

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>My first paragraph</p>
  </body>
</html>

Making headings

<h1>Heading level 1</h1>
...
<h6>Heading level 6</h6>

Making paragraphs

<p>This is a paragraph.</p>

Making a container or a box (this is called a "div"!)

<div>This is a div</div>

Adding an image

<img src="cats.png" alt="kittens">

Making a numbered list

<ol>
  <li>George Washington</li>
  <li>John Adams</li>
</ol>

Adding a link to another page (and open it in a new window)

<a href="https://www.google.com" target="_blank">This is a link to Google</a>

Adding an "id"

<p id="oneID">text</p>

Adding a "class"

<h1 class="aClass">text</h1>

Adding comments

<!-- These are instructions in the code. The user won’t see them -->

Connect your HTML document to an external CSS file

<link rel="stylesheet" type ="text/css" href= "style.css">

Connect your HTML document to an external JavaScript file

<script src="index.js"></script>

CSS

CSS Terms and Concepts

Selector
Represents the parts of your HTML that will be affected by this CSS rule. Multiple selectors can be used, separated by commas.
Property
The thing you want to change for the HTML you’ve selected. Each property should be followed by a colon.
Value
What you want to set this property to. Each value should be followed by a semicolon.

A property and value together are called a declaration. A single CSS rule can contain multiple declarations.

CSS Selectors

p {
   color: red; 
}

HTML Tag Name

Use the tag name to affect all elements of that type.

For example, this code affects every paragraph on the page.

If you wanted to style every <div>, then you would use this selector: div

.myClass {
   color: purple; 
}

HTML Class Name

Use this to affect the style of a group of elements of your choice.

A class is like a category. You can add it to as many different elements as you want. In CSS, you must use a period before the class name.

For example, if your HTML has <div class="cool"> and <span class="cool">, then you can use this selector: .cool

#myID {
   background-color: blue; 
}

ID Name

Use this to affect the style of just one specific element.

An ID is like a name. Only one element in your HTML can have that name. In CSS, you must use # before an ID name.

For example, this code will only style this div: <div id="myID">

CSS Box Model

div {    
    width: 300px;
    height: 200px;
    padding: 30px;
    border: 10px solid yellow;
    margin: 40px;
}

Above, you can see the CSS code, and a diagram of the space taken up by each part.

Width and height set the size of your element.
Padding creates space between the edge of the element and the stuff inside it. Imagine packing some fragile stuff in a cardboard box, but first lining the box with something soft to protect your stuff. That soft stuff is the padding.
The border goes around the padding. It's like the cardboard itself. You can make it as thick or thin as you want.
The margin creates space outside the element. It's similar to a personal bubble. When you talk to your friend, you don't want to be right up in their face. Instead, you keep some space between the two of you to make it more comfortable. That space is the margin.

Common CSS properties

body {
   background-color: black;
}

background-color

You can set the background color of any element with this.

body {
   background: url("www.cool.com/img.jpg");
}

background

You can set the background to an image.

.special {
   font-family: "Comic Sans";
   font-size: 22px;
   color: #CCCCCC;
}

font-family: choose your font

font-size: choose your font size

color: choose your font color

#idontmove {
   position: fixed;
}

#imove {
   position: absolute;
}

position

Use fixed to keep an element in the same place even when scrolling on the page.

Use absolute to have it scroll with the page (like normal).

#imontheleft {
   float: left;
}

#imontheright {
   float: right;
}

float

Use left to place an element to the left.

Use absolute to place an element to the right.

Common CSS Value Types

red
blue
black
cornflowerblue

Color Names

Some (but not all) colors can be referred to just by a name.

Click here for a list of color names.

#FFFFFF
#000000
#9400D3
#DC143C

Color Hexadecimal Codes

Hex codes always begin with #, followed by six alpha-numeric characters.

This site is a great way to find the hex code for any color.

width: 10px
height: 500px
margin: 125px

Size: Pixels

Use pixels for sizes if you want an element to be the same exact size on any screen.

width: 10%
height: 25%

Size: Percent

Use percent for sizes if you want an element to set its size based on the size of the screen.

JavaScript

Variables and Functions

var, if, else,

true, false,for,

break, while, switch;

Keywords

Keywords in Javascript are like special tokens, with each one having a unique purpose. The most common keyword in Javascript is var. To see a full list of keywords check out this link

var greeting = "Hello!";
var age = 15;

Variable assignment

To create a new variable, type the keyword var followed by the name of your new variable.

greeting = "¡Hola!";
age = 95;

Assign new value to a variable

To change the value of an existing variable we have to assign a new value to it. To do this just use the name of the variable (no need for var) with one equal sign, otherwise called the assignment operator (=).

Function declaration

To declare a function you need at least four things:

The function keyword, which tells the computer this piece of code is a function.
A name for your function
Parentheses to handle your parameters. This tells the computer what we need to make the function work. A function can take nothing or a multiple things! (i.e. () or (variable))
Curly Braces {}, which encloses our code body (i.e. the code that is executed)

plusOne(4);

sayHello();

findArea(10, 10);

Calling a function (using the function)

To use a function we have to call it then insert any necessary arguments.

To use a function that doesn't take arguments, leave the parentheses empty.

You can call a function as many times as you want. It's important to call a function by its exact name followed by parentheses or else your computer won't understand that you're trying to call a function.

Data Values and Types

var hello = 24;
var goodbye = 29.45

Numbers

var myName = "Bobby";
var sentence = "This is a sentence!";

Strings

Words and sentences usually need to be formed as a string. Always use quotes (') or (").

var gameOver = false;
var youreSmart = true;

Booleans

Only two possibilities: true or false

var oddNumbers = [1, 3, 5, 7, 9, 11];
var presidents = ["Washington", "Adams", "Jefferson", "Madison", "Monroe"];

Arrays

Use an Array to collect a series of data in one place. The data should be separated by commas and contained in square brackets.

var personalInfo = {
   firstName: "Bobby",
   lastName: "Bobberson",
   birthDate: "1/1/1111",
   likesPizza: true,
   likesVegetables: false
}

Objects

Objects are like more detailed arrays, but they're inside curly brackets, not square ones.

Objects let you give each value a name (called a property).

Always use this format: property: value,

It's easier to read if you put each property on a new line.

var score;
console.log(score); //undefined

Undefined

You can create a variable without giving it a value. In this case, the value of the variable is undefined

Control Flow

var num = 11; 
if (num < 5) {
     console.log("Less than 5"); 
} else if (num < 10)  {
     console.log("Less than 10");
} else {
     console.log("Greater than 10");
}   
// Greater than 10

if / if...else if / if...else

if (this is true) {
    then do this;
} else if (this is true) { otherwise if this is true
    then do this;
else { otherwise
    do this;
}

for (var i = 0; i < 5; i++)  { 
  console.log(i);
} 
//0
//1
//2
//3
//4

"For" loop

for (declare; condition; modify) {
do this;
}

declare: declare a variable (and typically assign it to 0)
condition: as long as this is true, the loop will keep running
modify: this is how the variable will change each time the loop runs

Operators

5 == 5         //true
5 == 4         //false
5 == "5"       //true

5 === 5        //true
5 === "5"      //false

5 != 4         //true
5 != 5         //false
5 != "5"       //false

5 !== 4        //true
5 !== 5        //false
5 !== "5"      //true

5 > 4          //true
5 > 6          //false
5 >= 5         //false

5 >= 5         //true
5 >= 4         //true
5 >= 6         //false

5 < 6          //true
5 < 4          //false
5 < 5          //false

5 <= 5         //true
5 <= 6         //true
5 <= 4         //false

Comparison Operators

== checks if two things are equal. It ignores the difference between a number and a string.

=== checks if they are equal AND if they are the same type.

!= checks if they are unequal. Also ignores difference between number and string.

!== checks if they are unequal AND not of the same type.

> checks if the first number is greater than the second.

>= checks if the first number is greater than or equal to the second.

< checks if the first number is less than the second.

>= checks if the first number is less than or equal to the second.

5 == 5 && 6 == 6         //true
5 == 5 && 6 == 7         //false

5 == 5 || 6 == 7         //true
5 == 6 || 6 == 7         //false

!(5 == 5)                //false
!(5 == 7)                //true

Logical Operators

&& returns true only if both statements are true.

|| returns true if either statement is true.

! returns the opposite.

Syntax Reference

/ "forward slash"
"" "quotes"
<> "angle brackets"
{} "curly brackets" or "curly braces"
[] "square brackets"
() "parentheses"
; "semicolon"
: "colon"