5 Of The Best Code Playgrounds

1: CodePen

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find example of a particular design pattern for you project? CodePen is great for that.
CodePen PRO takes things further with features like Collab Mode which allows you to pair program in real time and Professor Mode for allowing a group of students to follow you as you teach code and chat with each other.

2: CSSDeck

CSSDeck is a cool place for HTML/CSS/JS Devs
Its about quite a few things. You can use CSSDeck to make testcases and share with other people on IRC, forums, StackOverflow, etc. who help you solve your coding problems. You can even code with multiple people in realtime in various modes. Remember etherpad ? Yeah we’ve got something like that for HTML/CSS/JS coding with lots of other bells and whistles.
If you’re creating some cool crazy stuff with the powers of CSS3 and JS you can post it here and we’re going to feature it in the gallery helping you get some fame as well as helping others learn about the cutting edge practices and methodologies.
You can also try creating or watching codecasts which is basically a recording of whatever code is typed in the code editors. This way other people can “playback” your recording in a video style and learn how the creation was developed.

4: Dabblet

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others; however, it currently only supports modern versions of Chrome, Safari and Firefox but I’m hoping to expand browser support soon.

3: JS Bin

JS Bin is an open source collaborative web development debugging tool.
Made in Brighton, England with blood sweat and code.What can JS Bin do?
Write code and have it both save in real-time, but also render a full preview in real-time
Help debug other people’s JavaScript, HTML or CSS by sharing and editing urls
CodeCast – where you share what you’re typing in JS Bin in real-time.
Remote rendering – view the output of your JS Bin on any device on any platform, updating in real-time.
Processors, including: coffee-script, LESS, Markdown and Jade.
Debug remote Ajax calls.
Find out more about JS Bin’s features via the YouTube JS Bin playlist.

5: JsFiddle

Every developer has been in the situation where you have code or a design that you need to test quickly and possibly share with others. JsFiddle is the perfect solution; it provides a custom environment (based on user selections) to test (or fiddle with) your JavaScript, HTML, and CSS code right inside your browser. A quick tour of jsFiddle will give you a better understanding of what it provides and why you should use it.