I've been on CodePen for a little over a year now and I've been meaning to write a blog post about it on my personal blog. Now that CodePen has a blogging feature, I decided to post the blog here and share 4 things that makes CodePen so awesome.


Chris Coyier, Alex Vazquez and Tim Sabat, the three dudes behind CodePen care about the community a lot. Don't believe me? Have a listen to a few of their podcasts and it's clear that a lot of the decisions that they make is based around the community that has rallied around CodePen. For this, I have much respect and support for them.

I stick around as a member because the founders care for the community.

There's also a great deal of smart developers on CodePen and it's allowing for Twitter like interactions. What I mean by this is, Twitter has allowed for anybody to stir up a conversation with just about anyone. In the same way CodePen has allowed for less well-known developers to come to the forefront, peeps who have been learning from well-known developers are now getting actual feedback from the developers they look up to and the boundaries of connecting with talented folks from all around the world are disappearing.

Check out some folks I've befriended here on CodePen:

Hornebom - Awesome designer from Germany who is also really good at front-end development. Checkout some of his nifty parallax effects he's made with just CSS.

Josh Rutherford - Josh has been posting up recreations of many popular shots from Dribbble on CodePen in HTML/CSS/JS. He's making a site that highlights many of these Dribbble/CodePen designs.

Codrin Pavel - Codrin has so many great pixel perfect pens on CodePen. He's making a pixel editor to make creating pixel art easier.


There are so many great features to CodePen, instead of listing them all out, I thought I'd list a few I like.

  • Auto updating previews - no need to hit save and reload it, CodePen auto-updates for you
  • Preprocessing of Sass - I write a majority of my CSS in Sass so this is a huge plus. If I ever need to see what the compiled CSS looks like, I just open up Developer Tools in Chrome and look at the processed CSS in the head element click on the eye icon at the top right corner of the CSS code pan (Thanks to @Michiel for pointing that out!).
  • Sweet podcast from CodePen developers - I consider this a feature because these guys provide great insight and transparency into their company. Chris has an easy going conversation style to all his podcasts and he brings that to CodePen's podcast as well
  • Text-editor available anywhere with a browser and internet connection - anyone feel like programming on their phone?

Oh my! So much goodness right there. There's also some Pro features that I've been meaning to try out when I has some monies. Some of which I'm excited to try out like realtime collaboration mode and professor mode.


CodePen has become the first place that I go to try out any prototypes or ideas. Although, my front-end workflow has gotten a lot more streamlined and automated thanks to being more comfortable in terminal and tools like Grunt, there's nothing easier than opening up a new browser tab and brain dumping my idea into a new Pen.

CodePen is setup to use all my preferred front-end tools like Sass, Bourbon and can be extended to pull in external libraries like Ember.js.

An example of how I use CodePen as my playground is when Sass 3.3 was first released and hash-maps and parent selector suffixes were introduced. I wanted to use these features right away in a Rails application I was working on but sass-rails didn't support Sass 3.3 yet.

So instead of taking the time to update my environment first, I took my excitement for the new features and came to CodePen to try them out.

Live Portfolio

I'm constantly learning something new in my craft as a programmer and CodePen has become a live portfolio that reflects what I learn. I believe that these days, the tech industry is relying less and less on how well you did in school or where you graduated from and now following the trends of the art industry and saying, "Show me your portfolio".

Because CodePen has become the first place I try out a lot of new technologies and techniques, it is reflective upon what I'm currently interested in or learning. While places like GitHub are great for hosting code and collaboration, CodePen is a great place to see the evolution of a developer.

Go to anyone's profile and flip back to their first Pen. Then progress through their Pens. See the progression in their learning and abilities?

I believe CodePen could be the front-end developer's equivalent to Dribbble/Behance for designers, CGTalk for digital artists or StackOverflow for developers in general.

If you're a student or a person who is new to programming, I can't stress enough how important it is to work on things outside of assignments and tutorials. Let CodePen be the place where your portfolio lives and the next time you're applying for a job, send them your CodePen profile.

What Makes CodePen Awesome for You?

These are 4 things that makes CodePen awesome for me, do you agree with any of them? What makes CodePen awesome for you? Let me know by leaving a comment below.