Table of Contents for Estelle's Github

2019 CSS Workshop

CSS In Depth

1. Introduction
2. Selectors
3. Specificity
4. Generated Content
5. Media Queries
6. Units & Values
7. Colors & Transparency
8. Math & Variables
9. Fonts
10. Text
11. Images
12. Backgrounds
13. Gradients
14. Box Model
15. Flexbox
16. Tables
17. Grids
18. Transforms
19. Transitions & Animation
20. Other Features

Presentations

Note: Browsers are my "PPT reader" for these decks. Most haven't been optimized cross browser.

• Browsers: Populating the page. We ♥️ Speed in French, Lille, France, English Translation
• The humble radio button: Flashback Conf, Orlando, FL
• Developer Experience v. User Experience: MSCWE, Online, ctwebdev, Copenhagen, DE, AccessU, Austin, TX, USA
• We , Lille, France,
• Fast to load. Fast to Code - Fronteers 2018, Amsterdam
• Simple. Fast. Accessible. - Conc.at() 2018, Salzburg, Austria
• Inclusive Markup - Inclusive Design 24, a.k.a. #ID24, Online
• FrontEnd Masters CSS Mastery Workshop, November 2017
  1. Introduction
  2. Selectors
  3. Specificity
  4. Generated Content
  5. Media Queries
  6. Colors & Transparency
  7. Flexbox
  8. Tables
  9. Grids
  10. Backgrounds & Borders
  11. Gradients
  12. Transforms
  13. Transitions & Animation
  14. Other Features
  15. Best Practices (no deck)
  16. Debugging (no deck)
• Mobile Web Performance - ViewSource Conf 2017, London
• Speed Perception & Lighthouse - London Web Performance Group, London
• Accessibility as Performance - Front End Conf 2017, Minsk
• Measuring the Subjective: The Performance Dashboard - Air Mozilla
• Web Performance: Perception & Metrics - SFHTML5
• CSS? WTF! - Fluent
• Simplifying Markup to Improve User Experience - Elevate
• Mobile Web Performance (50m) - Istanbul Tech Talks
• Speed Perception: understanding and measuring perceived performance - ForwardJS
• You don't need a framework for that - ColdFrontConf, FrontEndConf
• Accessibility as Performance Velocity Conf
• Inclusive Markup
  • Straightforward accessibility OSCON, 3h
  • Simply Accessible CSS Budapest, 30m
  • Simple, Accessible Web Performance WebDevCon, 40m
• Flexbox - (45m)
  • ForwardJS Video
• Creating Welcoming Environments
  • FluentConf keynote Video (25m),
• Introduction to CSS (45m)
• Animation (45m - 60m)
  • Animation with Snow - video
  • Animation (30m)
• Selectors Tutorial (60 - 90m)
  • Quicker version (30m)
  • Conference version (45m)
• CSS? WTF! Video(40m) (18m)
• Mobile Web Performance (50m)
  • Mobile Web Performance (60m) - 2013
  • RWD is not a Panacea
    • Fronteers 20m,
    • RWD Summit 60m
  • Performance Considerations in a mobile world (20m / #LXJS)
  • CSS Performance and Mobile Web (FILive)
  • Mobile CSS3 & performance (40m)
• Responsive features in CSS3
• HTML5 Web Forms Video
• CSS Gradients
  • Quicker version (30m)
• JS without Frameworks
• Intro to Web Performance (15m)
• jQuery Selectors
• Ten things you didn't know your browser could do

Workshops

• CSS Deep Dive (7.5 hours)
  • TOC
  • Selectors
  • Transforms
  • Transition & Animation
  • Flexbox
  • Gradients
  • Summary
  • CSS? WTF!
• Practical & Powerful HTML5, CSS and JS (8 hours)
  • Selectors, Selectors API and Specificity
  • More (or less) JavaScript
  • HTML5 elements
  • <input> & forms
  • Flexbox, box-model and calc()
  • Sass, Mobile Perf and #a11y discussed throughout.
• Mobile CSS3 (4 hours)
  • Overview of workshop
  • CSS Media Queries & Responsive features (CCT)
  • Know your selectors
  • CSS Gradients
  • Transitions, Transforms and Animation
  • Mobile CSS3 Quirks and Pitfalls
• CSS (8 hours)
  1. Selectors
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients
  10. Transforms
  11. Transitions & Animation
  12. Other Features
• HTML5/CSS3 (16 hours)
• HTML5/CSS3 for mobile (24 hours)
• Intro to JavaScript (8 hours)
• CSS3: Making a slide deck (3 hours)
• Mobile UI Performance (2.5 hours)
• HTML5 & CSS3: The good enough parts (4 hours)

Games & Tools

• Accessible Input Masking
• Merry-Go-Round: The accessible carousel
• Clown Car Technique for responsive images
• Bookmarklet: Make Twitter DMs appear read
• Template for slidedeck
• Native iPhone look and Feel
• CSS-JS-Entity-Calculator - Github
• Roll the Dice - Roll up to 6 dice
• Temperature Converter
• HSLA-Color-Converter - Github
• screen hider (StopSOPA)
• Cubeedoo Memory Game
• CSS Gradients Library
• Click on this link for a WYSIWYG editor
• kill ads - drag link to bookmarks bar to kill Twitter ads. Click on "kills ads" in bookmark bar when you're on Twitter.com to kill the inline ads.
• Kill FB feed ads
• kill moments, ads, and likes
• TWELP - Drag this link to your bookmarks bar, and click TWELP bookmarklet whenever you load Twitter. It kills the moments tab, all ads, and removes the "X liked" tweets. see http://www.standardista.com/twelp-twitter-bookmarklet/ to see the code and roll your own bookmarklet.

Archived Talks

• Don't Break the Mobile Web (Mobile performance Considerations)
• Web Forms (2012)
• HTML5 JavaScript API overview
• Debugging Mobile Web Apps
• Introduction to Web Components