How I use CodePen for working on small Proof Of Concepts

How I use CodePen for working on small Proof Of Concepts

What is CodePen?

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them. -[]

CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build.


It's particularly useful for people wanting to learn or experiment with web development without the hassle of setting up a machine and installing dependencies.

What are Proof of Concepts (Poc)?

Proof of concept (POC), also known as proof of principle, is a realization of a certain method or idea in order to demonstrate its feasibility, or a demonstration in principle with the aim of verifying that some concept or theory has practical potential. []

Let's assume you want to check if the latest bootstrap has a switch toggle but you only have a previous version on your development machine. You don't want to update your dependencies which may break things.

You can instead create a new CodePen with your required dependencies and start experimenting.

Moreover, if you want to demonstrate a quick design or a JavaScript library to a colleague or customer, you can do the same. You are not building a production ready interface but instead like the name implies trying to prove a concept.


Reproducing errors

CodePen can also be used to quickly build a page layout with required external libraries such as Bootstrap and Font Awesome in a matter of minutes to reproduce some Web Development errors.

I learnt this strategy from an ex colleague who had years of experience. I think this a highly efficient method especially when not working in the same physical location. You can take the time to work alone and think about the problem in view of reaching a solution.

Tools like CodePen are excellent for isolating one particular problem especially in CSS and try to arrive to a solution. They are fast to build without the need to manually installing anything on your machine.

How I use it to help colleagues on CSS?

  1. Create new pen
  2. Add bootstrap in the CSS settings
  3. Using flex classes to build the page similar to the ones that are being used such as side bar, header, content and footer
  4. Replace white space with the built in Lorem Ipsum Emmet
  5. Use vh-100 to make the content take the whole page if needed
  6. Isolate the part I want to work e.g. making the content on the sidebar not overflowing but enabling the user to resize the content