An interview with Chris Coyier of CodePen & CSS-Tricks


We interviewed the co-founder of, a well-known collaboration “playground” for the front-end, and creator of CSS-Tricks, a site dedicated to teaching all things web design and development, and the co-host of Shop Talk Show, a live podcast about front end web design, development, and UX.

Tell us a little bit about yourself — where did you grow up and what was your childhood like?

I’m a pure Midwesterner — as I sit now, I’m in Milwaukee, Wisconsin which isn’t too far from where I grew up in Madison, Wisconsin.

I had a super normal (at least my version of normal) upbringing — a middle class family just living in a small town. I got a computer at a young age, my ideas were encouraged, I had an opportunity to get a good education and took it. I feel like the cards lined up for me in an interesting way. In high school, I took a programming class that excited me, and eventually I went to college for it.

Tell us about your first programming experience.

It took until a high school elective for me to get legitimate programming experience. I had a teacher named Mr. Scott, who was such a positive influence. In his class, the language that I took to the most was called Turbo Pascal. Mr. Scott taught us the basics of course, but he encouraged us to get into real projects right away. I remember the very first significant product that I worked on was just a Pascal version of the Game of Life.

The game ended up being published in a little magazine and I was totally hooked after that.

In your podcast you mention later pursuing a computer science degree in college, but ultimately switching to some kind of art major. Can you tell us about that transition, and how your skills, interests, and career evolved?

“Laziness, selfishness, and jealousy made me switch to art, but it actually turned out to be the right choice.”

After all the positive experiences I had in high school, when I went to college I knew immediately that I wanted to major in Computer Science. The degree was called Management Computer Systems, which should have been a red flag. Not surprisingly, it turned out to be more about the business-side of programming.

I was learning languages that I wasn’t interested in, and the teachers weren’t especially engaging. It was a bummer. It didn’t slaughter my dream of becoming a programmer, but I was definitely a little disenchanted with the idea. I was still a full-blown computer nerd on the side, though.

In the meantime, I was living with a ceramics major and he had this great community of art students. I’d tag along with him to art parties, and I’d go hang out with him in the studio at the art building. I truly believed that his life in college was way more awesome than mine. He had found a real passion, he had found a better community. Honestly, I was pretty jealous of his college life.

Eventually, I made the decision to switch from computer science to art. I had a feeling that what I studied in college didn’t matter that much, and that life would ultimately work out.

My parents are usually very supportive of me, but when I told them I dropped Computer Science they were mad. They were worried that I was throwing away my college career. But, I just marched right into the administrative office and told them I was switching.

The good news is that I took to it right away. I loved it. It was the best thing I ever did. I graduated with a BA in ceramics from the University of Wisconsin-Whitewater.

After majoring in art, what did you do between graduation and starting CodePen? Did you have a bunch of jobs in between or did you have an idea of what you wanted to do?

“It turned out to be a hard to just jump in and get hired as a designer. I didn’t have enough confidence.”

Kind of. There is a decent span in there.

When I left college, my fears were realized. I had no idea what I was actually going to do. I was motivated to get a job right away, and I applied to a bunch of places, but I didn’t have any experience.

It turned out to be a hard to just jump in and get hired as a designer. I didn’t have enough confidence.

Luckily, my mom was in the printing industry and knew a lot of people around town. So I ended up going into the digital printing press after college. It was pretty technical work, and it was interesting in its own way. I’d take designs and turn them into metal plates to go on the presses. It’s a kind of art — you can think of it like the CSS of print, where you take a design and turn it into reality. So, there’s actually a connection there, between printing and programming.

But it wasn’t that interesting — I knew I wasn’t going to make a career out of the printing press, because I wasn’t entirely happy doing it. There isn’t a fun community around it. It was really just a job.

On the side, I was into music. I was playing in a Bluegrass band. One day I decided our band needed a website, and that became an excuse to make a website. That was when I began to realize how cool the web is. I wanted to jump in. Then, just through a stroke of luck, there was an opening at a really small shop for an inexperienced web designer and I snatched it up. That’s how I became a professional web designer overnight.

You were also at a company that was acquired by SurveyMonkey. Was that when you decided to move away from Wisconsin?

Right. That was the part that I skipped over. After working at the agency in Madison I ended up working for a company called Wufoo in Tampa, Florida. I moved down there to work with them, which is probably one of the best decisions I ever made.

