Training at your office
or our computer labs

HTML5 & CSS3 Course

Use the exciting new features of HTML5 today. Supported well by current browsers, the new specifications offer access to the latest device capabilities, video, audio, dynamic new form elements and structural efficiencies.

CSS3 is the fresh standard for controlling style and layout in HTML pages. It offers new options such as animation, shadows and embedded fonts. This course is an introduction to new features in HTML5 and CSS3 for the development of clean, efficient, responsive websites that utilise the very latest capabilities. (For HTML5 animation, eg banner advertising, see our Edge Animate courses)

Prerequisites: Knowledge of HTML & CSS is required to attend this course – and completing the 1 day HTML & Web Principles and our 2 day CSS Essentials courses will meet this requirement.

  • Training Modules (Overview only)

    • Semantic markup for efficient searchable code
    • HTML5 forms
    • How to include audio and video
    • CSS3 for style, colour and opacity
    • CSS3 shadows, gradients, round corners
    • Animation & transitions with CSS3
    • Web fonts
    • Responsive design
    • Media Queries to target mobile devices
  • What You Get

    • HTML5 & CSS3 for the Real World eBook
    • Class exercises relevant to industry
    • Choice of Mac or PC
    • Phone AND email support
    • Free Course Resit
    • Small Classes (average 4 to 6)
    • HTML5 & CSS3 for the Real World
$900 + GST  $850 + GST
2 Days | 9am–4:30pm

Course Dates

  • Location:
  • Date
    MAC or PC

Course Outline

Intro to HTML5 and CSS3

  • What is HTML5
  • Current best practice with HTML5 features
  • Differences in the doctype
  • What is CSS3
  • Browser support for new features
  • Future developments
  • The varied browser market
  • The growing mobile market
  • Mobile browser support for new features
  • The practice of progressive enhancement

HTML5 Markup

  • A basic HTML5 template
  • Doctype
  • The html element
  • The head element
  • New code in older browsers
  • Closing tags
  • New elements for defining page structure
  • Headers and footers
  • Sections, articles and asides
  • Correct structures and content for articles
  • New heading structures
  • The nav element

More HTML5 Semantics

  • Types of content
  • Document outline
  • Heading groups
  • Figures and captions
  • New elements to organise content
  • New tags to mark content
  • Deprecation
  • Block elements inside links
  • Bold and Italic
  • Small text
  • Citing references
  • Details element
  • Changes to existing HTML features
  • Validating HTML5

HTML5 Forms

  • HTML5 form attributes
  • Fields and textareas
  • Search fields
  • Email address validation
  • URL
  • Telephone numbers
  • Triggering the right keyboard on mobile devices
  • Numbers
  • Range slider element
  • Colour picker element
  • Dates and Times
  • Other new form input types
  • Required fields
  • Placeholders

HTML5 Audio and Video

  • HTML5 video vs Flash video
  • Video container formats
  • Video file formats and compression
  • Audio file formats and compression
  • Video codecs
  • Audio codecs
  • Browser support for video & audio
  • Accessibility issues for video & audio
  • Video and audio for mobile devices
  • Enabling native controls
  • Support for multiple formats
  • MIME types
  • Auto playing media
  • Looping
  • Preloading video & audio
  • Poster images for video
  • Video for older browsers

Introduction to CSS3

  • CSS selectors
  • Relational selectors
  • Attribute selectors
  • Pseudo-classes
  • Structural pseudo-classes
  • Pseudo-classes and generated content
  • CSS3 colours and opacity
  • Using RGB, HSL, RGBA and HSLA
  • The opacity property
  • Rounded corners
  • Percentages, ems or pixels for rounded corners
  • Drop shadows
  • Multiple drop shadows
  • Inset shadows
  • Colours and opacity of drop shadows
  • Text shadows

CSS3 Gradients and Multiple Backgrounds

  • Linear gradients
  • Online tools for gradient generation
  • Radial Gradients
  • Repeating gradients
  • Multiple background images
  • transparency in backgrounds
  • Flexible and resizable background images
  • Using cover and contain
  • Background size
  • Background positions and behaviours

CSS3 Transformations and Transitions

  • Transformations: translate, scale, rotate, skew
  • Transitions triggered by rollovers
  • Browser support issues
  • Transitions: property, duration, timing, delay, multiple transitions
  • Animation with CSS
  • Defining keyframe animations
  • Setting multiple keyframes
  • Implementing named keyframe animations
  • Easing and bounces with timing functions

Embedded Fonts and Columns

  • Web fonts with @font-face
  • Using Google fonts
  • Font Squirrel fonts
  • Using downloaded local webfonts
  • Font considerations
  • Font formats and file types
  • CSS3 multi-column layouts
  • Column gaps
  • Column count
  • Column widths
  • Media Queries and browser support
  • How to write media query to suit your layout
  • Responsive design for multiple devices
  • Designs that adapt to any screen
  • Repositioning elements
  • Hiding and showing elements
  • Flexible sizes for elements
  • Flexible grid systems
  • CSS3 HTML5 boilerplate

Geolocation and Canvas

  • Browser support issues
  • What are Geolocation and Canvas and where might it be used?