With CodePen, I was able to do all the work necessary to publish the calculator I embedded in the site. Most creations on CodePen are public and open source. They are living things that other people and the community can interact with, from a simple hearting, to leaving a comment, to forking and changing for their own needs.
With CodePen, you can change your view if you’d like the panes to be on the left, right, or bottom as you work… or view the HTML in a new tab. The side-by-side view works incredibly well to test your responsive settings since you can adjust the size of the viewable pane.
You can organize each of your working scripts into Pens, combine them into Projects (multi-file editor), or even build out collections. It’s basically a working portfolio site for front-end code where you can follow other authors, fork other publicly shared projects into your own to modify, and even learn how to do some fun stuff through challenges.
You can save as a GitHub Gist, export in zip file, and even embed the pen in an article like this:
I’d encourage you to sign up. You will be subscribed to their weekly email and can also add the feed to your RSS feed so you can see newly published pens. And, if you start searching or browsing the public pens there, you’ll find some incredible projects… the users are quite talented!
The paid version, CodePen Pro, offers a ton of additional features for improved functionality or teams – including collaboration, processes, asset hosting, private views, and even deployed projects with your own domain or subdomain. And, of course, CodePen provides a great repository with Github integration where your entire team can work. If you’re just wanting to test out some simple code as I am, CodePen is an invaluable tool.