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中做出色工作的一些最好的非營利組織捐款。