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

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

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom