Arrange a Masterclass

Category: Web Development

All categories

2026


  1. font-family Doesn’t Fall Back the Way You Think

2025


  1. HTML Is Not a Programming Language…

  2. Build for the Web, Build on the Web, Build with the Web

2024


  1. Licensing Code on CSS Wizardry

2018


  1. ITCSS × Skillshare

  2. Getting to Know a Legacy Codebase

2017


  1. Relative Requirements

  2. Airplanes and Ashtrays

  3. Refactoring Tunnels

  4. Writing Tidy Code

  5. Code Smells in CSS Revisited

  6. Typography for Developers

2016


  1. CSS Shorthand Syntax Considered an Anti-Pattern

  2. Nesting Your BEM?

  3. Continue Normalising Your CSS

  4. Pure CSS Content Filter

  5. Pragmatic, Practical, and Progressive Theming with Custom Properties

  6. Refactoring CSS: The Three I’s

  7. The Importance of !important: Forcing Immutability in CSS

  8. Managing Typography on Large Apps

2015


  1. BEMIT: Taking the BEM Naming Convention a Step Further

  2. Contextual Styling: UI Components, Nesting, and Implementation Detail

  3. Subtleties with Self-Chained Classes

  4. Cyclomatic Complexity: Logic in CSS

  5. Immutable CSS

  6. Can CSS Be Too Modular?

  7. More Transparent UI Code with Namespaces

2014


  1. When to use @extend; when to use a mixin

  2. The Specificity Graph

  3. Hacks for dealing with specificity

  4. Grouping related classes in your markup

  5. Naming UI components in OOCSS

  6. Use zero-width spaces to stop annoying Twitter users

  7. Extending silent classes in Sass

2013


  1. The problems with ‘crafting’ code

  2. Taming data tables

  3. Introducing csswizardry-grids

  4. Responsive grid systems; a solution?

  5. You know your context – on critical thinking and thinking for yourself

  6. MindBEMding – getting your head ’round BEM syntax

  7. Your logo is still an image… and so is mine!

  8. Front-end performance for web designers and front-end developers

2012


  1. A new CSS Wizardry

  2. My Git workflow for inuit.css

  3. Code smells in CSS

  4. A classless class—on using more classes in your HTML

  5. Tags in CSS files

  6. Shoot to kill; CSS selector intent

  7. Quasi-qualified CSS selectors

  8. The open/closed principle applied to CSS

  9. Single-direction margin declarations

  10. Keep your CSS selectors short

  11. The single responsibility principle applied to CSS

  12. My HTML/CSS coding style

  13. Hacker News rebuttal

  14. Pragmatic, practical font sizing in CSS

2011


  1. On HTML and CSS best practices

  2. Measuring and sizing UIs, 2011-style (and beyond)

  3. Create a notched current-state nav

  4. Build-along #1, reflection and reasoning

  5. CSS Wizardry build-along #1

  6. Sam Penrose Design—process and write-up

  7. Fully fluid, responsive CSS carousel

  8. The CSS Wizardry build-along is go!

  9. Build-along (testing the water)

  10. Reset restarted

  11. The ‘island’ object

  12. The ‘nav’ abstraction

  13. Ordered and numbered lists; the differences

  14. Writing efficient CSS selectors

  15. When using IDs can be a pain in the class...

  16. Two titillating table tips

  17. Building better grid systems

  18. Good developers are illusionists

  19. More logo markup tips

  20. Borders on responsive images

  21. Responsive images right now

  22. Fluid grid calculator

  23. Namespacing fragment identifiers

  24. Styling alt text on images

  25. Annotated <figure>s in HTML5 and CSS

  26. Font sizing with rem could be avoided

  27. jQuery placeholder plugin/polyfill

  28. On negative hovers

  29. Introducing inuit.css

  30. Coding up a semantic, lean timeline

  31. Problems with the sans-serif hack

  32. Mobile business card

  33. Creating a pure CSS dropdown menu

  34. Pure CSS(3) accordion

  35. CSS powered ribbons the clean way

  36. Create a centred horizontal navigation

  37. Link: Recreating the Luke's Beard social icons with CSS3

  38. Using the <body> element as a wrapper

  39. HTML(5) and text-level semantics

  40. Maximising hit-area for usability

  41. HTML elements, tags and attributes

  42. Scrolling overflowed content in iOS

  43. The real HTML5 boilerplate

2010


  1. Mo’ robust paragraph indenting

  2. Media queries, handier than you think

  3. The implementation ∝ appreciation rule

  4. CSS: CamelCase Seriously Sucks!

  5. Improving CSS tooltips

  6. Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!)

  7. Unsung heroes

  8. Your logo is an image, not an <h1>

  9. Good developers vs. good salespeople

  10. Designing in the browser leads to better quality builds

  11. In response to ‘Invisible captcha to prevent form spam’

  12. Keeping code clean with content

  13. A quick counter to 'The Digital Agencies of the Future!'

  14. Set then unset (or reset...?)

  15. Zebra-striping rows and columns

  16. Semantics and sensibility

  17. Building sites without using IDs or classes

  18. Moving forward is holding us back

  19. A quick note on border radius

  20. Multiple column lists using one <ul>

  21. Upside down domains—registering an international domain name

  22. CSS bar charts—styling data with CSS3 and progressive enhancement

  23. iPhone CSS—tips for building iPhone websites

  24. A reconsideration—in defence of <b> and <i> (or: people fear what they don’t understand)

  25. A suitable alternative—on proper use of alt attributes

2009


  1. Typographic work planner

Book a Free Call

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

Connect

Projects

Next Appearance

Learn:

I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.

I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.

Start a Conversation