This blog has moved, please check it out here
Having recently passed the MS70-480 exam on HTML5, CSS3 and JavaScript, I wanted to put together a post to help other people who are studying for this exam. This is mostly a resource document but hopefully gives you a direction in which to get started studying. I should also link the resource I used when studying. I purposefully did not look at his documents while writing this because I wanted to complement, not copy, his work. So without further ado:
Implement and manipulate document structures and objects
Create the document structure
Make sure you are familiar with HTML5 semantic markup. These types of questions could ask you to translate a snippet of traditional HTML markup into markup using HTML semantic tags. Another approach would be a question which asks which semantic tag would be best suited for a given element.
Write code that interacts with UI controls
The idea of manipulating UI components with JavaScript is foundational to many of the subjects covered on the test. Be sure to brush up on the ways to select and manipulate DOM objects with JQuery, but be aware that it is equally important to be able to do these things with plain ol’ JS. So if you have spent a significant amount of time using JQuery or another library to abstract away the nuts and bolts of interacting with the DOM you may need to spend some time going back to the basics of JS and practice doing some things without the help of a library.
A couple more specific items:
For these types of questions it would be good to know how to use both canvas and SVG. Not only should you be prepared to answer questions on the syntax and structure of javascript which uses these elements but you must also be aware of the differences between the two and the reasons to choose one over the other.
Also be prepared to answer questions related to the new HTML5 media elements (audio, video) and how to implement and manipulate them.
Same with Drag and Drop
Apply styling to HTML elements programmatically
Again, be prepared to do this without JQuery. It really is a simple process to do with JavaScript, but so many of us have either not done it in a while, or never done it.
Implement HTML5 APIs
The big ones here are storage, caching, and geolocation. As with all the subjects on the exam, make sure you have the syntax down.
Establish the scope of objects and variables
Another topic that spreads itself throughout the exam. Be familiar with the ‘this’ keyword in JavaScript. It is not unpredictable, it follows a specific set of rules. Know them.
Create and implement objects and methods
Again, foundational. know how to instantiate objects. Know how to declare functions. Know how to call functions, add data to and read data from objects.
Implement program flow
Raise and handle an event
Know how to attach event handlers to objects with and without JQuery. Be aware that there are multiple ways to do both.
Know how to fire a custom event.
Know which events are available for which DOM elements and be able to correctly identify correct and incorrect event names and bindings.
Implement exception handling
Know how to implement try-catch-finally. Know the ordering of parameters in the catch and throw methods.
Implement a callback
Make sure you understand the idea of a callback and passing functions around like objects. Good practice is to write your own methods which take callbacks and trigger them at the end of their execution. Know how to write anonymous functions in JavaScript.
Create a web worker process
Read this post on webworkers in HMTL5. Implement a web worker yourself and make sure you understand how to pass messages between parent and worker as well as how to terminate the worker. Know the syntax and parameters.
Access and secure data
Validate user input by using HTML5 elements
Be familiar with the new types of input tags in HTML5. Be familiar with the pattern property and how to use it.
I’m putting this on it’s own line for a reason. Have an understanding of Regular Expressions! This applies to the next area as well. It could come up a lot.
Validate user input by using JavaScript
Regular Expressions, know them. Also know how to retrieve the text from DOM nodes with Javascript (with and without JQuery of course).
Consume data
Be able to retrieve data from web services using JQuery methods and the XmlHttpRequest Object. As always, make sure you know the syntax and meaning of parameters.
Serialize, deserialize, and transmit data
Serialize and submit a form. Ensure you know the difference between encodeUri and encodeUriComponent. Be aware of any encoding that the JQuery serialize method does.
Check out Web Sockets!
Use CSS3 in applications
Style HTML text properties
Study up on text drop shadows. Be aware of the CSS properties that can be applied to text and their effects.
Style HTML box properties
Straight from Microsoft’s test description, know appearance attributes, graphic effects and position properties. This covers pretty much all of the CSS properties. Make sure you understand relative, absolute, static and fixed positioning.
Create a flexible content layout
Make sure you know how the CSS3 flexbox works. be aware that Microsoft has it’s own browser specific implementation for IE and Win8 so make sure you recognize that.
Create an animated and adaptive UI
Transitions and transforms(2D and 3D) are fair game here. As are media queries, make sure that you understand how to format a media query and what it does.
Find elements by using CSS selectors and jQuery
This is very important. Another one of those things that bleeds over in to otherl areas of the test. There are a lot of selectors, so just knowing how to get an element by id or class doesn’t cut it. This brings me to a point about the test as a whole. Just because you a way to do something does not mean you know every way to do it. Multiple choice questions don’t allow for improvisation.
Structure a CSS file by using CSS selectors
Do you know the order (2) in which css applies styles to elements. What if you have a node which matches more than one selector? Which style gets applied?
eric.w.bryant 