• New Dec 21, 2021

  Building a Greener Web

  As web developers we don’t tend to talk a great deal about the environmental impact of the products we build. But the uncomfortable truth is that the web is responsible for a growing proportio...

• New Dec 6, 2021

  Reduce Your Website’s Environmental Impact With a Carbon Budget

  In this article for CSS Tricks’ end-of-year series I wrote about how we in the web development industry should examine the environmental impact of the products we’re building, and some resources to he...

• New Dec 2, 2021

  Don’t Forget the “lang” Attribute

  An interesting notification from @cyishere popped up in my Twitter feed the other day: I use a Chrome extension Read Aloud to read the web pages for improving my English. The reading voice for most w...

• New Nov 18, 2021

  A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

  There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! In this article, we’ll take a look at the best ways to use colors in a design system, and what we ca...

• New Nov 17, 2021

  IT Career Energizer Podcast

  I recently had the priviledge of chatting to Phil Burgess on the IT Career Energizer Podcast about my journey into web development, and advice to new developers starting out on that path. You...

• New Nov 16, 2021

  Favourite Web Development Courses

  I’m not one for taking loads of courses. It’s hard to find the time, and when it comes to learning I always feel that, for me, doing beats reading any day. That said, I’ve dipped into a few great c...

• New Nov 1, 2021

  Accessible Toggles

  I recently received some great advice from Scott O’Hara on improving the accessibility of a demo featuring a reduced-motion toggle (for this article). The demo sets the play-state of the animation dep...

• New Oct 21, 2021

  Respecting Users’ Motion Preferences

  The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, we’ll look at how to use it today to make your sites more ac...

• New Oct 20, 2021

  The State of CSS 2021

  There has arguably never been a better time to be working with CSS. We have so many more tools available at our disposal than even just a couple of years ago. Scroll snap, Motion Path, Level 5 Me...

• New Oct 19, 2021

  Evaluating Clever CSS Solutions

  Ahmad Shadeed recently published an article where he dug into Facebook’s implementation of the border-radius property on their card components. He had noticed, upon inspecting Facebook’s CSS,...

• New Oct 10, 2021

  Creating 3D Characters in Three.js

  In this tutorial we’ll talk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative colour palette. Read the ful...

• New Sep 23, 2021

  Simplifying Form Styles With accent-color

  The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and ho...

• New Sep 20, 2021

  Simpler Block Spacing in WordPress with :is() and :where()

  The :is() and :where() pseudo-selectors are relatively new additions to CSS, which allow us to target elements that meet the criteria in their parentheses. For example, using :is() we can target an...

• New Sep 9, 2021

  Developer Decisions For Building Flexible Components

  One of the key skills of a front-end developer is to be able to take designs and turn them into code. These designs are often presented as static mock-ups, which visualize the “ideal” experience of br...

• New Sep 4, 2021

  Learning in the Open

  Over the years I’ve tried out a lot of different ways of learning CSS and JS: books, online courses, articles, video tutorials… But for me, there’s really no substitute for learning by doing. In fa...