Advanced Web Design Course

2-day advanced web design course using HTML5 & CSS3 — AWD

Advanced Web Design Training Course Overview

This advanced web design course concentrates exclusively on the new features of HTML5 and CSS3, i.e. those which were never present in XHTML/HTML4 and CSS2.1, or only in a primitive form.

It is designed primarily for experienced web designers and developers who wish to update their skills and take advantage of the new HTML5/CSS3 features in current browsers.

That said, technically adept beginners could combine it with our basic web design course to construct a fast track introduction to current website design practice.

This HTML5/CSS3 course covers:

The aims, components, status and browser support for CSS3 and HTML5
The most common CSS3/HTML5 features in current browsers
A few advanced CSS3 features missing from some browsers
Progressive enhancement and graceful degradation techniques
Some basic responsive web design

Course contents — 1 New HTML5 markup

New whole-page metadata:
- DOCTYPE, media type, character encoding, root element, link relations
New semantic elements
- header, nav,main, article, aside, footer, etc.
- section, incl. effect on h1–h6 semantics
New HTML5 elements in older IEs
Styling the new HTML5 elements in CSS
Deprecated elements
Microdata
- Comparison with microformats and RDFa
- Defining your own microdata vocabulary
- E.g. defining people, organizations, events, reviews, etc

Course contents — 2 HTML5 audio and video

Understanding and creating multimedia content
- containers vs. codecs
- MIME types / media types
- Video: h.264, VP8, Theora vs. WebM/MKV, Ogg, MPEG-4, flv, AVI
- Audio: MP3, AAC, Vorbis
- Encoding tools and methods: Handbrake, Fireogg, FFmpeg, FFmpeg2theora
The HTML5 video element
The HTML5 audio element
Media event attributes
Controlling multimedia events
Standard HTML5 multimedia fall-backs
Fall-backs for IE
Mobile multimedia — iPhone, iPad, Android

Course contents — 3 HTML5 forms and scripting

Problems with HTML/XHTML forms
New form elements and attributes
Datalists and the input list attribute
Using form event attributes and validation — incl. generic window, keyboard, mouse events
Using:
- Placeholder text, autofocus, email/web addresses, numbers (with spinboxes), ranges (with sliders), telephone numbers, dates (and pickers), search boxes, colour pickers, required fields, etc.
Older browser fallbacks for all of the above

Course contents — 4 Canvas & interactive graphics

HTML5 support for interactive graphics
Using JavaScript and/or HTML5 to control the position, visibility and state of graphic objects
When to use which technique:
- Canvas drawing — bitmap, pixel-based
- Static and animated SVG — vector-based
- CSS3 transitions & transforms
Canvas basics — worked examples and hands-on practice
- Coordinates, paths, text, gradients, shadows, images,
- Compositing
- Transformations
- Basic Animation
- Managing events, state and context
- Applying styles
- Accessibility
- Supporting IE

Course contents — 5 CSS3 Selectors

Intro to CSS3, including:
- Modularity and profiles in the CSS3 spec
- Browser support
- Progressive enhancement and graceful degradation
CSS3 Attribute selectors
CSS3 UI selectors
CSS3 structural selectors
CSS generated content
Combinators

Course contents — 6 CSS3 text, fonts and colour

Using @font-face and Web Fonts
Open source fonts, copyright and DRM
Web Fonts Services, libraries, tools and resources
Text Shadows
Text Stroke
RGBA Colors
HSL and HSLA

Course contents — 7 CSS3 boxes and backgrounds

Border Radius
Box Shadow
Box-sizing
Layout issues
Multiple background images
Sizing background images
Clipping backgrounds
Gradients
SVG images as backgrounds
Reflection
Masks

Course contents — 8 Transitions & transforms

Multi-column text
CSS3 transitions
Keyframes
Transforms
Translation
Scaling
Rotation
Skew
Matrix
Moving the origin of a transform

Course contents — 9 Devices & browsers

Devices and variations proliferate
Using media queries and object detection
CSS3 Media Queries
Support for CSS3 selectors and properties in different browsers
Using Modernizr, jQuery, et al.
- As browsers workarounds and to enhance JS with CSS3-style selection
Future developments in CSS3
Resources for extending CSS3 learning and practice

Course Objectives

On completion of this advanced web design course students will be able to:

Understand the scope and components of HTML5 & CSS3
Build HTML5-based pages and sites suitable for CSS3 styling
Convert HTML4/XHTML pages to HTML5
Write W3C web standards-based HTML5 & CSS3
Use the following HTML features confidently:
- HTML5 semantic markup, page strutures, form controls, audio/video tags, and Canvas
Use the CSS3 selectors, properties and values supported by current browsers
Deploy fallbacks for browsers which do not support widely implemented CSS3 features
Ensure that all site functionality and critical design features work in non-supporting browsers
- Providing JavaScript polyfils where possible
- No essential feature is lost without JavaScript
Extend the knowledge and skills learned on this course

Target Audience

Anybody building or planning to build websites or web applications using HTML5 and CSS3.

Web Designers
Web Developers and Programmers
Technical team leaders

Training Pre-requisites

All of the following:

Successful completion of our basic web design course — or equivalent experience
Successful completion of our CSS fundamentals course — or equivalent experience
Some exposure to JavaScript (e.g. using JQuery) — but programming experience is not necessary
Understanding of MIME-type and character-encoding issues on the web

Training Style

Intensive, instructor-led training, with opportunities for hands-on practical work where appropriate.

Small groups — max 8
Concepts and syntax explained with worked code examples
Less hands-on than basic courses — c. 1/3 contact time
Sample code and media assets for exercises
A cross-platform HTML5/CSS3-aware editing environment
Support for individual extension work after the course
Substantial free manual