70-480

70-480 overview

# Programming in HTML5 with JavaScript and CSS3

https://www.barbarianmeetscoding.com/blog/2015/03/15/on-how-i-passed-the-70-480-certification-exam

> Basically:
>
>- HTML, CSS3, JavaScript (ES5)
>- HTML5 web apis: DOM, web workers, web sockets, geolocation, app cache, local storage, session storage, >- canvas, svg
>- XMLHttpRequest and Ajax
>- Basic CSS Layout, Flexbox, Grid, CSS Regions
>- Transitions, Transforms and Animations
>- jQuery

## Implement and Manipulate Document Structures and Objects (20-25%)

### Create the document structure by using HTML

#### Structure the UI by using semantic markup, including markup for search engines and screen readers, such as Section, Article, Nav, Header, Footer, and Aside

Semantic is defned as the study of meaning of linguistic expressions. HTML tags provide a meaningful structure, but do not provide presentation.

- [my HTML5 symantic notes](70-480/01-html5-symantic-elements.md)
- [New semantic elements](https://www.barbarianmeetscoding.com/wiki/html5-semantic-elements/)

The <article> and <section> elements are the main ones used by the SEO algorithm. These elements are known to contain the main body of the page.

#### HTML5 Semantic elements

Improved semantic elements for modern web applications.

- [Barbarian Meets Coding Wiki: HTML5 Semantic Elements](http://www.barbarianmeetscoding.com/wiki/html5-semantic-elements/)
- [Dive Into HTML5: Semantics](http://diveintohtml5.info/semantics.html)

#### create a layout container in HTML

Elements within an HTML page can have their layout controlled when
cluded inside structures such as <div> elements and/or HTML tables.

Use symantic elements over div whenever possible.

### Write code that interacts with UI controls

#### Programmatically add and modify HTML elements

```javascript
let parent = document.getElementById('inner');
let span = document.createElement("span");
document.appendChild(span)

let a = document.createElement("a");
parent.insertBefore(a, parent.firstChild);
a.innerText = "click here";

a.setAttribute("href", "https://disney.nl");

parent.removeChild(span);
a.removeNode(true);

// ...

oldDiv.replaceNode(newDiv);

// TODO: Work out better samples
```

#### implement media controls

- [Barbarian Meets Coding Wiki: Media Controls](http://www.barbarianmeetscoding.com/wiki/html5-audio-and-video/)
- [Example on JsFiddle](http://jsfiddle.net/vintharas/n8xwdfcd/)
- [Using HTML5 Audio and Video](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video)
- [Dive Into HTML5: Video on the Web](http://diveintohtml5.info/video.html)


```html
<video controls src="" height="" width="" loop autoplay poster="some.png"></video>

<video controls autoplay>
<source href="beach-01.ogg" type="video/ogg" />
<source href="beach-01.mp4" type="audio/mp4"/>
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
<object>
<p>Video is not supported by this browser</p>
</object>
</video>

<audio controls>
<source src="sample.mp3" type="audio/mp3"/>
<source src="sample.ogg" type="audio/ogg"/>
<!-- this are song captions in different languages -->
<track kind="captions" src="song.en.vtt" srclang="en" label="English">
<track kind="captions" src="song.es.vtt" srclang="es" label="Spanish">
<p>Your browser does not support HTML5 audio.</p>
</audio>
```

- READ [MDN Multimedia](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
- READ [Video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
- READ [Audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)

#### implement HTML5 canvas

A new API to do low level drawing in the browser with JavaScript.

- [Dive Into HTML5: Canvas](http://diveintohtml5.info/canvas.html)
- [Canvas API at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)


```html
<canvas id="drawingSurface" width="600" height="400">
Your browser does not support HTML5.
</canvas>
```

```javascript
window.onload = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");

ctxt.lineWidth = 5;
ctxt.strokeStyle = '#0f0';

// draw, yay!
ctxt.beginPath();
ctxt.moveTo(10, 10);
ctxt.lineTo(225, 350);
ctxt.stroke();

// We like curves!
ctxt.beginPath();
ctxt.arc(150,100,75,0,2 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#0f0';
ctxt.stroke();
ctxt.beginPath();
ctxt.arc(450, 100, 75, 1.5 * Math.PI, 2 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = 'blue';
ctxt.stroke();
ctxt.beginPath();
ctxt.arc(150, 300, 75, 1 * Math.PI, 1.5 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#0ff';
ctxt.stroke();
ctxt.beginPath();
ctxt.arc(450, 300, 75, .5 * Math.PI, 1 * Math.PI, false);
ctxt.lineWidth = 25;
ctxt.strokeStyle = '#f00';
ctxt.stroke();
}
```

### SVG graphics

Scalable Vector Graphics support for the browser. Great for the many-devices-reality we live in today.

- [Using SVG at CSS-Tricks](https://css-tricks.com/using-svg/)
- [SVG at MDN](https://developer.mozilla.org/en/docs/Web/SVG)
- [An example of SVG in JsFiddle](http://jsfiddle.net/vintharas/0m9raoj4/)

### Apply styling to HTML elements programmatically

```javascript
$(parent).addClass("foo"); ?
```

#### Change the location of an element

#### apply a transform; show and hide elements

### Implement HTML5 APIs

#### Implement storage APIs LocalStorage and SessionStorage

LocalStorage and SessionStorage are two new web apis that allow you to store information for your web applications locally in your user’s browser.

- [Dive into HTML5: Storage](http://diveintohtml5.info/storage.html) (Awesome)
- [Web Storage API at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)
- [Demo with LocalStorage](http://www.barbarianmeetscoding.com/barbaric-basics-web-development/iwrite-dist/index.html)

#### and the Geolocation API

The new geolocation api lets you to tap into a user’s location from the browser and even get updates whenever a user moves from one place to another.

- [Barbarian Meets Coding Wiki: Geolocation](http://www.barbarianmeetscoding.com/wiki/geolocation/)
- [Using Geolocation at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation)
- [Dive Into HTML5: Geolocation](http://diveintohtml5.info/geolocation.html)

### 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

### 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

### Resources 1

- [Develper's guide to HTML5 canvas](https://msdn.microsoft.com/en-us/hh534406)
- [How to Zoom and Pan with SVG](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589508(v=vs.85))

---

## Implement program flow (25%)

### Implement program flow

#### Iterate across collections and array items

#### manage program decisions by using switch statements, if/then, and operators

#### evaluate expressions

### 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

### Implement exception handling

#### Set and respond to error codes

#### throw an exception

#### request for null checks

#### implement try-catch-finally blocks

### Implement asynchronous programming

#### Receive messages from the HTML5 WebSocket API

A sockets API for the web. We are no longer limited to using HTTP in our web applications.

- [Barbarian Meets Coding Wiki: Web Sockets](http://www.barbarianmeetscoding.com/wiki/web-sockets/)
- [Web Sockets Example on JsFiddle](http://jsfiddle.net/vintharas/hbj0emek/)
- [Introducing Web Sockets: Bringing Sockets to the Web](http://www.html5rocks.com/en/tutorials/websockets/basics/)
- [WebSockets at MDN](https://developer.mozilla.org/en/docs/WebSockets)

#### 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

Multithreading in the browser, perform computing or I/O expensive tasks in the browser without affecting the UI thread and the User Experience of your web applications.

- [Barbaric Basics: Web Workers](http://www.barbarianmeetscoding.com/blog/2015/02/13/barbaric-basics-web-workers/)
- [The Basics of Web Workers](http://www.html5rocks.com/en/tutorials/workers/basics/)
- [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/basic_usage)

#### 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

### Resources 2

- [Controlling program flow (JavaScript)](http://msdn.microsoft.com/library/ie/kw1tezhk(v=vs.94).aspx)
- [Coding basic apps](http://msdn.microsoft.com/library/windows/apps/hh780660.aspx)
- [try...catch...finally statement (JavaScript)](http://msdn.microsoft.com/library/ie/4yahc5d8(v=vs.94).aspx)

---

## Access and secure data (26%)

### Validate user input by using HTML5 elements

#### Choose the appropriate controls based on requirements

#### implement HTML input types and content attributes 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

The most traditional API used to perform HTTP requests from the browser to the server.

- [Barbarian Meets Coding Wiki: XMLHttpRequest and Ajax](http://www.barbarianmeetscoding.com/wiki/ajax/)
- [XHR example on JsFiddle](http://jsfiddle.net/vintharas/9f7sb409/)
- [WHATWG XMLHttpRequest Spec](https://www.barbarianmeetscoding.com/blog/2015/03/15/WHATWG%20XMLHttpRequest%20Specification%20Standard)
- [Using XHR at MDN](https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
- [XHR API at MDN](https://www.barbarianmeetscoding.com/blog/2015/03/15/XMLHttpRequest%20API%20at%20MDN)
- Also focus on the [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) API and parsing and [serializing XML](https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML) (yes, for real xD)


### Serialize, deserialize, and transmit data

#### Handle binary data

#### handle text data such as JSON and XML

#### implement the JQuery serialize method

#### use Form.Submit

#### parse data

#### send data by using XMLHTTPRequest

#### sanitize input by using URI/form encoding

### Resources 3

- [pattern attribute | pattern property](http://msdn.microsoft.com/library/ie/hh772941(v=vs.85).aspx)
- [Sandbox](http://msdn.microsoft.com/library/ie/hh673561(v=vs.85).aspx)
- [XMLHttpRequest object](http://msdn.microsoft.com/library/ie/ms535874(v=vs.85).aspx)

---

## Use CSS3 in applications (25%)

### Style HTML text properties

#### Apply styles to text appearance

#### apply styles to text font, including WOFF, @font-face, size, and understudy fonts

#### apply styles to text alignment, spacing, and indentation; apply styles to text hyphenation

#### apply styles for a text drop shadow

### Style HTML box properties

#### Apply styles to alter appearance attributes, including size, borders, rounded corners, outline, padding, and margin; apply styles to alter graphic effects, including transparency, opacity, background image, gradients, shadow, and clipping

#### apply styles to establish and change an element’s position

### Create a flexible content layout

#### Implement a layout using a flexible box model

#### implement a multi-column layout

#### implement a layout using position floating and exclusions

#### implement a layout using grid alignment

#### implement a layout using regions, grouping, and nesting

### 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, including 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

### 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

### Resources 4

- [Text](http://msdn.microsoft.com/library/ie/hh673564(v=vs.85).aspx)
- [How to add drop shadows with CSS3](http://msdn.microsoft.com/library/ie/gg589484(v=vs.85).aspx)
- [CSS](http://msdn.microsoft.com/library/ie/hh673536(v=vs.85).aspx)

---

## Exam-Ref book notes

- https://jsfiddle.net
- https://codepen.io/

### Chapter 1

**Elements vs tags:** HTML markup is referred to as both HTML tags and HTML elements. These terms are often used interchangeably. This book refers to the HTML markup as elements.


---

## Misc

### General topics

#### HTML5 Media Controls

Play Audio and Video natively in the web.

- [Barbarian Meets Coding Wiki: Media Controls](http://www.barbarianmeetscoding.com/wiki/html5-audio-and-video/)
- [Example on JsFiddle](http://jsfiddle.net/vintharas/n8xwdfcd/)
- [Using HTML5 Audio and Video](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video)
- [Dive Into HTML5: Video on the Web]()

#### HTML5 Semantic Elements

Improved semantic elements for modern web applications.

- [Barbarian Meets Coding Wiki: HTML5 Semantic Elements](http://www.barbarianmeetscoding.com/wiki/html5-semantic-elements/)
- [Dive Into HTML5: Semantics](http://diveintohtml5.info/semantics.html)

#### HTML5 Forms

Better forms for modern web applications.

- [Example on JsFiddle](http://jsfiddle.net/vintharas/t7LheLdd/)
- [Dive into HTML5: Forms](http://diveintohtml5.info/forms.html)

#### The Document Object Model (DOM)

- [An Introduction to the DOM at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
- [Events and the DOM at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events)
- [DOM Events W3C Specification](http://www.w3.org/TR/DOM-Level-3-Events/)

#### Javascript

In order to pass the exam you need to know some JavaScript basics:

- Basic flow structures
- Prototypical inheritance and OOP
- Closures and scope in JavaScript
- Exception Handling
- Regular Expressions
- Asynchronous programming, callbacks and promises
- You can read any beginner’s level JavaScript book and that would be enough to pass the exam. The [Eloquent JavaScript](http://eloquentjavascript.net/) course is very good.

#### CSS3

- [CSS Wiki at Barbarian Meets Coding](http://www.barbarianmeetscoding.com/wiki/css/)
- [W3C CSS 3 Cascade Specification](http://www.w3.org/TR/css3-cascade/)

#### CSS Selectors

- [CSS Diner](http://flukeout.github.io/) (Awesome)
- [CSS Wiki at Barbarian Meets Coding](http://www.barbarianmeetscoding.com/wiki/css/)
- [W3C CSS3 Selectors Specification](http://www.w3.org/TR/css3-selectors/)

#### CSS Layout

The basics of CSS Layout, the box model, display, position, etc.

- [Learn CSS Layout](http://learnlayout.com/) (Awesome)
- [Example on JsFiddle](http://jsfiddle.net/vintharas/ybt6k2dw/)

#### CSS Flexbox

A great API for creating flexible layouts that adapt to multiple devices.

- [Barbaric Basics: Building Flexible Layouts With Flexbox](http://www.barbarianmeetscoding.com/blog/2015/03/08/barbaric-basics-building-flexible-layouts-with-flexbox/)
- [Flexbox Playground](http://the-echoplex.net/flexyboxes/)
- [A Complete Guide to Flexbox at CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Using CSS Flexbox at MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
- [W3C Flexbox Spec](http://www.w3.org/TR/css3-flexbox/)
- [Solved By Flexbox](http://philipwalton.github.io/solved-by-flexbox/)

#### CSS Media Queries

The most foundational api to do responsive web design.

- [CSS Media Queries at MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
- [W3C CSS Media Queries Specification](http://www.w3.org/TR/css3-mediaqueries/)

#### CSS Grid

A native grid layout for the web.

- [A Complete Guide To Grid on CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [CSS Grid W3C Specification](http://www.w3.org/TR/css3-grid-layout/)

#### CSS Multicolumn layout

Native multicolumn layout for the web.

- [Multicolumn layout example on JsFiddle](http://jsfiddle.net/vintharas/2ardr2p5/)
- [Using CSS Multicolumn Layouts at MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts)

#### CSS Regions

An interesting API to separate semantic HTML from structural HTML.

- [An Introduction to CSS Regions](https://dev.opera.com/articles/introduction-to-css-regions/)
- [CSS Regions W3C Spec](http://dev.w3.org/csswg/css-regions/)

#### CSS Transitions, Transforms and Animations

APIs for animating the web.

- [CSS Wiki at Barbarian Meets Coding](http://www.barbarianmeetscoding.com/wiki/css/)
- [Example of Transitions in JsFiddle](http://jsfiddle.net/vintharas/4a6y1f5d/)
- [Example of Transforms in JsFiddle](http://jsfiddle.net/vintharas/yyp8bu98/)
- [Using CSS Transitions at MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)
- [Using CSS Transforms at MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms)
- [Using CSS Animations at MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations)

#### jQuery

If you haven’t been in contact with jQuery before, you can get a nice overview at the Microsoft Virtual Academy with the Introduction to jQuery course. Otherwise, you can get a quick refresher from the [jQuery learning portal](http://learn.jquery.com/using-jquery-core/) and focus on:

- DOM traversing and manipulation
- Handling DOM events
- Ajax and Forms


#### AppCache

The Application Cache api gives you all the tools you need to create pure offline experiences for your web applications.

- [A Beginner’s Guide to the Application Cache](http://www.html5rocks.com/en/tutorials/appcache/beginner/)
- [Using the Application Cache at MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache)
- [Offline Web Applications at Dive Into HTML5](http://diveintohtml5.info/offline.html)