zerotocode
1.0.0
Zero to Code est un cours en ligne libre pour faire des choses sur le Web , en utilisant des technologies Web fondamentales: HTML, CSS et JavaScript. Je veux que ZTC soit le meilleur endroit sur le Web pour apprendre à faire des trucs avec du code. Zero to Code utilise CodeFrame comme environnement d'apprentissage, pour sa part de partage, sa boucle de rétroaction rapide et se concentre sur les principes fondamentaux.
Il s'agit du référentiel source qui contient le site Hugo pour zéro au code, y compris tout le programme ouvert. Vous pouvez en savoir plus sur le projet lui-même sur le site Web.
Zero to Code est un site statique construit avec Hugo. Hugo est un générateur de sites statique, qui prend des documents Markdown et des modèles HTML / CSS / JS et génère un bundle de fichiers statiques HTML / CSS / JS qui forme un site statique. Vous pouvez en savoir plus sur la façon d'utiliser Hugo sur gohugo.io. Cette section du ReadMe couvre comment travailler avec Hugo sur le référentiel de ZTC.
Vous pouvez générer une nouvelle version du site statique à partir des modèles et des pages de démarrage une fois en exécutant hugo .
$ hugo
...
[some info about the generated files] Si vous écrivez et que vous souhaitez voir les résultats lorsque vous écrivez une page ou modifiez des modèles, vous pouvez exécuter le serveur de développement avec hugo server -D .
$ hugo server -D
... serving development server at localhost:1313 Lorsque vous démarrez le serveur de cette façon, vous pouvez aller sur localhost:1313 sur votre navigateur pour voir une version de rechargement en direct du site lors de la modification.
Zero to Code a quelques personnalisations que nous utilisons en plus de la fonctionnalité nue de Hugo pour rendre les tutoriels plus efficaces.
La personnalisation la plus importante de ZTC au sommet de Hugo est la façon dont nous construisons des blocs de code à haute teneur en syntaxe. Plutôt que d'utiliser la syntaxe à trois backmtics de Markdown, nous utilisons la syntaxe personnalisée de Hugo pour définir un bloc de code en surbrillance de syntaxe, comme ceci:
{{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}
Vous pouvez également définir un bloc de code css ou javascript plutôt que html , et nous pouvons dire à Hugo de mettre en évidence certaines lignes avec la syntaxe "hl_lines=N1 N2 N3-N5" .
{{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}
Lorsque nous définissons un bloc de code mis en surbrillance de cette manière, sur des pages single.html (pages de tutoriel unique), nous avons également un script qui passe par tous les blocs de code ED .highlight sur la page et ajoute un bouton d'essai -> en haut à droite de chaque bloc de code, qui ouvre le code de code avec l'exemple de code spécifié.
Parfois, nous voulons intégrer une instance interactive en direct d'un éditeur de code de code sur la page. Actuellement, la meilleure façon de procéder est de créer un div .fixed.button.liveEditorContainer qui contient un élément <iframe> pointant vers une URL de l'éditeur de code, comme cet exemple de la leçon d'aperçu.
< div class =" liveEditorContainer fixed button " >
< iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >Cela incorpore l'éditeur CodeFrame spécifié par l'URL sur la page, à la bonne taille.
button et les boîtes avec des ombres La plupart des éléments interactifs et certains éléments soulignés (comme les blocs de code et les images en surbrillance) sont élevés à partir de la surface de la page avec une ombre. La classe .button , importée de la feuille de style de code Frame, est responsable de cette appeluance. Lorsque vous souhaitez faire de l'élément surélevé avec une ombre de boîte comme les boutons de CodeFrame, utilisez la classe .button .
Si vous voulez que l'élément ne soit pas interactif, vous pouvez appliquer les classes .fixed.button à l'élément, qui désactivera les animations de survol et actifs sur le bouton.
Si vous aimez le projet Zero To Code, souhaitez soutenir ce que je fais à l'avenir, veuillez envisager de faire un don à Zero à Code via PayPal ou Venmo.
Alternativement, veuillez envisager de faire un don à certaines des meilleures organisations à but non lucratif faisant un excellent travail dans l'espace d'éducation CS, Khanacademy, Hack Club et Stutech.
