Módulo 1

História da Internet e Evolução da Web

Da rede militar ARPANET ao HTTP/3 moderno — uma linha do tempo interativa pelos marcos que moldaram a internet como conhecemos hoje.

Módulo 2

Browsers, Protocolos e Modelo Cliente-Servidor

Como HTTP, HTTPS, DNS e o modelo cliente-servidor formam a espinha dorsal de toda comunicação na web moderna.

Simulação: Fluxo de Requisição HTTP

💻
Browser (Cliente)
──── GET /index.html ────▶
◀──── 200 OK + HTML ────
🖥️
Servidor (Back-end)
HTTP/1.0
HTTP 1.0

Uma conexão TCP por requisição. Sem cabeçalhos de persistência. Muito ineficiente para páginas complexas (1991–1996).

HTTP/1.1
HTTP 1.1

Conexões persistentes (keep-alive), pipelining e compressão gzip. Padrão por mais de 10 anos (1997–2015).

HTTP/2
HTTP 2

Multiplexação de streams, compressão de headers HPACK, server push. 2× mais rápido que HTTP/1.1 (2015+).

HTTP/3
HTTP 3 + QUIC

Baseado em UDP via QUIC. Zero Round-Trip Time na reconexão. Ideal para mobile e redes instáveis (2022+).

HTTPS
HTTPS + TLS

HTTP com camada TLS para criptografia end-to-end. O cadeado verde no browser. Obrigatório em produção.

DNS
DNS

Domain Name System — converte www.google.com em 142.250.1.1. A "agenda telefônica" da internet.

Módulo 3

HTML5 Fundamentals — Explore as Tags

Clique em cada tag para ver um exemplo ao vivo de como ela funciona no navegador.

Estrutura Semântica Visualizada

<body>
<header> — Logotipo, título, hero
<nav> — Menus de navegação
<main> — Conteúdo principal (único!)
<section> + <article>
<footer> — Rodapé
Módulo 4

Forms & Validação Avançada

Formulário completo com validação HTML5 nativa e JavaScript em tempo real, incluindo feedback visual por campo.

Módulo 5

CSS Fundamentals — Playground

Ative e desative propriedades CSS em tempo real e observe as transformações no elemento de prévia ao lado.

box-shadow
border-radius extremo
gradient animado
transform: rotate
transform: scale(1.5)
filter: blur
opacity: 0.3
CSS
Box

Código CSS atual aplicado:

/* Ative os toggles acima para ver */
.preview-target {
  background: linear-gradient(135deg, #4f8ef7, #a855f7);
  transition: all 0.5s ease;
}
Módulo 6

Sistemas de Layout CSS

Compare visualmente Flexbox e Grid. Selecione o modelo e os parâmetros para ver o resultado em tempo real.

Flexbox Demo

📍

static

Posição padrão — o elemento segue o fluxo normal do documento.

↔️

relative

Posicionado em relação à sua posição original. Não sai do fluxo.

🎯

absolute

Remove do fluxo. Posicionado em relação ao ancestral relative.

📌

fixed

Fixo na viewport — não muda com o scroll. Ideal para navbars.

🔒

sticky

Misto entre relative e fixed — "gruda" ao atingir o threshold de scroll.

🔢

z-index

Controla a ordem de empilhamento (stacking). Maior valor = na frente.

Módulo 7

Responsive Design

Media queries, mobile-first e tipografia fluida com clamp(). Redimensione a janela para ver os efeitos.

XS <480px SM 480–768px MD 768–1024px LG >1024px
Tipografia Fluida com clamp()
/* Tipografia fluida — cresce com a viewport */ .fluid-text { font-size: clamp(1rem, 5vw, 2.5rem); /* min: 1rem | ideal: 5% viewport | max: 2.5rem */ } /* Mobile-first breakpoints */ @media (min-width: 480px) { /* → Small */ } @media (min-width: 768px) { /* → Medium */ } @media (min-width: 1024px) { /* → Large */ }

Cards Responsivos — repeat(auto-fill, minmax(200px, 1fr))

📱

Mobile

Coluna única em telas pequenas.

💻

Tablet

Duas colunas em telas médias.

🖥️

Desktop

Três ou mais colunas em telas grandes.

📺

Wide

O grid se adapta automaticamente.

Módulo 8

JavaScript Fundamentals

Demonstrações ao vivo de variáveis, arrays, objetos, funções, loops, eventos e manipulação do DOM.

Variáveis & Template Literals

// Saída aparecerá aqui

Arrays — map, filter, reduce

// Clique nos botões acima

Manipulação do DOM

Eventos & Loops

Clique no botão para gerar N elementos com um loop for:

Módulo 9

Componentes JavaScript Interativos

Apps completos construídos com Vanilla JavaScript: calculadora, to-do list, quiz, countdown timer e catálogo de produtos dinâmico.

🧮 Calculadora

0

✅ To-Do List

    0 tarefas

    ⏱️ Countdown Timer

    00:00
    :

    🛍️ Catálogo de Produtos (Array → DOM)

    🧠 Quiz — História da Web

    Módulo 10

    AJAX & Fetch API

    Busca de dados reais da API pública JSONPlaceholder com loading state, tratamento de erros e renderização dinâmica.

    JSONPlaceholder API — jsonplaceholder.typicode.com

    // Exemplo de fetch com async/await async function loadPosts() { try { const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5'); const data = await res.json(); renderPosts(data); // Renderiza no DOM } catch (err) { showError(`Erro: ${err.message}`); // Tratamento de erro } }

    Clique nos botões acima para carregar dados da API.

    Módulo 11

    Acessibilidade (A11Y)

    Demonstrações práticas de ARIA, foco por teclado, contraste WCAG e estrutura semântica correta para leitores de tela.

    ⌨️ Navegação por Teclado

    Use Tab para navegar entre estes botões — o foco visível segue WCAG 2.1:

    🏷️ ARIA Labels

    Elementos com aria-label correto para leitores de tela:

    🎨 Contraste WCAG

    Mínimo 4.5:1 para texto normal (WCAG AA):

    ✓ Alto
    21:1
    ✗ Baixo
    1.2:1

    🌲 Estrutura Semântica

    Hierarquia correta de headings para screen readers:

    h1 → Título Principal h2 → Seção h3 → Subseção h4 → Detalhe

    ⚠️ Nunca pule níveis de heading (h1→h3 sem h2)

    ⏭️ Skip Links

    Link "pular para conteúdo" — essencial para navegação por teclado:

    <a href="#main"
   class="skip-link">
  Pular para conteúdo
</a>

    📢 Live Regions

    aria-live anuncia mudanças dinâmicas para screen readers:

    Módulo 12

    UX/UI — Micro-interações & Animações

    Demonstração de hover effects, transform, transitions e animações CSS que tornam a interface premium e responsiva.

    Hover sobre cada card para ver o efeito:

    scale(1.3)
    rotate(45°)
    translateY(-15px)
    skewX(20deg)
    glow shadow

    CSS @keyframes — Animação Automática

    Gradiente animado com @keyframes

    ✨ Recursos UX desta Página

    📊

    Barra de Progresso

    Indica progresso de leitura no topo via scroll event.

    👁️

    Scroll Reveal

    Seções aparecem suavemente via IntersectionObserver.

    🌙

    Dark / Light Mode

    Toggle persistido em localStorage entre sessões.

    ⬆️

    Back to Top

    Aparece após scroll e retorna suavemente ao topo.

    🔗

    Active Nav Links

    Link da navbar ativo baseado na seção visível.

    📱

    Mobile Menu

    Hamburger menu responsivo para telas pequenas.