From blog to product

May 15, 2015

This year I decided to get serious about creating something of value. I created a new website all about CSS animation. I then created and launched a paid email course. Here are some things I learned along the way.

What sort of product

One of many decisions I’ve made in the last few month has been choosing a product I would feel confident creating and shipping. There are many options, from ebooks, live seminars, video guides and more. I’ve tried making screencasts a little in the past, but wasn’t comfortable going the video route (yet) so instead I chose to focus on writing.

For the last couple of years I’ve been writing tutorials on CSS, front-end development and animation. It seemed an obvious idea then to focus on CSS animation as a topic, as it’s something I understand quite well and enjoy writing about.

The next step was to write a book. To test the market for such a book I put up a quick landing page, with a signup form to see if there would be interest. There was a little, and it was encouraging, so I started working out a plan for what the book would be.

However after a couple of weeks I realised I’d bitten off too big a project, especially for my first go. A book is a noble goal but not something I could put together in a month and see results. I’m too impatient to work on something for a year without validation. So I put that idea on the back burner (for now).

Narrow the focus

Starting with too big an idea was not going to work for me. I need to start with small steps. I’m used to doing that when designing and building websites, but writing educational content was new to me so I needed to make more of an effort to start small.

Having decided against writing a book, I brainstormed some other approaches and remembered an interesting course called Write Up! by the wonderful Relly Annett-Baker. It was a simple idea, you pay £25, and get an email each day for a month that guides and encourages you to write. This seemed like an interesting approach for learning about CSS animation. People could sign up, get an email each day that would gradually introduce the subjects, and end the month with a better understanding. So I tried that.

Choosing a topic

The tutorials on CSS Animation Rocks expect a certain knowledge of CSS and CSS animation. Most tend to assume that the reader knows the difference between a transition and an animation. For some this then becomes a barrier; the posts are hard to understand for some.

This was something a course could help. I decided to focus on the gap between knowing some CSS, but no animation, and being able to understand the more advanced tutorials. The goal would be to create a course that would empower people to be able to read any tutorial on the site and understand it.

Planning and creating a course

There are many ways to set about creating an online course, but this is roughly the sequence of steps I followed. For a first go it worked out, but I did learn a few things not to do along the way.

Step 1: Plan the content

I set up a new Trello board and started listing out all the content I wanted to cover. This being a 101-level course, I focused people with no knowledge of CSS animation. This meant setting a goal (understanding transitions and animations), and structuring 4 weeks of messages that would lead to that goal.

This is how I structured it:

Week 1

Introducing the topic. In this week I set out a plan for the course, discuss why animation is interesting and useful, and define the terms transition and animation. I felt this would be a good way to have readers familiarise themselves with the ideas without getting bogged down by implementation detail.

Week 2

After setting the tone, I go deep on the transition property this week. To do this I give some examples of it in action, then talk through all the properties involved, and then cover topics such as using multiple transitions for interesting effects. The goal for this week was to make sure everyone understood what the transition property is and how it’s not the same as animation.

Week 3

With transitions covered, the third week is all about the animation property. I follow a similar pattern to the transition week, but talk about keyframes and the othe properties that make animation work.

Week 4

With the topic introduced, and transitions and animations covered in detail, the fourth week is where I then put it together and talk through some demo code that incorporates both. I think it would be remiss to not cover accessibility, so I include a day on that topic and finish with links to further reading and other resources.


With the course planned out (note: I hadn’t actually written the content at this point, just the summaries of each day), I considered pricing. Pricing is a tough one. If I priced the content too low, I’d potentially get more signups but would have to gain exponentially more purchases to make the same amount as if I charge more. If I charge too much, it won’t sell.

After looking at lots of similar products I decided to aim for slightly expensive. I wanted the product to feel like it was worth paying for, and the first step was to actually charge for it. At the same time, I also wanted flexibility to be able to change the price as I learn more. To do this, I chose a expectation price and a real price.

I set the expectation price at $99. I knew this was quite high but didn’t feel confident charging that much. Instead, I left it on the page, crossed out, and made the real price at $49. This meant that the course felt like a bargain, being half price!

The only way to find out if this would work was to put the page live, so I put together a landing page with a simple Paypal Buy Now button, and put word out.

Initial reaction

I had a hope that maybe 10 people would sign up. That would be enough to validate the idea. In the first week, 60 people signed up. What!?

This blew my mind. People were actually keen to pay me for a product. Over the couple of weeks that followed, I continued to promote the course and experiment with different channels (and I continued blogging, but that’s another topic), and in month one I had attracted over 120 paying customers.

Delivering the course

I used Mailchimp to deliver the course, using their automation workflow. Setting up the structure with the 20 emails was very simple. What was harder was creating the content.

Even though I knew what I wanted to say, the work involved in creating demos, and writing each of the emails was pretty intense. Every morning and every evening I was working full tilt on creating the content. In the end I managed to get it in place just in time, but if I was to do it again I would put a little more time into creating content in advance.

It’s a balance, between having the stress-driven incentive to get it done and live, and the potential to plan too much and lose momentum before anything goes public. It would be worth finding your own balance on this, especially if you’re balancing having a family and job alongside.

Next steps

With the first run of the course done, my next steps are to get back my momentum, improve the course (including creating an ebook version) and think about more products. In my “Just Ship” approach I’ve also let the design of CSSAnimation.rocks take second place, and it needs attention. So much to do.

I also stopped writing blog posts while I wrote the course emails. I’d like to write more on the subject of audience building, but the short version is that a regular schedule of interesting posts, along with an email update to the mailing list, is pretty important.

Update: Month two

With little promotion, I managed to get 45 paid purchases of the course’s May run. It’s definitely quieter now though, which I think is down to my not posting new blog posts in a few weeks. Got to fix that.

Get in touch

Have you built or are thinking about building a product? Want to talk about how it could be done? I’m happy to bounce ideas around and help where I can. Send me an email or hit me up on [Mastodon(https://mastodon.ie/@donovanh) and let’s chat.