CSS3 Essentials

A 1-day CSS3 Course for Impatient Beginners — CSS3-01

CSS3 TrainingCourse Overview

This CSS3 training course might well be subtitled, ‘CSS3 for the Impatient,’ since it provides a fast-paced run-through the key CSS3 features implemented in current browsers. It is intended for experienced CSS coders who may well have dabbled in CSS3 already, but want to know:

  • How all the bits fit together
  • About bits they haven't yet explored
  • How to avoid the elephant traps of using CSS3 right now

It covers:

  • The most popular CSS3 features in current browsers
  • A few advanced CSS3 features missing from some browsers
  • Progressive enhancement and graceful degradation techniques

The time available for hands-on exercises in this 1-day course is considerably less than on our more practically-oriented 2-day CSS3 Fundamentals course.

So — while each feature is illustrated with worked examples of real code — the pace does call for more attention, commitment and focus than is required on most of our design-oriented training courses.

CSS3 TrainingCourse Contents

Intro

  • Modularity and profiles in the CSS3 spec
  • Browser support
  • Progressive enhancement and graceful degradation

CSS3 Selectors

  • CSS3 Attribute selectors
  • CSS3 UI selectors
  • CSS3 structural selectors
  • CSS generated content
  • Combinators

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

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

CSS3 Transition and Transforms

  • Multi-column Text
  • CSS3 Transitions
  • Keyframes
  • Transforms
  • Translation
  • Scaling
  • Rotation
  • Skew
  • Matrix
  • Moving the origin of a transform

Supporting Different Devices and 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

CSS3 TrainingCourse Schedule

CSS3 TrainingFurther Details

Course Objectives

On completion of this CSS3 training course, sudents will be able to:

  • 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

Target Audience

  • Web designers
  • Web developers
  • Web team leaders and managers

This CSS3 training course is particularly suited to coders who are confident in dealing with new material at pace, and who do not require lots of hands-on time to digest it.

This CSS3 training course may also fit the bill for team leaders who do less hands-on coding, but need an overview of current and coming developments in CSS3.

Training Pre-requisites

  • Advanced knowledge of CSS-only web page presentation
  • Good practical knowledge of standards-based HTML

The following are useful, but not absolutely essential:

  • Knowledge of HTML5
  • Knowledge of JavaScript
  • Understanding of MIME-type and character-encoding issues on the web

Training Style

  • Small groups — max 8
  • Concepts and syntax explained with worked code examples
  • No more than 1.5 hours of hands-on exercises — sometimes less
  • Sample code and media assets for exercises
  • A cross-platform CSS-aware editing environment
  • Support for individual extension work after the course
  • Substantial free manual