Criando uma homenagem programada para o Dia das Mães
A maioria das pessoas tenta fazer algo legal pro Dia das Mães e acaba gastando horas em ferramentas de arrastar-e-soltar que limitam tudo. Eu fui por isso que decidi escrever esse guia com código puro, porque pelo menos assim você tem controle do resultado final.
O que é programação para dia das mães
No sentido prático, isso significa criar um projeto digital simples — um site, uma animação ou até um gerador de cartões — usando linguagem de programação real, não templates prontos. A ideia é construir algo que sua mãe possa abrir no navegador e ver uma mensagem personalizada, talvez com uma animação ou foto. eu já vi gente perder três dias inteiros tentando customizar um template genérico. O problema é que esses editores visuais escondem a lógica por baixo, e quando algo dá errado, você não tem pra onde correr. Trabalhar com código direto evita isso completamente.
Primeiro passo: escolha a tecnologia certa
Você não precisa de React ou de nada pesado. Um arquivo HTML com um pouco de CSS e JavaScript resolve 90% dos casos. Eu recomendo começar com um único arquivo index.html que contenha tudo — estilo embutido e script inline. Isso elimina complicações de build e deployment desnecessários. Se você quiser ir além e colocar online de graça, GitHub Pages é suficiente. Basta subir o arquivo, ativar o serviço e pronto. Leva uns dois minutos.
Estrutura básica do projeto
O esqueleto funciona assim: um container central com uma imagem de fundo suave, um título animado e um botão que revela uma mensagem. A parte da animação eu faço com CSS keyframes, sem biblioteca externa. O JavaScript fica responsável só por trocar o texto quando alguém clica no botão. um detalhe que muita gente erra: colocar a animação de fade-in no carregamento da página sem considerar que o navegador pode renderizar tudo de uma vez e a animação nem aparecer. A solução é forçar um reflow usando display:none inicial e depois aplicar uma classe com um pequeno delay via setTimeout.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Um problema real que eu encontrei
Na última vez que fiz isso pro Dia das Mães, eu queria que a mensagem aparecesse em português correto, mas os acentos e emojis estavam aparecendo estranhos no celular da minha mãe. O problema era encoding: eu tinha salvo o arquivo como UTF-8 sem BOM, mas o navegador dela interpretava como Latin-1 por padrão. A solução foi adicionar a tag meta charset UTF-8 no head do HTML. Simples, mas quem nunca passou por isso perde tempo debugando o que não é bug. Depois disso, tudo funcionou perfeitamente.
Como personalizar com dados reais
Em vez de texto fixo no código, eu gosto de colocar os dados em um objeto JavaScript no início do arquivo. Assim fica fácil trocar nome, foto e mensagem sem mexer no HTML. Se quiser dar um passo a mais, dá pra usar localStorage pra salvar a mensagem que o usuário digitou, mas isso exige um pouco mais de trabalho e só faz sentido se você tiver experiência prévia. Se o seu objetivo é realmente impressionar, considere gerar um PDF em vez de só mostrar na tela. Há bibliotecas como jsPDF que convertem o conteúdo HTML em documento formatado. O processamento roda no navegador do usuário, então não precisa de servidor.
Limitações que você precisa saber
Esse tipo de projeto tem um limite claro: ele funciona apenas em navegadores modernos. Se sua mãe usa um celular antigo com Android 4 ou iOS 10, animações CSS avançadas podem travar ou simplesmente não aparecer. Nesses casos, o caminho mais seguro é manter o design simples e evitar pseudo-elementos complexos ou transforms 3D. Outro ponto: se você quer adicionar áudio ou vídeo, o navegador vai exigir interação do usuário antes de tocar qualquer coisa. Isso é uma política de segurança dos browsers, não um bug. Você precisa de um clique primeiro, e aí sim o mídia começa a rodar.
Se o projeto crescer muito, sair do simples para algo com múltiplas páginas ou lógica mais elaborada, considerar um framework faz sentido. Mas pra uma homenagem simples, HTML puro continua sendo a escolha mais eficiente em termos de tempo e compatibilidade.
Download do template base
Eu preparei um template básico em formato de arquivo único que você pode baixar e modificar. Ele já vem com a estrutura que descrevi aqui, animação de entrada funcionando, campo de mensagem dinâmico e código comentado em português. Para pegar o arquivo, basta acessar o repositório no GitHub e clicar em Code > Download ZIP. O repositório é público e pode ser clonado sem criar conta se preferir usar linha de comando. eu também deixo as instruções de personalização no arquivo README dentro do repositório, caso você tenha alguma dúvida sobre como trocar textos, cores ou imagens. O template atualizou pela última vez em março de 2025, então está compatível com os navegadores mais usados hoje.
