Other study guides in the wild
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 5Developing 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 - HTML4Attributes list from w3.org - HTML4HTML5 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") ...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 6Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4MSDN - Namespacing in JavaScript 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 6Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4MSDN - JavaScript Fundamentals - Sections on functions and objectsMSDN - 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 6Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 4MSDN - Controlling Program Flow (JavaScript) MSDN - JavaScript Statements - if(), switch(), while(), for()MSDN - forEach Method (Array) Stackoverflow - JavaScript Collection MozDN - Statements - for...in, breakDetecting 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 Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 5Microsoft.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 3Advanced Windows Store App Development with HTML5 Jump Start - Module 6How to check for undefined or null variable in javascript - 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, 10MSDN - The WebSocket API About HTML5 WebSockets - Websocket.orgMSDN Articles on HTML5 - Specifically WebSockets: Stable and Ready for Developers The WebSockets API from w3.org Fully Understanding the this Keyword
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 work er; register an event listener for the web worker; limitations of a web worker Advanced Windows Store App Development with HTML5 Jump Start - Module 1MSDN - 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 7Developing 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 8MSDN forum - How to parse XML file(from web api) in metrostyle application with javascript ... 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 7Cross-browser JSON Serialization in JavaScript 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 4MSDN - 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) ... 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 4CSS Exclusions , CSS Grid Layout , CSS Regions , CSS 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 4Advanced 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)
... 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)
... read blog post (demo!)
Hello
ReplyDeleteIs JQuery touched on in this exam? I realize that JQuery is JavaScript but was wondering if they exclude JQuery on the exam?
Pretty much everything listed in the exam guide is in the test
DeleteFirst 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.
ReplyDeleteNow, 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!
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!
DeleteHey 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.
DeleteI 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.
I don't mind at all =)
DeleteWhile 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.
Wonderful! I just needed to be convinced to move on so I'll look no further and I'll get into it straight away.
DeleteYou'll probably see me around again, hopefully to make some contribution to the site too ;)