CodePen offers a number of ways to organize your own work (and other people’s work!) Organizing means helping yourself (and others people!) get to exactly what they need to be looking at.

Collections

  • Only you (or your team) can add/remove Pens from a Collection.
  • Collections can contain any Pen (not just your own).
  • Collections can be public or private.

The control is a big part of Collections. You (or other members on your team, if you have at team account) are the only ones you control what is in there. Collections can contain other people’s work, not just your own, which is unique. They can be public, so directly shareable, but they don’t have to be (they can be literally private). If you’d like to use them for organizational reasons, you totally can. Common use cases are personal buckets of inspiration, teachers using them to group Pens by lesson or class, and freelancers grouping things to show a client together (weird trick: private Pens in a private Collection become visible while looking at the Collection, because the Collection is already private).

Adding to Collections is easy and can be done from anywhere.
This Collection is public and very useful for everyone!

There is another organizational concept, Pins, that are designed to give you super easy access to anything you’ve pinned. In a sense, it’s like a Collection, only it can’t be shared. The concepts are so similar, in fact, that we plan to make your pins a private Collection someday, so rather than let this blog go out of date rather quickly, I’ll leave it at that.

Tags

  • Tags are global, everyone can see public Pens that have any given tag.
  • Pens can have multiple tags
  • You can view your own work by tag also

Tags are lower-effort, in a sense, as you just type them into to any Pen as you’re working on it in the settings. Anybody can tag any Pen anything, so you share that global namespace with them. You can’t control that like you can a Collection. You can still use them for organization because, in the Dashboard, you can view your own work that has a particular tag.

Search

  • You can search globally (all of CodePen)
  • You can search locally (just your work)
  • You can save searches in your Dashboard.

Search is hopefully fairly clear, but it’s similar to tags in that you can do it globally, as well as search just your own work from the Dashboard. Within the Dashboard, the fact that you can save searches makes them a bit like tags/collections in that it can also be used for organization. But search is unique in that it looks inside your Pens as well, at the code and metadata. So if you use like border-radius in the CSS for a Pen, it should turn up in search.