zerotocode
1.0.0
Zero to Codeは、HTML、CSS、およびJavaScriptの基本的なWebテクノロジーを使用して、Web上のものを作成するための無料のオンラインコースです。 ZTCをウェブ上で最高の場所にして、コードで物を作ることを学ぶことを望んでいます。 Zero -to Codeは、共有可能性、高速フィードバックループ、および基礎に焦点を当てるために、学習環境としてコードフレームを使用します。
これは、すべてのオープンカリキュラムを含むゼロのコード用のHugoサイトを含むソースリポジトリです。プロジェクト自体の詳細については、ウェブサイトで読むことができます。
Zero -to Codeは、Hugoで構築された静的サイトです。 Hugoは静的サイトジェネレーターであり、マークダウンドキュメントとHTML/CSS/JSテンプレートを採用し、静的サイトを形成する静的HTML/CSS/JSファイルのバンドルを生成します。 gohugo.ioでHugoの使用方法について詳しく知ることができます。 READMEのこのセクションでは、ZTCのリポジトリでHugoとの作業方法について説明しています。
hugoを実行して、テンプレートとマークダウンページから静的サイトの新しいバージョンを生成できます。
$ hugo
...
[some info about the generated files]書いていて、ページを書いたり、テンプレートを変更したりして結果を確認したい場合は、 hugo server -Dを使用して開発サーバーを実行できます。
$ hugo server -D
... serving development server at localhost:1313この方法でサーバーを起動すると、 localhost:1313に移動して、編集時にライブレロードバージョンのサイトを表示できます。
Zero to Codeには、チュートリアルをより効果的にするために、Hugoの裸の機能に加えて使用するいくつかのカスタマイズがあります。
ZTCがHugoに加えて最も重要なカスタマイズは、SynTax-Highlightedコードブロックを構築する方法です。 MarkdownのTriple-Backtick構文を使用するのではなく、Hugoのカスタム構文を使用して、このような構文強調表示されたコードブロックを定義します。
{{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}
また、 htmlではなくcssまたはjavascriptコードブロックを定義することもできます。Hugoに"hl_lines=N1 N2 N3-N5"構文で特定の行を強調するように指示できます。
{{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}
この方法で強調表示されたコードブロックをsingle.htmlページ（単一のチュートリアルページ）に定義すると、ページ上のAlll .highlight edコードブロックを通過し、各コードブロックの右上でこの - >この -右上で[右上]ボタンを追加するスクリプトもあります。
ページ上にコードフレームエディターのライブインタラクティブなインスタンスを埋め込みたい場合があります。現在、これを行う最良の方法は、概要レッスンのこの例のように、コードフレームエディターURLを指す<iframe>要素を含む.fixed.button.liveEditorContainer divを作成することです。
< div class =" liveEditorContainer fixed button " >
< iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >これにより、URLによって指定されたコードフレームエディターが適切なサイズのページに埋め込まれます。
buttonクラスと影のあるボックスほとんどのインタラクティブな要素と特定の強調された要素（強調表示されたコードブロックや画像など）は、ページの表面から影があります。 CodeframeのStyleSheetからインポートされた.buttonクラスは、このアペラを担当しています。コードフレームのボタンのようなボックスシャドウでいくつかの要素を上げたい場合は、 .buttonクラスを使用します。
要素をインタラクティブにしないようにする場合は、 .fixed.buttonクラスを要素に適用します。これにより、ボタン上のホバーアニメーションとアクティブなアニメーションが無効になります。
Zero -to Code Projectが好きな場合は、今後のコードプロジェクトをサポートしたい場合は、PayPalまたはVenmoを介してコードにゼロに寄付をすることを検討してください。
または、CS Education Space、Khanacademy、Hack Club、Stutechで素晴らしい仕事をしている最高の非営利組織に寄付することを検討してください。
