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.

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.

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 codcasts.

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.


Repl

 

CodeSandbox

Glitch

StackBlitz

Leave a Comment

You must be logged in to post a comment.