zerotocode

Zerotocode.org

Zero to Code ist ein freier Online-Kurs über das Erstellen von Sachen im Internet mit grundlegenden Web-Technologien: HTML, CSS und JavaScript. Ich möchte, dass ZTC der beste Ort im Web ist, um zu lernen, Dinge mit Code zu machen. Zero zu Code verwendet Codeframe als Lernumgebung, für seine Sharability, Fast Feedback -Schleife und konzentrieren sich auf die Grundlagen.

Dies ist das Quell -Repository, das die Hugo -Site für Null zu Code enthält, einschließlich des gesamten offenen Lehrplans. Sie können mehr über das Projekt selbst auf der Website lesen.

Beitrag: Anfänger Willkommen!

Null zu Code ist eine statische Stelle, die mit Hugo erstellt wurde. Hugo ist ein statischer Site -Generator, der Markdown -Dokumente und HTML/CSS/JS -Vorlagen annimmt und ein Bündel statischer HTML/CSS/JS -Dateien erzeugt, die eine statische Site bilden. Sie können mehr darüber erfahren, wie Sie Hugo in Gohugo.io verwenden können. In diesem Abschnitt der ReadMe wird mit Hugo auf dem Repository von ZTC arbeiten.

Erzeugen der Website

Sie können eine neue Version der statischen Site aus Vorlagen und Markdown -Seiten einmal durch Ausführen hugo generieren.

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

Wenn Sie die Ergebnisse schreiben und die Ergebnisse beim Schreiben einer Seite oder Änderungen von Vorlagen sehen möchten, können Sie den Entwicklungsserver mit hugo server -D ausführen.

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

Wenn Sie den Server auf diese Weise starten, können Sie in Ihrem Browser zu localhost:1313 gehen, um eine Live-Reloading-Version der Website zu sehen, während Sie bearbeiten.

ZTC -Anpassungen

Zero to Code enthält einige Anpassungen, die wir über Hugos bloße Funktionalität verwenden, um Tutorials effektiver zu gestalten.

Syntax-Highlight-Codeblöcke mit "Versuch dieser" Schaltflächen.

Die wichtigste Anpassung, die ZTC zusätzlich zu Hugo hat, ist die Art und Weise, wie wir syntax-highlierte Codeblöcke erstellen. Anstatt die Triple-Backtick-Syntax von Markdown zu verwenden, verwenden wir die benutzerdefinierte Syntax von Hugo, um einen von Syntax hervorgehobenen Codeblock wie folgt zu definieren:

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

Sie können auch einen css oder javascript -Code-Block anstelle von html definieren, und wir können Hugo feststellen, dass er bestimmte Zeilen mit der Syntax "hl_lines=N1 N2 N3-N5" hervorhebt.

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

Wenn wir auf diese Weise einen hervorgehobenen Codeblock auf single.html -Seiten (einzelne Tutorialseiten) definieren, haben wir auch ein Skript, das Alll .highlight -Code -Blöcke auf der Seite durchläuft, und fügt diese -> Taste oben rechts von jedem Code -Block hinzu, der Codeframe mit dem Code -Beispiel öffnet.

Eingebettete Codeframe -Redakteure

Manchmal möchten wir eine live, interaktive Instanz eines Codeframe -Editors auf der Seite einbetten. Derzeit ist der beste Weg, dies zu tun, um eine .fixed.button.liveEditorContainer Div zu erstellen, die ein <iframe> -Element enthält, das auf eine URL des Codeframe -Editors hinweist, wie dieses Beispiel aus der Übersicht.

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

Dadurch wird der von der URL angegebene Codeframe -Editor in die Seite an der richtigen Größe eingebettet.

Die button und die Kästchen mit Schatten

Die meisten interaktiven Elemente und bestimmten betonten Elemente (wie hervorgehobene Codeblöcke und Bilder) werden mit einem Schatten von der Oberfläche der Seite angehoben. Die .button -Klasse, die aus dem Stylesheet von CodeFrame importiert wurde, ist für diese Wahrnehmung verantwortlich. Wenn Sie ein Element mit einem Box Shadow wie Codeframe -Schaltflächen erstellen möchten, verwenden Sie die .button -Klasse.

Wenn Sie möchten, dass das Element nicht interaktiv ist, können Sie die .fixed.button -Klassen auf das Element anwenden, wodurch die Schwebefläche und aktive Animationen auf der Taste deaktiviert werden.

Unterstützen Sie Null zum Code

Wenn Ihnen das Null -To -Code -Projekt gefällt, möchten Sie das, was ich in Zukunft mache, unterstützen, bitte überlegen Sie, ob Sie eine Spende für Null über PayPal oder Venmo codieren.

Alternativ können Sie an einige der besten gemeinnützigen Organisationen in den CS Education Space, Khanacademy, Hack Club und Stutech spenden.