Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Marie and I take a look in this quick video:

The brief explanation is:

  • Pens give you three panels: HTML, CSS, and JavaScript. You can use preprocessors and external resources and such, but are limited to the three editors.
  • Projects are more powerful in that you get a complete file system. You can have multiple HTML, CSS, and JavaScript files (among other file types).