Whether you're a seasoned web developer or code newbie, sometimes finding inspiration—or even a specific piece of code to solve a basic problem that's new to you—can be a pain.
You can ask your peers or search around online for a new website feature or idea, but sometimes that's not enough.
Enter CodePen. CodePen stylizes itself as a "Front-End Developer Playground." Launched in 2012, the site already has over 300,000 active users and almost 17 million monthly visitors, and for good reason. It's not just a library of useful code snippets—it's an interactive testing ground and collaborative learning tool.
For a quick run-through on CodePen and how designers and developers use the service to test new code, buttons, and animations, check out our video with Bluleadz developer Karey Mitchell above.
Intro to CodePen
On the site, users can upload, test, and share custom CSS, JavaScript, and HTML snippets, or "pens." Signup is free for individual users, and a professional version is also available for development teams to share snippets and custom code—all in an open environment that begs for testing and tweaking for the perfect result.
CodePen's "pens" are also updated in real time as developers play around with the code or try out new ideas. Best of all: you can edit and tweak any public pen on the site, whether it's shared by a peer or simply found by browsing through collections.
It's the perfect solution for self-teaching code and exploring new ideas and functions; ideal for any designer/developer, whether they're coding professionally, for clients, or for themselves.
Using a Pen
Once a pen is created, embedding it on your website or a client's site is an easy matter of copy/paste. Any public pen can be edited, adjusted, and embedded with ease.
For example, here's a loading screen pen by user Pawel built with custom CSS. Any user can edit the pen, adjust attributes, and learn a thing or two by getting their hands dirty with the raw snippet.
See the Pen Never-ending box by Pawel (@pawelqcm) on CodePen.
For teams, CodePen offers unlimited pens and collections, a private Team Account, Collab Mode, Professor Mode, and unlimited themes and templates. For personal or individual accounts, upgrades from the free tier to one of CodePen's paid tiers include:
- Asset hosting from 1-10 GB, depending on tier
- Unlimited private pens and collections
- Embed themes with custom CSS
- More projects
- Live view for editing with different devices or screens
- Zero ads
- Monthly or annual payment starting at $8/month
So, if you'd like to step up your code game, inspire your team, or seek out cool new ideas or innovative fixes. the community over at CodePen is a great place to start.
Alex Dunn
Alex is a University of South Florida mass communications graduate and Video/Media Specialist at Bluleadz. He is a big movie nerd, loves (possibly dangerous) concerts and enjoys taunting co-workers with a camera. He's probably seen The Royal Tenenbaums 14 times by now.