⏱ Temporizador
00:00
Início

🎯 Como usar este Trainer

🧠

Quizzes por Tópico

Questões de múltipla escolha com feedback imediato e explicação para cada tema da prova.

🃏

Flashcards

Cartões de memorização para HTTP, CSS, HTML e conceitos de internet. Clique para virar.

🔧

Corrija o HTML

Encontre e identifique erros em trechos de código HTML quebrado. Exercício prático.

✍️

Respostas Dissertativas

Pratique respostas abertas com gabarito guia para treinar a escrita da prova.

🏗️

Desafio de Página

Checklist de elementos que uma página profissional deve ter. Pontue sua implementação.

⏱️

Temporizador Pomodoro

Use o timer no canto inferior direito para sessões de estudo focadas com pausa programada.

Tópico 1

HTML Fundamentals Quiz

Questão 1 de 8
✓ 0

Exercício

🔧 Corrija o HTML Quebrado

✍️ Dica: clique no código abaixo e edite o HTML em tempo real para corrigi-lo antes de ver a resposta.

#1 — Link e imagem com erros

⚠ Quebrado
<a href="">Clique aqui</a> <img src="foto.jpg"> <h1>Título</h2>
<a href="https://exemplo.com">Clique aqui</a> <img src="foto.jpg" alt="Descrição da foto"> <h1>Título</h1>
3 erros: (1) <a> sem href válido — links precisam de destino. (2) <img> sem alt — obrigatório para acessibilidade e SEO. (3) Tag fechada errada (</h2> ao invés de </h1>).

#2 — Formulário mal estruturado

⚠ Quebrado
<form> <input type="txt" name="nome"> <input type="email"> <input type="submit" value="Enviar"> </form>
<form action="/enviar" method="POST"> <label for="nome">Nome</label> <input type="text" id="nome" name="nome" required> <label for="email">E-mail</label> <input type="email" id="email" name="email" required> <input type="submit" value="Enviar"> </form>
Erros corrigidos: (1) type="txt" → type="text". (2) inputs sem label associado (acessibilidade). (3) input de email sem name. (4) form sem action e method. (5) campos sem required.

#3 — Estrutura semântica incorreta

⚠ Quebrado
<div id="header"> <div><a href="#">Home</a> | <a href="#">Sobre</a></div> </div> <div id="main"> <div><h2>Artigo</h2><p>Conteúdo...</p></div> </div>
<header> <nav><a href="#">Home</a> | <a href="#">Sobre</a></nav> </header> <main> <article><h2>Artigo</h2><p>Conteúdo...</p></article> </main>
Princípio: Use tags semânticas (<header>, <nav>, <main>, <article>) ao invés de <div> genérico. Isso melhora SEO, acessibilidade e legibilidade do código.
Tópico 2

Fundamentos da Internet

🔍 Simulação DNS: Veja o que acontece quando você digita www.google.com no navegador.
1
Você digita www.google.com no navegador
2
Navegador verifica o cache local — nada encontrado
3
Consulta o Resolver DNS do provedor de internet (ISP)
4
Resolver consulta o Root Nameserver → aponta para servidores .com
5
Servidor TLD (.com) aponta para nameservers do Google
6
Google responde com o IP: 142.250.xxx.xxx
7
Navegador conecta ao IP via TCP + HTTP/HTTPS → página carrega! ✓
Questão 1 de 8
✓ 0

Tópico 3

Domínios Brasileiros (.br)

🇧🇷

CGI.br

Comitê Gestor da Internet no Brasil. Coordena e integra as iniciativas do uso da internet no país. Define estratégias e padrões.

📋

NIC.br

Núcleo de Informação e Coordenação do Ponto BR. Executa as decisões do CGI.br e gerencia o registro de domínios .br.

🔗

Registro.br

Serviço do NIC.br responsável por registrar e gerenciar domínios .br. Acessível em registro.br para cadastro pelo titular.

🏷️

Tipos de domínio .br

.com.br Comercial · .edu.br Educação · .gov.br Governo · .org.br Organizações · .net.br Infraestrutura

Questão 1 de 5
✓ 0

Tópico 4

CSS Fundamentals

🃏 Flashcards CSS — Clique no cartão para revelar a resposta. Memorize cada propriedade.

