CodePen – A Front End Developer’s Playground

Oct 31, 2016 | John Cornelius, Web Development

What is CodePen?


CodePen.io is an online editor for front end developers. It is all Open Source (MIT License). Anything I create and share can be used and improved by other developers. I can also fork other developer’s projects and use them or change them to fit my needs.

Each user creates Pens. Pens can be public or private. I usually keep things I’m working on and things I’ve forked from others private. When I’m ready to share a Pen, I make it public.

Each user has a profile where all of their Pens are stored and can be viewed.

What makes CodePen cool?


CodePen describes itself as “a playground for the front end side of the web” and that really is so true. People create lots of amazing Pens and you are welcome to play with them, copy them, enhance them, etc.

While viewing and editing Pens, the code and the visualization of that code are all on one screen, so you can see what your code is doing in real time.

It is also a great place to store ideas for the future. Whenever I figure out a cool animation, I always post it there for future use. When I look back through the Pens on my profile, I can easily see what each animation does without even looking at the code.

Check it out!


Go give it a try! Check out all the amazing things front end developers are creating and have fun playing with code! 🙂

Share This