Friday, April 4, 2014

Microsoft Exam 70-480 Study Guide

Other study guides in the wild

Matt Menezes article How I passed 70-480 (includes links to about a half dozen guides, including the two above)

General Study Material and Sites



Implementing and manipulating document structures and objects
Create the document structure

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


Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 2 and 5
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 1 (part 1)
MSDN Articles on HTML5 - Specifically Learn HTML5 in 5 Minutes!
Element list from w3.org - HTML4
Attributes list from w3.org - HTML4
HTML5 specification from w3.org
Dive Into HTML5 - What does it all mean?
Microsoft.com - Exam 70-480 - suggested link: Get started using HTML5 - includes instructions on creating a webpage using WebMatrix
Convert a Warm, Cheerful Web Design to HTML and CSS - much broader than just this topic but an excellent tutorial to get your feet wet


... read blog post (no demos, sorry...)

Write code that interacts with UI controls

Programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphics

Apply styling to HTML elements programmatically

Change the location of an element; apply a transform; show and hide elements



... read blog post (Broad CSS style demo, very cool!)

Implement HTML5 APIs

Implement storage APIs, AppCache API, and Geolocation API

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 14, 15, 16*
MSDN Application Cache API ("AppCache")
MSDN Storage API blog - specific to Windows Apps, not too useful...
MSDN Storage and State reference
MSDN - Quickstart: detecting location using HTML5

*the chart in the back of the book includes Chapter 10, which covers the WebSockets API. However, another set of objectives covers WebSockets, so Chapter 10 really belongs there.


...read blog post (Storage API demo, Geolocation API demo)

Establish the scope of objects and variables

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 3 and 6
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4
MSDN - Namespacing in JavaScript
Memory Management (Mozilla Dev Net) - lifetime of variables
Working with the JavaScript “this” Keyword
JavaScript Closures
Closure (computer science)
MSDN - Use Cases for JavaScript Closures

... read blog post (console code)

Create and implement objects and methods

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 6
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4
MSDN - JavaScript Fundamentals - Sections on functions and objects
MSDN - Prototypes and Prototype Inheritance
MozDN - Introduction to Object-Oriented JavaScript
JavaScript Closures from Jibbering.com
JavaScript Spec - ECMA 262 v.5
MozDN - Standard built-in objects


... read blog post (LOTS of console code)


Implementing program flow
Implement program flow

Iterate across collections and array items; manage program decisions by using switch statements, if/then, and operators; evaluate expressions

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 3 and 6
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4
MSDN - Controlling Program Flow (JavaScript)
MSDN - JavaScript Statements - if(), switch(), while(), for()
MSDN - forEach Method (Array)
Stackoverflow - JavaScript Collection
MozDN - Statements - for...in, break
Detecting Object Property and Method Support - O'Reilly


...read blog post (some console code)

Raise and handle an event

Handle common events exposed by DOM (OnBlur, OnFocus, OnClick); declare and handle bubbled events; handle an event by using an anonymous function

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 3 and 6
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 5
Microsoft.com - Exam 70-480 - suggested link: Coding basic apps
MSDN - Objects and Events
MSDN - Understanding the Event Model
MSDN - Use cases for JavaScript Closures
JavaScript Closures from Jibbering.com
MSDN - Cross-browser event handling using plain ole JavaScript

... read blog post (demo!)

Implement exception handling

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 3
Advanced Windows Store App Development with HTML5 Jump Start - Module 6
How to check for undefined or null variable in javascript - Stackoverflow
JavaScript null check - Stackoverflow

... read blog post (lots of console code)

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 3, 6, 8, 9, 10
MSDN - The WebSocket API
About HTML5 WebSockets - Websocket.org
MSDN Articles on HTML5 - Specifically  WebSockets: Stable and Ready for Developers
The WebSockets API from w3.org
Fully Understanding the this Keyword
JQuery API - Events and AjaxShorthand Ajax Methods
Simple server implemtation in C# EchoHandler.ashx.cs ... probably outside the scope of this topic through


