Skip to content
Home » Blog » Day#21: CodePen – frontend playground

Day#21: CodePen – frontend playground

I was introduced to CodePen while learning a web development course on Udemy and got to use it more while learning about responsive design on LinkedIn Learning. 

CodePen is like a free playground (social development environment) for users to experiment with frontend languages, focusing on HTML, CSS, and JavaScript. 

Here’s what my CodePen looks like:

My CodePen project
My CodePen project

What I love about CodePen:

  • Results shown automatically on the same browser – We can see the result of our code right away on the same browser without clicking a ‘run’ button unlike a code editor (e.g. Brackets) that requires us to open the code file on a browser to view the result. 
  • Pleasant-to-use interface – It’s so simple to use and lets us collapse code editors that we don’t use to declutter the workspace. We can also rearrange the workspace as we like. For example, we can have the result box at the top and code editors at the bottom or vice versa, or change the result box to appear on the left side while editors on the right.
  • It’s super robust – We can embed our pen in other platforms (e.g. WordPress) and we can choose whether to allow others to edit (available in Pro feature) or download our pin or not.

    Here’s how my pen looks like when embedded in this WordPress blog (You can interact with it!) :

I find that CodePen works great for me when I want to experiment my code really quick and not worry so much about attaching images or other files because from what I know, you have to host those files in the cloud and find a way to plug it in the CodePen. It requires some work. 

I also recommend signing up for the CodePen newsletter. It will enlighten you how much this space helps enrich creativity. You’ll see plenty of cool pen projects like animations purely made with HTML and CSS, or other awesome widgets and a lot more.

How do you use CodePen in your coding journey?

This is day#21 post and a part of my commitment to spend 30 minutes a day for 30 days straight to write about software development tools that I love. My goal is to build my daily writing habit and connect to more people. This project is inspired by @dickiebush ’s “Ship 30 for 30” Atomic Essays. 

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.