关于Web开发的许多令人沮丧的事情之一是没有一种简单的方法可以与他人共享您的项目。 在许多情况下，您必须将项目托管在Web服务器上，或者将所有相应的文件发送给想要查看您创建的内容的人。 但是，由于有了一个名为CodePen的简洁在线工具，您不必再担心任何这些了。
CodePen.io
CodePen是一个免费工具，可让您在线托管项目，而无需支付一分钱。 首先，转到CodePen.io并创建一个免费帐户。
完成此操作后，您可以通过单击屏幕右上角的“新建笔”按钮来创建“笔”。
之后，您将可以将任何HTML，CSS和JavaScript添加到其相应的框中。 开始添加一些代码后，您将看到正在创建的内容的实时预览。 您可以在左上角为第一个笔命名。 单击第一个“保存”后，您可以简单地与朋友，家人和同事共享页面的URL，以便他们可以看到您的工作。
这是您的Pen在其中包含一些代码后的外观（由名为Tribute Page的免费代码训练营项目提供）：
创建自己的笔时，您需要先进行设置，然后再开始。 当您单击“新建笔”按钮时，您应该会看到一个笔模板，可以开始输入一些代码。 右上角将有一个“设置”按钮。 单击该按钮（您应该看到以下屏幕）。
在这里，您将可以浏览HTML，CSS和JavaScript选项卡以添加某些信息。 在HTML标签中，您将能够添加元信息，这些信息应在
标签，依此类推。 在CSS下，您将能够添加CSS预处理程序，例如LESS和Sass。 不仅如此，您还可以添加外部CSS，例如Bootstrap和Foundation。 在JavaScript标签下，您可以添加JavaScript预处理器，例如Babel或CoffeeScript。 另外，您可以添加外部JavaScript框架，例如Angular，React，Lodash，D3等。
最后，CodePen将允许您更改要查看的“视图”。 默认视图是“编辑器视图”，使您可以输入代码并在下面的控制台中进行小预览。 但是，还有其他选择，其中一个特别方便的选项是“整页”视图，您可以在其中看到一个项目，就像它在网站上一样。 还有一些其他视图可供切换，值得一试！
CodePen确实是一个简洁的工具，我们只是触及了它的实用性。 值得前往CodePen.io并使用它来处理一些项目，然后，如果您愿意，可以与您的朋友或同事分享。
您如何看待CodePen？ 您是否使用过类似的工具？ 让我们在下面的评论部分中知道！
