O que é front-end e o que faz quem trabalha com interfaces

Front-end não é “a parte fácil” do desenvolvimento. Essa ideia ficou presa nos anos em que fazer site era montar HTML e trocar cores no CSS. Hoje, quem trabalha com interfaces lida com estado de aplicação, desempenho em celular barato, acessibilidade, dezenas de tamanhos de tela e um navegador que se comporta diferente de outro.

Front-end é a parte do software que roda no dispositivo do usuário e com a qual ele interage: telas, botões, formulários, animações, mensagens de erro. Na web, isso significa o que o navegador baixa e executa. As perguntas abaixo são as que mais aparecem para quem quer entender a área ou entrar nela.

Quais são as três tecnologias da base do front-end?

HTML, CSS e JavaScript. Todo o resto é construído em cima delas.

• HTML dá a estrutura e o significado: isto é um título, isto é um botão, isto é uma lista.
• CSS cuida da aparência: cores, espaçamentos, layout, adaptação a telas diferentes.
• JavaScript traz o comportamento: abrir um menu, validar um campo, buscar dados numa API sem recarregar a página.

A área de aprendizado de HTML da MDN, em português, é o melhor ponto de partida gratuito que existe. Um detalhe que muita gente pula: usar a tag certa importa. Um <button> funciona com teclado e leitor de tela sem nenhum código extra; uma <div> com evento de clique, não.

Front-end e back-end: onde exatamente fica a fronteira?

A fronteira é a rede. O front-end roda no navegador ou no celular do usuário; o back-end roda no servidor. Os dois conversam por requisições, quase sempre HTTP com JSON.

A linha “quem vê o código” é a que mais importa na prática. Tudo o que vai para o front-end é público. Senha, chave de API paga e regra de desconto não podem ficar lá, porque qualquer pessoa abre o DevTools e lê. Quem quer entender o outro lado da fronteira tem uma explicação detalhada na página de back-end do glossário de programação.

React, Vue e Angular: preciso aprender um deles?

Para trabalhar em empresa, quase certamente sim. A maioria das vagas de front-end pede pelo menos um, e o React aparece com mais frequência nos anúncios brasileiros. Essas ferramentas organizam a interface em componentes reutilizáveis e cuidam de atualizar a tela quando os dados mudam.

Mas a ordem importa. Quem aprende React sem entender JavaScript fica preso em tutorial. Antes de qualquer um deles, consiga fazer uma página com JavaScript puro que busca dados numa API com fetch e mostra o resultado numa lista. Isso leva poucas semanas e economiza meses de confusão depois.

fetch("https://brasilapi.com.br/api/feriados/v1/2026")
  .then(r => r.json())
  .then(feriados => console.log(feriados.length, "feriados"));

E TypeScript, entra quando?

TypeScript é JavaScript com tipos: você declara que uma variável é número ou que um objeto tem tais campos, e o editor avisa antes de rodar quando algo não bate. A maioria das empresas que usa React já adotou. Aprenda depois de estar confortável com JavaScript puro, porque todo erro de TypeScript pressupõe que você entende o JavaScript por baixo.

Next.js, Vite, Tailwind: o que são essas outras siglas?

São ferramentas do ecossistema. O Next.js é um framework que organiza rotas e renderização para apps React; o Vite monta e serve o projeto durante o desenvolvimento; o Tailwind é uma forma de escrever CSS com classes utilitárias. Você vai encontrar todos em vagas, mas nenhum substitui entender a base.

O que faz no dia a dia quem trabalha com interfaces?

Menos “desenhar telas” do que muita gente imagina. Quem desenha costuma ser o designer de UI, no Figma. O dev front-end transforma esse desenho em código que funciona de verdade:

• monta componentes a partir do layout, em vários tamanhos de tela;
• conecta as telas à API do back-end e trata carregamento, erro e dado vazio;
• valida formulários e mostra mensagens úteis;
• escreve testes de componente e de fluxo;
• investiga por que uma página está lenta ou quebrando num navegador específico;
• revisa código de colegas e discute com design e back-end o que é viável.

Os estados “carregando”, “deu erro” e “não tem nada aqui” são onde se reconhece um front-end caprichado. O layout do Figma normalmente mostra só a tela cheia de dados bonitos; o resto é com você.

Desempenho é assunto de front-end?

É um dos maiores. O Google mede a experiência real de carregamento com as Core Web Vitals: LCP (quanto tempo o maior conteúdo leva para aparecer), INP (quanto a página demora para reagir a um clique) e CLS (quanto o layout pula enquanto carrega). Imagens gigantes, JavaScript demais e fontes mal carregadas são os vilões mais comuns, e todos são responsabilidade do front.

Este texto sobre como LCP e INP mostram onde o clique se perde traz exemplos de onde o desempenho afeta venda. Teste sempre num celular intermediário com 4G, não só no notebook de trabalho.

Front-end ganha menos que back-end?

Não existe regra fixa. As faixas salariais das duas áreas costumam ser parecidas no Brasil para o mesmo nível de experiência, e a diferença vem mais da empresa, do setor e da senioridade do que do lado do sistema. O que muda é o perfil das vagas: front-end tem muita oportunidade em agências, produtos digitais e e-commerce; back-end aparece mais em bancos, sistemas corporativos e empresas de infraestrutura. Escolha pela parte do trabalho que te dá vontade de abrir o editor num sábado, não por uma diferença salarial que provavelmente não existe.

Acessibilidade é obrigatória ou é detalhe?

Não é detalhe. A Lei Brasileira de Inclusão exige acessibilidade em sites de empresas e órgãos públicos, e o governo mantém orientações na página de acessibilidade digital do gov.br. Na prática, o front-end é quem implementa: textos alternativos em imagens, contraste suficiente, navegação por teclado, rótulos em campos de formulário.

Os critérios técnicos que quase todo mundo segue estão nas diretrizes WCAG 2.2 do W3C, organizadas em níveis A, AA e AAA. O nível AA é a meta mais comum em empresas.

Um teste de dois minutos revela muito: desconecte o mouse e tente usar a sua página só com Tab e Enter. Se você se perder, um usuário com deficiência motora ou visual também vai se perder.

Qual sequência de estudo leva à primeira vaga de front-end?

Uma sequência que funciona para a maioria:

1. HTML semântico e CSS com Flexbox e Grid, até conseguir copiar o layout de um site que você goste.
2. JavaScript: variáveis, funções, arrays, objetos, eventos, fetch e async/await.
3. Git e GitHub, com projetos publicados (GitHub Pages ou Vercel resolvem de graça).
4. Um framework, de preferência React, com TypeScript em seguida.
5. Noções de acessibilidade, desempenho e testes.

Três projetos pequenos e bem acabados, responsivos e com estados de erro tratados, impressionam mais em entrevista do que dez clones de tutorial. O erro a evitar a partir de agora é pular o passo 2 por ansiedade de chegar ao 4.