infuerno.github.io

FreeCodeCamp

Basic HTML and CSS

Radio buttons

<label><input type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

Checkboxes

<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>

Import a google font

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Make circular images with border-radius

Use the css: border-radius: 50%;

Button tags

<button type='submit'>Submit</button>

Required

With HTML5 use a required attribute to ensure a field is completed

CSS variables

Available inside the selector specified AND that selectors decendants. Therefore often defined in the :root element (a psuedo selector which matches the root element, usually html). Can be overriden by redefining further down e.g. within a media query

:root {
    --penguin-size: 300px;
}
@media (max-width: 350px) {
    :root {
        --penguin-size: 200px;
    }
}

position: absolute

One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.

position: fixed

One key difference between the fixed and absolute positions is that an element with a fixed position won’t move when the user scrolls.

z-index

Elements are drawn on top of each other as the HTML is parsed.

margin: auto

Centre a div on the page using margin: auto

repeating-linear-gradient()

background: repeating-linear-gradient(
  45deg,
  yellow 0px,
  yellow 40px,
  black 40px,
  black 80px
);

transform

CSS animations

@keyframes wat {
    0% { width: 20px; }
    100% { width: 40px; }
}

Responsive Design with Bootstrap

img-responsive class to make images responsive text-center to center text e.g. a heading btn class on a button btn-block class on a button to change display to block row class on a div to arrange elements in rows col-xxx class on a div to arrange elements in columns inside of rows e.g. col-xs-4 to take up 4 parts of a 12 col layout text-primary class to set a primary colour <i class="fa fa-thumbs-up"></i> to use font awesome to add “like” icon image <i class="fa fa-info-circle"></i> for an info circle <i class="fa fa-trash"></i> for a trash can <i class="fa fa-paper-plane"></i> for a paper plane

jQuery

Get Started with jQuery

Script tags are not self-closing and should have a type attribute: <script type="text/javascript" src="script.js"></script>

Selectors

$() is used to target jQuery e.g. $(document) to target the HTML document using jQuery, and $(document).ready(); to take some action when the HTML document is ready.

Functions

Add an anonymous function to be executed on document.ready e.g. $(document).ready(function() { alert("ready"); });

Target other elements and call functions on them as required e.g.:

$(document).ready(function() {
    $('div').mouseenter(function() {
        $('div').fadeTo('slow', 1); 
    });
});

jQuery variables

The $ can be added to the front of any variable name to indicate a $ object e.g. $div = $(‘div’)

Compound selectors

Select multiple elements as in css using comma seperated lists e.g. $('p, li') to select both p and li elements.

this

The this keyword generally refers to the jQuery object you are currently doing something with. So when using event handlers e.g. click(), mouseenter(), $(this) will target the target of the eventhandler event.

Harness Dynamic HTML

Elements

HTML elements can be created using strings e.g. $("<h1>hello world</h1>") creates a new h1 element.

Attributes

Content

.html() can be used to both get and set the content of elements .val() is used to get the value of form elements e.g. $('input:checkbox:checked').val();

Listen for jQuery Events

$(document).ready(function() {
    $('thingToTouch').event(function() {
        $('thingToAffect').effect();
    });
});

Trigger jQuery Effects

JavaScript

Functions

Functions can be defined in one of two ways:

var divideByThree = function (number) {
    return number / 3;
};

function divideByThree(number) {
    return number / 3;
}

The second function declaration will be parsed prior to running the code, so can be placed anywhere in the file, whereas the first function will by parsed inline, so must come before any usage. (See this reference: http://eloquentjavascript.net/03_functions.html)

Local variables used inside function MUST be declared using the var keyword, otherwise they will use a global variable of the same name if this exists in the global scope.

Math.random() produces a random number between 0 and 1

For loops