zerotocode
1.0.0
O Zero to Code é um curso on-line gratuito para fazer coisas na Web , usando tecnologias fundamentais da Web: HTML, CSS e JavaScript. Quero que o ZTC seja o melhor lugar na web para aprender a fazer coisas com código. Zero a Code usa o CodeFrame como seu ambiente de aprendizado, para sua compartilhabilidade, loop de feedback rápido e foco nos fundamentos.
Este é o repositório de origem que contém o site Hugo para zero para codificar, incluindo todo o currículo aberto. Você pode ler mais sobre o próprio projeto no site.
Zero to code é um site estático construído com Hugo. Hugo é um gerador de site estático, que pega documentos de marcação e modelos HTML/CSS/JS e gera um pacote de arquivos estáticos HTML/CSS/JS que forma um site estático. Você pode aprender mais sobre como usar Hugo em gohugo.io. Esta seção do ReadMe cobre como trabalhar com Hugo no repositório da ZTC.
Você pode gerar uma nova versão do site estático a partir de modelos e páginas de marcação uma vez executando hugo .
$ hugo
...
[some info about the generated files] Se você está escrevendo e deseja ver os resultados enquanto está escrevendo uma página ou modificando modificações, poderá executar o servidor de desenvolvimento com hugo server -D .
$ hugo server -D
... serving development server at localhost:1313 Quando você inicia o servidor dessa maneira, você pode ir para localhost:1313 no seu navegador para ver uma versão de reloadia ao vivo do site enquanto edita.
O Zero to Code possui algumas personalizações que usamos além da funcionalidade nua de Hugo para tornar os tutoriais mais eficazes.
A personalização mais importante que o ZTC possui no topo de Hugo é a maneira como construímos blocos de código iluminados por sintaxe. Em vez de usar a sintaxe tripla-backtick de Markdown, usamos a sintaxe personalizada de Hugo para definir um bloco de código destacado sintaxe, como este:
{{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}
Você também pode definir um bloco de código css ou javascript em vez de html , e podemos dizer a Hugo para destacar determinadas linhas com a sintaxe "hl_lines=N1 N2 N3-N5" .
{{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}
Quando definimos um bloco de código destacado dessa maneira, nas páginas single.html (páginas de tutorial único), também temos um script que passa por todos os blocos de código ED da Alll .highlight
Às vezes, queremos incorporar uma instância interativa ao vivo de um editor de código de código na página. Atualmente, a melhor maneira de <iframe> isso é criar uma div .fixed.button.liveEditorContainer
< div class =" liveEditorContainer fixed button " >
< iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >Isso incorpora o editor de código de código especificado pelo URL na página, no tamanho certo.
button e caixas com sombras A maioria dos elementos interativos e certos elementos enfatizados (como blocos de código e imagens destacados) são levantados da superfície da página com uma sombra. A classe .button , importada da folha de estilo do CodeFrame, é responsável por essa aparância. Quando você deseja criar algum elemento levantado com uma sombra de caixa como os botões do CodeFrame, use a classe .button .
Se você deseja que o elemento não seja interativo, pode aplicar as classes .fixed.button ao elemento, que desativará as animações de pairar e ativos no botão.
Se você gosta do projeto Zero To Code, deseja apoiar o que eu faço daqui para frente, considere fazer uma doação para zero para codificar através do PayPal ou Venmo.
Como alternativa, considere doar para algumas das melhores organizações sem fins lucrativos que fazem um ótimo trabalho no espaço educacional da CS, Khanacademy, Hack Club e Stutech.
