In December, I had the idea to record a few Christmas Songs for my family and send to them as an EP called the “Petersen Family Christmas Songbook.” I wanted the songs to feel like a special little package with their own website and design. The problem was that with project deadlines and holiday festivities fast approaching, there was no time—I had to work fast.

Over the past couple years, I’ve used Codepen as a prototyping tool for experimenting and testing code. Its a fast way to see a real result of your html, css and javascript without needing to setup files, applications, install WordPress or any of other tasks that go along with starting a new project. This quick-result workflow has helped me begin the web design process in the browser rather than making photoshop comps or “pixel-perfect” mockups (that never render the same as a real browser).

Since I knew I needed a fairly simple design for the Songbook page, I jumped into the code and ended up building the entire page right in Codepen. I used google fonts to test a few different styles for the header, created a christmas-y background using some #iconaday work from a couple christmases ago, and used a handy js library to customize Soundcloud’s audio player api.

Designing right in the browser makes it easy to test devices, fonts, layout and iterate quickly when things aren’t lining up right. In the end, I completed the page design from conception to launch in about 4 hours on a Monday morning! By noon I was able to test a working audio player on my phone over lunch.

If you want to get into the browser faster on your designs, checkout codepen and if you’re in need of a simple audio player that doesn’t look like the stock Soundcloud player, fork my pen and let me know how it goes!