CodePen

CodePen.io是一个免费好用的在线编程开发平台。提供可以在线运行代码的编辑器工具，任何人都可以在浏览器中编辑前端语言代码、测试库、框架或组件，如HTML，CSS和JavaScript，并实时在线预览运行代码效果，从而可以更快地进行调试。

还可以与其他开发人员共享你的代码或者从其他开发人员的项目中进行学习以提高你的编码技能、快速调试你的工作并找到灵感。开发人员和设计人员还可以创建代码片段并与其他人共享。

CodePen功能

收集或分享想法

CodePen有成千上万的用户创建和分享他们对前端组件、动画甚至几乎完成的网页布局的想法。如果你有一些自己的想法可能对其他前端专业人员有用，这里是分享它们的理想场所。

学习新的框架或库

CodePen基于浏览器的IDE编辑器是测试和运行新框架或库的绝佳工具。无需在每次要查看更改是否有效时都设置新环境。编辑器视图同时显示三个编辑区域和预览，每次更改时都会更新最终结果。

构建和测试

通过构建整个项目或隔离代码来测试功能和动画，更快地完成工作。

分享你的作品

通过共享成为世界上最活跃的前端社区的一部分。在会议上发表演讲?使用演示模式直接在浏览器中显示代码。

产品特色：

在线代码编辑运行：智使用CodePen的在线云端IDE工具进行代码编写和在线运行预览。

支持自定义编码方式：CodePen编辑器是高度可定制的。有自动完成和Emmet的速度和准确性。

保持笔的私密性：在你公开之前，没有人可以看到你的私人资料，因为它们是秘密的不可搜索、不可索引的。

嵌入笔：在你自己的网站上完全自定义代码演示的外观。只需更改主题，所有嵌入式笔也会进行更改。

资产托管：可以将图片等资源直接拖放到CodePen上进行托管，不仅仅是图像，还支持CSS，JSON文件，SVG，媒体文件，

构建整个项目：项目是CodePen最强大的功能。它是浏览器中的一个完整的IDE，具有自动预处理，拖放上传，实时预览，网站部署等功能。

协作模式：代码的实时协作。多人可以同时在笔中编辑代码，同时仍能看到实时预览。还有一个聊天区，是远程配对编程的最佳选择。

收费价格：

免费版：CodePen的基础功能可以完全免费的进行使用。只需注册账号即可开始。

付费版：每月8美元。通过无限隐私保护你的秘密，可以根据需要制作任意数量的私人笔和收藏。

常见问题

CodePen是干什么用的？

CodePen的服务主要用于使用在线代码编辑器进行在线代码运行预览。

CodePen的主要用户群体有哪些?

CodePen的主要用户是需要使用在线代码编辑器进行在线代码运行预览的个人，媒体专业人士，开发者，以及电商用户。

CodePen支持哪些平台?

CodePen是一个基于网络的平台，因此你可以通过浏览器直接进行使用，无需安装任何应用程序。

CodePen支持中文吗？

CodePen目前仅提供英语服务，暂时不支持中文，不过你可以通过浏览器自带的翻译工具进行使用。