Codepen

The educational technology and digital learning wiki
Jump to: navigation, search

1 Introduction

Codepen is a free development platform created in 2012 in Florida. It is used to develop and test live code in HTML, CSS and JavaScript in web browsers. Codepen is also a social network for developers. Each of them can create their own page, displaying the codes (called Pens) they developed on the platform.


Worth checking out:

See also:

2 Installation

Codepen is used directly in a web browser. No prior installation is therefore required. To save your creations, however, it is necessary to create an account. You can use Twitter, GitHub or Facebook accounts, or create a specific account for the platform.

Both free and paid accounts are available.

3 Features

The display is divided into two parts: The top part itself is divided into three parts for code edition : HTML, CSS and JavaScript. The bottom part is the live code visualization.

File:Codepen interface.png
Codepen development interface

It is possible to link the project with Fork in order to follow the evolution of the project.

A feature allows to reformat the indentation of the code in one click.

There are several ways to export the project :

  • Download a ZIP folder
  • Share the project link
  • Save to Gist
  • Create a container (Embedding) on another site

The community aspect of the site allows you to share your "Pens", create your portfolio and ask for help from other developers. There are collections of existing "Pens" that can be exported directly to the site.

3.1 Preprocessors

Codepen offers the possibility to write code based on already known code frameworks like :

  • Sass
  • LESS
  • Stylus
  • PostCSS
  • Markdown
  • Haml
  • Slim
  • Pug

4 Modes

4.1 Pro

The Pro mode offers various additional features such as :

  • Presentation mode
  • Teacher mode
  • Collaboration mode
  • Private mode
  • etc.

4.2 Education

The education mode is part of the "Pro" mode. It allows, for example, a teacher to show from his computer the development of live code on the students' terminals.

5 Bibliography

1 https://www.codepen.io [ Codepen] (12/2016)

2 https://en.wikipedia.org/wiki/CodePen [ Wikipedia] (12/2016)