Web Unleashed 2024 // In-person

2024-10-10 00:00:00 2024-10-12 00:00:00 America/Toronto Web Unleashed 2024 // In-person Drive your career to the forefront by learning the latest tools, techniques, and technologies in front-end web development. Toronto FITC ET Toronto

Presentation


Overview

Note: This pre-event full day workshop runs from 10am to 4pm on Wed October 9 and requires a separate WORKSHOP ticket to attend.

CSS is more capable than ever, even replacing some behaviors previously only possible via JavaScript. Join this workshop to learn about the dynamic features now available in modern CSS, as well as discover the JavaScript that’s required to ensure accessibility of your components. Learn to establish a “future-first” set of solutions, and review the boundaries that require fallbacks. You’ll leave the workshop with a toolbox for evaluating, styling, and building accessible tooltips, popovers (toggletips), dropdown menus, modals, and tabs.

For modern CSS, learn about anchor positioning, new animation behaviors, cascade layers, composing dynamic styles using custom properties as an API, and more. Scripted solutions will be vanilla-JS with no framework reliance, and we will also discuss how to evaluate ready-made components for accessibility. Take-away techniques include roving tabindex, light dismiss, and handling of expected keyboard behaviors.

Objective

Create a library of accessible, interactive components, including cutting-edge modern CSS techniques.

Target Audience

Front-end engineers looking to increase their modern CSS skills and awareness of accessibility requirements for interactive components.

Assumed Audience Knowledge

Working knowledge of basic CSS, HTML, and vanilla JavaScript.

Audience Members Will Learn

  • Modern CSS features such as anchor positioning, cascade layers, and advanced custom property use
  • Vanilla JS solutions for techniques such as roving tabindex, light dismiss, and responding to specific keys
  • Features and limitations of interactive native HTML components
  • How to use the native web popover API
  • Accessibility requirements for common interactive components

To bring

Preferred note-taking tools, laptops optional