Detailed Course Outline
Introduction to Cascading Style Sheets (CSS)
Employing CSS syntax and semantics
- Separating content from design
- Discovering how CSS makes RWD possible
- Structuring HTML containers with IDs
- Manipulating CSS colour rules
Integrating style sheets
- Choosing from inline, embedded and external styles
- Optimising rules via group selectors
- Targeting elements with contextual selectors
- Demystifying the Cascade Inheritance Model
- Updating browser with CSS developer tools
Leveraging the CSS Box Model
Manipulating HTML containers
- Selecting accessible units of measure
- Overcoming collapsing CSS margins
- Moving HTML content with CSS margins
- Condensing rules with shorthand definitions
- Distinguishing relative from absolute position
Adopting accessible units of measure
- Tailoring global style resets
- Overriding author styles
- Distinguishing block from inline elements
- Defining WCAG accessibility obligations
Positioning with Accuracy and Consistency
Explicitly rendering any HTML container
- Replacing HTML align attribute with CSS float and clear
- Exploiting the default static position rule
- Extending position with relative relationships
Advanced positioning
- Creating advanced contextual position with absolute rules
- Replacing HTML frames with fixed position rule
CSS3 Selection Syntax
Making optimised and advances selections
- Reviewing contextual and combinatory selector syntax
- Introducing CSS3 semantic pseudo selectors
- Chaining pseudo selectors for more specific selections
Advanced Selection Techniques
- Moving beyond selecting by class, ID or HTML elements
- Exploiting selections by behaviour
- Selecting by HTML attribute content
- Selecting based on HTML DOM relationships
- Managing dynamic content using set selectors
Designing Responsive Content
Combining the three CSS ingredients to RWD
- Assessing mobile-specific design theory
- Incorporating a mobile-first design
- Exploring liquid dimensions
- Introducing min and max attributes
Responsive column layout
- Designing multi-column layouts that fit any device
- Performing basic calculations with calc()
- Dealing with browser vendor prefixes
Exploiting CSS3 flexible layout
- Implementing columns with CSS flexbox
- Composing parent and child grid styles
- Extending CSS2 @media directives
- Detecting viewport height, width and orientation
- Exploring mobile device support
Accessible and Responsive Forms
Web Consortium Accessibility Guidelines
- Exploring regional interpretations of WCAG
- Complementing HTML5 form validation
- Styling WCAG compliant fieldsets, labels and legends
Enhancing RWD with jQuery
- Animating content with pure CSS transitions and transforms
- Modifying DOM properties
- Adding responsive menu toggles
- Adding responsive and infinite scrolling
Providing legacy browser support
- Automated prefix and fallback libraries
- SASS and LESS pre-processors