~/mapas/frontend

Mapa de carreira: Frontend

Frontend é a porta de entrada mais procurada em desenvolvimento, e por isso a mais concorrida. O erro mais comum de quem começa é pular direto para o framework: React resolve muito, mas entrevista técnica cobra o que está embaixo — como o navegador carrega uma página, como o JavaScript trata assincronismo, por que o layout quebrou.

Este mapa segue a ordem em que cada bloco destrava o próximo numa entrevista real, e não a ordem de dificuldade. Cada nó marcado como essencial aparece em praticamente toda vaga; os recomendados são o que separa quem passa da triagem; os opcionais são especialização, e vale escolher um em vez de tentar todos.

  • 5 etapas
  • 22 tópicos
  • 14 essenciais

Essencial aparece em praticamente toda vaga. Recomendado é o que passa da triagem. Opcional é especialização — escolha uma em vez de tentar todas.

  1. Etapa 1

    Como a web funciona

    Ao terminar, você consegue explicar o que acontece entre digitar uma URL e a página aparecer — a pergunta de entrevista mais antiga e mais reveladora que existe.

    • essencial

      Sem isso, todo erro de rede vira mistério: 404, 500, CORS e cache são conversas diferentes, e confundi-las custa horas de depuração.

      no glossáriopraticar

    • essencial

      É o único item da lista que você usa em 100% dos dias de trabalho, e o primeiro que um time percebe que você não domina.

      no glossário

    • essencial

      Instalar dependência, rodar build e ler log acontecem no terminal — evitar isso é aceitar depender de interface gráfica que nem sempre existe.

      no glossário

    • essencial

      A aba Network responde a maior parte das perguntas de "por que não funciona" antes de você abrir o editor.

  2. Etapa 2

    HTML e CSS de verdade

    Ao terminar, você monta qualquer layout responsivo sem framework de CSS e entende por que a estrutura semântica muda o resultado no Google e no leitor de tela.

    • essencial

      Usar a tag certa resolve de graça metade da acessibilidade e boa parte do SEO — e é o que separa um site que funciona de um monte de div.

    • essencial

      São os dois sistemas de layout que resolvem 95% das telas; quem os domina para de brigar com posicionamento.

    • essencial

      A maior parte do tráfego brasileiro é de celular — layout que só funciona no desktop é layout quebrado para a maioria.

    • recomendado

      Deixou de ser diferencial: contraste, foco visível e navegação por teclado aparecem em revisão de código e em exigência de contrato público.

    • recomendado

      Alguma abordagem de escala aparece em quase todo projeto novo; qual delas importa menos que entender o problema que resolvem.

  3. Etapa 3

    JavaScript com profundidade

    Ao terminar, você resolve exercício de entrevista sem framework e entende o que o React está fazendo por baixo.

    • essencial

      É o conteúdo que aparece em teste técnico de triagem, quase sempre sem permissão de usar biblioteca.

      no glossário

    • essencial

      Todo framework é uma camada sobre isto — quem entende o DOM depura problema que o React não explica.

    • essencial

      É o assunto que mais reprova candidato júnior, porque erra silenciosamente: o código roda, só que na ordem errada.

    • essencial

      Ler, validar e tratar erro de resposta é metade do trabalho diário de frontend.

      no glossáriopraticar

    • essencial

      Deixou de ser diferencial e virou requisito na maioria das vagas pleno e sênior no Brasil.

      no glossário

  4. Etapa 4

    Framework e ecossistema

    Ao terminar, você entrega uma aplicação completa com rotas, estado, dados remotos e autenticação.

    • essencial

      Domina os anúncios brasileiros com folga; Angular e Vue aparecem, mas em volume muito menor.

      no glossáriover vagas

    • essencial

      Os anúncios pararam de exigir Redux e passaram a pedir TanStack Query — cache de servidor virou o problema central.

    • recomendado

      Virou o padrão de fato para React em produção no Brasil, principalmente onde SEO importa.

    • recomendado

      Saber onde guardar token, o que expira e por que cookie httpOnly existe evita a falha de segurança mais comum em projeto de portfólio.

      no glossáriopraticar

  5. Etapa 5

    Qualidade e performance

    Ao terminar, você tem os argumentos que diferenciam um candidato pleno de um júnior experiente.

    • recomendado

      Testing Library e Playwright aparecem nas descrições de vaga de time maduro — e a ausência de testes no portfólio é notada.

      ver vagas

    • recomendado

      Peso de imagem e JavaScript desnecessário são as duas causas de site lento — e as duas mais fáceis de demonstrar que você sabe resolver.

      praticar

    • recomendado

      Publicar o próprio projeto com pipeline automatizado é o item de portfólio que mais impressiona por menos esforço.

      no glossáriover vagas

    • opcional

      Em empresa com produto grande, o trabalho diário é consumir e manter o design system, não desenhar telas do zero.

      ver vagas

Do mapa para o mercado

Estudar sem olhar o que está sendo anunciado é estudar no escuro. Veja quantas vagas de frontend estão abertas agora, quanto por cento dos anúncios divulga salário e quem mais contrata — e compare a faixa com a base de salários antes de negociar.

Outras trilhas

## faq

Perguntas frequentes

Quanto tempo leva para conseguir a primeira vaga de frontend?

Depende muito mais da dedicação semanal e do portfólio do que do total de meses. Quem estuda com constância e publica dois ou três projetos reais — com deploy, versionamento e algum teste — costuma começar a receber respostas entre seis meses e um ano. O que atrasa quase todo mundo é pular os fundamentos e travar na primeira pergunta de entrevista que não é sobre React.

Preciso terminar o mapa inteiro antes de me candidatar?

Não, e esperar é o erro mais caro. Os nós essenciais das quatro primeiras etapas já cobrem o que a maioria das vagas júnior pede. Excesso de requisito em anúncio é comum e frequentemente negociável — candidate-se quando atender à maior parte dos essenciais e siga estudando os recomendados enquanto os processos correm.

React, Angular ou Vue?

React, se o critério for empregabilidade no Brasil — a diferença de volume de anúncios é grande. Angular concentra vagas em empresa grande e setor corporativo, e Vue aparece em produtos menores e agências. Vale lembrar que o framework é a parte mais fácil de trocar: quem domina JavaScript, o DOM e assincronismo migra entre eles em semanas.

Faculdade é necessária para frontend?

A maioria das vagas de desenvolvimento não exige diploma específico, e o portfólio pesa mais na entrevista técnica. A graduação, porém, abre programas de estágio e trainee de empresa grande, concursos e vagas de setor regulado que pedem nível superior — não é obrigatória, mas fecha portas quando falta.