Escolher stack e checklist local

Neste capítulo você vai decidir uma stack para o Ateliê e conferir a entrega de estudo. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 32-fechamento do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa.

Use servidor só em 127.0.0.1 quando o README do exemplo pedir HTTP local. Abrir ou testar não publica nada.

Como praticar

Leia → copie ou digite → mude uma coisa → preveja → salve → recarregue → confira. Restaure cada experiência antes da próxima. Faça as atividades antes de abrir as respostas comentadas.

Uma pergunta por escolha

Precisa de páginas no servidor? Django ou Symfony. API JSON? FastAPI, Node ou Go. UI rica no navegador? React, Vue ou Svelte. TypeScript quando o time quer tipos no front.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

problema → stack mínima

Mude uma coisa e preveja

Escreva a stack escolhida para um Ateliê fictício de 4 semanas.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Sua escolha cabe em uma frase.

Se não acontecer

Evite listar todas as stacks.

Checklist de entrega local

1. Exemplos abrem. 2) Servidores só 127.0.0.1. 3) Testes do módulo passam. 4) Sem dados pessoais. 5) README explica como rodar. 6) Zip sem .trabalho.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

abrir → testar → limpar → zipar

Mude uma coisa e preveja

Percorra o checklist no seu projeto de prática.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Itens marcados.

Se não acontecer

Volte ao módulo com falha.

O volume termina sem publicação obrigatória

Publicar é outra decisão. Aqui você conclui com ambiente local saudável e critério de escolha. Próximos passos: aprofundar a stack escolhida nos cursos IDEA de base (HTML/CSS/JS/PHP) e na documentação oficial quando for além do estudo guiado.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

estudo local concluído

Mude uma coisa e preveja

Encerre todos os servidores abertos.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Nenhuma porta de estudo órfã.

Se não acontecer

Task Manager/terminal: Ctrl+C.

Atividades

Atividade 1

Cite uma stack mínima para API + React.

Atividade 2

Liste três itens do checklist.

Atividade 3

Publicar faz parte da nota deste volume?

Respostas comentadas

Resposta da atividade 1

Ex.: Node ou FastAPI + React estático local.

Resposta da atividade 2

Abrir exemplos; 127.0.0.1; sem dados pessoais (ou testes/README/zip).

Resposta da atividade 3

Não; o fechamento é local.

O arquivo completo

Referência do exemplo 32-fechamento, reproduzida aqui para que você possa conferir sem sair da página.

styles.css

:root{--ink:#1a1a1a;--bg:#f7f4ef;--brand:#1f3a5f;--accent:#c45c26;--line:#d9d2c5;--focus:#0b57d0}
*{box-sizing:border-box}html{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
body{margin:0;line-height:1.5}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.5rem}
header,footer{background:var(--brand);color:#fff;padding:1rem 1.25rem}header a,footer a{color:#fff}
main{max-width:52rem;margin:0 auto;padding:1.25rem}h1{color:var(--brand);margin-top:0}
.card{background:#fff;border:1px solid var(--line);padding:1rem;margin:.75rem 0}
button{background:var(--accent);color:#fff;border:0;padding:.55rem 1rem;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(3,4.5rem);gap:.4rem}
.square{width:4.5rem;height:4.5rem;font-size:1.5rem;background:#fff;border:2px solid var(--brand)}
label{display:block;margin:.5rem 0 .2rem;font-weight:600}
input,textarea{width:100%;max-width:28rem;padding:.45rem;border:1px solid var(--line)}
ul.nav{list-style:none;padding:0;display:flex;gap:1rem;flex-wrap:wrap;margin:0}
.status{font-weight:600;margin:.75rem 0}