CodePen is a browser-based HTML, CSS and JavaScript code editor with instant previews of the code you see and write.

Code Editor With Instant Preview

CodePen is a live code playground for improving your HTML, CSS and JavaScript skills while collaborating and sharing your work with others. The site was made so that front end developers and web designers can easily showcase their skills with open source projects. CodePen calls those projects, naturally, Pens. The Pens can be portions of existing webpages, short animations or simply some interesting design. Anyone can browse these Pens on the site, and projects are split between three categories — “Picks,” “Popular,” and “Recent.” Included above each pen is the HTML, CSS and (if applicable) JavaScript code that makes it run.

Share Your Creations And Get Feedback

Similar to other online, collaborative code editors like Github, CodePen lets other users make edits or suggestions on any project. There’s a Fork button at the top of every Pen, allowing different developers to split off with their own ideas. There’s also a Share button that allows users to post their code on Twitter, Facebook or Google+. You can also save as GitHub Gist or export as a .zip. Pens can also be embedded on any other site. It’s a great way to quickly write and preview code while testing bugs or asking for help. In addition to its code editor, CodePen also has a job board. Most of the jobs are for front end web development, but they’re scattered throughout the world. There’s also a Pro version of CodePen, but for most users the free version will suffice.