CSS3 Fundamentals

2-day web design course reliably implementing advanced CSS3 — CSS3-02

CSS3 Web Design TrainingCourse Overview

This CSS3 training course provides the foundation for implementing CSS3 today in a robust and reliable way.

It covers:

  • All the key CSS3 features in current browsers
  • Advanced CSS3 features not yet supported by all browsers
  • Graceful fall-backs for browsers lacking advanced CSS3
  • Progressive enhancement of elegant CSS2 and CSS2.1-only designs
  • How to avoid the elephant traps

This CSS3 course is designed to allow time to understand and practice working with CSS3, so that you can implement it in a careful and considered way.

Our CSS3 Essentials course — subtitled ‘CSS3 for the impatient’ — is designed as a very fast-paced CSS3 sampler for those who just want to get started now, and are happy to figure out the wrinkles for themselves.

CSS3 Web Design TrainingCourse Contents

Intro

  • Brief reminder of key concepts from CSS2 and CSS2.1
  • The CSS3 specification
  • Modularity and the CSS3 Profiles
  • CSS3 and the document tree
  • Browser support
  • What you can do now
  • Graceful degradation from and Progressive Enhancement

CSS3 Selectors

  • Reminder about CSS specificity and how to calculate it
  • CSS2.1 Attribute selectors
  • CSS3 Attribute selectors
    • Value selectors
    • Substring selectors - begins with, ends with, contains, etc
  • CSS3 UI selectors
    • UI element state pseudo-classes :enabled, :checked, etc
    • The @.. Rules
  • CSS3 structural selectors
    • Pseudo-classes :first-child, :last-child, :nth-child, :nth-of-type, :target, :lang, :not, etc.
    • Pseudo-elements :first-line, :first-letter, etc
  • CSS generated content using :before and :after
  • Combinators
    • Descendants, children, siblings
    • Direct and with intervening elements

CSS3 Text and Colour Properties

  • Text Shadows
  • Text Stroke
  • Transparency and Opacity
  • RGBA Colors
  • HSL and HSLA

Web Fonts

  • The History and Challenges of Web Fonts
  • Using Web Fonts
  • @font-face
  • Open source fonts, copyright and DRM
  • Services and Libraries
  • Web Fonts Services, Sources, Tools and Resources

CSS3 Box Properties

  • Border Radius
  • Box Shadow
  • Box-sizing
  • Layout issues

CSS3 Transition Animations

  • Multi-column Text
    • column-count, column-gap, column-width, etc.
    • Columns and heights
  • CSS3 Transitions
  • Keyframes
  • Triggering animation

CSS3 Backgrounds and Visual Effects

  • Multiple background images
  • Sizing background images
  • Clipping backgrounds
  • Gradients
  • SVG images as backgrounds
  • Reflection
  • Masks

CSS3 Transforms

  • Transforms
  • Translation
  • Scaling
  • Rotation
  • Skew
  • Matrix
  • Moving a transform's origin

Targeting Devices Using Media Queries

  • New and more varied web output devices
  • Good riddance to browser detection
  • Media queries and the browser requirement to ignore ‘unrecognised’ CSS syntax
  • CSS2 Media Queries
  • CSS3 Media Queries

Browser Support

  • CSS3 Selectors
  • CSS3 Properties
  • Modernizr, jQuery and progressive enhancement
  • The on-going development of CSS3

CSS3 Web Design TrainingCourse Schedule

CSS3 Web Design 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 course is designed to teach not only what you can do with CSS3, but also how to use it's features to best advantage — including tips about when and how not to use a given feature.

Training Pre-requisites

  • Practical knowledge of CSS
  • Practical knowledge of IE6-8 CSS workarounds
  • Practical knowledge of standards-based HTML

The following are helpful, but are definitely not essential:

  • Some knowledge of HTML5
  • Some knowledge of JavaScript
  • Some knowledge of MIME-type and character-encoding issues

Training Style

  • Small groups — max 8
  • CSS3 Concepts and syntax explained with worked code examples
  • Roughly 3 hours per day allocated to hands-on exercises
  • Sample CSS3 code and media assets for exercises
  • A cross-platform CSS-aware editing environment
  • Support for individual extension work during and after the course
  • Substantial free manual