It was a great team. I’m still friends with everyone. They were building something great, they thought deeply about what they were doing and how they were working. They were good to the people they worked with and their customers. They were eventually acquired by SurveyMonkey, which turned out to be a positive outcome.

In fact, I met my two co-founders, Alex Vazquez, and Tim Sabat at Wufoo. We worked there together, and then at SurveyMonkey, and now they’re my co-founders at CodePen. We’ve been working together for a long time.

How did you end up discovering the problem that you wanted to solve with CodePen?

Well, it was right at that time actually. I worked as a web developer for the agency for many years. In 2007, I decided to launch CSS-Tricks. I was learning it quickly, and I was really into it, and I just wrote down what I was learning using CSS-Tricks as the medium. It’s still around today. In fact, I published an article on CSS-Tricks this morning.

For most of my work with CSS-Tricks, I would make a demo, put it in a folder, and FTP it up to the CSS-Tricks server. Then, when I wanted to show a demo, I would just link to the folder on my server. It worked fine, but it requires the person reading to view source, or use the dev tools, and dig around and find out what’s going on.

Eventually, tools like JSbin and JSFiddle made it possible to see the demo, look at the code, and change the code while the demo plays and changes. It was genius.

So at a point I thought I could do that too. It was a project that I could wrap my head around. I wanted to make my own version of those apps, and I wanted to host it myself and have control over features. That was the idea and the spark behind CodePen.

A common fear when it comes to starting something, is a fear of being financially unsustainable. We’re curious to hear how you managed to become financially sustainable with CodePen, and how long that took?

“Even if what you do fails, you learn a lot.”

CSS-Tricks was making some money, and I had written a book about WordPress that was doing okay. So, it was easier for me to get started. My other two founders, Tim and Alex, also had some savings to lean back on.

To me, tech doesn’t seem particularly risky. Even if what you do fails, you learn a lot, which makes it easier to get snapped up by some other company down the line.

So, we launched CodePen totally bootstrapped. Our only expenses were server costs — so that’s another advantage of tech, your cost are pretty low compared to other businesses.

When you first starting building the product, was the idea of monetization on your mind? If not, at what point did it become important to your strategy?

The whole idea was to make some money at some point. So, our plan was to build it, make it super cool, and then have PRO accounts.

We launched CodePen out of beta in June 2012, starting with a freemium model and then had PRO plans by December of that year. The majority of it right now is still selling PRO plans.

We also do some advertising as well, because of how many views we get. We have a job board tool too. We fully intend to continue to monetize CodePen, but hopefully it’ll remain a cool freemium product that people pay for because it provides value.

How do you decide which features should be free versus PRO? How do you get that balance right?

Monetization is the hardest stuff to think about, period. In the end, how do I know for sure that we made the right choice? I don’t.”

Monetization is the hardest stuff to think about, period. You get so much conflicting advice too. It’s crazy.

The PRO features we decided to offer are the features that we felt the users needed.

One of our PRO features is collaboration mode. It’s similar to Google Docs where you get multiple cursors with up to six people on higher plans and you can all code simultaneously. People use it for interviewing, for working together, to teach, etc. It took a lot of effort to build and so to us, it seemed like a very obvious thing to charge for.

With some of our PRO features we look around and see what other people are charging for. With something like GitHub they charge you the minute you want something private. They figured out that privacy matters to some people, and probably validated that in some way, so that’s a feature we decided to charge for on CodePen.

About a year ago, we did take money for CodePen. We had talked to some VCs prior to that as well a few years back. One of them was just brimming with advice and told us to forget everything, and make all PRO features free. He told us that what matters most is making CodePen the best at what it does — a premium service that everybody uses.

It actually seemed smart at the time. We figured he was right — if we gave away all the PRO features we could gain some serious momentum. We thought that people would use it and think about it differently.

We had a branch ready to make private pens a free product. We were about to release it, but we got cold feet. We felt we were cannibalizing ourselves in a way. We were considering taking away one of the reasons users had to upgrade, one of the only ways we were making money.

So, we sent out a survey to gauge why people upgraded. A lot of people said privacy.

Our cold feet turned into killing that branch completely. If we had done it, we would have removed one of the top reasons people pay us at all.

