Isaque Victor cursos gratuitosNesta aula
Uma pasta, uma janela de texto e um arquivo. É todo o ambiente que você precisa.
Programador gosta de complicar o ambiente. Para o que vamos fazer, basta uma pasta bem nomeada, um terminal que você sabe abrir e o arquivo .html.
- Abrir o terminal e entrar na pasta do projeto
- Entender o que é um arquivo .html
- Abrir a primeira página, escrita pela IA, no navegador
A pasta do projeto
Tudo mora numa única pasta. Isso define o que a IA enxerga. Se você abre a ferramenta dentro de site-escola, ela vê só o que está ali. Se abre em Documentos, ela vê contratos, planilhas e fotos.
- Nome sem espaço e sem acento:
site-padaria. - Lugar fácil de achar: dentro de Documentos, por exemplo.
- Só arquivos do projeto. A planilha de clientes fica de fora.
O terminal sem medo
O terminal é uma janela onde você digita comandos em vez de clicar. No curso inteiro, você usa três.
| Comando | O que faz | Exemplo |
|---|---|---|
cd | Entra numa pasta | cd Documentos/site-padaria |
mkdir | Cria uma pasta | mkdir site-padaria |
claude | Abre o Claude Code na pasta atual | claude |
Para abrir: no Windows, clique com o botão direito dentro da pasta e escolha "Abrir no Terminal". No Mac, aperte Command + Espaço e digite "Terminal". No Linux, use Ctrl + Alt + T.
Dica
Sem saber o caminho? Digite cd, um espaço, e arraste a pasta para dentro da janela do terminal. O caminho aparece sozinho. Aperte Enter.
O que é um arquivo .html
Um site é feito de arquivos de texto. O principal termina em .html. Dentro dele há marcações entre sinais de menor e maior, as tags. O navegador lê as tags e desenha a página.
<title>é o nome na aba do navegador.<h1>é o título principal e<p>é um parágrafo.<a href="...">é um link.- Toda tag que abre fecha com barra:
</p>.
Você não precisa decorar. Precisa reconhecer. Quando a IA disser "coloquei o telefone abaixo do título", você abre o arquivo, acha o <h1> e vê o parágrafo logo depois. A página principal se chama index.html: é o que o servidor entrega quando alguém acessa o endereço sem apontar um arquivo.
Coisa de profissional
Dar duplo clique no index.html abre a página como file://, e isso tem um limite. Nesse modo, o navegador bloqueia por segurança alguns recursos, como os módulos de JavaScript, que dão erro de CORS. Por isso quem trabalha com site testa por um servidor local, que entrega a página por http://localhost. A IA monta esse servidor em um comando, se você pedir. Se algo funciona no servidor e quebra no arquivo, é por isso.
A primeira conversa com o código
Com o terminal na pasta, peça: contexto, conteúdo, requisitos e uma explicação. Esse último item transforma a IA em professora: ela escreve e explica. A ferramenta vai pedir permissão para criar o arquivo. Aprove, abra a pasta e dê duplo clique no index.html.
Cuidado
O WhatsApp do exemplo é inventado. Use o seu no formato internacional: 55, DDD e número, sem espaços. E clique no link para conferir.
Prática · 10 min
- Abra o terminal na pasta do projeto e digite
claude. - Cole o pedido abaixo, com os seus dados. Aprove e abra o
index.htmlno navegador. - Abra o arquivo no editor, mude uma palavra do parágrafo, salve e recarregue.
index.html aberto no navegador, com uma mudança feita por você e uma feita pela IA.Resumo
- A pasta define o que a IA enxerga: sem espaço, sem acento, só o projeto.
- Três comandos bastam: cd, mkdir e claude.
- Um .html é texto com tags. O navegador desenha a página.
- file:// é só seu. Alguns recursos só funcionam por servidor local.
Fontes
Lidas em 30 de outubro de 2026.
- MDN. JavaScript modules: carregar o HTML por file:// gera erro de CORS, e o teste deve ser feito por um servidor.
Quiz da aula
Três situações para aplicar o que viu.