Advanced Web Design

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

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

Dates for London

Dates for Manchester

Dates for Glasgow

Dates for Birmingham

Dates for Leeds

Dates for Edinburgh

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

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom