Antes de escrever uma linha de código profissional, você precisa entender o que acontece entre digitar uma URL e ver uma página na tela. Entrevistas técnicas adoram essa pergunta.

1.1 O caminho de uma requisição

1. DNS — o navegador traduz exemplo.com em um endereço IP.
2. Conexão — abre-se uma conexão segura (TLS/HTTPS) com o servidor, hoje geralmente via HTTP/2 ou HTTP/3.
3. Requisição e resposta — o navegador envia um GET e recebe HTML, que referencia CSS, JS, imagens e fontes.
4. Renderização — o navegador constrói o DOM (estrutura do HTML) e o CSSOM (estilos), combina os dois na render tree, calcula layout e pinta os pixels.

1.2 Front-end, back-end e o papel de cada um

Este material foca no par front-end + design — a combinação mais valorizada em times pequenos, startups e trabalho freelancer, onde uma pessoa que projeta e implementa vale por duas.

Você já sabe o básico de HTML. Este módulo eleva o nível: semântica correta, formulários profissionais, mídia e acessibilidade — o que separa um código amador de um código contratável.

2.1 Semântica: o HTML que máquinas e pessoas entendem

Elementos semânticos descrevem significado, não aparência. Eles melhoram SEO, acessibilidade (leitores de tela) e — cada vez mais importante — a capacidade de agentes de IA lerem e operarem seu site.

<!-- Ruim: sopa de divs -->
<div class="topo">...</div>

<!-- Bom: semântica clara -->
<header>
  <nav aria-label="principal">...</nav>
</header>
<main>
  <article>
    <h1>Título único da página</h1>
    <section>
      <h2>Subtema</h2>
    </section>
  </article>
  <aside>Conteúdo relacionado</aside>
</main>
<footer>...</footer>

Regras de ouro

• Um único <h1> por página; níveis de título sem pular (h1 → h2 → h3).
• <button> para ações, <a> para navegação. Nunca uma div clicável.
• <div> e <span> só quando nenhum elemento semântico servir.

2.2 Formulários que convertem (e não frustram)

Formulário é onde o dinheiro acontece: cadastro, checkout, contato. HTML moderno valida muita coisa sem JavaScript.

<form>
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email"
         required autocomplete="email"
         placeholder="voce@exemplo.com">

  <label for="tel">Telefone</label>
  <input type="tel" id="tel" name="tel"
         inputmode="tel" autocomplete="tel">

  <button type="submit">Criar conta</button>
</form>

• autocomplete correto aumenta conversão em mobile — o navegador preenche sozinho.
• inputmode abre o teclado certo no celular (numérico, e-mail, URL).
• Todo input precisa de um label associado. Placeholder não substitui label.

2.3 Imagens e mídia modernas

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descrição real da imagem"
       width="800" height="600" loading="lazy">
</picture>

• AVIF/WebP: formatos até 50% menores que JPEG.
• width/height evitam "pulo" de layout (CLS — Módulo 7).
• loading="lazy" adia imagens fora da tela.

2.4 Acessibilidade essencial (a11y)

Acessibilidade não é opcional: é lei em vários países (no Brasil, LBI — Lei 13.146), é critério de contratação e melhora o produto para todos.

• Alt text descritivo em imagens informativas; alt="" em decorativas.
• Contraste mínimo 4.5:1 para texto (WCAG AA).
• Navegação por teclado: tudo que é clicável deve funcionar com Tab e Enter.
• ARIA só quando o HTML nativo não resolve — a primeira regra do ARIA é não usar ARIA.

O CSS de 2026 é outra linguagem comparado ao de 2018. Muita coisa que exigia JavaScript ou pré-processadores hoje é nativa. Dominar isso te coloca à frente de boa parte do mercado.

3.1 Layout: Flexbox e Grid — quando usar cada um

/* Galeria que se adapta sozinha — sem media queries */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

