# Roadmap de Carreira Front-End usando a Maleta

Este roadmap mostra como usar a Fábrica Front-End Maleta para estudar, praticar e montar portfólio.

## Fase 1 — Base forte

Objetivo:

Dominar HTML, CSS, responsividade e organização.

Projetos recomendados:

- página pessoal
- landing page simples
- site institucional
- formulário de contato
- página de produto

Foco técnico:

- HTML semântico
- CSS organizado
- variáveis CSS
- responsividade
- acessibilidade básica
- README simples

Meta:

Criar 5 projetos pequenos e bem finalizados.

## Fase 2 — Portfólio inicial

Objetivo:

Criar projetos que um recrutador consiga abrir e entender rapidamente.

Projetos recomendados:

- site para clínica
- landing page de serviço local
- página para restaurante
- portfólio dev
- home SaaS

Foco técnico:

- visual mais profissional
- CTA claro
- mobile bem acabado
- commits organizados
- README completo
- deploy funcionando

Meta:

Ter 3 a 5 projetos publicados.

## Fase 3 — JavaScript

Objetivo:

Adicionar interação nos projetos.

Ideias de prática:

- menu mobile
- modal
- FAQ abre e fecha
- filtro de cards
- formulário com validação
- dark mode
- contador
- tabs
- busca simples

Meta:

Evoluir 3 projetos da maleta com JavaScript.

## Fase 4 — Projetos mais fortes

Objetivo:

Construir projetos com aparência de vaga júnior.

Projetos recomendados:

- dashboard administrativo
- home e-commerce
- página de curso
- formulário multi-etapas
- página com filtros
- mini sistema de cards

Foco técnico:

- estado com JavaScript
- manipulação do DOM
- organização de arquivos
- experiência do usuário
- documentação técnica

Meta:

Criar pelo menos 2 projetos fortes com JavaScript.

## Fase 5 — API

Objetivo:

Consumir dados externos e mostrar domínio prático.

Ideias:

- buscar produtos de uma API
- listar usuários
- consumir API de clima
- consumir API de CEP
- criar dashboard com dados mockados
- criar catálogo dinâmico

Meta:

Criar 1 projeto com consumo de API.

## Fase 6 — React

Objetivo:

Recriar projetos da maleta em React.

Caminho:

- transformar header em componente
- transformar cards em componentes
- usar props
- usar estado
- usar listas
- usar rotas
- consumir API
- organizar pastas

Projetos recomendados:

- portfólio dev em React
- dashboard em React
- catálogo de produtos em React
- landing page componentizada

Meta:

Criar 1 projeto React apresentável.

## Fase 7 — Preparação para vaga

Objetivo:

Ter um portfólio que mostre capacidade real de entrega.

Checklist mínimo:

- 3 projetos HTML e CSS bem feitos
- 2 projetos com JavaScript
- 1 projeto com API
- 1 projeto em React
- todos com README
- todos com deploy
- todos com prints
- todos com descrição profissional

## Regra de ouro

Não coloque projeto fraco no portfólio.

É melhor ter 4 projetos bons do que 20 projetos inacabados.

## Como usar a maleta toda semana

Segunda:

Escolher projeto e preencher briefing.

Terça:

Criar estrutura e adaptar HTML.

Quarta:

Adaptar CSS e responsividade.

Quinta:

Revisar acessibilidade, visual e performance.

Sexta:

Criar README, commits finais e publicar.

Sábado:

Criar prints e salvar no portfólio.

Domingo:

Revisar aprendizados e planejar a próxima evolução.