Ingredientes da receita
| Ingrediente | Por que entra? | Do que é feito? |
|---|---|---|
| HTML | É o molho de tomate. Vai em quase toda pizza, é a base sobre a qual o resto se apoia. | header, nav, main, section, article, footer, h1, p, img, a, form |
| CSS | São as azeitonas pretas. Dão o toque final, sem isso é só massa crua. | margin, padding, background, color, font-size, display, flex, grid, border-radius |
| JavaScript | É a mussarela. O que todo mundo pede, derrete em tudo, dá vida. | querySelector, addEventListener, classList, scrollIntoView, localStorage |
| Git | É a pimenta calabresa. Dá tempero e segurança: cada mudança fica registrada, você desfaz sem pânico e empurra para o remoto quando estiver pronto. | git init, git add, git commit, git push, .gitignore |
| Vercel | É a pedra refratária do forno. Transforma pasta local em site público com HTTPS, build automático e URL que você manda no WhatsApp. | Conta + import do repositório, build estático, domínio *.vercel.app, preview por branch |
💡 Do Chef: "Cada ingrediente tem seu momento. Primeiro a massa, depois o molho, depois o queijo. Não inverta a ordem — a pizza desanda."
Modo de preparo
Seu progresso (itens marcados) fica salvo neste navegador em localStorage. Em outro aparelho ou após limpar os dados do site, a receita começa outra vez.
Carregando itens da receita…
Etapa 1: Preparando a massa (A ideia)
⏱️ Estimado: 30 minutos
🎯 Objetivo: Definir O QUÊ e PARA QUEM antes de codar.
💬 Do Chef: "A pior pizza é aquela que você começa a fazer sem saber o sabor. Rabisque antes de ligar o forno."
Etapa 2: Espalhando o molho (HTML puro)
⏱️ Estimado: 2–3 horas
🎯 Objetivo: Estrutura semântica, zero estilo. Deve parecer 1999.
💬 Do Chef: "Se abrir no navegador e não parecer feio, você trapaceou. Molho puro é assim — vermelho, molhado, sem graça. Mas é a base de tudo."
Etapa 3: Distribuindo as azeitonas (CSS puro)
⏱️ Estimado: 4–6 horas
🎯 Objetivo: Sem frameworks. Sua mão, seu olho, seu gosto.
💬 Do Chef: "Azeitona demais estraga. CSS demais também. Menos é mais — cada propriedade deve ter um propósito."
Etapa 4: Derretendo a mussarela (JavaScript leve)
⏱️ Estimado: 3–4 horas
🎯 Objetivo: Só onde o navegador não resolve sozinho. Derreta com cuidado.
💬 Do Chef: "Mussarela demais pesa. JS demais também. Se o navegador já faz sozinho, não reinvente."
Etapa 5: Ao forno! (Deploy)
⏱️ Estimado: 1–2 horas
🎯 Objetivo: URL pública. Seu amigo no iPhone deve abrir e querer comer.
💬 Do Chef: "Pizza no forno de casa não conta. Tem que sair da cozinha. Publica. Agora."
Pizza servida! Você desbloqueou: Margherita de Bronze — sua primeira pizza na mesa do cliente. O aprendizado vale mais que a perfeição.
Recompensas secretas (desbloqueáveis)
| Conquista | Como desbloquear |
|---|---|
| Margherita de Bronze | Complete todas as etapas e publique |
| Margherita de Prata | Adicione animações CSS (@keyframes) |
| Margherita de Ouro | Implemente tema escuro com prefers-color-scheme |
| Chef estrelado | Receba um elogio de um recrutador no LinkedIn |
Armadilhas do Chef
⚠️ "Vou usar Bootstrap pra ficar bonito rápido"
→ Você está comprando molho de pacote. Não aprende o sabor verdadeiro.
⚠️ "Depois eu faço responsivo"
→ A pizza queima. Mobile-first ou não faz.
⚠️ "O formulário precisa de backend agora"
→ Não precisa. Simule. Uma coisa por vez, chef.
"Algumas pizzas queimam, e tudo bem. O aprendizado de uma POC vale mais que a perfeição de um boilerplate."