zerotocode
1.0.0
Zero to Code es un curso en línea para siempre para hacer cosas en la web , utilizando tecnologías web fundamentales: HTML, CSS y JavaScript. Quiero que ZTC sea el mejor lugar en la web para aprender a hacer cosas con código. Zero to Code usa CodeFrame como su entorno de aprendizaje, por su capacidad de compartir, ciclo de retroalimentación rápida y enfoque en los fundamentos.
Este es el repositorio de origen que contiene el sitio de Hugo para cero a código, incluido todo el plan de estudios abierto. Puede leer más sobre el proyecto en sí en el sitio web.
Zero to Code es un sitio estático construido con Hugo. Hugo es un generador de sitio estático, que toma documentos de Markdown y plantillas HTML/CSS/JS y genera un paquete de archivos HTML/CSS/JS estáticos que forman un sitio estático. Puedes aprender más sobre cómo usar Hugo en Gohugo.io. Esta sección del ReadMe cubre cómo trabajar con Hugo en el repositorio de ZTC.
Puede generar una nueva versión del sitio estático a partir de las páginas de plantillas y Markdown una vez ejecutando hugo .
$ hugo
...
[some info about the generated files] Si está escribiendo y desea ver los resultados mientras escribe una página o modifica plantillas, puede ejecutar el servidor de desarrollo con hugo server -D .
$ hugo server -D
... serving development server at localhost:1313 Cuando inicia el servidor de esta manera, puede ir a localhost:1313 en su navegador para ver una versión que recarga en vivo del sitio mientras edita.
Zero to Code tiene un par de personalizaciones que utilizamos además de la funcionalidad desnuda de Hugo para hacer que los tutoriales sean más efectivos.
La personalización más importante que ZTC tiene además de Hugo es la forma en que construimos bloques de código iluminados con sintaxis. En lugar de usar la sintaxis triple de retroceso de Markdown, utilizamos la sintaxis personalizada de Hugo para definir un bloque de código resaltado de sintaxis, así: así:
{{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}
También puede definir un bloque de código css o javascript en lugar de html , y podemos decirle a Hugo que resalte ciertas líneas con la sintaxis "hl_lines=N1 N2 N3-N5" .
{{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}
Cuando definimos un bloque de código resaltado de esta manera, en las páginas single.html (páginas de tutoriales individuales), también tenemos un script que pasa por todo .highlight
A veces queremos incrustar una instancia en vivo e interactiva de un editor de CodeFrame en la página. Actualmente, la mejor manera de hacerlo es crear un .fixed.button.liveEditorContainer Div que contiene un elemento <iframe> que apunta a una URL de editor de código de código, como este ejemplo desde la lección general.
< div class =" liveEditorContainer fixed button " >
< iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >Esto incrusta el editor CodeFrame especificado por la URL en la página, al tamaño correcto.
button y los cuadros con sombras La mayoría de los elementos interactivos y ciertos elementos enfatizados (como bloques e imágenes de código resaltados) se elevan desde la superficie de la página con una sombra. La clase .button , importada de la hoja de estilo de CodeFrame, es responsable de esta aperance. Cuando desee hacer un elemento elevado con una sombra de caja como los botones de CodeFrame, use la clase .button .
Si desea que el elemento no sea interactivo, puede aplicar las clases .fixed.button al elemento, que deshabilitará las animaciones activas y activas en el botón.
Si le gusta el proyecto Zero to Code quiere admitir lo que hago en el futuro, considere hacer una donación a cero para codificar a través de PayPal o Venmo.
Alternativamente, considere donar a algunas de las mejores organizaciones sin fines de lucro que realizan un gran trabajo en el espacio educativo CS, Khanacademy, Hack Club y Stutech.