... read blog post (4 demos, including WebSockets)

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 9 (a whole 2 pages)
Advanced Windows Store App Development with HTML5 Jump Start - Module 1
MSDN - Introduction to HTML5 Web Workers: The JavaScript Multi-threading Approach


... read blog post (demo!)


Access and secure data
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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 7
Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 1 (part 1)
HTML5 specification from w3.org - Specifically Section 4.10 Forms
Dive Into HTML5 - A form of madness
Microsoft.com - Exam 70-480 - suggested link: pattern attribute | pattern property
MSDN - Better web forms with HTML5 Forms



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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 8
MSDN forum - How to parse XML file(from web api) in metrostyle application with javascript
SOAP vs REST - Oracle Video on Youtube (10min)


... read blog post (no demo, sorry...)

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 7
Cross-browser JSON Serialization in JavaScript
MSDN - Global Object: encodeURIComponentencodeURIdecodeURIComponent, and decodeURI
Using XMLHttpRequest (Mozilla Dev Net)
4.10.19.6 Form submission - w3.org HTML5 spec


... read blog post (LOTS of console code and several demos)


Use CSS3 in applications
Style HTML text properties

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


Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4
MSDN - How to Enhance Your Website's Type Design with CSS3


... read blog post (Comprehensive Text demo)

Style HTML box properties

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)


Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4


... read blog post (same demo as "Apply Styling Automatically")

Create a flexible content layout

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4
w3.org - CSS ExclusionsCSS Grid LayoutCSS RegionsCSS Flexible Box Layout


... read blog post (FlexBox demo, IE only Grid demo)

Create an animated and adaptive UI

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

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4
Advanced Windows Store App Development with HTML5 Jump Start - Module 4, 49min mark


... read blog post (Card flip demo, weird animation demo)

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)

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapters 4 and 6


... read blog post (simple demo)

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)

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4
Mozilla Dev Net - inheritancespecificity


... read blog post (demo!)

7 comments:

  1. Hello

    Is JQuery touched on in this exam? I realize that JQuery is JavaScript but was wondering if they exclude JQuery on the exam?

    ReplyDelete
    Replies
    1. Pretty much everything listed in the exam guide is in the test

      Delete
  2. First of all I want to deeply thank you for taking the time and dedication to post such an organized and detailed list of study material. Really appreciate it.

    Now, as a programming enthusiast with no experience at all who is willing to take this certification as an organized way of learning there are a few things I would like to know. What was your previous experience / technical knowledge level before preparing for the exam? How long did it take you to get prepared and how many hours a week did you dedicate on average? This is mostly to get an idea of how to organize myself.

    Thanks again for sharing your knowledge!

    ReplyDelete
    Replies
    1. First off, thanks for the thoughtful comment. :) As far as prior technical skill, I had done a couple html projects at school, and the programming I'd done up to this point was mostly VBA (Excel spreadsheet macros). For this test, I probably had about a month of dedicated study. Writing this guide was actually a study tool for me. Work was slow, so most days I pretty much did nothing but work on this. I'm glad my efforts can be of value to you, good luck!

      Delete
    2. Hey thanks again. The reason I would like to prepare for this certification is to have a framework to follow in order to learn and implement the basics of front-end web development.

      I have a couple of more questions if you don't mind.

      Are you currently working in Front-End Web Development? If so, did you find this certification useful to get there?

      I'm aware no certification is as good as a portfolio, but I'd like to get a better idea of how preparing for it could help me build useful skills for the real work.

      Delete
    3. I don't mind at all =)

      While my current position is more focused on backend and services, my previous job did have a good chunk of front end work. I think that studying for this test absolutely helped me build my skills with HTML, CSS, and JavaScript, and these skills have remained pretty relevant to me throughout my career thus far.

      I think you have the right idea as far as using this test as a framework for studying a coherent collection of concepts and technologies. Employers aren't likely to look at your CV and say "Oh hey, this guy passed 70-480, get him in here!", but I think it can get you to a place where you can start to understand and apply the technical skills and be a better developer.

      Delete
    4. Wonderful! I just needed to be convinced to move on so I'll look no further and I'll get into it straight away.

      You'll probably see me around again, hopefully to make some contribution to the site too ;)

      Delete