There are other similar OSCPs out there like JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen is definitely one of the most well-known among front-end developers. Without further ado, let’s jump right into some basic and useful tips for using Codepen.
1. Run Button
If you are not a fan of the way the output of your code in Codepen keeps refreshing while you’re typing, you can opt out of the “Auto Update Preview” option, and get a Run button instead. When you click it, you will be able to see and update your code’s output whenever you want to.
This is also a great option if you’re working with a code the output of which goes through a lot of layout changes, and repaints every time it’s updated, resulting in slowness.
2. Number Increment/Decrement
Increase or decrease the numbers in your code in Codepen without typing in the new numbers. All you have to do is use the key combination of Ctrl/Cmd and Up and Down arrows.
3. Multiple Cursors
You can put cursors at multiple points in the source code, then type or edit at all those points at the same time. This only works if you’re inputting the same info, and reduces the need for copy-pasting. Just hold down the Ctrl/Cmd key while clicking at those multiple points.
4. Different Colored Console Messages
You can use the
error() methods for information, warning and error. Typically, web consoles color these messages type-wise, or will display an appropriate icon beside them (like a warning sign for the warning message) for easier recognition.
Codepen has its own console which you can open by clicking on the Console button at the bottom left corner. It is ideal for a quick check of console messages without having to open the browser’s console. This console distinguishes the different types of console messages with different background colors.
Once saved, a pen (a single Codepen entity) can be exported as a ZIP file with all of its in HTML, CSS and JS code in files. There’s also an option to save the pen as a Github gist (a Git repository). You can find the Export button at the right bottom corner of each pen.
6. Find & Replace
Find & Replace – an essential operation for folks who tend to rename their variable names every now and then. Ctrl/Cmd + Shift + F is the key combo to open the “Find & Replace” dialog.
7. Emmet Tab Trigger
Do you know about tab triggers for Emmet coding? Emmet is a productivity tool for front-end developers that allows you to type skeleton code that later gets extended. To do this in Codepen, just quickly type the appropriate abbreviation into the editor, press the Tab key, and the complete code appears at once. Only available for HTML in Codepen.
8. Get Individual Code Files
If you use the Export option like mentioned before, you will get all three files (HTML, CSS and JS) of your pen. But if you are interested in only one or two of those files, and want to download them individually, there’s an option for that too in Codepen.
Once logged into Codepen, go to your pen, and click on the Change View button in the top right corner. At the bottom of the dropdown list, you will see the direct download links for the individual files.
10. Turn Pen to Template
If you tend to start most of your pens with the same set of code, you can use a template to save those repeating code. To turn a pen into template, tick the Template option under the Settings menu. When you later create a new pen, you can start with your saved template by clicking the down arrow in the right side of the New Pen button. It will open a dropdown list with all your saved templates to choose from.