Propriedade CSS
display: flex
Layout
Ativa o Flexbox no elemento pai. Os filhos se tornam flex items, alinhados em linha por padrão. Use justify-content e align-items para controlar posicionamento.
1 / 10
Questão 1 de 8
✓ 0

Tópico 5

Responsive Design

Mobile-first: Escreva CSS para mobile primeiro, depois use @media (min-width: Xpx) para adicionar estilo para telas maiores. O contrário quebra em muitas situações.

🎯 Qual media query usar?

@media (max-width: 768px) {
  /* 📱 Estilos para MOBILE (max-width = aplica até X) */
}
@media (min-width: 768px) {
  /* 💻 Estilos para TABLET e acima (min-width = aplica A PARTIR de X) */
}
@media (min-width: 1024px) {
  /* 🖥️ Estilos para DESKTOP */
}
Questão 1 de 5
✓ 0

Tópico 6

Acessibilidade (A11Y)

❌ Inacessível
<img src="logo.png">
<div onclick="...">Clique</div>
<button>X</button>
<p style="color:#aaa">Texto</p>
✓ Acessível
<img src="logo.png" alt="Logo da empresa">
<button onclick="...">Clique</button>
<button aria-label="Fechar modal">X</button>
<p style="color:#fff">Texto</p>
Questão 1 de 6
✓ 0

Tópico 7

HTTP Methods — Flashcards

🃏 Clique no cartão para ver quando e como cada verbo HTTP é usado.

Verbo HTTP
GET
Leitura
Busca/lê dados do servidor sem modificá-los. Idempotente. Dados vão na URL (query string). Retorna 200 OK. Ex: GET /usuarios → lista de usuários.
1 / 5
🗂️ Cenários — Qual verbo usar?

"Exibir o perfil do usuário #5"

GET /usuarios/5

"Criar um novo produto na loja"

POST /produtos

"Substituir todos os dados do usuário #3"

PUT /usuarios/3

"Atualizar só o email do usuário #7"

PATCH /usuarios/7

"Remover o produto #12 do sistema"

DELETE /produtos/12

"Verificar se o servidor aceita POST /pedidos sem enviar dados"

OPTIONS /pedidos

Tópico 8

Frontend vs. Backend

🎨 Frontend
HTML — estrutura e conteúdo da página
CSS — estilos, cores, layout, responsividade
JavaScript — interações, animações, DOM
Roda no navegador do usuário
O usuário vê e interage diretamente
Frameworks: React, Vue, Angular, Svelte
⚙️ Backend
Node.js, Python, PHP, Java, Ruby, .NET
Processa lógica de negócio
Acessa e manipula banco de dados (SQL/NoSQL)
Roda no servidor (invisível ao usuário)
Expõe APIs REST para o frontend consumir
Frameworks: Express, Django, Laravel, Spring
Questão 1 de 5
✓ 0

Tópico 9

Questões Dissertativas (Nível Difícil)

Escreva sua resposta baseada em cenários do mundo real e depois revele o gabarito. O objetivo é testar sua capacidade analítica antes da prova.

1 Por que simplesmente hospedar um site "Desktop" e outro "Mobile" sob URLs separadas (ex: m.exemplo.com) não é mais recomendado? O que o Design Responsivo oferece como solução técnica a esse problema?

Hospedar versões separadas (como m.exemplo.com) gera conteúdo duplicado (o que prejudica severamente o SEO no Google) e exige criar o dobro do esforço de manutenção. Mudar algo requer alterar dois códigos fontes distintos.

O Design Responsivo (via Media Queries do CSS) soluciona isso ao utilizar uma única base de código HTML sob a mesma URL para todos os usuários. O CSS simplesmente detecta dinamicamente as proporções de tela do usuário e rearranja o layout sob demanda, garantindo uma manutenção simplificada e ótima padronização SEO.

2 Imagine um aplicativo web de delivery de comida. Dê ao menos dois exemplos práticos de processos exclusivos que correm pelo Frontend e processos exclusivos que ficam a cargo da camada Backend em um ciclo de vida do pedido.

Frontend (Roda no Browser do Cliente):
1. Interação e Validação: Valida visualmente (campos vermelhos) se o usuário digitou o número do cartão antes de sequer tentar enviar os dados.
2. Renderização Dinâmica: Constrói o layout contendo a foto da comida e atualiza o subtotal da comanda sem recarregar a página (via JS/React/Vue).

