70-480 Programming in HTML5 with JavaScript and CSS3 - Preparation links

In this post I will reference official resource for learning and preparing for exam. Also this is study material for me as well. I have spent such a great time to compare other’s preparation links and choose the right one which according to me fulfil the best expectation of new knowledge.

A few words about my knowledge of HTML5/CSS3, I’m not front-end developer I have been trying to prevent to be person who is responsible for design or style of web pages. But time has changed and now I change my mind and force myself to learn it more. Clearly I have a lot of experience with them anyway, I have developed SharePoint applications for four years, last thing which mostly support my decision is SharePoint 2013, as you can see in my latest posts on this topic. One official huge thank you I should to say guys who created video course about in Microsoft Virtual Academy or if you don’t have account you can look on channel9. Also they showed on nice HTML5 application called CodeShow.

Following text is copy and paste from syllabus as “Skill Measured”, all links will be tagged with title of the page which you find when you click on it.

Implement and Manipulate Document Structures and Objects (24%)

• Create the document structure.
  • This objective may include but is not limited to: structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside);create a layout container in HTML

W3School – section; article; nav; header; footer; aside; HTML layouts
HTML5 doctor – outlines

• Write code that interacts with UI controls.
  • This objective may include but is not limited to: programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphics

W3School – DOM Element Object; XML DOM; HTML5 canvas; SVG tutorial; HTML5 Audio; HTML5 video

• Apply styling to HTML elements programmatically.
  • This objective may include but is not limited to: change the location of an element; apply a transform; show and hide elements

W3School – CSS Positioning; HTML DOM Style object; CSS Display; CSS3 2D Transforms; CSS3 3D Transforms; CSS3 Transitions; CSS3 Animations; jQuery Effects
jQUery – jQuery Effect hide() Method;
developerdrive.com – Skewing Web Page Elements Using the CSS3 Skew Transform

• Implement HTML5 APIs.
  • This objective may include but is not limited to: implement storage APIs, AppCache API, and Geolocation API

W3School – Storage API(Web Storage); AppCache API; Geolocation API

• Establish the scope of objects and variables.
  • This objective may include but is not limited to: define the lifetime of variables; keep objects out of the global namespace; use the “this” keyword to reference an object that fired an event; scope variables locally and globally

Snook.ca – Scope variables locally and globally
Jibbering.com – Javascript Closure
robertnyman.com – Explaining scopes and closure

• Create and implement objects and methods.
  • This objective may include but is not limited to: implement native objects; create custom objects and custom properties for native objects using prototypes and functions; inherit from an object; implement native methods and create custom methods

Yaldex.com – implement native objects
javascriptweblog.wordpress.com – Extending JavaScript Natives
Crockford.com- Classical Inheritance JavaScript

Implement Program Flow (25%)

• Implement program flow.
  • This objective may include but is not limited to: iterate across collections and array items; manage program decisions by using switch statements, if/then, and operators; evaluate expressions

W3School – iterate across collections and array items, for loop; manage program decisions by using switch statemens; if/then; evaluate expressions
JavaScriptkit.com – Looping; Variable and expression shortcuts; switch statement

• Raise and handle an event.
  • This objective may include but is not limited to: handle common events exposed by DOM (OnBlur, OnFocus, OnClick); declare and handle bubbled events; handle an event by using an anonymous function

W3School – DOM Events; onclick; onblur; onfocus; handle and bubbled events
JavaScripter.com – bubbled events demo
quirksmode.org – advance model registration
W3c.com – DOM Events Specification
JavaScript.info – Bubbling and capturing

• Implement exception handling.
  • This objective may include but is not limited to: set and respond to error codes; throw an exception; request for null checks; implement try-catch-finally blocks

W3School – try-catch blocks
saladwithsteve.com – undefined vs null
JavaScriptkit.com – try-catch

• Implement a callback.
  • This objective may include but is not limited to: 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

W3.org – WebSocket API;
html5rocks.com – HTML5 WebSocket API
jQuery.com – jQuery.ajax(); jQuery.post(); jQuery.get()
quirksmode.org- keyword this

• Create a web worker process.
  • This objective may include but is not limited to: 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

W3School – HTML5 Web workers
Mozilla.org – web workers

Access and Secure Data (26%)

• Validate user input by using HTML5 elements.
  • This objective may include but is not limited to: choose the appropriate controls based on requirements; implement HTML input types and content attributes (for example, required) to collect user input

