One common use case for CodePen is creating prototypes of things for your clients or coworkers. Just recently we talked to Dave Rupert and Trent Walton about how they use it for that at Paravel!

When you’re a web designer, nothing beats doing your job right in a web browser. Other design tools are fine, but the web is such a unique medium that getting into the browser as soon as possible is the way of all the best web designers I know. Think of the squishiness of the web — the clicks, the scrolls, hovers, and the swipes. The font rendering. The animations and transitions. The unique oddities like fixed and sticky positioning. You gotta get into a browser to be working on those things. Then, when you’re done, you’re so much closer to the final product.

Let’s cover the possibilities here.

Use Private Pens/Projects

When you’re PRO, you have unlimited content privacy. Any Pen, Project, Collection, or Post can be made private with the flip of a switch.

When you do, it won’t show up on your profile, in search on or off CodePen, or anywhere else. The only way someone can see it is if you explicitly share the obscured URL with them.

This is the #1 Use Case for Private Collections

You see, Private Collections have a unique feature that makes them useful for this.

You can’t share private Pens in a public Collection. Technically you can add your own private Pens to your own public Collection, but only you can see them (because they’re private!)

Private Collections are different. Anyone with the link to your private Collection can see all of your Pens in the collection. That means you could make a private Collection of your private Pens and share it with your client.

You can fill a Collection with your private Pens, or a mixture of private and public Pens. Your client can see them all once you share the link to the Collection!

Keep in mind this only applies to Pens you own: you can’t add someone else’s private Pen to your Collection.

A Project with many .html files.

Say you have a bunch of individual deliverables that you want to group together. CodePen Projects can be helpful for that.

Check out this project that has a handful of .html files that are all self-contained designs that are meant to be used as error pages.

Have you use CodePen for client work?

Did you find it helpful to have your prototypes be in code? How did you handle back and forth and updated versions? Anything you want to share?