CodePen

I think I’ve written about CodePen before, its a site that allows users to quickly put together HTML, CSS & JS and see the results as they edit. Users ‘pens’ are public and can be tagged, so it also serves as a repository of examples.

It’s possible to host incredibly complex artefacts, such as this 3D Sony Walkman, but what I mostly use it for is to work out simple things – like how to collapse a row of text into a column with a media query.

The alternative to a site like this for those jobs would be to create a couple of scratch files and open up another instance of VS Code, but this is quicker, the results are immediately available, and are saved if I ever need to go back to them.

The free tier more than covers my needs, but the paid tier (about $10 a month) includes being able to make your pens private and hosting image assets there. The private options would be nice to hide your tests if you were going to use it as a portfolio – which I don’t doubt some designers would.

As a bonus, pens can easily be embedded in blog posts on WordPress.