zerotocode

zerotocode.org

Zero to Code是一门永久的在线课程，旨在使用基本的Web技术在网络上制作内容：HTML，CSS和JavaScript。我希望ZTC成为网络上学习用代码制作东西的最佳位置。零到代码使用代码框架作为其学习环境，其共享性，快速反馈循环并专注于基本面。

这是源存储库，其中包含用于代码为零的Hugo网站，包括所有开放课程。您可以在网站上阅读有关项目本身的更多信息。

贡献：欢迎初学者！

零至代码是一个使用雨果建造的静态站点。 Hugo是一个静态站点生成器，它可以使用降级文档和HTML/CSS/JS模板，并生成形成静态站点的静态HTML/CSS/JS文件。您可以在Gohugo.io上了解有关如何使用Hugo的更多信息。 README的这一部分涵盖了如何在ZTC的存储库上与Hugo合作的方法。

生成网站

您可以通过运行Hugo从模板中生成一个新版本的静态站点，并通过运行hugo生成一次降价页面。

$ hugo
...
[some info about the generated files]

如果您正在编写并想在编写页面或修改模板时查看结果，则可以使用hugo server -D运行开发服务器。

$ hugo server -D
... serving development server at localhost:1313

当您以这种方式启动服务器时，您可以在浏览器上访问localhost:1313在编辑时查看该站点的实时填充版本。

ZTC的自定义

零至代码具有几个自定义，我们在雨果的裸露功能之上使用，以使教程更有效。

语法高光指示器块，带有“尝试”按钮。

ZTC在Hugo之上的最重要的自定义是我们构建语法高光的代码块的方式。我们没有使用Markdown的三重语法，而是使用Hugo的自定义语法来定义语法突出显示的代码块，例如：

 {{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}

您还可以定义css或javascript代码块而不是html ，我们可以告诉Hugo用"hl_lines=N1 N2 N3-N5"语法突出显示某些行。

 {{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}

当我们以这种方式定义一个突出显示的代码块时，在single.html页面（单教程页面）时，我们还具有一个脚本，可以通过Alll .highlight ED代码块，并在每个代码块的右上方​​添加一个尝试 - >按钮，该按钮在每个代码块的右上角，用指定的代码示例打开代码框。

嵌入式代码帧编辑器

有时，我们希望在页面上嵌入代码框架编辑器的实时，交互式实例。当前，最好的方法是创建一个.fixed.button.liveEditorContainer div，其中包含一个指向CodeFrame编辑器URL的<iframe>元素，就像概述课程中的示例一样。

 < div class =" liveEditorContainer fixed button " >
    < iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >

这将URL指定的代码帧编辑器以正确的大小嵌入到页面上。

带阴影的button类和盒子

大多数交互式元素和某些强调的元素（例如突出的代码块和图像）是从页面表面带有阴影的。从CodeFrame的样式表中导入的.button类负责此表现。当您想用盒子阴影（例如CodeFrame的按钮）提出一些元素时，请使用.button类。

如果您希望该元素不进行交互，则可以将.fixed.button类应用于元素，该元素将禁用按钮上的悬停和活动动画。

支持零对代码

如果您喜欢零对代码项目希望支持我所做的事情，请考虑通过PayPal或Venmo向代码捐款。

另外，请考虑向在CS教育领域，Khanacademy，Hack Club和Stutech中做出色工作的一些最好的非营利组织捐款。