Advanced Web Design

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

Advanced Web Design TrainingCourse 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

Advanced Web Design TrainingCourse Contents

New/modified 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

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

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

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

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

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

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

CSS3 transitions and transforms

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

Supporting devices and 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

Advanced Web Design TrainingCourse Schedule

Advanced Web Design TrainingFurther Details

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