Pros and Cons of CodePen Text Editor

Dec 1, 2020 | Frontend Web Development Certificate

Frontend web development tools continue to evolve and text editors are a huge part of the newest tools that make a developer’s life easier. Aside from stand-alone text editors like Atom or Notepad ++, there has been an explosion of browser-based editors in the past few years that don’t require software installation and foster better collaboration. CodePen is “an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets” that provides incredible ways for you to learn how to code frontend web pages better.

Also a featured tool in web development programs at Digital Workshop Center, this article highlights the pros and cons of CodePen for you to compare before you next big project.

Is CodePen the right tool for my website project?

Pros

CodePen is an open-source, community based platform for code editing. Unlike traditional text editor software, CodePen provides a browser-based, SAAS solution for front-end web designers. For new developers, it also acts as an amazing learning tool so you can catch your mistakes early in an interactive environment.

In addition, the interface of CodePen is intuitive and easy to use. Some of the best reviews highlight how easy it is for new users to get started with this development tool.

And collaboration is front and center in CodePen. One of the biggest pros for using CodePen would be that you can share your work easy with an instructor or coworker. Or you can see other people’s projects to be inspired before you start your next web design project.

If you need to store assets, CodePen also provides easy ways for you to keep all of your work in one place through their online platform. For all of your development needs there are far more positive attributes of CodePen than not. Before you start your next project, create a free account with CodePen and start developing.

Summary: The Pros of CodePen

Free to get started
Easy to use and intuitive interface
Open-source SAAS tool
Built-in learning tools
Collaborate with others and compare projects for future development

Cons

Every developer has a unique style of workflow, so finding the right development tool is key. Although there are few negatives with CodePen to report, there are definitely some features to be aware of before you invest your time and resources. The free account is a wonderful start. However, to keep your “pens” or groupings of code for a project, then you must have a Pro version.

The extra cost means that you might want to consider that all of your work will be publicly viewable when you start. If you are working on a sensitive project for a client and don’t want to expose unfinished work, this is an important point to consider.

Along the same lines, external links are not allowed in their free plan. You also must use the Pro plan to be able to make this links usable. Both of these first two points bring a lot of negative attention to the premium model of their SAAS software. There are a ton of tools in CodePen. But, many of them are not practical for most development situations.

At times, the interface can feel like a lot of bells and whistles, but not as useful as you might like. However, as long as you focus on the key aspects of developing in CodePen this may not be an issue for you.

Summary: The Cons of CodePen

Pro (premium) version required to keep work private and use external links properly
Many tools but not all are useful

There is far more to love about CodePen than not. While you should always explore all of your options, this is an incredible free tool to get you started, especially if you are new to frontend web design.

If you are interested in launching a new career in web development, Digital Workshop Center offers a variety of web design classes and certificate programs that can help you master a new program or take your career to the next level. In all of our web coding classes, we utilize CodePen as an amazing tool and learning resource. Talk to a student advisor today to learn more about getting started with your program.

Interested in Web Design?

learn more