WGU C777 Web Development Applications

HTML5, CSS, JavaScript

The web development trifecta

main

HTML5 tag defining the main body of a document. Cannot be the child of the header, nav, article, aside, or footer elements.

header and footer

These elements can also be included in article, aside, nav, main, and section elements, not just on the page itself

source

This element identifies the file(s) to use in a video or audio element

style guide

A set of standards for the writing and/or design of documents

IE9

This version of IE is the first to support HTML5

Add them via JS, make them block via CSS

What should you do to support HTML5 elements in pre-IE9 browsers.

selector

The term for the part of CSS code that refers to the element you want to style

declaration

In CSS, the term for a property and value pair. It must always end with a semicolon

rule

In CSS, the name for a selector, property and value all grouped together

inheritance

The word "cascading" in CSS refers to this concept

External, embedded, inline

The cascading order of CSS style sheets, ordered from lowest priority to highest

rel, type, href

Linking to a CSS file requires these attributes in the link element

style

Embedded CSS should be placed in a block defined by this element

style

Inline CSS should be placed in an attribute with this name

document flow

The arrangement of content elements on a page and how the space is used. Does it fall from top to bottom in stacks, or does some content float to one side or the other?

curly braces

These are not used when defining inline CSS styles

clear

Use this CSS property to avoid having floating elements before/after another element

static

In CSS, the "normal, or default", position of block elements within a page

relative

In CSS, positioning a block element relative to another element

absolute

In CSS, this causes the element to appear to float above the document and can be positioned as needed. It is completely removed from the rest of the page flow.

fixed

In CSS, this causes the element to remain in the same position when the page is scrolled

inherit

In CSS, this causes the element to inherit its parent's position

padding

In the box model, this is the space between the content and the border

margin

In the box model, this is the space between the border and surrounding elements

content, padding, border, and margin

Add all of these up to get the full size of an element in the box model

element[attribute$=value]

This CSS3 selector selects every instance of a specified element whose specified attribute ends with the specified value

element[attribute*=value]

This CSS3 selector selects every instance of a specified element whose specified attribute contains the specified substring value

element[attribute^=value]

This CSS3 selector selects every instance of a specified element whose specified attribute begins with the specified value

element:checked

This CSS3 selector selects every checked instance of a specified element

element:disabled

This CSS3 selector selects every disabled instance of a specified element

element:enabled

This CSS3 selector selects every enabled instance of a specified element

element:first-of-type

This CSS3 selector selects every instance of a specified element that is the first of its parent

element:last-of-type

This CSS3 selector selects every instance of a specified element that is the last of its parent

element1~element2

This CSS3 selector selects every instance of element2 that is preceded by an instance of element1 where both have the same parent. element2 need not be immediately preceded by element1

multiple images

CSS3 now allows this in the background

background-clip

CSS3 property determining whether the background extends into the border or not (content, padding, or border)

background-origin

CSS3 property defining the location to which the background-position property should be relative (content, padding, or border)

length, percentage, cover, contain

CSS3 values used in a background-size property. Last two are optional. Default is auto.

rgba

Whereas the opacity property applies to an element and its children, you can use this to specify the opacity of a single element

@font-face

CSS3 rule allowing you to specify custom fonts

400

This font weight is the same as normal

700

This font weight is the same as bold

100-900

Range of font weights

text-shadow

IE9 and earlier do not support this text property

font-family and src

These two CSS3 properties are required by @font-face

transform

An effect that changes an element's shape, size and/or position

transform-origin

Property that allows you to change a transformed element's position

transform-style

Property that specifies whether child elements will retain the parent element's position in 3D space

perspective

Property that specifies the perspective from which a 3D child element is viewed by defining how far it is placed from view

perspective-origin

Property that specifies the bottom position of a 3D element

backface-visibility

Property that defines whether or not an element is visible when it is rotated to face away from the viewer

IE10+, Firefox, Opera

These browsers support the transform property

Chrome 34, Safari 7, IE9

These browsers require a vendor prefix for transforms

transition

CSS3 effects that change an element from one style to another style

transition-property

Property that specifies the CSS property that the transition will affect

duration

Properties that defines the amount of time that a transition takes in seconds (s) or milliseconds (s). Default is 0. If no value is specified, then no transition occurs

timing function

Properties that describe the speed of a transition. Valid options are ease, linear, ease-in, ease-out, and ease-in-out

delay

Properties that defines how long before a transition or animation begins

@keyframes

At-rule used to create CSS3 animations

Chrome 34 and Safari 7

@keyframes requires a prefix for these two browsers

animation-name

Property that specifies the identifier for the @keyframes animation that binds it to a selector

animation-iteration-count

Property that specifies the number of times the animation will play. Default is 1.

animation-direction

Property that specifies whether to play the animation in reverse on alternate cycles.

Requires an iteration count greater than 1. Parameters are normal, reverse, alternate, alternate-reverse

animation-play-state

Property that specifies whether the animation is running or paused. Default is running

Chrome, Safari, and Firefox

The resize property only works in these browsers

appearance

CSS3 UI property that makes an element look like a standard user interface element, such as a button or window

box-sizing

CSS3 UI property that forces specified elements fit an area in a certain way

icon

CSS3 UI property that styles an element with an iconic equivalent

nav-index

CSS3 UI property that specifies the tabbing order for an element

nav-direction

CSS3 UI property that specifies where the cursor will navigate to when the user presses the "direction" arrow key

outline-offset

CSS3 UI property that draws an outline beyond the border edge (i.e., offsets the outline) as specified

resize

CSS3 UI property that specifies whether an element can be resized by the user and how it can be resized

overlay

A CSS3 technique used to place an HTML element on top of another HTML element

z-index

Use this CSS3 property to create an overlay. Without it and by default, the HTML element listed last in the page appears at the top and vice versa.

letters, _, or $

The first character of a variable name in JavaScript must be one of these

letters, numbers, or _

Except for the first character, the name of a variable in JavaScript can contain these only

number, string, boolean, Object, null, undefined

The 6 data types in JavaScript

operand

Data that is to be operated upon or manipulated in some manner by an operator

abort

Event that occurs when the loading of an image is aborted

blur

Event that occurs when input focus is removed from a form element

change

Event that occurs when a user changes the value of a form field

error

Event that occurs when an error takes place while a page or image is loading

focus

Event that occurs when a user gives input or focus to a form element

reset

Event that occurs when a form's Reset button is clicked

select

Event that occurs when the user selects the text in a form field

submit

Event that occurs when a form's Submit button is clicked

unload

Event that occurs when a page is unloaded from the browser

load

Event that occurs when a page is loaded into the browser

click

Event that occurs when the user clicks on a link or form element

mouseOver

Event that occurs when the user moves the mouse pointer over a visible element on a page

mouseOut

Event that occurs when the mouse pointer leaves a visible element on a page

letter or _

In JavaScript, function names must begin with this

letters, numbers, _, or $

Except for the first character, function names in JavaScript can contain these

true

True or false: JavaScript is parsed according to its position in the page, as the browser works its way through the HTML

load-time errors

Typically syntax errors, these usually cause error alerts

run-time errors

Typically caused by improper use of commands, these errors can cause error alerts

logic errors

Errors that result in the script running improperly. They do not cause error alerts. The script may return unexpected results or may fail to execute at all.

misspelling and case-sensitivity

The two most common JavaScript coding errors

canvas.getContext("2d")

The method to retrieve a canvas's drawing context