Backend (Lógica de Negócios e Banco de Dados):
1. Segurança da Transação: Envia magicamente e se comunica de forma autenticada com a operadora de cartão de crédito para efetivar a cobrança e aprovar a transação real (o FrontEnd não pode realizar cobranças pois o código do cliente pode ser fraudado).
2. Manipulação de Persistência: Grava no banco de dados (MySQL) o registro oficial daquela compra para histórico, faturamento e gestão.

3 Durante uma auditoria de acessibilidade (A11Y), você identifica dezenas de tags <img> omitindo as suas propriedades alt. Quais os riscos em omitir esse atributo e quais casos o valor em branco alt="" é realmente aceito?

Riscos em Omitir o Alt:
1. Exclusão Digital Acusatória (WCAG): Deficientes visuais que utilizam Screen Readers não farão ideia do contexto da imagem. Em alguns cenários, a voz do software acabará lendo a URL do arquivo para tentar compensar (ex: "logo_versao_3_final_nova.png"), arruinando o fluxo de uso da página.
2. Problema grave de SEO: Crawler Bots limitados também não sabem identificar imagens como humanos, então não indexam ou deixam de referenciar o que deveria ser um ativo importante para rankings do Google Imagens.

Exceção - quando manter alt="" em branco: Quando a imagem for algo de valor puramente estético e decorativo (ex: uma linha divisória customizada, ícones estéticos de suporte) pois previne os leitores de tela de perder tempo tentando anunciar cada grafismo não-essencial.

4 Sobre a separação de código entre HTML, CSS e JS: Qual o benefício extremo de desempenho alcançado pelos navegadores na renderização inicial ao importamos o CSS de maneira externa (<link rel="stylesheet" href="style.css">) comparado a incorporar estilos inline repetitivos para sites na arquitetura de múltiplas páginas?

A grande vantagem para performance em sites tradicionais é a capacidade de Armazenamento em Cache (Cache no Cliente).

Se o nosso site tem 50 páginas (Home, Sobre, Contato...), ao abrir a primeira página ("Home"), o browser detectará e fará o download da folha de estilos style.css na memória de longo prazo dele.
Ao clicar para navegar na página "Sobre", o comportamento natural do navegador evita refazer o download repetitivo por rede de todo aquele enorme arquivo CSS! O visual completo já virá direto da memória local na casa dos milissegundos, resultando em navegação rápida nas demais telas. Estilos puramente *Inline*, todavia, forçariam todo o peso de banda do código no Payload de tráfego HTML sempre a cada navegação diferente.

5 O Protocolo HTTP é considerado nativamente um protocolo do tipo "Stateless" (sem memória de estado). Explique o que essa característica técnica significa sob a perspectiva de um navegador que envia duas requisições subsequentes a um mesmo site. O que utilizamos para contornar tecnicamente essa grande limitação?

Um protocolo Stateless quer dizer que cada requisição da transação HTTP é avulsa, auto contida e tem esquecimento amnésico total.

Logo, em estado puro e natural do HTTP se o usuário se logar com uma requisição POST e depois clicar para abrir um link, o servidor não terá qualquer noção ou memória de que essa segunda ou décima requisição (GET) também é do mesmo internauta já outrora logado.

Cura do Estado da Web: Para contornar essa regra e termos "Sessões contínuas" na Web moderna com login, os programadores embutem pedaços constantes de informação nos Headers. Métodos comuns incluem uso da biblioteca de Cookies de navegador armazenados localmente e/ou uso de JWT Authorization Tokens.

6 A tag HTML <form> define a forma de entrada de dados nativa. Descreva as diferentes funções cruciais dos atributos action="..." e method="..." que pertencem ao elemento, indicando qual será o comportamento assumido do navegador dependendo do método implementado (GET vs POST).

action → Define o endereço de destino (A URL Endpoint do Backend) que a requisição deverá chamar ativando submissões. Exemplo: action="/processar_cadastro"

method → Declara a Verbo HTTP da requisição.

Método GET: O browser pegará todos os dados dos Inputs (id, name, valor) do Form e empilhará todos publicamente legíveis na ponta da URL em um processo dinâmico conhecido como querystrings (Ex: /?usuario=joao123&pass=abc), muito usado em formulários de buscas em catálogos.

