Grow your CSS skills. Land your dream job.

CodePen Beta

Published by Chris Coyier

More big news this week: We've launched CodePen into a public beta! It's a site for building stuff from HTML, CSS and JavaScript. Perhaps for yourself to remember later, perhaps to suss out a bug or make a reduced test case, or to show off some cool idea you have. It's all about education and inspiration.

The site was built by Alex Vazquez, Tim Sabat, and myself. We'd love for you to check it out and hit us up with your feedback. We have a vision, but your feedback will help guide it.

Comments

  1. Congrats…on reaching beta…must have been a lot of work…will check it out…

  2. finally it is out and looking good

  3. Looks pretty awesome, I’ll be sure to check it out.

  4. The site looks amazing! A great way to test and share code. There are some great code examples on there already.

  5. Looks great!! There are some cosmetic defects when I browse with Opera 12. Again, it look great!!

  6. Muhammad Waqar
    Permalink to comment#

    Awesome. Add a Facebook Like button to it. Definitely the count will go into millions.

  7. Kristof
    Permalink to comment#

    Awesome website, did you use WordPress for this? If so, I would be interested in how you built it!

  8. Congrats on launching Chris! Looks great, I love how you used iframes for previewing!

    Is it open source?

    • Some of it will be, is the plan. We’re hoping to make the editor kind of a stand alone thing.

      It used to be totally open source but we had to pull it down when the code that was just too specific to us was getting all intermingled. Kind of a weird thing about open source, you really gotta plan for it.

  9. Ryan
    Permalink to comment#

    Very nice. It’s like you combined dribbble.com and fiddle.js and created a true CSS showcase gallery.

  10. This is awesome Chris. Congratulations!

  11. Shaun
    Permalink to comment#

    So much better than dribbble, i’m in.

  12. great collections

  13. Amazing! I love the site right now ;) Keep on rockin’

  14. Permalink to comment#

    CodePen looks great!

    What are the advantages of CodePen over the existing jsFiddle, other than the more attractive editor?

    • The social layer (following people, hearting things, comments) is a big difference between it and jsFiddle. And we’re just getting started! We’re going to make the editor much better and have lots more ideas for exploration.

  15. looks really nice, i have to test it

  16. The site is gorgeous! Congrats on a great achievement that I’m sure will become a staple of many-a-workflow.

  17. Your site and Codepen both use a font system that uses font’s stored on a separate domain, so they don’t load in Mac Firefox btw. A few features of Codepen are basically unusable because you just see random letters and no title attributes are being used.

  18. Some really cool stuffs out there.. I love that site :) Keep up

  19. Permalink to comment#

    Nice webpage.
    One question though: How is this different to jsFiddle (http://jsfiddle.net)?

    • Permalink to comment#

      Never mind, just saw that you already answered this question. Keep up the good work!

  20. Permalink to comment#

    Oh man, this looks really good! I love the design.

  21. Permalink to comment#

    Congrats Chris, it looks amazing. Actually it is amazing. Thanks a lot !

  22. b4
    Permalink to comment#

    Any RSS feed?

  23. Permalink to comment#

    Hi Chris, sorry for posting questions here . need your advice.

    My blog has a fixed width but the horizontal scrollbar is showing in all browser .. how could that happen ? i’ve been looking for days but still cant find any solution … i checked my codes but cant find what i did wrong .

    havent thanked you for your great css guides . helped me a lot.

    thanks

    • Permalink to comment#

      CodePen is a great platform for showing us your code so that we can help you with your issue ;)

  24. Cool! Look forward to more tutorials!

  25. Codepen is effing awesome! great work!!

  26. Fantastic work. I’ve forked a couple of ‘Pens’. When I go to my github account I can’t see them. Probably just being a dunce.

  27. I Love it … good work bro

  28. Love being able to use SASS and LESS. And being able to link to an external CSS file! Awesome!

  29. Awesome! You are great!
    Why do you have ‘io’ (http://codepen.io) in the site URL?

  30. Congratulations! Looks awesome, I really hope this will turn into a marketplace eventually (similar to CodeCanyon, combined with Dribbble)

  31. Jesse Kinsman
    Permalink to comment#

    Wow great site! It is about time we had something like this. Wish I would have thought of it.

    Feedback: scrollbars in code box are really difficult to use because they are so small. They look super cool but I have a hard time finding them since they are so subtle.

  32. Nice Work!!

  33. Jonathan [JCM]
    Permalink to comment#

    I am already a user since last week.

    @Chris Coyier Are you using PHP for the backend?

  34. Seems really cool! I love the dark scheme. Nice mashup of all the others.

    The front page is kinda heavy with all the running previews, causing instant ‘fan burst’ on my laptop. A couple of processor heavy previews could crash the browser easily. I`d go with images only or some ‘click to activate’ type of thing.

    The logo is also weird. I mean looks cool, I just don`t get the idea behind it. What about the box?

  35. Thank you for such an awesome tool.
    I’d love to see a tab for View Generated Source. Kind of like the Try page on sass-lang.com. It would be extremely helpful for building complicated functions.

  36. I already liked it over JSfiddle because of the support of SASS and COMPASS, I was trying to explain its advantages to my girlfriend. She asked how to use it… I had to say…

    “Well, first you gotta install Ruby, and then you gotta type gem install compass…”

    She looked at me with thos eyes of WTF… hehehehe

    Now I can show her some nice examples first and then teach her how to install, configure and stuff.

  37. Chris Holloway
    Permalink to comment#

    This tool will be very helpful thank you

  38. pixelutely
    Permalink to comment#

    What a fabulous idea!!!!

    Sadly, it keeps crashing my PC. Is there a way these can be shown as thumbnails instead, and have individual experiments open in (say) a lighbox or new window?

  39. I remember you spoke about this in a podcast, nice to see the final product, you guys did a great job with it.

  40. Mobilpadde
    Permalink to comment#

    OHMAHGAWD! It’s me :D
    I’m on the picture, twice! :DDDDDDDDDD

  41. Jason
    Permalink to comment#

    The site doesn’t work well with iPad safari browser. It only loads a small portion of each preview image. Not like in scaled but cropped so you can’t really see much for each preview. The hover also acts weird on an iPad obviously.

  42. cool beans! =D

  43. Looks really good, a great idea. So much better than jsFiddle.

  44. Cory Deere
    Permalink to comment#

    Very Cool!

  45. Really awesome, Thank you!!

  46. Does it support Compass framework?

  47. Fahad

    Hi,
    I tried the codepen but when i type in the css there is no preview I mean the html remains the same.

  48. Very useful project for web developers. I use it frequently http://codepen.io/html5web

  49. Permalink to comment#

    This is really good! Loving the real-time preview, submissions gallery and color-picker.
    I second the idea of thumbnails instead of live previews, some of these examples make browsers lag quite heavily when all piled up on the same page haha.

    Only issue I’ve had is that it seems problematic with jQuery in the iframe. Not sure what the error is with, but a simple jQuery test on jsFiddle didn’t work when applied to Codepen.

    Here’s one that I made (jQuery enabled):
    http://jsfiddle.net/ErrRq/

    Here’s the same thing in Codepen (jQuery enabled):
    http://codepen.io/anon/pen/cIilg

    Under Chrome/Webkit this button is meant to have a delay when clicked, followed by an animated shiny effect to tell the user the button action succeeded (I was combining it with spin.js originally). Under Codepen the browser console reports a random error in the preview iframe.

    Btw the gallery area = pure awesome!

  50. Permalink to comment#

    Its really awesome! thanks

  51. Glad to see Codepen doing so well. Such a great layout, a beautiful environment for playing with code.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".