阿嬷都看得懂的 CodePen 怎麽用

VSCode 已经很棒了，不过最近比较流行的是云端协作。以目前我们制作单页网页的需求而言，我很推荐 这个云端平台，不但可以直接看见程序码的结果，还可以看见与引用其他大神的成果喔！

在注册之後，我们可以点选左侧的 Pen 来开启新的档案。左上角的 Untitled 右边的铅笔点下去可以改档名，右侧的 HTML、CSS、JS 区块则是我们编写程序码的地方。

在正式开始编写程序以前，我们先来调整个人设定。点选右上角的头像，再点选 Setting，就可以到个人设定选单。

点进去之後，点选 Editor Preference：

这边可以更改喜欢的主题样式。不过我们真正的重点是拉到最底下，看到 Emmet 这个选项。请务必勾选成 Active!! 这样就会如同 VSCode 那样，自动帮我们把拼字补完。Emmet 密技的详解，请参考 PJCHENder 大大的这篇详解。

设定完以後，让我们来把之前 gavagai 的档案内容放进去吧！就按照不同语言的部分复制贴上就可以。在左侧的板块，就会即时出现我们程序码的结果罗！

等等，可是这样也太难看 HTML 标签了吧！区块这麽小，阿嬷眼睛不好耶！而且那个红色惊叹号是怎麽回事？我们程序码有错吗？

别担心，CodePen 是允许我们调整这些板块的大小的喔。让我们用滑鼠点击板块的边界，就可以拖曳来放大缩小了。

小秘诀：点两下板块标签，可以把该板块完全展开喔～

惊叹号确实是 CodePen 告诉我们，有些东西不太对劲了。我们点开惊叹号，会发现它是在提醒我们，CodePen 的 HTML 标签只要写 body 标签中的内容就好，head 的部份它会自动帮我们设定好。所以我们可以大胆把 head 的部分都删掉：

看起来是不是清爽多了呢？

这边也要特别提醒各位阿嬷，CodePen 是需要存档的喔！我们可以点击上方的 Save 存档，或者 Ctrl + s 也行。在存档以後，我们会看见右下角出现一些重要的标签，其中最重要的应该是

• Fork：这个按钮允许我们引用他人的作品，回到自己的 CodePen 进行改作。
• Export：这个按钮允许我们把自己的作品下载下来，下载下来会是 .html, .css 和 .js 分开的档案，而且中间的连结都已经帮我们写好罗！是不是很开心呢？

如果不喜欢现在的区块配置，或是希望在全萤幕的状况下看见网页的状况，可以点右上角的版面配置，里面就有各种区块配置可以选择罗！

更棒的是，我们可以在其他网页中，嵌入 Code 的结果，这样我以後要展示程序码与成果给各位阿嬷看，或者各位阿嬷想改写我的程序码，就不用每次都复制贴上，我也不用每次都截图截得半死......

CodePen 还有个很棒的地方，是可以浏览许多大神的作品。回到首页以後，点选左边的 Trending，就可以看到现在最多人观赏的作品。你也可以在上面的 Seach你也可以在上面的 Seach CodePen... 的地方，搜寻相关的主题，甚至所使用的工具。

例如，D3 是一个用来绘制图表的强大工具。我们只要搜寻 D3，就能够找到这种作品：

怎麽样？CodePen 是不是方便又强大呢？明天开始，我们所有实作都会在 CodePen 上进行示范，各位阿嬷也可以开始用 CodePen 开始练习看看喔！