CodePen是一个完全免费的前端代码托管服务网站平台，
功能如下：
实时预览：在编写HTML、CSS和JavaScript代码时，可以即时看到页面效果，方便调试和优化
社区分享：用户可以将自己的作品公开分享，浏览他人代码，相互学习交流
模板丰富：提供多种现成模板，加速项目搭建，支持创建三个模板
技术栈支持广泛：
HTML：支持Haml、Markdown、Slim、Pug等多种语法
CSS：支持Sass、Less、Stylus、PostCSS等预处理器，以及Normalize.css、Reset.css等工具
JavaScript：支持Babel、TypeScript、CoffeeScript等，以及jQuery、AngularJS、React、Vue等流行框架
创作单元：
Pen：单文件模式，支持预处理器，适用于代码片段测试
Project：多文件工程，支持自定义域名绑定、版本控制，适用于完整项目演示
Collection：作品集，支持主题分类、协作编辑，适用于作品归档和团队共享
协作开发：支持实时协同编辑，类似Google Docs的多人编码，以及代码行级批注和版本对比
快速添加外部资源：只需在输入框里输入库名，CodePen就会从cdnjs上寻找匹配的CSS或JS库
优秀外嵌体验：在WordPress或Reddit等支持oEmbed的平台上，只需简单地把链接贴入编辑框，发布后会自动转为嵌入作品
教育应用：教师端可以创建班级、布置代码作业，支持私有Pen、实时协作、自定义主题等功能
动效设计源代码分享：CodePen上有大量的动效设计源代码，这些代码作品不仅展示了最新的动效设计趋势，还提供了实际应用的案例
官网主页：codepen.io
1.点击左侧的Start Coding按钮即可在线编辑代码
2.如无登录，则弹出提示登录或注册账号
3.编写前端代码
4.写完代码可以使用CTRL+S键保存，并可以将链接分享出去