CodePen

CodePen is a web development environment for front-end designers and developers. It is all about faster and smoother development. It allows to build, deploy website and build test cases.

Features:

  • It offers to build components to use elsewhere later
  • It includes some awesome features to write CSS faster.
  • Allows live view and live sync 
  • Prefill API feature allows adding links and demo pages without need to code anything

Editor View – This is the default view for editing pens. You can adjust the size of the code previewer and select which languages to display.

Details View – This view allows you to see the pen’s tags, hearts, comments, forked pens, etc. This contains most of the social features for CodePen.

Full Page View – This is pretty self-explanatory. It makes your pen full-screen within an iframe, leaving only a CodePen footer.

Debug View – Debug View is a full-screen view, although with extra features. It removes the iframe and CodePen footer for easier JavaScript console access. This is great for testing code that you think CodePen might be interfering with.

If you are a CodePen Pro user, you have access to more views:

Presentation Mode – This mode is made especially for overhead projectors. It removes the header to give you more room and allows you to quickly change the font size and colors of the code editor. You can also change the size of the previewer without changing code.

Live View – With CodePen Live View, you have a full-screen display of your pen. As you edit that pen, it will automatically update as you type. This is often used when testing on multiple devices.

Professor Mode – This mode allows people to watch you code in real-time. There is also a chat window where the professor and students can chat.

Collab Mode – Collab mode allows more than one programmer to make edits to a pen at the same time. There is also a chat window, just like in professor mode.

CodePen is all about faster and smoother development. That’s why they utilize toolkits such as Emmet to help keep projects moving. The CodePen editor allows you to use Vim Key Bindings which are command-line keyboard shortcuts. Both of these tools together can help to create a faster workflow.