Web Reference Guide


Setting up a new HTML document

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

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

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

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 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;


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

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


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;


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;


Use left to place an element to the left.

Use absolute to place an element to the right.

Common CSS Value Types


Color Names

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

Click here for a list of color names.


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.


Variables and Functions

var, if, else,

true, false,for,

break, while, switch;


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)


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


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


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

var gameOver = false;
var youreSmart = true;


Only two possibilities: true or false

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


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


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++)  { 

"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


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"