3.2 Custom Properties (variáveis CSS) e design tokens

Variáveis CSS são a base dos design systems: mude uma vez, atualize tudo — inclusive em tempo real (tema escuro, personalização).

:root {
  --cor-primaria: #0E7C66;
  --espaco-m: 1rem;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --cor-primaria: #6EE7C8; }
}
.botao {
  background: var(--cor-primaria);
  padding: var(--espaco-m);
  border-radius: var(--radius);
}

3.3 O CSS que substituiu JavaScript

Recursos que já têm suporte amplo nos navegadores e que você deve conhecer para se destacar:

Container Queries — componentes que se adaptam ao contêiner

.card-wrapper { container-type: inline-size; }

@container (min-width: 400px) {
  .card { flex-direction: row; } /* card horizontal se couber */
}

Diferente de media queries (que olham a tela), container queries olham o espaço disponível — essencial para componentes reutilizáveis.

:has() — o "seletor de pai"

/* Destaca o campo cujo input está inválido */
.campo:has(input:invalid) { border-color: crimson; }

/* Layout muda se houver imagem no card */
.card:has(img) { grid-template-rows: auto 1fr; }

Nesting nativo, cascade layers e mais

• Nesting nativo — aninhe seletores sem Sass: .card { &:hover { ... } }
• @layer — organize a cascata em camadas (reset, base, componentes, utilitários) e acabe com guerras de especificidade.
• Subgrid — filhos alinhados ao grid do avô; cards com alturas perfeitamente alinhadas.
• clamp() — tipografia fluida: font-size: clamp(1rem, 2.5vw, 1.5rem).
• color-mix() e oklch() — cores mais perceptualmente uniformes e mistura nativa.

3.4 Animações modernas Avançado

Scroll-driven animations (sem JS)

/* Barra de progresso de leitura, 100% CSS */
@keyframes crescer { to { transform: scaleX(1); } }

.barra-progresso {
  transform: scaleX(0);
  transform-origin: left;
  animation: crescer linear;
  animation-timeline: scroll(root);
}

View Transitions — transições entre páginas

A View Transitions API permite animações suaves entre estados e até entre páginas diferentes, aproximando sites da fluidez de apps nativos:

@view-transition { navigation: auto; } /* MPA: entre páginas */

.produto-img { view-transition-name: produto-hero; }
/* A imagem "voa" da listagem para a página de detalhe */

Código sem design é um produto que ninguém quer usar. Aqui estão os fundamentos que designers cobram — e que desenvolvedores que sabem aplicar ganham mais por dominar.

4.1 Hierarquia visual: guiando o olhar

O usuário não lê, ele escaneia. Hierarquia é o que decide o que ele vê primeiro:

• Tamanho — o maior elemento é lido primeiro.
• Contraste — peso, cor e fundo destacam o que importa.
• Espaço — espaço em branco agrupa e separa; é o recurso mais subestimado por iniciantes.
• Posição — em interfaces ocidentais, o padrão de leitura é F ou Z.

4.2 Tipografia funcional

• Corpo de texto: 16px no mínimo; altura de linha 1.5–1.7.
• Largura de linha ideal: 45–75 caracteres (use max-width: 65ch).
• Escala tipográfica: escolha uma razão (1.25, 1.333…) e derive todos os tamanhos dela.
• Máximo de 2 famílias por projeto: uma para títulos, uma para texto.

4.3 Cor com método

• Regra 60-30-10: 60% cor dominante (fundos), 30% secundária, 10% destaque (ações).
• Defina cores por função, não por gosto: primária (ação), sucesso, alerta, erro, neutros.
• Teste contraste (WCAG AA: 4.5:1 para texto, 3:1 para texto grande e componentes).
• Nunca comunique só com cor: erro = cor + ícone + texto.

4.4 Espaçamento em sistema

