Search this site
Embedded Files
Skip to main content
Skip to navigation
HTML5 Coding Essentials and Best Practices
Home
Course information
Web editors
Online editors
Browser compatibility
W3C validators
W3C cheatsheet
Help build the Web platform
What is W3C?
The Web is amazing!
Why accessibility is important
First steps in Web accessibility
HTML5 and accessibility
Why internationalization is important
Essential steps in Web i18n
Module 1: HTML5 Basics
What you will learn in the Module
History of HTML versions
What is HTML5?
How HTML5 developed by Web community
The HTML5 logo
Greater simplicity
Structural elements
Mixing all elements together: a blog example
More on <article> and <section>
Headings and structural elements
Best practices when using sectioning elements
Embedding a table of contents
The <main> element
The blog example, applying best practices
Examples of page layouts
The <details> and <summary> elements
The <time> and <mark> elements
Module 2: HTML5 Multimedia
The <video> element
The <audio> element
Attributes of <video> and <audio>
Styling media players with CSS
Control players from JavaScript
The JavaScript API
The <video> element JavaScript API
[Advanced] Extended examples
Discussion and projects
HTML5 captioning
The WebVTT format
Adding subtitles to a video
Styling captions
Chapters
Tools for creating WebVTT files
The <track> JavaScript API
Enhanced HTML5 video players
Discussion and projects
Webcam
More on getUserMedia
Using the microphone
Webcam resolution
The MediaRecorder API
Discussion and project
Module 3: HTML5 Graphics
About JavaScript and HTML5
The <canvas> element
HTML canvas cheatsheet
Coordinate system
Drawing rectangles in a canvas
Drawing principles
2D transformations
Saving and restoring the context
Discussion and projects
Immediate mode
Drawing text
Drawing images
Drawing images from a video stream
Discussion and projects
Immediate mode vs. path mode
A warning
Drawing lines
Drawing lines with different styles
Drawing lines by simulating the immediate mode
Drawing arrows
Closing a path
Drawing circles and arcs
Drawing rounded rectangles
Quadratic curves
Curved arrows
Bézier curves
Discussion and projects
Canvas context: colors
Canvas context: linear gradients
Canvas context: radial gradients
Canvas context: patterns/textures
A multiple image loader
Drawing shadows
Styling lines
Module 4: HTML5 animations
Animation techniques
Basic animation techniques
Animating using setInterval()
Animating using setTimeout()
The requestAnimationFrame API
Discussion and projects
Canvas and user interaction
Events: input and output
Keyboard interaction, key events
Mouse interaction, mouse events
Responsive canvas
Advanced canvas
Discussion and projects
Project: the "snake" challenge
Module 5: HTML5 Forms
Introduction to Module 5
Module 5 Introduction
Elements and attributes
Introduction
Example
Input elements and attributes
Best practices
Accessible forms
Accessible forms
Why is this important?
Labeling controls
Grouping controls
Input types
Input types
"color"
"date"
"email", "tel", "URL" and "search"
"number"
"range"
Form attributes
Form attributes
form
autocomplete
autofocus
list
pattern
min, max and step
multiple
A warning
formaction and formmethod
formnovalidate
formtarget
formenctype
Elements related to forms
HTML5 forms elements
<output>
<meter>
<progress>
<datalist>
Form validation API
Introduction
Automatic visual feedback while typing
JavaScript form validation API
The validity property of input fields
Changing the default behavior
Module 6: HTML5 basic APIs
Introduction
HTML5 Coding Essentials and Best Practices
Home
Course information
Web editors
Online editors
Browser compatibility
W3C validators
W3C cheatsheet
Help build the Web platform
What is W3C?
The Web is amazing!
Why accessibility is important
First steps in Web accessibility
HTML5 and accessibility
Why internationalization is important
Essential steps in Web i18n
Module 1: HTML5 Basics
What you will learn in the Module
History of HTML versions
What is HTML5?
How HTML5 developed by Web community
The HTML5 logo
Greater simplicity
Structural elements
Mixing all elements together: a blog example
More on <article> and <section>
Headings and structural elements
Best practices when using sectioning elements
Embedding a table of contents
The <main> element
The blog example, applying best practices
Examples of page layouts
The <details> and <summary> elements
The <time> and <mark> elements
Module 2: HTML5 Multimedia
The <video> element
The <audio> element
Attributes of <video> and <audio>
Styling media players with CSS
Control players from JavaScript
The JavaScript API
The <video> element JavaScript API
[Advanced] Extended examples
Discussion and projects
HTML5 captioning
The WebVTT format
Adding subtitles to a video
Styling captions
Chapters
Tools for creating WebVTT files
The <track> JavaScript API
Enhanced HTML5 video players
Discussion and projects
Webcam
More on getUserMedia
Using the microphone
Webcam resolution
The MediaRecorder API
Discussion and project
Module 3: HTML5 Graphics
About JavaScript and HTML5
The <canvas> element
HTML canvas cheatsheet
Coordinate system
Drawing rectangles in a canvas
Drawing principles
2D transformations
Saving and restoring the context
Discussion and projects
Immediate mode
Drawing text
Drawing images
Drawing images from a video stream
Discussion and projects
Immediate mode vs. path mode
A warning
Drawing lines
Drawing lines with different styles
Drawing lines by simulating the immediate mode
Drawing arrows
Closing a path
Drawing circles and arcs
Drawing rounded rectangles
Quadratic curves
Curved arrows
Bézier curves
Discussion and projects
Canvas context: colors
Canvas context: linear gradients
Canvas context: radial gradients
Canvas context: patterns/textures
A multiple image loader
Drawing shadows
Styling lines
Module 4: HTML5 animations
Animation techniques
Basic animation techniques
Animating using setInterval()
Animating using setTimeout()
The requestAnimationFrame API
Discussion and projects
Canvas and user interaction
Events: input and output
Keyboard interaction, key events
Mouse interaction, mouse events
Responsive canvas
Advanced canvas
Discussion and projects
Project: the "snake" challenge
Module 5: HTML5 Forms
Introduction to Module 5
Module 5 Introduction
Elements and attributes
Introduction
Example
Input elements and attributes
Best practices
Accessible forms
Accessible forms
Why is this important?
Labeling controls
Grouping controls
Input types
Input types
"color"
"date"
"email", "tel", "URL" and "search"
"number"
"range"
Form attributes
Form attributes
form
autocomplete
autofocus
list
pattern
min, max and step
multiple
A warning
formaction and formmethod
formnovalidate
formtarget
formenctype
Elements related to forms
HTML5 forms elements
<output>
<meter>
<progress>
<datalist>
Form validation API
Introduction
Automatic visual feedback while typing
JavaScript form validation API
The validity property of input fields
Changing the default behavior
Module 6: HTML5 basic APIs
Introduction
More
Home
Course information
Web editors
Online editors
Browser compatibility
W3C validators
W3C cheatsheet
Help build the Web platform
What is W3C?
The Web is amazing!
Why accessibility is important
First steps in Web accessibility
HTML5 and accessibility
Why internationalization is important
Essential steps in Web i18n
Module 1: HTML5 Basics
What you will learn in the Module
History of HTML versions
What is HTML5?
How HTML5 developed by Web community
The HTML5 logo
Greater simplicity
Structural elements
Mixing all elements together: a blog example
More on <article> and <section>
Headings and structural elements
Best practices when using sectioning elements
Embedding a table of contents
The <main> element
The blog example, applying best practices
Examples of page layouts
The <details> and <summary> elements
The <time> and <mark> elements
Module 2: HTML5 Multimedia
The <video> element
The <audio> element
Attributes of <video> and <audio>
Styling media players with CSS
Control players from JavaScript
The JavaScript API
The <video> element JavaScript API
[Advanced] Extended examples
Discussion and projects
HTML5 captioning
The WebVTT format
Adding subtitles to a video
Styling captions
Chapters
Tools for creating WebVTT files
The <track> JavaScript API
Enhanced HTML5 video players
Discussion and projects
Webcam
More on getUserMedia
Using the microphone
Webcam resolution
The MediaRecorder API
Discussion and project
Module 3: HTML5 Graphics
About JavaScript and HTML5
The <canvas> element
HTML canvas cheatsheet
Coordinate system
Drawing rectangles in a canvas
Drawing principles
2D transformations
Saving and restoring the context
Discussion and projects
Immediate mode
Drawing text
Drawing images
Drawing images from a video stream
Discussion and projects
Immediate mode vs. path mode
A warning
Drawing lines
Drawing lines with different styles
Drawing lines by simulating the immediate mode
Drawing arrows
Closing a path
Drawing circles and arcs
Drawing rounded rectangles
Quadratic curves
Curved arrows
Bézier curves
Discussion and projects
Canvas context: colors
Canvas context: linear gradients
Canvas context: radial gradients
Canvas context: patterns/textures
A multiple image loader
Drawing shadows
Styling lines
Module 4: HTML5 animations
Animation techniques
Basic animation techniques
Animating using setInterval()
Animating using setTimeout()
The requestAnimationFrame API
Discussion and projects
Canvas and user interaction
Events: input and output
Keyboard interaction, key events
Mouse interaction, mouse events
Responsive canvas
Advanced canvas
Discussion and projects
Project: the "snake" challenge
Module 5: HTML5 Forms
Introduction to Module 5
Module 5 Introduction
Elements and attributes
Introduction
Example
Input elements and attributes
Best practices
Accessible forms
Accessible forms
Why is this important?
Labeling controls
Grouping controls
Input types
Input types
"color"
"date"
"email", "tel", "URL" and "search"
"number"
"range"
Form attributes
Form attributes
form
autocomplete
autofocus
list
pattern
min, max and step
multiple
A warning
formaction and formmethod
formnovalidate
formtarget
formenctype
Elements related to forms
HTML5 forms elements
<output>
<meter>
<progress>
<datalist>
Form validation API
Introduction
Automatic visual feedback while typing
JavaScript form validation API
The validity property of input fields
Changing the default behavior
Module 6: HTML5 basic APIs
Introduction
Module 1: HTML5 Basics
Google Sites
Report abuse
Page details
Page updated
Google Sites
Report abuse