Intervalo: melhore seu editor de texto

Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem!

Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu.

Uma janela do Bloco de Notas mostrando o código HTML de "Blake's Homepage". A página tem um título, uma tag de imagem com a fonte "space.jpg" e o texto alternativo "Photograph of space with stars and stardust", e seções sobre hobbies e o gosto de ensinar, usando vários elementos HTML.

Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código.

Baixe o Visual Studio Code

Vá até https://code.visualstudio.com/. Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico.

Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo.

Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim:

Captura de tela da tela de boas-vindas do Visual Studio Code. A barra lateral inclui opções como "Explorer," "Search," "Source Control," "Run" e "Extensions." A tela principal mostra a opção "Open Folder..." com guias para começar no VS Code e aprender o básico.

Abra o seu projeto

Na tela de boas-vindas do VS Code, clique em Open Folder e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo index.html, vai ver o código numa vista agradável, com números de linha e o que se chama destaque de sintaxe — partes do código ganham cores para se diferenciar melhor das outras.

Captura de tela do Visual Studio Code com o código HTML de "Blake's Homepage." A barra lateral esquerda mostra os arquivos do projeto. O editor principal mostra o mesmo código de antes, mas colorido para facilitar a distinção entre as partes.

O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão.

O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas.

Explore quando estiver pronto

O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro.

Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta.

Por agora, vamos voltar a fazer o nosso site!

A seguir

Agora que melhoramos o editor de texto, vamos aprender a adicionar estilo ao nosso site.