In the end, how do I know for sure that we made the right choice? I don’t. I’m sure there are choices that would have made us more successful than we are right now. There are probably just as many that could have screwed it all up too. Who knows?

But, the VCs idea was to build it to sell it. But we were excited about building it. None of us had even really considered selling it.

It’s a difficult part of business, especially freemium businesses. Freemium businesses are either a complete hit or a complete miss. It’s all about whether or not you can figure out what customers care about most, and what you should charge for. Very few businesses could strike the right balance between giving too much value to the customer and too little. Right?

Yeah, exactly. In a sense one of the cool parts of CodePen is that it’s a community. There are a million members of CodePen and they talk to each other and meet each other. We even had a couple get engaged through CodePen! We have real life meet-ups all around the world. There are freelance groups that started on CodePen, and have teams that work together, meet, and operate together on CodePen.

It’s a community that gives us value. If somebody makes something really cool and puts it on CodePen, it’s basically free advertising for CodePen. They are proud of their work and they’re sharing it. That’s why our marketing budget is zero because people market for us.

But if there are features that we work really hard on, then it just feels right to charge to for them.

We recently hired four people after we took funding. We’re all working really hard on a new feature that will probably be locked under PRO. There’s just too much work going into it. It requires a lot of ongoing maintenance, more servers, real costs that necessitate charging for it.

Can you walk us through a day in the life of building CodePen?

“We’re always working to do right by our existing customers.”

Sure. I’m sure both of you know from your own interesting backgrounds that everyday, we have no idea what’s going to happen. The only consistent thing is communication. We live in Slack, there’s always a lot of talking.

We also have to make sure we’re listening to our customers. Listening to them means reporting bugs, fixing bugs, that kind of work.

We have to balance our time between building new things, and maintaining what’s already there. We’re always working to do right by our existing customers.

I do it all. I actively work on the product. The people that we hired probably spend a lot more time in the code base than I do, but I’m in it everyday. We’re too small to have any structure. There aren’t any managers or anything, so everybody is in the code base working, talking, writing emails, writing blog posts and doing support. That’s a day in the life.

What’s one mistake you’ve made in building CodePen that you hope to never make again?

“It’s hard to know if the decisions you’ve made are the right decisions. Maybe there was a decision that I made that was entirely wrong, and I don’t even know it yet. You can’t A/B test the past.”

A lot of people struggle with this. I’m struggling with it right now, and we talked about it earlier, but it’s hard to know if the decisions you’ve made are the right decisions. Maybe there was a decision that I made that was entirely wrong, and I don’t even know it yet. You can’t A/B test the past.

That near miss of making all of our PRO features free, that feels like something I’m glad we didn’t do. But it’s hard to say.

We took VC, but maybe we’ll just be a lifestyle business, which seems like the last thing VCs want to hear. No VC one wants to hear that. Lucky for us we took money from the original two founders of Wufoo. They’re friends and we’re trying to do right by them, but they’re not down our throats pushing for epic growth.

When we talked to actual VCs, we could tell they were turned off by our trajectory. We want to grow, but we’re not interested in taking buckets of money, making everything free, and trying to be bought by a company like Adobe.

But is that a mistake? Maybe we should have taken a bunch of VC, maybe we are well poised to do that and I’m screwing everything up by not. I don’t know.

Can you talk about one or two difficult periods that you had to go through in building CodePen and how you overcome those struggles?

“You have to build a company that people care about. I think that’s important to the people we hire, work with, and like to work with. They need more than just a punch card and a promise of some options.”

The struggle is real. One of our early struggles was deciding to do this at all. Some of us had families, we all had responsibilities. It’s not easy to leave a comfortable job like SurveyMonkey, especially when the company is doing so well, and the stock options are good. You roll in at 10 o’clock, and eat gummy worms all day. Why would you want to leave that?

But, we’re well passed that now.

If I’m being totally honest, we’re going through a hard time right now. We grew to nine people, and that’s been a big change. I’m not a manager, but I’m trying to steer the ship. It requires a very different skill set. It requires understanding our employees, and giving them what they need. Some need a lot more feedback than others, some need to be left alone. I know I’m dropping the ball on some of that stuff.

You have to build a company that people care about. I think that’s important to the people we hire, work with, and like to work with. They need more than just a punch card and a promise of some options. We’re trying to figure out how to give them more purpose.

