CodePen.io: for what do I need such kind of tool?

Don't be confused about the english now - but due to the fact that my current master thesis is in english, I sometimes also want to provide blogs in this language - to pimp up my page a little bit ;).

This article I have written after an interesting lecture called frontend development I had at my masters. I don't know if you feel the same but due to the fact, that there are so many different tools around us - especially in the coding field - it sometimes it can get difficult to know which one to choose. My lecturer Heinz Wittenbrink recommended my the tool CodePen as a help when focusing on HTML, CSS and JavaScript. Therefore, this blog-post is getting you more insights about it (#noad).

First impression of the tool

CodePen is an integrated development environment. What does this mean? People are mainly using this tool to write a certain code in the browser and have the chance to immediately see the outcome of it. The tool focuses on front-end technology languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

How do I work with it?

The first step is to register yourself and create an own account. After that you have many different options, like creating a pen, a blog-post or for example a project. In this blog-post we focus on creating a pen.

There are two different possibilities:

• create an own pen: it works like a code editor where you can create your own “pens” or also called code snippets and test them. After creating those pens you can share them with others.
• individualise existing pens: CodePen already has a huge amount of code snippets stored from user who created and shared them. It is a possibility to learn new codes or use the existing ones and individualise them for your usage.

Below you can see how the code editor looks like with its three tables for HTML, CSS and Javascript. The area above is the function where you immediately see what you have “coded”. You can also put this area to the right, so you have the responsive view for smartphones.

For starters and developers

CodePen can be used of web designers and developers of any state of knowledge. Also newbies can work with this tool and start to learn how to work in this field.

The intention to join the community of CodePen is either to create pens, test them, show your skills, try out new technologies, build components for late usage, get inspiration or simply learn how to code - the possibilities are endless. The advantage of the tool is, that this online community already got very large and therefore offer a diverse learning environment.

 Interesting things to know about Codepen

The Co-founders are - three guys called, Alex Vazquez, Tim Sabat and Chris Coyier.

                                      - Working as full stack developer, frontend-developer and designer.

300.000                       - registered users are working with CodePen

14.16 million                - visitors monthly are counted on the site

2012                             - In this year the tool was launched

https://codepen.io   - is the URL of the tool

free                              - there is a free package of using this tool

 To compare

Below you see some alternatives and similars to CodePen. Of course, not everyone has the same functions, therefore one’s have to try out what the best for someone is.

I hope with this short summary that I created for myself to get more common with this tool you could have also gained some new information and maybe you will try it out. I am looking forward to your experiences in the comments.