How to test Javascript and CSS using CodePen sandbox

Every web designer needs to test a web code quickly sometimes, without wasting time for any nonsense file configuration. This is when web based sandboxes become invaluable. One of the best javascript and CSS test sites I found so far is CodePen.

Codepen - Javascript and CSS sandbox
Codepen – Javascript and CSS sandbox

The biggest difference between CodePen and another sandboxes is that CodePen allows its users to publish their code as “pens”. As a result CodePen is full of excellent Javascript and CSS code snippets that you can use under MIT license. This is invaluable resource for beginner web programmers who can peek into and modify more advanced code snippets to quickly learn new programming techniques.

You can search and sort the snippets by tags, which makes finding needed code extremely easy and intuitive – even when you don’t know what you need, you can browse the tags list and find something interesting. When you find something cool, you can add it to one of  your Collections, like it, share as link to full page or get embed code. You can also download the code as .zip or post pen to Twitter and Facebook. If you want to make modified version of the snippet you can fork it easily.

Codepen - Javascript and CSS sandbox - Example pen
Codepen – Javascript and CSS sandbox – Example pen

The main purpose of CodePen is of course testing the code – so let’s start a new pen. Our page gets divided into four parts: Javascript, CSS and HTML editor windows and the Output window. There are three default window layouts to choose from. All editor windows have small gear icons where we can change their basic settings:

  • HTML Settings allow us to add some code into HTML and HEAD tags, as well as use on of HTML preprocessors – HAML, Markdown or Slim, which will speed up and simplify process of writing the HTML code.
  • CSS Settings let us define external CSS file to be included within our project, we can use Normalize or Reset CSS tools as well as Prefix CSS. You can also choose one of two CSS preprocessors: LESS or SASS (with or without Compass). Very powerful stuff!
  • Using Javascript Settings you can enable Modernizr, link external Javascript file or preload one of the most popular Javascript libraries: jQuery, jQuery with UI Tools, Zepto, MooTools, Prototype, YUI, Ext JS and Dojo. You can also preprocess your files with CoffeeScript.
Do you know any other interesting tools? Let us know via Suggest An App!

Using CodePen is very easy – write your HTML markup in HTML window, Javascript code into Javascript window and put CSS into CSS window – the output should show up in Results window.

Codepen - Javascript and CSS sandbox - Settings
Codepen – Javascript and CSS sandbox – Settings

Using global account settings we can choose one of three fonts we want to use in our editor as well as one of nine different color schemes. We can also set default HTML, CSS and Javascript preprocessors and add-on libs.

Gold Award
Gold Award

I highly recommend CodePen for everyone – doesn’t matter if you are beginner or expert web designer, CodePen is excellent tool for testing, learning and discovering new code.

You can try CodePen for FREE here.

Add a Comment