Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | CodePen, Cool Sample Code/Reduced Test Cases with HTML, CSS and JavaScript
3046
single,single-post,postid-3046,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
codepen

CodePen, Cool Sample Code/Reduced Test Cases with HTML, CSS and JavaScript

Reduced test cases are a great way to  help find bugs and fine tune new ideas. Tools like jsfiddle are a great start. A similar web app, CodePen builds on code editing features with a social coding component.

CodePen allows you to quickly build demos with an in-browser code editor, share your new creation and discover new ideas from other developer’s code. The site is currently in beta and was created by Alex VazquezTim Sabat and Chris Coyier.

The code editor is divided into: HTML, CSS, JS and Result windows:

  • HTML Section: HAML, Markdown, Slim, Zen coding built in
  • CSS Section: LESS, SASS, Compass, External CSS file
  •  JS Section: Coffee Script, Popular libraries, External JS file
  • Click section to see compiled version of HTML or CSS



With the JS window you can link to external js libraries

Several CSS preprocessor languages are available

Markup\Templiting Options

You can share your code through social links or a direct link.

 

The sharing part of CodePen is what differentiates it from other web apps. A great place to start discovering new creations is there Picks section and the Popular list.

Examples