codepen是一个前端代码编写测试运行的在线工具，它可以让你在线编写，测试，和分享前端代码。你可以使用HTML，CSS，和JavaScript来创建和编辑Pen（单个的代码片段）和Project（多个文件的项目），以及使用预处理器和包来增强你的代码功能。
它的功能特点包括：
它的付费定价及权益：CodePen的付费定价分为三个等级，分别是Free，Pro，和Super。
- Free：这是免费的基本计划，你可以创建无限量的Pen和Project，浏览和收藏其他开发者的作品，以及参与CodePen的社区活动。
- Pro：这是付费的专业计划，你可以享受更多的功能和服务，如私人和团队的Pen和Project，实时协作，资产托管，自定义域名，项目导出，优先支持等。 Pro计划的价格根据你选择的订阅周期和团队人数而不同，你可以在这里查看具体的价格表。
- Super：这是付费的超级计划，你可以享受所有的Pro计划的功能和服务，以及一些额外的优势，如更大的资产空间，更多的自定义域名，更高的流量限制，更快的加载速度等。
注册和登录：你可以用Twitter，Facebook，GitHub或邮箱来注册和登录CodePen的网站。
创建和编辑Pen：你可以点击首页左上角的Pen按钮，进入Pen编辑器，它分为三个部分，分别是HTML，CSS，和JavaScript。你可以在这里编写你的前端代码，并且实时看到效果。你也可以点击每个部分的下拉箭头，选择你想要的预处理器和包，以及格式化和分析你的代码。
创建和编辑Project：你可以点击首页左上角的Project按钮，进入Project编辑器，它类似于一个文件管理器，你可以在这里创建和编辑多个文件，包括HTML，CSS，JavaScript，以及其他类型的文件。你也可以点击每个文件的下拉箭头，选择你想要的预处理器和包，以及格式化和分析你的代码。
保存和分享：你可以点击保存按钮，保存你的Pen或Project，并且给它们起一个合适的标题和描述。你也可以点击分享按钮，获取你的Pen或Project的链接，二维码，或嵌入代码，以及分享到社交媒体。
如果你经常无法打开「codepen」，通常有以下三种原因，对应三种解法：
软件屏蔽：微信、QQ 等软件可能默认屏蔽部分站点。请复制网址到手机自带浏览器打开，不要用微信 / QQ 的内置浏览器。
浏览器问题：提示「网站违规」并不代表站点真的违规，多来自浏览器厂商的屏蔽策略。建议换用原生浏览器（苹果 Safari、微软 Edge），或独立开发的浏览器（Alook、X 浏览器、VIA 等）。
网络问题：网络不稳定、或所用运营商对该站点未做优化，也会打不开。可切换网络环境后重试；部分境外服务还需在符合当地法律法规的前提下访问。
以上三步基本能解决绝大多数打不开的情况。仍然不行，多半是该站点已停止服务或换了域名 —— 可在 站内搜索 找同类替代品。
仍打不开、或发现信息过期，反馈给管理员 即可，核实后会及时更正或下架。
特别声明
- 本站所提供的「codepen」站点内容均来源于网络，不保证外部链接的准确性与完整性；对于该外部链接的指向，不由本站实际控制。
- 在 2024-09-04 09:21:52 收录时，该站点的内容均属合规合法。后期该站点如出现违规，可直接联系管理员删除，本站不承担任何责任。
