Renato Caixeta encontrou o projeto por acidente. O restaurante da esquina da sua casa tinha um cardápio digitalizado no celular como foto de um papel impresso. Ele pediu permissão para refazer como exercício do curso.
O problema que o projeto resolve
Cardápios em PDF ou foto são difíceis de navegar no celular, não atualizam facilmente e somem quando o link de WhatsApp muda. Uma página HTML simples resolve tudo isso sem precisar de sistema complexo.
Renato não usou nenhum framework. HTML puro, CSS com Grid, e uma estrutura de arquivos que qualquer pessoa consegue editar no bloco de notas se precisar.
Decisões de design documentadas
- Hierarquia visual por categoria de prato, não por ordem alfabética
- Preços em tamanho menor que os nomes dos pratos — escolha deliberada
- Paleta de cores retirada das fotos reais do restaurante
- Sem imagens pesadas — ícones SVG e texto descritivo no lugar
O que não funcionou de primeira
A navegação por âncoras quebrava no Safari do iPhone. Levou dois dias para descobrir que o problema era um padding-top faltando no CSS. Esse tipo de detalhe não aparece em tutorial nenhum.
O dono do restaurante não sabia o que era HTML. Ele só queria saber se dava para mudar o preço do feijão sem chamar ninguém. Dava. — Renato CaixetaO projeto está hospedado gratuitamente e o restaurante usa até hoje. Não virou case de agência, mas cumpriu o que precisava cumprir.
Como o trabalho está organizado
Estrutura do projeto
- Fase 1 — Levantamento: Fotografar o cardápio original e listar todos os itensOrganização do conteúdo antes de abrir o editor
- Fase 2 — Wireframe em papel: Esboço da estrutura de navegação por categoriaSem ferramentas digitais nesta etapa
- Fase 3 — HTML: Marcação semântica com nav, section e articleCada categoria de prato como uma section independente
- Fase 4 — CSS Grid: Layout de duas colunas para tablet, uma coluna para mobileMedia queries manuais sem biblioteca
- Fase 5 — Testes: Verificação em Chrome, Firefox e Safari mobileCorreção de bugs reais encontrados em dispositivos físicos
- Fase 6 — Entrega: Publicação no Netlify e treinamento básico para o dono atualizar preçosDocumentação escrita em linguagem não técnica