18th of October, 2016

Using Codepen

What is Codepen?

Codepen is a cloud application for showing code snippets (pens). Using Codepen you can have your styles, scripts, and html all together in one easy to see area. Codepen allows the use of external stylesheets and scripts. This can come in handy for things such as Angular, Bootstrap, jQuery, and others.

CodePen EX


Codepen offers a lovely list of features such as:


  • Github Integration
    • Export as Gist
    • Login With Github
  • Embed
    • Easy Embed
    • Emebedded: Show JS, CSS, HTML, Or any combination + a live view
    • (Pro Only) Live edit on embedded pen.
  • Download as .Zip
  • "Change View"
    • Details View
    • Full Page
    • Debug Mode
    • (Pro) Collab Mode
    • (Pro) Professor Mode
    • (Pro) Presentation Mode
  • Custom Theme Builder (Change appearance of embedded pen)
  • Direct Links
    • .js
    • .css
    • .html
  • Syntax highlighting themes
    • Light (Tons)
    • Dark (Even More)
  • Custom Key Bindings
  • Preprocessors (More than are shown)

There are tons more to the list but you can check them all out with yourself at Codepen!

My experience:

I use Codepen for my live portfolio and just to dabble in when I’m bored. It also works as a great source of insperation or a helpful hint. Codepen may not have the exact snippet I want for insperation, so I make my own! This is what I encourage you all to do.

  • Cloud Based
  • Customizable
  • Easy to Use
  • Easy to Share
  • Totally Free