Frontend
A dúvida mais comum de quem está começando: “eu estudo front, back ou os dois?”. A resposta depende do tipo de problema que você gosta de resolver — e do que o mercado da sua região está contratando.
É a camada que o usuário vê e toca: layout, formulários, responsividade, acessibilidade e performance no navegador.
- Base: HTML, CSS, JavaScript
- Hoje no mercado: React ou Vue, TypeScript, consumo de APIs
- Você vai gostar se: se importa com UX, design e feedback visual
Backend
É a lógica de negócio, dados, autenticação, filas e integrações. O usuário quase nunca “vê” o backend — mas sente quando ele falha.
- Base: uma linguagem (Python, Node, Java, Go…), SQL, HTTP/APIs
- Hoje no mercado: APIs REST, banco relacional, autenticação, Docker
- Você vai gostar se: gosta de modelar regras, dados e sistemas
Fullstack
Não é “saber tudo”. É conseguir entregar uma feature de ponta a ponta: tela + API + banco, com deploy mínimo. Em times pequenos e startups, isso é ouro.
Roadmap enxuto para a primeira vaga
- HTML/CSS + JavaScript básico (2–4 semanas de prática diária)
- Git + GitHub com projetos públicos
- Uma trilha: ou React ou API em Python/Node
- SQL (SELECT, JOIN, índices básicos)
- 1 projeto completo deployado + README forte
Cursos gratuitos na IRN Devs que encaixam nesse caminho: Git do zero, HTML/CSS, SQL e JavaScript.
Comparativo lado a lado
| Critério | Frontend | Backend | Fullstack |
|---|---|---|---|
| O que entrega | telas, formulários e interação | regras de negócio, dados e APIs | a feature inteira, da tela ao banco |
| Base técnica | HTML, CSS e JavaScript | uma linguagem, SQL e HTTP | o essencial das duas camadas |
| Ferramentas comuns | React ou Vue, TypeScript | Python, Node, Java ou Go, banco relacional, Docker | o que a feature exigir |
| Você tende a gostar se | se importa com UX e feedback visual | gosta de modelar regras e sistemas | gosta de ver a solução funcionando de ponta a ponta |
| Onde começar aqui | curso-html-css e curso-js | curso-sql e curso-python | os quatro, mais Git |
Exemplo: uma feature de ponta a ponta
O que significa "entregar uma feature" em um botão de salvar pedido:
| Camada | O que acontece | Onde estudar |
|---|---|---|
| Tela (frontend) | o formulário coleta os dados e envia com fetch | HTML/CSS e JavaScript |
| API (backend) | valida os dados e responde em JSON | Python ou Node, HTTP |
| Banco de dados | grava o pedido com INSERT | SQL |
| Deploy | a aplicação fica acessível por uma URL pública | Git, Docker ou hospedagem simples |
const r = await fetch("/api/pedidos", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ cliente: "Ana", total: 120.5 })
});
const pedido = await r.json(); // {"id": 42, "status": "novo"}| Trecho | O que faz |
|---|---|
fetch("/api/pedidos", {...}) | envia uma requisição HTTP para a API |
method: "POST" | indica que está criando um recurso |
"Content-Type": "application/json" | avisa à API que o corpo é JSON |
JSON.stringify({...}) | transforma o objeto em texto JSON |
await r.json() | lê a resposta da API e a converte em objeto |
O roadmap em etapas
| Etapa | Entrega | Curso do site |
|---|---|---|
| 1 | HTML/CSS e JavaScript básico, com prática diária | curso-html-css-modulo-1 e curso-js-modulo-1 |
| 2 | Git e GitHub com projetos públicos | curso-git-modulo-1 |
| 3 | Uma trilha: React ou uma API em Python/Node | curso-js-modulo-3 (Fetch e JSON) ou curso-python-modulo-6 (APIs) |
| 4 | SQL: SELECT, JOIN e índices básicos | curso-sql-modulo-1 |
| 5 | Um projeto completo publicado, com README forte | curso-html-css-modulo-4 e curso-js-modulo-4 |