by | Dec 2, 2017


by | Dec 2, 2017

What is Codepen?


At, they describe themselves as a

“social development environment for front-end designers and developers”.

CodePen is great for testing out bugs, collaborating, and finding new inspiration. It works by allowing you to create “pens”, which are sets of HTML, CSS, and JavaScript. You can then display those pens on your profile, take feedback, and continue to edit those pens at any time.

Here are 5 reasons why you should start making use of this service (and why I have)

1) A Hassle-free and Quick Coding Experience


I love how easy it is to start off with Codepen. With absolutely no need of setting up a development environment, running servers for live previews or even creating the HTML, CSS and Js files (Yes I’m pretty lazy) Codepen offers the fastest way to get started on a new idea or concept you’ve been thinking about. Other than the fact that creating pens is fairly easy, the development process and the workflow is really smooth and pleasing.

2) Highly Customizable Editor


The editor offers high customizability options and can provide various development workflows.


The Codepen editor offers a number of view for your pens. These include

  • Editor view
  • Details view
  • Full page
  • Debugging mode(And much more if you purchase the pro membership.)

Other than that the Settings tab offers great customizability options.
You can even use HTML or CSS preprocessors such as Haml, Slim and Pug and LESS, SCSS, SASS, etc respectively. Even JavaScript can be written as CoffeScript or Typescript.
If you don’t know what any of that means, it doesn’t matter really, not when you’re just starting out and focusing on the basics.
Other than that external CSS or js files can also be referenced in your pens.

3) Showing off your skills and experience


Codepen has a really large community you can show off your skills to. Having an impressive Codepen profile can speak tons about your skills and experience in the web development community.
Think about it as a development portfolio where you can display coding skills to anyone who’s interested.

4) Blogs


Blogging is a new feature on CodePen, allowing you to easily write about code just like on a regular blog. You can write with Markdown, and use a special embedding tool to embed your pen when you need to. You can add custom CSS to your posts, and there is a super simple preview to test out your post. This was a really great news for me because it meant I could reuse my articles here on Geekfell in my Codepen profile *winks*

5) Inspiration


As I’ve mentioned before, Codepen has a massive community of really talented and creative developers. Inspiration on almost anything you wanna build can be found within seconds. You can follow people’s collections and projects and can even edit their pens (on your browser client) to know the ins and outs of their code




In the end, I’d like to say that every developer out there must be using this resource to the maximum extent. Whether you feel like coding something new, learning by browsing pens from others or just want to experiment with new frameworks and tools, Codepen is the perfect tool for you.






I hope this helps. Until next time, Keep Creating!


Submit a Comment

Your email address will not be published. Required fields are marked *

More from this Category