Método POST: Esconde os dados completamente da URL superior. Eles são encapsulados debaixo dos panos dentro do Body (Corpo) do Pacote e criptografados (graças ao certificado TLS do HTTPS padrão), o que é mandatório ao processar transações de alta sensibilidade como envio de senhas, edição de conta ou emissões bancárias.
Tópico 10

🏗️ Desafio Prático — Code Playground

Desafio: Crie uma Página de Produto real usando o mini-editor integrado abaixo. À medida que você digita, o resultado aparece na janela ao lado. Após concluir as tarefas, clique em "Validar Código" para o sistema testar sua arquitetura.
Progresso do Desafio 0%
Leia as tarefas abaixo, programe e valide!
💻 index.html
👁️ Live Preview
Revisão

📚 12 Módulos do Curso

Conceitos-Chave

  • ARPANET (1969) — primeira rede militar interconectada
  • TCP/IP (1983) — padronização dos protocolos
  • Tim Berners-Lee (1991) — inventor do WWW (HTTP + HTML)
  • Mosaic (1993) — primeiro navegador gráfico popular
  • Web 1.0 → 4.0 — evolução de páginas estáticas a IA
  • Cliente/Servidor — Request → Response

Para Não Esquecer

  • O DNS converte URLs em IPs
  • TLD = sufixo do domínio (.com, .br)
  • HTTP/2 = multiplexação de streams
  • HTTP/3 usa QUIC (UDP)
  • DevTools → aba Network mostra requisições

Verbos HTTP

  • GET — busca/lê dados (idempotente)
  • POST — cria novo recurso (201 Created)
  • PUT — substitui recurso inteiro (200 OK)
  • PATCH — atualiza parcialmente
  • DELETE — remove (200 ou 204)
  • HEAD — igual ao GET, sem body

Exemplo de Request

// Requisição HTTP típica
GET /api/users/1 HTTP/1.1
Host: api.exemplo.com
Accept: application/json

// Resposta
HTTP/1.1 200 OK
{ "id": 1, "name": "Maria" }

Tags Semânticas

  • <header> — cabeçalho da página
  • <nav> — menus de navegação
  • <main> — conteúdo principal (único)
  • <section> — seção temática com heading
  • <article> — conteúdo autônomo
  • <footer> — rodapé

Esqueleto HTML5

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Página</title>
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Infraestrutura

  • VPS — servidor virtual isolado em nuvem
  • Static Site — apenas HTML/CSS/JS
  • CI/CD — entrega contínua automatizada
  • Git — controle de versão distribuído
  • Render.com — deploy de sites estáticos

Fluxo Git

# Publicar no ar
git add .
git commit -m "feat: nova feature"
git push origin main
# → CI/CD detecta e faz deploy!

Fases do Design

  • Wireframe — rascunho estrutural
  • Mockup — versão estática colorida
  • Protótipo — versão clicável (Figma)
  • Hierarquia visual — guiar o olhar
  • Heurísticas de Nielsen — 10 princípios

Boas Práticas

  • Feedback imediato para ações do usuário
  • Consistência de padrões visuais na UI
  • Validação em tempo real nos forms
  • Mobile-first design (80%+ do tráfego)
  • Usar espaço em branco estrategicamente

Padrões WCAG

  • WCAG — Web Content Accessibility Guidelines
  • aria-label — descreve para leitores de tela
  • role="..." — define papel semântico
  • alt="" — descrição textual de imagens
  • Contraste mínimo — 4.5:1 (texto normal)
  • Foco visível — indicador para teclado

Exemplo ARIA

<!-- Botão acessível -->
<button
  aria-label="Fechar modal"
  aria-expanded="false"
>✕</button>

Seletores e Box Model

  • .classe, #id, tag — seletores básicos
  • :hover :focus :nth-child() — pseudo-classes
  • ::before ::after — pseudo-elementos
  • Box Model = Content + Padding + Border + Margin
  • box-sizing: border-box — inclui padding
  • :root { --var: value } — variáveis CSS

Flexbox vs Grid

/* Flexbox — 1D */
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid — 2D */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Fundamentos JS

  • const — constante imutável (escopo de bloco)
  • let — variável mutável (escopo de bloco)
  • var — evitar (hoisting / escopo global)
  • .map() .filter() .reduce() — arrays
  • Arrow function — () => expressão
  • Template literal — `Olá, ${nome}!`

Manipulação do DOM

// Selecionar elemento
const btn = document
  .querySelector('#meuBtn');

