Frontend: HTML, CSS e JavaScript¶

Definição: frontend

Frontend é a parte de uma aplicação web que roda no navegador: o que o usuário vê e com o que interage. Três tecnologias formam a base: HTML (estrutura e conteúdo), CSS (aparência) e JavaScript (comportamento). Frameworks como Angular, React e Vue constroem sobre elas.

O fluxo básico: o navegador faz uma requisição HTTP (Backend), recebe um documento HTML, interpreta, busca CSS, JavaScript e imagens e monta a página.

HTML: estrutura do documento¶

HTML (HyperText Markup Language) é uma linguagem de marcação: usa tags (<tag>) para dizer o que é cada trecho (título, parágrafo, link, tabela). Um documento HTML5 mínimo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Título que aparece na aba</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>
  <header><h1>Meu site</h1></header>
  <main>
    <p>Texto com <strong>destaque</strong> e <em>ênfase</em>.</p>
  </main>
  <footer>&copy; 2026</footer>
  <script src="app.js" defer></script>
</body>
</html>

<!DOCTYPE html> diz ao navegador a versão (HTML5). As antigas declarações HTML 4.01 (Strict, Transitional, Frameset) e XHTML ficaram obsoletas; valide com o validador do W3C.
<html> é a raiz (com lang); <head> guarda metadados (codificação utf-8, título, estilos, viewport para celular); <body> guarda o conteúdo visível.
Boas regras herdadas do XHTML: tags e atributos em minúsculas, atributos entre aspas, tags fechadas e bem aninhadas.
Elementos de bloco (div, p, h1...h6, ul) ocupam a linha toda; em linha (span, a, strong) fluem no texto; <br> quebra a linha.

HTML semântico e acessibilidade¶

Prefira tags que descrevem o significado: header, nav, main, section, article, aside, footer, figure. Ajudam SEO, leitores de tela e manutenção. Acessibilidade (WCAG): texto alternativo em imagens (alt), rótulos de formulário (label), contraste de cores, navegação por teclado, hierarquia correta de títulos (acessibilidade em Qualidade).

Texto, listas, links e imagens¶

<h2>Título</h2>
<ul><li>Item</li><li>Outro item</li></ul>                      <!-- lista não ordenada (ol = ordenada) -->
<a href="https://exemplo.com" target="_blank" rel="noopener">link externo</a>
<a href="#secao">âncora na mesma página</a>
<img src="foto.jpg" alt="Descrição da imagem" width="300" loading="lazy">

