Skip To Content

What is CodePen?

Development

Kevin Doherty Creative Director

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

Comments

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

Request a Quote

If you’re ready to change the trajectory of your business and
excited to partner with the right team to get the job done.

UP

© 2024 NVISION. All Rights Reserved.