Codepen

Introduction[edit | edit source]

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:

• The software website

See also:

• The wikipedia page about the software

Installation[edit | edit source]

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.

Features[edit | edit source]

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.

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.

Preprocessors[edit | edit source]

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

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

Modes[edit | edit source]

Pro[edit | edit source]

The Pro mode offers various additional features such as :

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

Education[edit | edit source]

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.

Bibliography[edit | edit source]

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

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