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

  1. Selector

    Represents the parts of your HTML that will be affected by this CSS rule. Multiple selectors can be used, separated by commas.

  2. Property

    The thing you want to change for the HTML you’ve selected. Each property should be followed by a colon.

  3. 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.

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 greeting = "Hello!";
var age = 15;

Variable assignment

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

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

Variable changing

To change the value of an existing variable, just use the name of the variable (no need for var).

var plusOne = function(number) {
   return number + 1;
};

function sayHello() {
   console.log("Hello);
}

Function declaration

You can declare a function just like you assign a variable.

Or you can simply use function nameOfFunction() {/*function content here*/}

plusOne(4);
sayHello();

Calling a function (using the function)

To use a function that takes parameters, type the function name with your parameters inside the parentheses.

To use a function that doesn't take parameters, leave the parentheses blank.

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"