Adote uma escala baseada em múltiplos (4px ou 8px): 4, 8, 12, 16, 24, 32, 48, 64. Decisões de espaçamento viram escolhas em um cardápio, não chutes — e o layout inteiro ganha ritmo.

4.5 Heurísticas de usabilidade (Nielsen) — as 5 mais cobradas

1. Visibilidade do status — o sistema sempre informa o que está acontecendo (loading, salvo, erro).
2. Controle do usuário — desfazer, cancelar, voltar sempre disponíveis.
3. Consistência — mesma ação, mesmo nome, mesmo lugar, em todo o produto.
4. Prevenção de erros — melhor que boas mensagens de erro é impedir o erro (confirmação, formatos claros).
5. Reconhecimento em vez de memorização — mostre opções em vez de exigir que o usuário lembre.

4.6 Fluxo de trabalho com Figma

O Figma é o padrão da indústria. O fluxo profissional típico:

1. Wireframe — estrutura sem estética (caixas cinzas).
2. UI Design — aplicação do design system: cores, tipografia, componentes.
3. Protótipo — telas conectadas e clicáveis para teste.
4. Handoff — dev inspeciona medidas, tokens e assets (Dev Mode).

JavaScript transforma documentos em aplicações. Aqui está o essencial moderno — o suficiente para construir interfaces reais e entender qualquer framework depois.

5.1 DOM e eventos com delegação

// Delegação: um listener no pai cuida de todos os filhos,
// inclusive os criados depois
const lista = document.querySelector('.tarefas');

lista.addEventListener('click', (e) => {
  const botao = e.target.closest('[data-acao="remover"]');
  if (botao) botao.closest('li').remove();
});

5.2 Assíncrono: fetch + async/await

async function carregarUsuarios() {
  try {
    const resp = await fetch('https://api.exemplo.com/usuarios');
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
    const dados = await resp.json();
    renderizar(dados);
  } catch (erro) {
    mostrarErro('Não foi possível carregar. Tente novamente.');
  }
}

Padrão profissional: sempre trate os três estados — carregando, sucesso e erro. Interfaces que ignoram o estado de erro são o defeito nº 1 em testes técnicos de júnior.

5.3 JavaScript moderno que você deve dominar

• Desestruturação e spread: const { nome, ...resto } = usuario
• Optional chaining: usuario?.endereco?.cidade
• Módulos ES: import / export nativos no navegador.
• Array methods: map, filter, reduce, find, e os imutáveis toSorted, toReversed.
• Intl: formatação nativa de moeda e data — new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).

5.4 TypeScript: o padrão do mercado Avançado

TypeScript adiciona tipos ao JavaScript e domina as vagas: a maioria das posições de front-end pleno+ exige. O ganho: erros pegos antes de rodar, autocompletar confiável e código autodocumentado — e é também o que torna a colaboração com IA mais segura, pois o compilador valida o que a IA gera.

interface Usuario {
  id: number;
  nome: string;
  email: string;
  plano?: 'free' | 'pro';  // opcional e restrito
}

function saudacao(u: Usuario): string {
  return `Olá, ${u.nome}!`;
}

Componentização é a ideia central do front-end moderno: interfaces são montadas com blocos reutilizáveis, testáveis e documentados. É aqui que dev e design se encontram de verdade.

6.1 Pensando em componentes: Atomic Design

6.2 Web Components: componentes nativos do navegador

