HTML5 & CSS3 Best Practice

2-day HTML5/CSS3 course in web design best practice — CSS3-03

HTML5 & CSS3 Best Practice TrainingCourse Overview

This HTML5 and CSS3 best practice training course is designed to establish benchmarks for designers and developers who want to deploy cutting-edge HTML5 and CSS3 in a robust, usable, and accessible way.

Whereas our publicly scheduled advanced web design course teaches popular features of HTML5 and CSS3 in a fairly straight-forward way, this course covers less ground and puts much more emphasis on the "best practice" aspects of implementing such features, e.g.

  • Productivity — for designers and developers
  • Robustness and usability — for end-users

This HTML5 and CSS3 best practice training course is only available as private (in-house) training for groups — although we might consider offering a modified version to the general public, if there were significant demand for its specifically "best practice" components. For those who merely want to learn how to use the features of HTML5 and CSS3 together, the public advanced web design course is likely to be a better option.

HTML5 & CSS3 Best Practice TrainingCourse Contents

HTML and CSS foundations

  • HTML and CSS versions:
    • HTML5 vs. HTML4 & XHTML
    • CSS3 vs. CSS2.1 vs. CSS2
    • Document types
    • DOCTYPE switching
    • Browser modes
  • Structuring and commenting HTML
    • Naming conventions
    • IDs vs. classes vs. semantic elements
    • When to use each
    • Microformats and microdata
  • Structuring and commenting CSS
    • Specificity and the cascade
    • Planning and maintaining style sheets
  • New contexts and paradigms
    • Mobile
    • Graceful degradation
    • Progressive enhancement
    • Flexible vs. Adaptive design
    • Eternal: usability and proportion
  • Coding quickly, robustly and scale-ably
    • The case for grid frameworks
    • Responsive framework taster
    • Bootstrap + SASS + Compass

CSS Visual Formatting Model

  • Box model: non-obvious, 'tricky' bits
    • Types: inline-block, table, flexbox, etc.
  • How floats and clearance work
    • Non-obvious, lesser-known bits
  • Margin collapse
    • Understanding the non-obvious bits
    • Cross-browser issues
  • Absolute and relative positioning
    • Increasing usage in modern browsers
    • And with modern devices
    • When to use one, the other, both
    • Gotchas and workarounds
  • Auto widths and margins
    • Head-slappingly obvious
    • Once you know all the rules

New features (HTML & CSS)

  • HTML5, CSS3 and CSS2.1
  • New Semantic HTML5 Elements
  • Microdata
  • XML serialisation of HTML5
  • 'Advanced' CSS2/CSS2.1 selectors
    • Previously un-used because of IE 5-7
  • New CSS3 selectors
  • Managing legacy browsers
  • Managing legacy code

Bug fixing and testing

  • Overview — principles and approaches
    • How to be 'lazy' — in a good way
    • Reducing debugging time/effort
  • How to track down CSS bugs
  • hasLayout 'bugs'
  • Hacks and filters
  • The most common browser bugs
  • Most common bug fixes
  • Graded browser support
  • Testing tools
  • Testing techniques
  • Testing IE

Typography

  • Much more important than you think
  • Critical for:
    • Box sizing
    • Vertical and horizontal grids
    • Managing flow and overflow
  • Balance, proportion and rhythm
  • Using web fonts — robustly and reliably
  • Text shadows
  • Text stroke
  • Gracefully degrading typography

Graphics

  • New graphic options in HTML5
    • Scalable Vector Graphics (SVG) — embedded, inline and background
    • Canvas — a taster
  • Backgrounds and borders
    • New CSS3 and advanced CSS2.1
    • Rounded-corner boxes
    • Fixed and fluid corners
    • The border-radius property
    • The sliding doors technique
    • Multiple background images
    • CSS drop shadows
    • Opacity and RGBa
    • HSL and HSLA
    • Gradients
    • Reflection
    • Sprites
  • CSS3 transitions — taster
  • CSS3 transformations — a taster
  • Gracefully degrading CSS3 graphics

Links, lists and menus

  • Usability concerns
  • Links
    • Ordering link selectors
    • Using the cascade
    • Inline vs. sidebar vs. ...
    • Form buttons vs. menu buttons, etc.
    • Distinguish link types
    • Using attribute selectors
    • External links
    • Visited links
    • Buttons
    • Pure CSS tooltips
  • Lists
    • Standard list-styling techniques
    • Advanced CSS markers and bullets
    • Advanced definition lists
  • Nav Bars
    • Vertical and horizontal nav bars
    • Fluid CSS tabs
    • Pure CSS drop-downs
    • CSS image maps
  • Remote rollovers
  • Gracefully degrading

Forms

  • Form markup in HTML5
    • Interactivity, focus and cursor
    • Accessibility
    • Autofocus
    • Input attributes
    • Validation and required fields
    • Predefined option lists vs.
    • Auto-completion
  • Form design using CSS3
    • Styling for form controls
    • Overriding default form styles
    • CSS-only form layouts

Data tables

  • Attractive and accessible
  • CSS3 and advanced CSS2.1 selectors
  • Gracefully degrading table styles

Responsive grid page layout

  • Grid theory and CSS grid techniques
  • Adaptive grids and designs
    • Adjust to window re-sizing
    • One CSS code-base for ...
    • Mobile, screen and print design
    • Using media queries
  • Centering designs on a page
  • Horizontal and vertical centring
  • 2 & 3-column float layouts
  • Fixed, liquid, and elastic layouts
  • Equal height columns
  • Nested grids: proportional, no overflow
  • CSS frameworks for page layout
    • Popular frameworks and tools
    • Frameworks versus CSS systems
    • i.e off-the-shelf vs. custom vs. hybrid

HTML5 & CSS3 Best Practice TrainingFurther Details

Course Objectives

On completion of this HTML5 and CSS3 best practice training course, delegates will be able to:

  • Know which features of HTML5 and CSS3 can be reliably deployed in current browsers
  • Ensure robust fallbacks for HTML5 and CSS3 features which lack universal browser support
  • Code HTML and CSS more quickly and with greater confidence
  • Write less HTML and CSS code to create the same functionality and visual effect
  • Write more easily-maintained HTML and CSS
  • Test HTML more effectively and completely
  • Debug HTML and CSS code more quickly
  • Develop recipes and templates for common and repetitive web design tasks

Target Audience

Experienced and knowledgable:

  • Web Designers
  • Web Developers

Training Pre-requisites

Knowledge and practical experience of managing:

  • Advanced HTML4 and/or XHTML
  • CSS2.1
  • CSS Box Models — including Internet Explorer quirks mode variants
  • Internet Explorer's non-standard hasLayout property
  • The most common visual bugs associated with Internet Explorer's non-standard modes
  • Hand coding with an advanced HTML- and CSS-aware text editor

All of the above are covered in this cross-browser compatibility course.

Training Style

This HTML5 and CSS3 best practice training course is among our most hands-on, practical, courses. At least 50%, and often more, of the class contact time is devoted to hands-on practical exercises. All the HTML5, CSS3 and intermediate code used in the course is expected to be hand-coded.