Página Virada
A landing page de um clube do livro fictício em Belo Horizonte, construída do zero com Bootstrap 5 para aprender o framework na prática: do grid responsivo à publicação no GitHub Pages.
- Papel
- Design, código e publicação
- Tecnologias
- Bootstrap 5 · HTML · CSS · JavaScript
- Tipo
- Projeto de estudo · 2026
- Status
- Publicado ↗
Por que um clube do livro
Na pós em Análise e Desenvolvimento de Sistemas, eu queria entender o Bootstrap além da teoria. Em vez de copiar exemplos soltos da documentação, decidi construir uma página completa, do começo ao fim, com um tema que une duas coisas que eu adoro: livros e código.
O Página Virada é um clube do livro fictício. O clube não existe, mas a página funciona de verdade: é responsiva, tem conteúdo gerado por JavaScript, formulário com validação e está publicada na internet.
Aprender construindo algo inteiro
Defini o que a página precisava ter para cobrir o essencial do framework:
- Layout que funciona em qualquer tela
- Componentes interativos do Bootstrap
- Conteúdo gerado a partir de dados
- Um visual próprio, sem cara de template
E, no fim, colocar tudo no ar com Git e GitHub Pages, como num projeto real.
O que a página faz
Grid responsivo
Layout com o grid de 12 colunas, que se reorganiza no celular, no tablet e no computador.
Estante dinâmica
Os cards dos livros são gerados por JavaScript a partir de uma lista de dados, com filtro por gênero e busca.
Componentes
Navbar que vira menu no celular, modal, agenda em tabela e perguntas frequentes em accordion.
Formulário validado
Campos obrigatórios e e-mail conferidos antes do envio, com mensagens de erro claras.
Bootstrap com identidade
Um dos meus objetivos era que a página não parecesse "mais um site de Bootstrap". Para isso, sobrescrevi as variáveis do próprio framework com um tema meu: fontes, cores, botões e espaçamentos, além de brilhos e rabiscos que dão um toque leve à página.
As capas dos livros são desenhadas só com CSS, sem nenhuma imagem, o que deixa a página leve e fácil de manter.
Stack e processo
Construí a página em etapas, testando cada parte no navegador antes de seguir para a próxima e registrando o progresso com commits.
O que precisei resolver
Um só modal para todos os livros
Em vez de escrever um modal para cada livro, criei um único modal que é preenchido com os dados do livro clicado, usando os eventos do Bootstrap e o find() do JavaScript.
O CSS que não carregava
Depois de personalizar o tema, a página continuava com a cara padrão. Em vez de reescrever tudo, investiguei por partes: testei se o arquivo estava sendo lido, conferi a estrutura de pastas e os erros no Console do navegador, até o tema aparecer. Foi ali que aprendi a depurar com método.
A página rolando para o lado no celular
Os espaçamentos largos do grid passavam da largura da tela pequena. Ajustei o espaçamento por tamanho de tela: menor no celular, maior no computador.
O que este projeto mostra
Front-end responsivo
Layouts com container, row e col que funcionam do celular ao computador.
JavaScript na prática
HTML gerado a partir de dados, filtros, busca e eventos.
Design e identidade
Personalização do framework para criar uma página com personalidade própria.
Git e publicação
Versionamento com commits e site publicado no GitHub Pages.
“Cada página virada é um passo a mais no código.”
O Página Virada foi meu primeiro projeto completo com Bootstrap: da primeira linha de HTML ao site no ar.