9 Tips for Making the Most out of CodePen
1. Use Emmet to Rapidly Generate HTML
Emmet is a handy tool for writing HTML faster using CSS-like expressions, and it's built into the CodePen editor by default. Type an Emmet expression, press the Tab key, and the expression will be replaced with HTML.
2. Use Pens as External Resources
3. Search for External Libraries
But that's not all, folks. The set of external libraries available isn't limited to the options in the Quick-add drop-down. If you start typing the name of any of the thousands of libraries hosted in Cloudflare, CodePen will search and find the closest matches for you.
4. Customize Your Default Editor Settings
Default editor settings, such as tabs/spaces, indentation settings, themes, and font apply by default to all pens. You can even use the keybindings for vim or Sublime Text. Click on your avatar, go to Settings, then select the Editor tab to adjust default editor settings.
5. Backup Pens to Github Gist
Have you ever had a really cool pen, then you did something to mess it up, and couldn't get it back to it's original working state? Next time, back up your pen by exporting it to a Github gist when you reach a checkpoint.
6. Enable/Disable Auto-Refresh
Use the Behavior tab in Pen Settings to disable Auto-Updating if that's not your thing.
7. Use Key Bindings
CodePen's editor is built on top of CodeMirror, so you get many of their key bindings for free. A couple of my favorites are Cmd + Shift + 5 to re-run the code without a refresh (Ctrl + Shift + 5 on Windows), and Cmd + I to open up Pen Settings (Ctrl + I on Windows).
8. CodePen Stats
CodePen publishes stats such as how many pens were created today and how many total users have created accounts. See the stats here: Stats
9. Subscribe to CodePen Radio
CodePen Radio features the three co-founders of CodePen, Chris Coyier, Tim Sabat, and Alex Vazquez where they talk about what it's like to run a small web software business. Topics include getting funding, the tech that runs CodePen, and interviews with the people that they work with.