Play Around With Code Playgrounds
First off – what is exactly is a code playground? It is an online web app that allows you to write code and see the results right as you are doing it. They are great for testing ideas out or playing with code. And they are also a wonderful tool for teaching.
Let’s take a look at some of the current code playgrounds. We will start with the simple ones that are primarily for front end development but also look at tools that support more advance methods.
JS Fiddle
As one of the first code playgrounds, this is one of the simpler ones to use allowing you to develop web pages using HTML, CSS and JavaScript.
CodePen
CodePen is one of the widely used playgrounds. You can use it for HTML, CSS and JavaScript. It’s a little more glossy then some of it’s rivals. It is also easy to embed in your code and if you want to pay extra per month – you can make is so the user can edit and run the code. Otherwise, they will have to click through to CodePen if they want to alter it.
It has many options for embedding too which make it nice – WordPress shortcode, Prefill Embed, iFrame and HTML. You can also drag the frame to resize while you are grabbing the code to embed. Very handy. Here’s an example:
See the Pen
Flex-Align-Items-Example by Elizabeth Mettler (@thewib)
on CodePen.
CSS Deck
CSS Deck is clean and easy to use. And it is free. It supports HTML, CSS and JavaScript and displays the results. You can make your code private or public. It allows you to embed your code as well. However, while writing this post – we were unable to do that! It doesn’t have as much functionality as CodePen or Repl but it is very simple to use for a newbie!
One feature that stands out is the ability to record your coding as you write it for others to view. Pretty useful – they are called CodeCasts. 
Repl
Repl is one of our favorites – and it does so much more then just website tools. It will allow you to create snippets in Python, Node.js, C, Java, Ruby, Go, and so many more. See the full list here.
It is also an easy to use and powerful tool. Here’s an example of it using Python.
That’s a few of our favorites that are easy to use – there are quite a few more – here are a few more to look at that have a little more power to them.