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:
- numbers (‘123’ is a number)
- strings (‘word’ is a string)
- 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:
- Date
- Array
- Number
- String
- 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.