Skip to Content

My Articles

There is a turn unit in CSS

Following up on my posts inspired by tweets that I come across (front-end dev twitter is amazing for finding little tips and tricks and stuff like I like to post here), here is an amazing thing I came across by none other than Wes Bos:

Read more

A cool trick for checking for the alt attribute

A little while ago I came across this tweet:

I love that idea so much, and had to write up on it.

Let's break down exactly how this is working before we dive into a bit more info on why you might even want to bother with this.

Read more

CSS Scroll snapping just blew me away

CSS seems to be stealing more and more functionality from things we traditionally had to use JavaScript for. This is good because not only does it help performance and reduce dependencies, it also makes our lives easier 😊. It also reduces the barrier of entry for people to make cool and fun websites, which is awesome.

I've been a huge fan of scroll-behaviour: smooth since I discovered it, and in a similar vien I've recently stumbled across scroll snapping and it's pretty incredible, and now that support has dropped on the most recent version of Chrome, I think that it's worth taking a look at it.

Here, is an example of how it works. Try scrolling and see what happens (you'll have to be on a desktop for this, as I mention lower down, browser support hasn't hit mobile yet).

See the Pen CSS Scroll snapping basic example by Kevin (@kevinpowell) on CodePen.

Cool, right?

Read more

CSS Custom Properties in a Sass project

Read more

Using a Sass map for my colors

Last week I took a look at how I chose my color scheme, now for a little insight into how I used it when writing my Sass.

Using my colors

First, I created a variable for all my colors. This was just to make life easier to reference, or make changes to later on:

$primary-color: #EE6352;
$youtube: #D16E8D;
$articles: #FFAC83;
$community: #3F78C9;
$courses: #49C4A3;
$white: #FFF;
$black: #444A51;

$lighten: 5;
$darken: 25;

You'll notice a $lighten and $darken variables there too. That was so I could lighten everything by the same amount, and very quickly change how much I'm lightening or darkening things by.

Read more

Picking colors

Creating a color scheme can be a pain in the ass. A lot of 'color scheme' websites, such as Adobe color and coolors give you 5 colors. My general advice is always to start with only three colors:

  • A pop or primary color
  • A neutral dark (not black)
  • A neutral light (this can be white)

This is by far the easiest way to start with a color scheme which will always look nice. As far as the dark one, try to avoid pure black, but instead go with a really dark color, like I did with my text on this site.

Read more

Welcome to the blog

A new site, and a brand spanking new blog to go along with it! I'm pretty excited about this!

What to expect

This blog is the natural progression of my existing newsletter, so if you're a subscriber already, it'll seem very familiar, just better! For those of you who weren't subscribers, I've been exploring a lot of lesser known and misunderstood CSS properties, as well as some general CSS tips and tricks. I've converted a handful of them, so there are some older posts you can go explore right now if you'd like!

The reason I wanted to turn this into a blog, instead of only a newsletter, is because I wanted to:

  • keep an easily accessible archive of posts
  • make it easier to interact with

One of the biggest issues with the newsletter was it was hard to show the results of what I was doing. I'd create a codepen, and then take screenshots of everything and then have to add the images in. Now I can just embed the damn codepen and you guys can see it in action and play with the code!

Read more


So, it turns out doing something like this is super easy:

The Markup

The markup for this is nice and basic, pretty much a parent, with the two children:

<div class="card">
  <div class="card__title">Title here</div>
  <div class="card__body">Lorem ipsum dolor sit amet...</div>
Read more