Dudley Storey

Dudley Storey

I’m teacher, writer, designer, craftsman and avid cyclist living in Calgary, Alberta, Canada. My passion is web development and design, which I’ve taught for the last 15 years. I’m also a contributing editor at Smashing Magazine, and have created several web apps and tools.

I originally created this site as a class resource, but its scope is far greater than that now: as the complexity and power of the web continues to grow, so do the articles here.



The site uses a number of conventions to help anyone learn web development:

  • Articles have logical "next" and "previous" links at the end (on widescreen displays, at the extreme left and right).
  • Articles often link to related CodePen repos, where the live code can be inspected and modified for further learning.
  • Most articles link to broader reading lists of related material. Reading lists also contain goals, exercises, and further resources.
  • In many cases these topics are collated into complete reading lists on a particular subject, such as HTML and CSS. These curated lists are designed for dedicated, full-time study. Reading lists only appear when enough material exists; some subjects, such as and , are still in development.
  • Most articles have a meter indicating the difficulty of the material inside:
    1 ~ 4: Beginner material. Articles ranked at 3 or 4 will usually require some previous knowledge.
    5 ~ 8: Intermediate material. The content will require strong understanding of the topic.
    9 ~ 10: Advanced material: extremely cutting-edge, with very little background explanation provided.
  • Code samples are also color-coded for clarity:
    Markup: HTML, SVG
    <html lang="en">
    body { box-sizing: border-box; }
    @mixin setBgColorAndHover($baseColor) {
    var forEach = function (array, callback, scope) {
    <? echo "PHP" ?>


This site follows WAIS 2.0 standards for accessibility, with ARIA roles used for sections. Shortcut keys are:

Command + Opt + 0About / Help (this page)
Command + Opt + 1Home
Command + Opt + 4Search
Command + Opt + ,Previous article / month
Command + Opt + .Next article / month



In addition to this site, I also write for:

Other Writing

Smashing Magazine

Cover of issue 249 of net magazine

Entrepreneur Magazine

  • “Ask A Geek” column, February 2015


  • My work style and environment was profiled in April 2015.

net Magazine

A Student’s Guide To Web Design


Shop Talk Show

The Dirt

SVG Immersion


Photograph of Dudley Storey standing in front of a projector with the words Bad Boy on it


  • The New Defaults: a Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.
  • CSSSlidy: An auto-generated responsive image slider, written in pure JavaScript and using generated CSS animations for smooth performance.
  • tipster.io: A web app that provides tipping rates for every location in the world.

Browser Compatibility

This is a web development blog that highlights cutting-edge techniques and technologies; as such, it does not attempt to support older browsers that lack compatibility with web standards. As a general rule, the last three versions of any browser are supported: this means that IE 9 and earlier are not catered to.

Mobile devices, including iPhone, iPad, Android and Blackberry, are also supported, assuming they have recent software.

If you have an up-to-date browser or device and believe you’ve spotted an error, I’d very much appreciate receiving notication. Similarly, please contact me or leave a comment in an appropriate article if you have a feature request or suggestion.


Leaving a comment
Leaving a comment is very easy: users can sign in with Twitter, Facebook, Google+ or Disqus, the service used to host comments.
Comment Markup
Most standard HTML code is accepted in comments, including links, blockquote, strong and em. Code samples can be indicated by intending by surrounding them with <code> tags. Code blocks can be marked up with <code><pre>. More information on comment markup is available at the Disqus site.
Prohibited markup in comments
Some markup will be stripped out of content, due to space or security concerns. This includes tables, linked images and video.
Ownership of comments
Every commenter owns (and is responsible for) their contribution.
Retraction of comments
It is possible to retract comments: contact me. I reserve the right to remove any comments unilaterally.


Visitor privacy is always respected: you will never be contacted via eMail from this site, nor will your information be shared with anyone else.


This site is hand-coded in valid HTML, , CSS and . My primary IDE is Coda; and Illustrator are used for graphics, which are compressed using ImageOptim.

Icons are generated from the semantic iconfont SS Social, provided by SymbolSet. Code sample syntax is highlighted using a modified version of Lea Verou’s prism.js.

The site is hosted at Digital Ocean, with a Git repository on Bitbucket.

Body text is set in Libertad by TipoType. Code samples are in Inconsolata by Raph Levien.

I’ve left a “maximized”, commented version of the site’s original Sass files as a .zip archive.

Advertising & Support

Patreon logo

This site does not host or accept advertising, “link exchanges” or other promotion, although I do occasionally add Amazon affiliate links on products featured in articles. If you have a product, , or service that you'd like me to review, please contact me. Note that I do not accept payment for reviews; similarly, I do not publish material written by contributors (as much as such offers are appreciated).

Translations of existing articles into different languages are very welcome, and are always linked to.

As the site does not take advertising, bandwidth and server costs are supported by generous donations to my Patreon account from readers like you.

Use & Syndication

This blog has an RSS feed; updates are also shared on my Twitter feed and on my Facebook and Google+ pages.

The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.

PGP Public Key