Treehouse: Grow your CSS skills. Land your dream job.

#112: Using CodePen

CodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it's for, how to use it, and some of its fancy features.

Comments

  1. Cihad
    Permalink to comment#

    It’s really cool dude. I like it and i’ll use that. Thanks lot :)

  2. Krsiak Daniel
    Permalink to comment#

    love it

    personal, social, github, haml, sass, compass, …
    ton of features :)

    I provided 3 emails with feedback on enhancing UI
    hope some of it gets through … http://minus.com/mUXyUxIxr/

    • Krsiak Daniel
      Permalink to comment#

      watched screencast
      I must say I found some of those features by accident

      so I believe my opinion on some UI upgrades is in some points valid
      but still … great app, happy to see where it goes

  3. JC
    Permalink to comment#

    Will you be adding oauth for non github users?

    • Chris Coyier
      Permalink to comment#

      Mayyyybe. Not quite on the radar yet. I’d suggest just signing up for a GitHub account. Takes two seconds.

  4. Robert
    Permalink to comment#

    This is so cool! I am really gonna enjoy using codepen! Great job!

  5. sam.web.dev();
    Permalink to comment#

    How do you get those spaces between apps in your dock?

    • Darius
      Permalink to comment#

      Steps:

      1. Open Terminal

      2. Type/enter this into the terminal:
      defaults write com.apple.dock persistent-apps -array-add ‘{ “tile-type” = “spacer-tile”; }’

      3. Type/enter this into the terminal to restart your dock:
      killall Dock

      4. The new blank space acts the same as any dock icon (drag around or out of the dock to remove).

  6. Jens Ahrengot Boddum

    Very cool!

    Animated previews are a killer feature. Makes it kind of a CSS/JS version of Dribble which i really dig.

    Are you looking into categorizing the pens so its easier to use if you’re looking for something specific like an accordion or a touch-based image slider?

    I see the search box is there, but wondering why the results page doesn’t resemble the normal archive like “top picks” and “popular”. Probably on the road map somewhere :)

    As for the editor, it looks fantastic! Awesome color scheme and so great you support zen coding! Is there any way to switch between the HTML, CSS and JS editors without taking that editor full-browser?

    Awesome job. Really looking forward to more more people using it!

  7. Jesus Bejarano

    LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,LOVE,IT.

  8. Abraham Mnt

    Awesome! The animation is totally useful! Bookmarked!

  9. amrabdelaziz

    very awesome idea
    oh i love it
    thnx so much chris

  10. Sean Jacob
    Permalink to comment#

    Genius! There is too much awesomeness.

  11. Ankur Gupta
    Permalink to comment#

    Thanks for this video, liked the short commands for navigation and lists.
    Very useful for css testing.

  12. Airton
    Permalink to comment#

    Thats amazing, i really like codepen! Thanks!!

  13. Colin
    Permalink to comment#

    This is pretty awesome. Can’t wait to mine the depths.

    Great job!

  14. Mike
    Permalink to comment#

    I had absolutely no idea you were behind CodePen! I saw that you heart’d some dumb thing I made (some Mario thing) and I came here from investigating. So yeah, thanks for CodePen. I love how well it works and the neat social aspect of it all.

  15. CiNiTriQs
    Permalink to comment#

    Just went there after your last screencast and yes, I think I’m digging this for quick experiments wherever I can find some internet-connection. Good stuff and it might even ease me into the “less” approach as well as scss or sass.

    Thanks!

  16. Santosh
    Permalink to comment#

    Its awesome, Thanks

  17. Paul Ramnora
    Permalink to comment#

    I was at another web site; quite possibly, LearningTree.com; which I just went and signed up for, today; when, eventually, a link I clicked on took me off to here. Very interesting site. I’ve used JSFiddle.net in the past. I really like these ‘new’ kinds of code teaching web sites that seem to be continually cropping up, everywhere; mainly because it sure as hell beats the way I used to study say 10+ years back learning how to create web pages through reading books: HTML Made Simple/Javascript For Dummies/-etc. Now-a-days, inside your same web browser, you can search to find online tutorial/(s); then, write code/run it/view it’s output all online; and, furthermore, using many more than just one(HTML)/two(CSS)/or, three(Javascript) languages. Mind, you, it also extends out my learning curve a hell of a lot more; because, now, I have to learn JQuery/Node.js/Django/Clojure/Git/and, I’m sure, whole entire dozens and dozens more/-etc. Frankly, there’s a hell of a lot of catching up to do… PS: Btw, your web site design looks, really and truly, GREAT! ;-)

  18. musasizi
    Permalink to comment#

    its a great app for sure

  19. Aweez
    Permalink to comment#

    Check this pen.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```