// Adicionar evento
btn.addEventListener('click', () => {
  btn.textContent = 'Clicado!';
});

Web APIs Nativas

  • localStorage / sessionStorage — persistência
  • navigator.geolocation — coordenadas GPS
  • navigator.vibrate() — vibração mobile
  • Notification API — push notificações
  • history.pushState() — manipular URL

localStorage

// Salvar dado
localStorage.setItem('user', 'Maria');

// Ler dado
const user = localStorage
  .getItem('user');

Core Web Vitals

  • LCP — Largest Contentful Paint (<2.5s)
  • FID/INP — First Input Delay (<100ms)
  • CLS — Cumulative Layout Shift (<0.1)
  • Lazy Loading — carregar imagens sob demanda
  • Minificação — remover espaços/comentários

Meta Tags SEO

<meta name="description"
      content="Desc da página">
<meta property="og:title"
      content="Título Social">
<img src="img.jpg"
     alt="Descrição"
     loading="lazy">

Ataques Comuns

  • XSS — Cross-Site Scripting: injetar scripts
  • CSRF — Cross-Site Request Forgery
  • SQLi — SQL Injection: manipular queries
  • CORS — Cross-Origin Resource Sharing
  • HTTPS/TLS — criptografia end-to-end

Defesas

  • Sanitizar todos os inputs no front e backend
  • Usar HTTPS em produção sempre
  • Headers de segurança (CSP, HSTS)
  • Validar sempre no servidor (nunca só no front)
  • Manter dependências atualizadas (npm audit)

Por que Frameworks?

  • Virtual DOM — atualiza só o necessário
  • Componentização — UI em peças reutilizáveis
  • State management — estado reativo da UI
  • React — biblioteca Meta (mais popular)
  • Vue.js — framework progressivo (2014)
  • Angular — framework completo do Google

Componente React

function Contador() {
  const [n, setN] = useState(0);
  return (
    <button
      onClick={() => setN(n+1)}
    >{n}</button>
  );
}
Quiz Geral

🧠 Quiz Completo do Curso

Questão 1 de 10
✓ 0

Referência

📋 Cheat Sheet Rápida

Propriedade / Seletor Valor / Exemplo Descrição
display flex | grid | block | none Define o modelo de layout
position static | relative | absolute | fixed | sticky Modo de posicionamento
:root { --var } --primary: #58a6ff Variáveis CSS globais
clamp(min, val, max) clamp(1rem, 3vw, 2rem) Tipografia fluida
transition all 0.3s ease Animação suave
transform translateX(10px) scale(1.1) Transformações 2D/3D
@media @media (max-width: 768px) { … } Media query responsiva
grid-template-columns repeat(3, 1fr) Define colunas no Grid
backdrop-filter blur(12px) Glassmorphism
Método / Sintaxe Exemplo Descrição
const / let const nome = "Maria" Declaração de variável
.querySelector() document.querySelector('#btn') Seleciona elemento
.addEventListener() el.addEventListener('click', fn) Escuta de eventos
Array.map() [1,2,3].map(x => x*2) Transforma array
Array.filter() arr.filter(x => x > 5) Filtra array
fetch() await fetch('/api/data') Requisição HTTP async
localStorage localStorage.setItem('k','v') Persistência browser
template literals `Olá, ${nome}!` Interpolação
Verbo / Conceito Uso Retorno
GET Buscar recurso 200 OK
POST Criar novo recurso 201 Created
PUT Substituir completo 200 OK
PATCH Atualizar parcial 200 OK
DELETE Remover recurso 200 / 204
200 OK Sucesso geral —
301 / 302 Redirecionamento —
400 Bad Request Dados inválidos —
401 / 403 Não autenticado / sem permissão —
404 Not Found Recurso não encontrado —
500 Internal Error Erro no servidor —
Tag Tipo Finalidade
<header> Semântica Cabeçalho da página
<nav> Semântica Menus de navegação
<main> Semântica Conteúdo principal
<section> Semântica Divisão temática
<article> Semântica Conteúdo autônomo
<aside> Semântica Sidebar
<footer> Semântica Rodapé
<form> <input> Formulário Coleta de dados
<audio> <video> Mídia Mídia nativa
<iframe> Embed Documento externo
<meta> Metadata charset, description, og:title
Autoavaliação

✅ O que já domino?

0 de 0 tópicos dominados