class BadgeStatus extends HTMLElement {
  connectedCallback() {
    const tipo = this.getAttribute('tipo') ?? 'info';
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        span { padding: 2px 10px; border-radius: 999px; font: 600 12px sans-serif; }
        .ok    { background: #E3F2EE; color: #0E7C66; }
        .erro  { background: #FBEAE6; color: #B3402E; }
      </style>
      <span class="${tipo}"><slot></slot></span>`;
  }
}
customElements.define('badge-status', BadgeStatus);

// Uso: <badge-status tipo="ok">Ativo</badge-status>

Shadow DOM encapsula estilos (nada vaza para dentro ou para fora) e <slot> permite conteúdo customizado. Web Components funcionam em qualquer framework — por isso são a base de design systems corporativos multiplataforma.

6.3 Frameworks: o mapa de 2026

O modelo mental do React (vale para todos)

import { useState } from 'react';

function Contador() {
  const [total, setTotal] = useState(0);
  return (
    <button onClick={() => setTotal(total + 1)}>
      Cliques: {total}
    </button>
  );
}

A ideia-chave: UI = função(estado). Você não manipula o DOM; você muda o estado e a interface se atualiza. Entenda isso profundamente e qualquer framework fica fácil.

6.4 Design Systems profissionais

Um design system é mais que uma biblioteca de componentes: é tokens + componentes + documentação + governança.

1. Tokens — decisões nomeadas (cor, espaço, tipo, sombra) compartilhadas entre Figma e código, cada vez mais no padrão W3C Design Tokens (JSON).
2. Componentes — acessíveis por padrão, com estados definidos (hover, focus, disabled, loading, erro).
3. Documentação — Storybook é o padrão: cada componente com exemplos vivos, props e diretrizes de uso.
4. Governança — quem aprova mudanças, versionamento (semver), changelog.

Referências para estudar: Material Design (Google), Polaris (Shopify), Primer (GitHub) — todos públicos.

O que separa o profissional sênior: não basta funcionar, tem que ser rápido, escalável e seguro. Este módulo é o que mais aparece em entrevistas de nível pleno e sênior.

7.1 Core Web Vitals — as métricas que o Google (e recrutadores) medem

Como melhorar cada uma:

• LCP: otimize imagens (AVIF/WebP), use fetchpriority="high" no herói, sirva de CDN, minimize CSS bloqueante.
• INP: quebre tarefas longas de JS, use web workers para trabalho pesado, evite re-renders desnecessários.
• CLS: reserve espaço com width/height e aspect-ratio; nunca insira conteúdo acima do que já está visível.

7.2 Estratégias de renderização

7.3 Otimização de carregamento

• Code splitting — carregue só o JS da rota atual (import() dinâmico).
• Tree shaking — o bundler remove código não usado.
• Preload / preconnect — antecipe recursos críticos e conexões.
• Cache e Service Workers — funcionamento offline e cargas instantâneas (PWA).
• Debounce/throttle — limite a frequência de eventos caros (scroll, resize, digitação).

7.4 Segurança front-end essencial

• XSS — nunca injete HTML de usuário sem sanitizar; prefira textContent a innerHTML.
• CSP (Content Security Policy) — cabeçalho que restringe de onde scripts podem vir.
• HTTPS sempre e cookies com HttpOnly, Secure, SameSite.
• Nunca exponha chaves/segredos no front-end — eles são públicos por definição.
• Dependências — audite pacotes (npm audit); a maior parte dos ataques hoje vem da cadeia de suprimentos.

7.5 Ferramentas de qualidade que times sérios usam

• Lighthouse / PageSpeed — auditoria de performance, a11y, SEO.
• ESLint + Prettier — padronização e prevenção de bugs.
• Testes — Vitest/Jest (unidade), Playwright (end-to-end).
• CI/CD — GitHub Actions rodando lint, testes e deploy automáticos.

A inteligência artificial não substituiu desenvolvedores e designers — mudou o que eles fazem. Este módulo é sobre trabalhar com IA para se tornar mais valioso, não obsoleto.

8.1 Como a IA está mudando o front-end

• Escrever código deixou de ser o gargalo. Assistentes geram componentes, testes e refatorações em segundos. O gargalo virou saber o que pedir, revisar e integrar.
• O valor migrou para cima. Arquitetura, decisões de produto, acessibilidade, performance e julgamento de qualidade — coisas que a IA sugere mas não garante.
• Design-to-code encurtou a distância entre Figma e produção, tornando o perfil dev+design ainda mais estratégico.

8.2 Fluxo de trabalho assistido por IA (o novo normal)

1. Especificar — você descreve intenção, restrições e critérios de aceitação com clareza.
2. Gerar — a IA produz um rascunho (componente, layout, função, teste).
3. Revisar criticamente — você audita: está acessível? seguro? performático? condiz com o design system?
4. Integrar e testar — ajusta ao projeto real, roda testes, valida em navegadores.
5. Iterar — refina com feedback específico.

8.3 Projetando para a era da IA

Interfaces conversacionais e generativas

Cada vez mais produtos têm um copiloto, busca semântica ou UI que se adapta ao usuário. Padrões de UX que você deve dominar:

• Streaming de respostas — mostrar texto surgindo aos poucos reduz percepção de espera.
• Estados de incerteza — IA erra; a interface precisa deixar revisar, corrigir e reverter.
• Transparência — indicar quando o conteúdo é gerado por IA e permitir controle humano.
• Skeletons e loaders inteligentes — respostas de IA têm latência variável; a UX precisa acomodar isso.

Sites legíveis por agentes

Uma mudança estrutural: parte do seu "usuário" agora é um agente de IA que navega, extrai informação e executa ações em nome de pessoas. Implicações práticas:

• HTML semântico e dados estruturados (Schema.org / JSON-LD) tornam seu site operável por agentes.
• Fluxos claros, formulários bem rotulados e estados previsíveis ajudam agente e humano igualmente.
• Emergem convenções para expor capacidades e conteúdo a agentes de forma controlada — vale acompanhar, pois deve amadurecer em 2026.

8.4 O que a IA não faz (seu diferencial)

• Entender o contexto de negócio e priorizar o que realmente importa para usuários reais.
• Assumir responsabilidade por decisões de arquitetura, segurança e acessibilidade.
• Garantir coerência de produto ao longo do tempo e entre equipes.
• Ter gosto: julgar o que é bom, o que fica no lugar do que é possível.

Um mapa das direções que estão se consolidando. A regra vale para todas: acompanhe, mas construa sobre fundamentos sólidos — modas passam, princípios ficam.

9.1 Tendências técnicas (código)

• CSS cada vez mais poderoso — a plataforma nativa absorve o que antes exigia bibliotecas: scroll-driven animations, view transitions, :has(), container queries e novas primitivas de layout consolidam-se, reduzindo a dependência de JS.
• Server Components e "menos JS" — a tendência é enviar menos JavaScript ao navegador, com renderização no servidor e ilhas de interatividade. Arquiteturas como RSC e "islands" ganham espaço.
• Meta-frameworks maduros — a escolha migra de "qual framework" para "qual meta-framework" (Next, Nuxt, SvelteKit, Astro), com foco em performance e DX.
• Build tooling mais rápido — ferramentas em Rust/Go (bundlers e toolchains de nova geração) tornam builds quase instantâneos.
• TypeScript como padrão de fato — praticamente onipresente em vagas de nível pleno+.
• WebAssembly — expande o que roda no navegador com desempenho quase nativo (edição de mídia, jogos, ferramentas pesadas).

9.2 Tendências de design (UI/UX)

• Interfaces adaptativas e generativas — UIs que se ajustam ao contexto, à intenção e ao histórico do usuário, muitas vezes montadas dinamicamente com apoio de IA.
• Design para multimodalidade — voz, texto, toque e câmera coexistindo; a tela deixa de ser o único canal.
• Big/expressive typography e layouts editoriais — tipografia como protagonista, quebra de grid, mais personalidade e menos "template".
• Motion com propósito — micro-interações e transições que orientam, viabilizadas nativamente por view transitions.
• Dark mode e personalização como padrão — temas, densidade e preferências de acessibilidade como requisito, não extra.
• Design ético e sustentável — acessibilidade real, redução de padrões manipulativos (dark patterns) e web de baixo consumo energético entram na pauta.
• Espacial e 3D no navegador — WebGL/WebGPU e cenas 3D leves para produtos e portfólios que querem se destacar.

9.3 Tendências de processo e carreira

• Perfis híbridos valorizados — "product engineer", "design engineer", "UI engineer": quem cruza design, código e produto ganha protagonismo.
• IA como colega de trabalho — fluência em ferramentas de IA vira requisito básico; o diferencial é o julgamento humano por cima.
• Design tokens padronizados — o padrão W3C de Design Tokens aproxima ainda mais design e engenharia.
• Foco renovado em fundamentos — com IA gerando o trivial, dominar HTML, CSS, acessibilidade e performance volta a ser o que separa profissionais.

Conhecimento técnico abre a porta; posicionamento consegue a vaga. Este módulo é o mapa prático para transformar o que você aprendeu em uma carreira.

10.1 Trilhas de carreira dev + design

10.2 Portfólio que contrata

Recrutadores olham portfólio antes do currículo. O que faz diferença:

• 3 a 5 projetos fortes valem mais que 15 fracos. Qualidade sobre quantidade.
• Estudos de caso, não só telas — mostre o problema, suas decisões, alternativas descartadas e o resultado. Processo > pixel.
• Diversidade proposital — um app com estado, um site institucional performático, um componente/design system, um projeto com IA.
• Código no GitHub — README claro, commits organizados, deploy funcionando (Vercel/Netlify/GitHub Pages).
• O próprio site do portfólio é sua maior peça: acessível, rápido (Lighthouse 90+) e com personalidade.

10.3 Currículo e presença profissional

• Currículo de 1 página, focado em resultados ("reduzi o LCP de 4s para 1,8s"), não em lista de tecnologias soltas.
• LinkedIn atualizado; publique aprendizados — visibilidade gera oportunidade.
• GitHub ativo diz mais que qualquer declaração de habilidade.
• Contribua para open source, mesmo que pequeno (documentação, correções): prova colaboração real.

10.4 Preparação para entrevistas técnicas

• Fundamentos — box model, especificidade CSS, event loop, closures, diferença entre == e ===, o que é o DOM.
• Live coding — pratique construir um componente do zero pensando em voz alta; comunicar o raciocínio conta mais que acertar de primeira.
• Acessibilidade e performance — cada vez mais cobradas; saber falar de Core Web Vitals e WCAG impressiona.
• Perguntas de sistema/design (pleno+) — "como você estruturaria um design system?", "como otimizaria uma listagem com 10 mil itens?".
• Comportamentais — use o método STAR (Situação, Tarefa, Ação, Resultado).

10.5 Freelance e primeiros clientes

• Comece por negócios locais sem presença digital decente — problema real, resultado visível.
• Precifique por valor/projeto, não por hora, quando puder.
• Contrato simples sempre: escopo, prazo, valor, número de revisões.
• Todo cliente satisfeito = depoimento + case novo no portfólio.

Três projetos completos que reúnem tudo. Cada um foi desenhado para virar uma peça central de portfólio e provar competências que recrutadores procuram.

Projeto A — Landing page de produto (dev + design + performance)

Objetivo: uma landing page real, do design ao deploy.

• Design no Figma com escala tipográfica, sistema de 8px e paleta com contraste AA.
• HTML semântico, CSS moderno (grid, container queries, variáveis), zero framework.
• Uma animação com propósito (scroll-driven ou view transition).
• Meta: Lighthouse 95+ em todas as categorias; LCP < 2s; CLS 0.
• Deploy público + estudo de caso documentando decisões.

Projeto B — App com estado e API (JS/framework + UX)

Objetivo: uma aplicação interativa que consome dados reais.

• Ex.: painel de clima, buscador de filmes, gestor de tarefas com categorias.
• Três estados sempre tratados: carregando, erro, vazio.
• Roteamento, componentes reutilizáveis e estado bem organizado.
• Acessível por teclado e leitor de tela; responsivo de 320px a 1440px.
• Bônus: TypeScript e ao menos um teste automatizado.

Projeto C — Mini Design System com IA no fluxo (o diferencial)

Objetivo: demonstrar o perfil dev+design de ponta.

• 8–10 componentes com tokens compartilhados (cor, espaço, tipo) e estados completos.
• Documentação viva no Storybook, com diretrizes de uso.
• Todos os componentes acessíveis por padrão (foco visível, ARIA quando necessário).
• Use IA para acelerar a geração e documente sua revisão crítica de cada saída.
• Escreva um README explicando a governança (versionamento, como contribuir).

Termos que você vai encontrar em documentações, vagas e entrevistas — em ordem alfabética.

Acessibilidade (a11y)

Práticas que tornam a web utilizável por todas as pessoas, incluindo usuários de tecnologias assistivas.

ARIA

Atributos que descrevem papéis e estados a tecnologias assistivas quando o HTML nativo não é suficiente.

Bundler

Ferramenta que empacota e otimiza módulos JS/CSS para produção (ex.: Vite, esbuild, Turbopack).

Cascade Layers (@layer)

Recurso CSS que organiza a cascata em camadas nomeadas, controlando prioridade sem "guerra de especificidade".

CDN

Rede de servidores distribuídos que entrega arquivos a partir do ponto mais próximo do usuário.

CLS

Cumulative Layout Shift: métrica de estabilidade visual; mede "pulos" inesperados de layout.

Container Query

Estilo condicional baseado no tamanho do contêiner do elemento, não da tela.

Core Web Vitals

Conjunto de métricas do Google (LCP, INP, CLS) para experiência do usuário.

CSR / SSR / SSG / ISR

Estratégias de renderização: no cliente, no servidor, estática e estática incremental.

Design System

Conjunto de tokens, componentes, documentação e regras que garante consistência de produto.

Design Tokens

Decisões de design nomeadas (cores, espaços, tipos) reutilizáveis entre design e código.

DOM

Document Object Model: representação em árvore do HTML que o JS manipula.

Flexbox / Grid

Sistemas de layout CSS para uma dimensão (Flexbox) e duas dimensões (Grid).

:has()

Seletor CSS relacional que estiliza um elemento com base em seus descendentes ("seletor de pai").

INP

Interaction to Next Paint: mede a rapidez com que a interface responde a interações.

Islands Architecture

Padrão que hidrata apenas partes interativas da página, mantendo o resto estático.

LCP

Largest Contentful Paint: tempo até o maior elemento de conteúdo ficar visível.

PWA

Progressive Web App: site com capacidades de app (offline, instalável) via Service Workers.

RSC

React Server Components: componentes renderizados no servidor que reduzem o JS enviado ao cliente.

Shadow DOM

Encapsulamento de estrutura e estilo dentro de um Web Component.

Skeleton

Placeholder que simula o layout enquanto o conteúdo real carrega.

SPA / MPA

Single-Page Application (uma página que troca conteúdo via JS) vs Multi-Page Application.

Storybook

Ferramenta para desenvolver e documentar componentes de UI isoladamente.

Tree shaking

Remoção automática de código não utilizado durante o build.

TypeScript

Superset de JavaScript com tipagem estática; padrão de mercado em projetos sérios.

View Transitions API

API que anima transições entre estados e páginas de forma nativa.

WCAG

Web Content Accessibility Guidelines: diretrizes internacionais de acessibilidade (níveis A, AA, AAA).

WebAssembly (Wasm)

Formato binário que roda no navegador com desempenho quase nativo.

Web Component

Componente reutilizável nativo do navegador (Custom Elements + Shadow DOM + templates).

XSS

Cross-Site Scripting: injeção de scripts maliciosos; mitigada por sanitização e CSP.