I’ve alluded to this big feature that’s coming out, but I can’t promise anything, or tell you anything. I don’t like to bum people out if it takes forever or doesn’t go as planned. No good comes from promising things you can’t deliver.

This feature though, is a big one. It’s taken a long time to figure out and there have been blockers right and left. I think, occasionally, some moral issues have come up when we’re not making as much progress as we should. There’ve been a couple of dates that we’ve set and not made that I know have bummed people out.

We’re not failing, people aren’t quitting. But it’s been a tough period. I suspect it’s going to work out, though.

What would you consider a successful outcome for CodePen?

“I’m absolutely stoked to keep working here, and honestly I hope we can do it forever. If it’s the last job I ever have, that’s fine by me.”

I hope we just get to keep on going. We don’t have the startup dream of shooting for incredible growth and selling. Typically, that doesn’t end well for the people who use the product. We’d rather keep building the product we want to exist, and adding to the community we want to be a part of.

I can imagine still working here a decade from now. I really like it. I think it’s a great idea, and we have a list of exciting ideas for the future. I like the community around CodePen too. I’m absolutely stoked to keep working here, and honestly I hope we can do it forever. If it’s the last job I ever have, that’s fine by me. That’s what I’d consider a success.

But, if we could sky rocket right now I’d be down with that. I wish we were killing it harder than we are, because I’d love to keep hiring. We just don’t have the money for that, though. I’d love to eventually double or triple our team. I want to be a manager. I’ve never had that opportunity, and I would love to have it one day.

Have you ever experienced burnout as a founder?

“The community helps me, the people around me help me…I have hobbies, I go on vacation. I have enough of a well-rounded life that I don’t think I’m a high risk for burnout.”

Not as extreme as some people have. Burnout is a hot topic these days. True burnout would be to just quit, you just don’t do anything anymore. I’ve never totally burned out.

I think I’m lucky in that way. The community helps me, the people around me help me. I’m lucky that I have multiple projects. I have CodePen but I also work on CSS-Tricks, I have a podcast where I talk to people.

I have hobbies, I go on vacation. I have enough of a well-rounded life that I don’t think I’m a high risk for burnout.

How do you build a culture with remote teams?

“Positivity is also really important to CodePen and our team embraces it. It feels safe here, comfortable, and that’s how good communities are born.”

I probably think about this a little too much. I like to shower people with praise. I like to talk things out as a team and find those small teaching moments. Culture comes from that — from moments where you think about how to approach a situation and why, as a team. I also encourage people to pay attention to industry news, and throw their two cents in. Those are culture-building moments.

The CodePen team hard at work

Positivity is also really important to CodePen and our team embraces it. We never let off a negative vibe, we never discourage each other, especially not publicly. We have an inclusive spirit. That’s just vital to me. It feels safe here, comfortable, and that’s how good communities are born.

Who are your programming heroes?

“It’s hard for me to look at random people in the industry and consider them programming heroes. My heroes are the the people I work with directly.”

When you work directly with someone and experience their genius on a day-to-day basis, they feel like the best programmer in the world, and that’s how I feel all the time.

It’s hard for me to look at random people in the industry and consider them programming heroes. Certainly they’re heroes in some sense. I can look at their accomplishments and be impressed, but it’s not as personal. They don’t feel as real to me as the people I work with everyday.

Tim Holman, who we hired, came to us from Tumblr. He did amazing stuff while he was there, but was kind of CodePen famous before he even started working with us. He’s such a smart guy. He doesn’t care about technology, he just cares that the thing he builds works well. He doesn’t care if we suddenly switch to React, he just cares that what we make is cool.

Rachel Smith, another recent hire, was at an incredible advertising agency. She’s just a genius. She’s like VIP on our team. It’s amazing the productivity and the struggles she can battle through. It’s admirable. She’s just an absolutely incredible programmer and person.

Another fellow we hired named Jake Albaugh, also genius. I wish my brain worked the way his brain works.

I struggle with that actually. Sometimes I feel like the least useful person at CodePen. I still add value in other ways, but I’m not useful in the same sense as they are.

So yeah, my heroes are the the people I work with directly. They’re my heroes.

Story tags:
More Stories from Archive

Why am I sharing my travel stories?

Founder & CEO of TruStory. I have a passion for understanding things at a fundamental level and sharing it as clearly as possible.

Preethi Kasireddy