Do que um site é feito
Aula 3 de 26 do curso “Vibe coding”. Grátis, com animações e teste.
Frontend: o que você vê
Frontend é tudo que carrega no navegador, ou seja, o que você vê e toca. Ele é feito com três linguagens. HTML: a estrutura, ou seja, títulos, botões, imagens. CSS: a aparência, ou seja, cores, fontes, layout. JavaScript (JS): o comportamento, ou seja, o que acontece quando você toca num botão. Resumindo: HTML é o esqueleto, CSS a roupa, JS os movimentos.
Backend: verificações e chaves
O backend, ou servidor, é código que roda não no seu navegador, mas num computador na nuvem, ou seja, num data center, um prédio cheio de servidores. O visitante não vê esse código. Por isso é lá que acontece o importante: conferir a senha no login, calcular o total do pedido, falar com serviços pagos usando chaves secretas. O frontend pede, o backend confere e responde.
Banco de dados: a memória do projeto
O banco de dados é onde os dados ficam guardados, como uma planilha gigante. Usuários, pedidos, recordes de um jogo, sua sequência de dias num rastreador. Fechou a aba, o frontend esquece tudo, mas o banco lembra. Normalmente quem fala com ele é o backend: decide quem pode ler ou mudar o quê. Na imagem é o cilindro à direita, o jeito tradicional de desenhar um banco de dados.
Hospedagem, domínio e DNS
Hospedagem (hosting) é um computador que entrega seu site 24 horas por dia para quem abrir. Domínio é um nome humano tipo mysite.com, para ninguém precisar decorar o endereço numérico do servidor. Quem liga os dois é o DNS, a lista telefônica da internet: o navegador pergunta “onde mora mysite.com?” e recebe o endereço da hospedagem. Seu domínio próprio é comprado num registrador e renovado, geralmente uma vez por ano.
Site ou app
Site estático é só frontend: todo mundo vê as mesmas páginas. Landing page, portfólio, calculadora: não precisam de servidor nem de banco. App é frontend mais backend e banco de dados. Exemplo: um rastreador de hábitos. Os botões “feito” e a tela de estatísticas: frontend. Login com senha: backend. Sua sequência de dias salva: banco de dados. Site estático é mais simples de criar e de hospedar.
Por que isso importa
Quando você conhece as partes, fica claro de qual serviço precisa e o que pedir para a IA. O código fica no GitHub. Hospedagens como Cloudflare ou Vercel publicam o site. Serviços como Supabase dão o banco de dados. Mais sobre isso nos próximos níveis. Muitos têm plano grátis; veja os limites no site do serviço. E avise a IA logo de cara: “é um site estático” ou “preciso de login e banco de dados”.
Teste-se
- Onde a senha do usuário deve ser conferida?
Resposta certa: No backend, ou seja, no servidor. Qualquer visitante pode ler o código do frontend. Verificações e segredos ficam no servidor, que ninguém vê. - O que o DNS faz?
Resposta certa: Acha o endereço da hospedagem pelo domínio. O DNS funciona como lista telefônica: pelo nome mysite.com o navegador descobre em qual computador o site está. - Um portfólio de três páginas com seus trabalhos. Do que ele precisa?
Resposta certa: Só frontend e hospedagem. Todo mundo vê a mesma coisa e nada é salvo: é um site estático. Servidor e banco são exagero aqui.
← Construtor, editor ou agente Como passar uma tarefa para a IA →