CodePen is a playground for the front-end side of the web. It’s all about inspiration, education, and sharing. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding. CodePen is great for building a reduced test case to demonstrate and figure out a bug.
CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. There are line numbers and syntax highlighting appears in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.
3. Google’s Code Playground
Google’s Code Playground is a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box
4. JS Bin
It provides an environment to build apps and assists to test the snippets of HTML and CSS. It allows you to edit the code and also you can also debug the code if any error you find. Once you finalized the code you may send it to a peer for review.
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. It currently only supports modern versions of Chrome, Safari, and Firefox. All posted code belongs to the poster and no license is enforced. Dabblet itself is open-source software and is distributed under an NPOSL-3.0 license.
9. D3 Playground
The D3.js Playground is designed to allow you to play with the D3.js library interactively. Every edit made (that results in invalid code) affects the playground in real-time. Because CSS is such an important part of visualizations, you can edit CSS live, too.
10. HTML5 Playground
The HTML5 Playground includes a library of code snippets you can explore to see HTML5 in action. They include some basic getting-started examples, such as the use of the HTML5 Doctype and the audio tag (which nevertheless is a good demo of the playback features in a compatible browser). There’s an interactive form, including HTML5 elements such as range and date inputs and automated validation for email addresses and websites.
Share This Article
Do the sharing thingy