How do I use CodePen on my website?

Bring your creations on CodePen to documentation, blog posts, or any other site! You can embed Pens on other websites with our copy-and-paste Embed code. To get the code, click the “Embed” button in the footer of the Editor on any Pen . This will open the Embed Builder.

By default, every time you save your project runs and automatically updates the preview. You can save and run your project by clicking the “Save All + Run” button in the header . You can also use the keyboard shortcut to save your current file (Command + S for Mac, CTRL + S for PC).

Potential employers might look through your recent feed and if they see a bunch of broken/unfinished stuff they could judge you on that. Also, people are more likely to follow you on CodePen if your published work is limited to quality pens.

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets . It functions as an online code editor and open-source learning environment, where developers can create code snippets, called “pens,” and test them.