CSS3 Fundamentals Course
2-day web design course reliably implementing advanced CSS3 — C3F
CSS3 Web Design Training Course 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.
Course contents — 1 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
Course contents — 2 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
Course contents — 3 CSS3 Text & Colour
- Text Shadows
- Text Stroke
- Transparency and Opacity
- RGBA Colors
- HSL and HSLA
Course contents — 4 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
Course contents — 5 CSS3 Box Properties
- Border Radius
- Box Shadow
- Box-sizing
- Layout issues
Course contents — 6 CSS3 Transition Animations
- Multi-column Text
- column-count, column-gap, column-width, etc.
- Columns and heights
- CSS3 Transitions
- Keyframes
- Triggering animation
Course contents — 7 CSS3 Backgrounds and Visual Effects
- Multiple background images
- Sizing background images
- Clipping backgrounds
- Gradients
- SVG images as backgrounds
- Reflection
- Masks
Course contents — 8 CSS3 Transforms
- Transforms
- Translation
- Scaling
- Rotation
- Skew
- Matrix
- Moving a transform's origin
Course contents — 9 Devices & 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
Course contents — 10 Browser Support
- CSS3 Selectors
- CSS3 Properties
- Modernizr, jQuery and progressive enhancement
- The on-going development of CSS3
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