CodePen 是一个前端在线开发工具，可以让用户在线体验代码的效果，再也不用担心每次效果都需要截图给大家预览了。相信几乎所有的程序员都知道这个网站吧。

注册登陆可以选择 facebook、github 或 Twitter 直接登陆。

进来个人设置，修改个人信息。

进入 编辑器设置

修改代码高亮风格，还可以修改字体和大小，修改快捷键为 Sublime Text

开启代码提示，页面搜索：Autocomplete 勾选。

加入常用的 css 代码作为模板

display: flex;\njustify-content: center;\nalign-items: center;\nmin-height: 100vh;

去编辑器测试一下，New Pen

在 css 编辑中写入 bflex 关键词，按住 tab 就会自动生成我们写好的模板。

一些编辑技巧

输入 ul>li*10{$}，编辑多行 li，只需要选中 <li> 按 ctrl+d

引入 vue.js ，可以自己加，也可以在搜索框搜

引入字体，Google Fonts

以 Lobster 字体为例，复制地址，引入 css