10 Codepen Tips For Beginners

By Preethi Ranjit. in Coding. Updated on November 23, 2017.

Codepen is a super easy and popular site to pen down a working front-end code combo right away. If you don’t know what Codepen is or haven’t heard of it before, it’s basically an online source code playground (let’s call it OSCP to sound nerdier) for the three musketeers of front-end coding; HTML, CSS and JavaScript.

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

The Console JavaScript object has a few more methods besides log() to allow you to print things in the web console.

You can use the info(), warn() and 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.

5. Export

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.

9. Inspect JavaScript Variables

As Codepen’s JavaScript console connects to the JavaScript saved in your pen, you can also use it to quickly test your JavaScript. This feature comes especially handy in inspecting JS variables, as this way you don’t have to insert extra console or alert messages into the original code solely for testing purposes.

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.