HTML and CSS Quick Reference

 

General

 

HTML 5

<html>

<head>

<body>

<div id=’???’ class=’???’>

<h1>

<h2>

<h3>

<p>

<ul>

<li>

 

 

CSS 3

Basic

Comment Syntax: /* This is a comment*/

margin: 10px; /* This creates a 10 pixel gap between the outside of an object and the outside of another object. */

padding: 10px; /* This creates a 10 pixel gap between the inside of an object and the outside of that same object. */

Divs:

Class:

 

 

Color

filter: grayscale(100%); /* This will convert whatever object it is attached to to Grayscale, you can add to a:hover to grayscale a link*/
-webkit-filter: grayscale(100%);

 

Animations

transition: 0.3s;    /* Transition will create  a delayed transition effect, for instance if applied to a hyperlink there will be a delay in stylizing it and it will fade in. */

 

Programming

 

 

 

Responsive

<meta name=”viewport” content=”width=device-width, initial-scale=1.0;”>

<link rel=”stylesheet” href=”https://www.yourwebsite.com/desktop.css” type=”text/css” media=”all and (min-width: 915px) and (max-width: 5000px)” />

<link rel=”stylesheet” href=”https://www.yourwebsite.com/tablet.css” type=”text/css” media=”all and (min-width: 350px) and (max-width: 915px)” />

<link rel=”stylesheet” href=”https://www.yourwebsite.com/mobile.css” type=”text/css” media=”all and (min-width: 50px) and (max-width: 350px)” />

<!–[if lt IE 9]>
<link rel=”stylesheet” href=”https://www.yourwebsite.com/desktop.css” type=”text/css” media=”all” />
<![endif]–>

 

Z-Index

Z-index controls priority on the third dimension plane.

z-index:2; /* This will mean that the object is further out than one with z-index of 1*/

 

Javascript

 

Three data structures:

  1. numbers (‘123’ is a number)
  2. strings (‘word’ is a string)
  3. booleans (‘true’ or ‘false’, uncapitalized)

 

 

Variables

Variables are defined with:

var variableName;

var variableName = 34;

 

Variables in Javascript are dynamically typed so will be defined as a number if you add ‘123’ to it, but if you add a letter such as ‘123j’ it will be defined as a string.

 

Objects

Objects are entities that contain properties and methods.

Global objects:

  1. Date
  2. Array
  3. Number
  4. String
  5. Boolean.

 

To instantiate an object:

var today = new Date();

The ‘new’ command brings forward the object.

 

Arrays

Arrays in javascript start with ‘0’.

var exampleArray = new Array(); //This creates an array of unlimited length.

var exampleArray = new Array(5); //This creates an array of length 5.

 

var exampleArray = new Array(5,1,4,3,2); //This creates an array of length 5, ordered 0:5, 1:1,2:4,3:3,4:2.

exampleArray[2] = 9; //This assigns the value ‘9’ to position ‘2’ in the array.

 

 

 

print