Steve Breese

Create the document structure

• HTML5 semantic markup
• section tag
• article tag
• nag tag
• header tag
• footer tag
• aside tag
• Layout Container

Write code that interacts with UI controls

• Select DOM objects via jQuery
• Select DOM objects via JavaScript
• Add HTML elements via jQuery
• Add HTML elements via JavaScript
• Modify HTML elements via jQuery
• Modify HTML elements via JavaScript
• Canvas
• SVG
• Canvas vs. SVG
• audio tag
• video tag
• Drag & Drop

Apply styling to HTML elements programmatically

• Apply style via JavaScript
• Apply style via jQuery
• Change the location of an element
• Apply a transform
• Show & Hide elements

Implement HTML5 APIs

• Web Storage
• AppCache API
• Geolocation API

Establish the scope of objects and variables

• Lifetime of variables
• keep objects out of the global namespace
• this keyword
• scope variables locally and globally

Create and implement objects and methods

• Implement native objects
• instantiate objects
• declare functions
• create custom objects and custom properties for native objects using prototypes and functions
• inherit from an object
• implement native methods
• create custom methods

Control Structures

• if/then
• Iterate across collections and array items
• operators
• evaluate expressions

Raise and handle an event

• DOM Events
• jQuery Events
• declare and handle bubbled events
• handle an event by using an anonymous function

Implement exception handling

• Set and respond to error codes
• throw an exception
• request for null checks
• try-catch-finally blocks

Implement a callback

• Receive messages from the HTML5 WebSocket API
• use jQuery to make an AJAX call
• wire up an event
• implement a callback by using anonymous functions
• handle the this pointer

Create a web worker process

• Start and stop a web worker
• pass data to a web worker
• configure timeouts and intervals on the web worker
• register an event listener for the web worker
• limitations of a web worker

Validate user input by using HTML5 elements

• Choose the appropriate controls based on requirements
• implement HTML input types and content attributes (for example, required) to collect user input

Validate user input by using JavaScript

• Evaluate a regular expression to validate the input format
• validate that you are getting the right kind of data type by using built-in functions
• prevent code injection

Consume data

• Consume JSON and XML data
• retrieve data by using web services
• load data or get data from other sources by using XMLHTTPRequest

Serialize, deserialize, and transmit data

• Binary data
• text data (JSON, XML)
• implement the jQuery serialize method
• Form.Submit
• parse data
• send data by using XMLHTTPRequest
• sanitize input by using URI/form encoding

Style HTML text properties

• Appearance (color, bold, italics)
• Font (WOFF and @font-face, size)
• Appearance (color, bold, italics)
• Font (WOFF and @font-face, size)
• Alignment, spacing, and indentation
• Hyphenation
• Drop shadow

Style HTML box properties

• Attributes (size, border and rounding border corners, outline, padding, margin)
• Alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping)
• Establish and change an element's position (static, relative, absolute, fixed)

Create a flexible content layout

• Flexible box model
• Multi-column
• Position floating and exclusions
• Grid alignment
• Regions, grouping, and nesting

Create an animated and adaptive UI

• CSS transitions
• 3-D and 2-D transformations
• Adjust UI based on media queries (device adaptations for output formats, displays, and representations)
• Hide or disable controls

Find elements by using CSS selectors and jQuery

• Choose the correct selector to reference an element
• Define element, style, and attribute selectors
• find elements by using pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)

Structure a CSS file by using CSS selectors

• Reference elements correctly
• Implement inheritance
• Override inheritance by using !important
• Style an element based on pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)