W3School – HTML input types; HTML form attributes
Diveintohtml5.com – HTML forms

• Validate user input by using JavaScript.
  • This objective may include but is not limited to: 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

Consultsarath.com – Validate Email by regular expression
CodeProject.com – Understand Regex Expressions
jQuery – Plugins-Validation
stackoverflow – how to prevent code injection; Safe HTML and XSS
owasp.org – XSS filter evasion cheat sheet

• Consume data.
  • This objective may include but is not limited to: consume JSON and XML data; retrieve data by using web services; load data or get data from other sources by using XMLHTTPRequest

W3C.com – XMLHttpRequest
W3School – XMLHttpRequest object; XML parser
erichynds.com – Working with xml, JavaScript and jQuery
webdevstuff.com – XMLHttpRequest object
json.org- introduction to JSON
stackoverflow – How to parse JSON in JavaScript

• Serialize, deserialize, and transmit data.
  • This objective may include but is not limited to: 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

fhtr.blogpost.com – 3D models and parsing binary data with JavaScript
W3School – Json; Xml; Xml http; Xml parser; HTML DOM form object;submit() method; decodeURI() function; decodeURIComponent() function; encodeURI() function; encodeURIComponent() function
jQuery – serialize
JavaScript-coder.com – How to submit a form JavaScript

Use CSS3 in Applications (25%)

• Style HTML text properties.
  • This objective may include but is not limited to: apply styles to text appearance (color, bold, italics); apply styles to text font (WOFF and @font-face, size); apply styles to text alignment, spacing, and indentation; apply styles to text hyphenation; apply styles for a text drop shadow

W3School – CSS Text; CSS Font; CSS3 Fonts; CSS Links; CSS3 Text Effects; CSS Selector Reference
Nicewebtype.com – How to use font face
W3C.com – CSS Text Module
CSS3.info – box Shadow

• Style HTML box properties.
  • This objective may include but is not limited to: apply styles to alter appearance attributes (size, border and rounding border corners, outline, padding, margin); apply styles to alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping); apply styles to establish and change an element’s position (static, relative, absolute, fixed)

W3School – CSS Border; CSS3 Border; CSS Box Model; CSS Dimension; CSS Outlines; CSS Margin; CSS Padding; CSS3 Backgrounds; CSS3 background-clip; CSS Image; CSS3 Text Effects; CSS Positioning
css-tricks.com – CSS3 Gradient
net.tutsplus.com – 10 CSS3 properties you Need to be familiar with
ie.microsoft.com/testdrive – CSS gradient background marker
W3C.com – CSS Visual Effects
barelyfitz.com – Learn CSS Positioning in ten steps

• Create a flexible content layout.
  • This objective may include but is not limited to: implement a layout using a flexible box model; implement a layout using multi-column; implement a layout using position floating and exclusions; implement a layout using grid alignment; implement a layout using regions, grouping, and nesting

W3School – CSS3 box-flex; CSS3 Multiple columns
coding.smashingmagazine.com – CSS3 Flexible box layout explained
zenelements.com – CSS3 Multiple Columns
dev.w3.org – CSS3 Exclusions and Shape Module; CSS Regions Module; CSS3 Grid Layout;
msdn.microsoft.com – CSS Exclusions;
html5rocks.com – flex box;
css3.info – CSS Multiple columns

• Create an animated and adaptive UI.
  • This objective may include but is not limited to: animate objects by applying CSS transitions; apply 3-D and 2-D transformations; adjust UI based on media queries (device adaptations for output formats, displays, and representations); hide or disable controls

W3School – CSS3 Transitions; CSS3 2D Transforms; CSS3 3D Transforms; CSS Display and Visibility;
W3C.org – CSS3 Media Queries

• Find elements by using CSS selectors and jQuery.
  • This objective may include but is not limited to: 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)

W3School – CSS Selector Reference;
jQuery.com – Selectors
W3C.org – Detailed about selectors; Pseudo-elements and pseudo-classes

• Structure a CSS file by using CSS selectors.
  • This objective may include but is not limited to: 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)

htmlhelp.com – CSS Structure and rules;
W3C.org – Assigning property value, Cascading and Inheritance

For those who are preferring book instead of reading web source, I have found a few books which are covering most of this content. They are listed below:

• JavaScript & jQuery: The missing manual(Amazon)
• CSS3: The missing manual(Amazon)

I assume that all for resource of this exam, I hope it will help you. I’m using these resources and books for a while now. I will report you my result in exam. Until that point keep learning.