Módulo 2 · 1 de 9
HTML, CSS e JavaScript: o trio que dá vida ao seu layout
Leitura: ~3 min
Você passou dias refinando um layout no Figma. Cada espaçamento calculado, cada cor escolhida com intenção. Exportou tudo, mandou para o dev, e na semana seguinte o botão está no lugar errado, a fonte está diferente, o espaçamento sumiu. O que aconteceu?
O problema não é descuido. É que entre o seu arquivo Figma e o que o usuário vê no navegador existe uma camada inteira de tradução. E essa tradução é feita por três tecnologias que trabalham juntas: HTML, CSS e JavaScript. Entender o papel de cada uma é o primeiro passo para participar de verdade da construção do produto.
Três papéis, um espetáculo
Pense comigo: imagine que você está montando uma peça de teatro. Para o espetáculo funcionar, você precisa de três coisas fundamentais.
O HTML é o roteiro. Ele define o que existe na página: os personagens, as cenas, a estrutura. Um título aqui, um parágrafo ali, um botão, uma imagem, um formulário. O HTML não se preocupa com aparência, ele organiza. É como o esqueleto do produto digital.
O CSS é a direção de arte. Figurino, cenário, iluminação, tudo que o público vê. Cores, tipografia, espaçamentos, sombras, cantos arredondados. Sabe aquele border-radius: 8px que você define no Figma? No código, é CSS. Sabe o Auto Layout com padding e gap? Também é CSS.
O JavaScript é a atuação. Os atores que se movem, reagem, improvisam. Abrir um menu ao clicar, validar as regras de um formulário, carregar novos dados sem recarregar a página. Quase tudo que é interativo e dinâmico passa pelo JavaScript. A exceção clássica: transições e animações visuais simples (cor, opacidade, posição) o próprio CSS resolve, como você vai ver mais adiante neste módulo.
Sem roteiro, não há peça. Sem direção de arte, não há espetáculo visual. Sem atuação, nada acontece no palco.
E o seu papel nisso tudo?
Você é o diretor. Não precisa escrever o roteiro, não precisa atuar, mas precisa entender como cada parte funciona para que o resultado saia do jeito que você imaginou. Se você pede um cenário que não cabe no palco, o cenógrafo vai ter que improvisar. E o resultado pode ser bem diferente do que você planejou.
Quando você entende essa divisão, suas conversas com devs mudam. Em vez de dizer "o botão está estranho", você pode dizer "parece que o padding está diferente do que defini, pode verificar o CSS desse componente?". Você deixa de ser alguém que apenas entrega um arquivo e passa a participar da construção do produto.
O que vem a seguir
Nas próximas três páginas, vamos abrir cada uma dessas tecnologias com mais profundidade. Você vai ver exemplos concretos, conectar cada conceito com o que já faz no Figma, e entender exatamente como a sua estrutura de camadas vira código real. Sem medo, sem jargão desnecessário.
E aqui vai um spoiler: esses conceitos que você vai aprender agora viram componentes reutilizáveis quando falamos de Design Systems. No Módulo 4, vamos explorar isso a fundo →