What is CodePen?

According to CodePen’s about page:

… is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.

Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find example of a particular design pattern for you project? CodePen is great for that.

I discovered CodePen a while ago and have been increasingly using it for storing and sharing certain demos specifically for our blog here at nvision. The revolutionary appeal of CodePen is it is very social. You can follow others and see their “pens” (essentially their demos), comment, collaborate and even fork other’s pens to play around with the end result yourself.

It is a great community to get inspiration and sandbox digital art, experiments, real world problem solving and doing things just because you can 🙂 Take this pen for example:

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.0

Cool eh!?

Embedding  a pen

One of my favourite features is you can actually embed your pen’s on to other websites! I actually did it just above 🙂

CSS_3D_Solar_System_-_CodePen

What comes with CodePen Pro?

While the regular version of CodePen is free they do offer a Pro account type which comes full of cool and worth while features:

  1. LIVE VIEW – Auto Updating Previews
  2. ASSET HOSTING – Easily Upload Files to Work With
  3. COLLAB MODE – Pair Programming Across the World
  4. UNLIMITED EMBED THEMES – Style Embedded Pens To Match Your Site
  5. PROFESSOR MODE – Teach a Classroom of Students
  6. PRIVATE PENS – Keep Your Work Secret
  7. NO ADS – All advertisements will be removed for you and for others viewing your profile

It’s just $9/month or $75/year.

Follow us on CodePen!

Feel free to follow us: http://codepen.io/nvision/ on CodePen and we’ll follow you right back 🙂 Happy Pening!

Some Fun Pens To Leave You With

See the Pen Shattering Images by Szenia Zadvornykh (@zadvorsky) on CodePen.0

See the Pen Shard Wall 3D CSS Animation by Nate Wiley (@natewiley) on CodePen.0

See the Pen Test of Three.js and Tween.js by cx20 (@cx20) on CodePen.0

Originally published on

Leave a Reply

Your email address will not be published. Required fields are marked *

Have Any Questions?

Speak with a
Digital Expert

  • Looking to increase leads?
  • Maximize profits?
  • Redesign your website?
  • Sell Online?
  • Build an App?

Let's Discuss Your Next Project

  • This field is for validation purposes and should be left unchanged.