Learn more about CSS

Cascading Style Sheets (CSS) is the way we style the web. Though a simple to learn and difficult to master set of rules, CSS breathes life into an otherwise dull soup of HTML.

CSS Articles

View all topics

A small sailboat on calm water with the reflection of the nigh sky

5 reasons I choose Tailwind over CSS

Why I consistently choose Tailwind for new projects

Tailwind CSS is my preferred CSS framework for new projects. I choose it over plain CSS because it has good defaults, extensible, consistent and perfect for rapid prototyping.

Magnifying glass on a pale red background with abstract shapes surrounding

The best option for picking one-off icons

Finding icons for your project

Heroicons are a great set of icons that are easy to integrate without the hassle.

Cartoon person seeing an idea lightbulb in their mind's eye on a light blue cloud background

Thoughts on Tailwind CSS

What CSS utility libraries gets right

Tailwind CSS might just be worth your time, especially in teams and in agencies. It makes building easy and is a lightweight design system to get you started.

How to organise React components

Embracing locality for react file structure

React’s popularity was its ease of use, it didn’t tell you where to put anything but here's one way that might help

How it feels to write a web page from scratch in 2020

Shedding the burden of modern tooling

I coded like it was 1999 and it was great. The web has come a long way and it was nice to just code without having to install build tools.

Making Magic in Framer Motion 2

Take a look at the upcoming version of Framer Motion and see how you can create compelling animations in React.

circle loader animation, three frames of circle loading animation

Spinner Animation in React

How to use Framer Motion to create a custom loading spinner animation

Make a custom circle loading animation in React with Framer Motion.

A series of four images from left to right, dog, sea bird flying, white goat and raven

Tap to Expand

Hero animations and animating between different view states can be done easily with the useCycle react hook in Framer Motion and a bit of time.

A title card showing three animation states on a blue background with Seth Corker in the corner

A simple loading animation with Framer Motion

Animation in React doesn't have to be difficult

Make a loading animation in React that's fully customisable with Framer Motion, an animation library that's easy to use and very powerful.

A title card with Seth Corker on the left and the title overlaid

Getting started with Framer Motion

Take the first step to animating a react component and recreate a common fade-in animation with framer-motion. A new animation library from Framer which is easy to use and allows you to make animation in react easy.