Codepen
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:
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.
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.
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
Codepen offers the possibility to write code based on already known code frameworks like :
- Sass
- LESS
- Stylus
- PostCSS
- Markdown
- Haml
- Slim
- Pug
Modes
Pro
The Pro mode offers various additional features such as :
- Presentation mode
- Teacher mode
- Collaboration mode
- Private mode
- etc.
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.
Bibliography
1 https://www.codepen.io [ Codepen] (12/2016)
2 https://en.wikipedia.org/wiki/CodePen [ Wikipedia] (12/2016)