Links: URLs absolutas (https://...) e relativas (../pasta/pagina.html); âncoras #id; target="_blank" deve vir com rel="noopener" (segurança).
Imagens: formatos JPEG (fotos), PNG (transparência), SVG (vetorial), WebP/AVIF (modernos); sempre alt; dimensões para evitar saltos de layout.

Tabelas¶

<table>
  <thead><tr><th>Produto</th><th>Preço</th></tr></thead>
  <tbody><tr><td>Caneta</td><td>R$ 2,50</td></tr></tbody>
</table>

tr (linha), th (cabeçalho), td (célula), colspan/rowspan (mesclar). Use tabelas para dados, não para posicionar o layout (isso é papel do CSS).

Formulários¶

<form action="/contatos" method="post">
  <label for="nome">Nome</label>
  <input id="nome" name="nome" type="text" required>
  <input name="email" type="email" required>
  <select name="uf"><option value="SP">São Paulo</option></select>
  <textarea name="msg"></textarea>
  <button type="submit">Enviar</button>
</form>

Tipos de input: text, email, password, number, date, checkbox, radio, file, hidden. GET envia pelos parâmetros da URL (consultas); POST envia no corpo (criação, dados sensíveis). Validação do navegador (required, pattern) não substitui a validação no servidor; proteja contra XSS e CSRF (Segurança web).

XML¶

XML (eXtensible Markup Language) descreve dados em tags escolhidas por você, com regras de boa formação (uma raiz, tags fechadas, aninhamento correto). Foi base de integração (SOAP, RSS, configuração) e hoje divide espaço com JSON (mais leve). Esquemas (XSD) validam a estrutura; XSLT e XPath transformam e consultam.

CSS: aparência¶

CSS (Cascading Style Sheets) separa conteúdo (HTML) de apresentação. Três formas de aplicar: externo (arquivo .css, o recomendado e reaproveitável por várias páginas), interno (<style>) e em linha (style="", evite). O "cascata" define qual regra vence: especificidade (id > classe > tag), ordem e !important.

:root { --cor-principal: #0b5cad; }                 /* cores em hexadecimal: #RRGGBB (branco #FFFFFF, preto #000000), rgb(), hsl() */
body  { font-family: "Segoe UI", Arial, sans-serif; color: #222; }   /* lista de fontes: se a 1ª não existir, usa a próxima */
.cartao { background: #fff; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
h1, h2 { color: var(--cor-principal); text-align: center; text-decoration: none; }
a:hover { text-decoration: underline; }

Seletores: tag (p), classe (.cartao), id (#topo), descendente (nav a), pseudoclasses (:hover).
Texto: font-family, font-size (px, rem, %), font-weight (normal 400, negrito 700), text-align, text-decoration (underline, line-through, none).
Cores: no sistema RGB a cor é mistura de vermelho, verde e azul (00 a FF cada): branco = #FFFFFF; atenção a contraste e harmonia.
Modelo de caixa (box model): cada elemento = conteúdo + padding (espaço interno) + border + margin (espaço externo).
Layout moderno: Flexbox (display:flex, uma dimensão) e Grid (display:grid, duas dimensões); design responsivo com media queries (@media (max-width: 600px)) e a abordagem mobile first.

JavaScript: comportamento¶

JavaScript roda no navegador (e no servidor com Node.js, veja Node.js) e manipula a página (DOM), reage a eventos e faz requisições sem recarregar:

const botao = document.querySelector("#enviar");
botao.addEventListener("click", async () => {
  const resp = await fetch("/api/contatos");              // requisição assíncrona (Ajax)
  const dados = await resp.json();
  document.querySelector("#lista").textContent = `${dados.length} contatos`;   // textContent (não innerHTML) evita XSS
});

DOM (Document Object Model) é a árvore de objetos que representa o HTML; querySelector, addEventListener, classList, textContent a manipulam.
Conceitos para entrevistas: let/const (não var), funções e closures, assincronia (callbacks, Promises, async/await), event loop, escopo e this, == x ===, módulos (import/export), armazenamento (localStorage, cookies) e CORS (Backend).
TypeScript adiciona tipos estáticos e é o padrão em projetos grandes.

Do navegador ao framework¶

Camada	O que resolve
HTML/CSS/JS puros	Páginas simples e entendimento da base
Bibliotecas e frameworks (React, Vue, Angular)	Componentes, estado, roteamento no cliente (SPA)
Renderização no servidor (SSR/SSG: Next.js, Nuxt, Thymeleaf, JSF)	Desempenho inicial e SEO
Ferramentas (npm, Vite, ESLint, Prettier, testes com Playwright/Cypress)	Build, qualidade e testes

Desempenho percebido (Core Web Vitals: LCP, INP, CLS), segurança (CSP, escapar saídas) e acessibilidade são os três eixos de qualidade do frontend.

Para responder em entrevista¶

Pergunta	Ideias para a resposta
"O que é HTML semântico e por que importa?"	Tags com significado (`nav`, `main`, `article`); melhora SEO, acessibilidade e manutenção
"Explique o modelo de caixa."	Conteúdo, padding, borda e margem
"Flexbox x Grid?"	Flexbox: uma dimensão (linha/coluna); Grid: duas dimensões
"GET x POST em formulários?"	GET: parâmetros na URL, idempotente, para consulta; POST: corpo, para criar/alterar e dados sensíveis
"O que é o DOM?"	Árvore de objetos do documento, manipulada por JavaScript
"Como evitar XSS no frontend?"	Escapar a saída (`textContent`), sanitizar HTML, CSP