HTML5 & CSS3 Best Practice

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

HTML5 & CSS3 Best Practice Training Course 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.

Course contents — 1 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

Course contents — 2 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

Course contents — 3 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

Course contents — 4 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

Course contents — 5 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

Course contents — 6 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

Course contents — 7 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

Course contents — 8 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

Course contents — 9 Data tables

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

Course contents — 10 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

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.