Módulo

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

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

Top 9 HTTP Request Methods

Guia rápido dos métodos mais utilizados no protocolo HTTP/1.1 e superiores para comunicação entre cliente e servidor.

GET

🛍️
GET /v1/products/iphone
Response
<HTML> <HEAD>iphone</HEAD> <BODY> <H1>iPhone 14</H1> <P>This is an iPhone 14</P> </BODY> </HTML>

Retrieve a single item
or a list of items

PUT

✋
PUT /v1/users/123
Request Body
{ "name": "bob", "email": "bob@bytebytego.com" }
Response
HTTP/1.1 200 OK

Update an item

POST

📧
POST /v1/users
Request Body
{ "firstname": "bob", "lastname": "xxx", "email": "bob@bytebytego.com" }
Response
HTTP/1.1 201 Created

Create an item

DELETE

🗑️
DELETE /v1/users/123
Response
HTTP/1.1 200 OK HTTP/1.1 204 NO CONTENT

Delete an item

PATCH

🩹
PATCH /v1/users/123
Request Body
{ "email": "bob@bytebytego.com" }
Response
HTTP/1.1 200 OK

Partially modify an item

HEAD

🔗
HEAD /v1/products/iphone
Response
HTTP/1.1 200 OK

Identical to GET but no
message body in the response

CONNECT

🌐
CONNECT xxx.com:80
Request
Host: xxx: 80 Proxy-Authorization: basic RXhhbXBsZTphaQ==
Response
HTTP/1.1 200 OK

Create a two-way connection
with a proxy server

OPTIONS

⚙️
OPTIONS /v1/users
Response
HTTP/1.1 200 OK Allow: GET, POST, DELETE, HEAD, OPTIONS

Return a list of supported
HTTP methods

TRACE

🔍
TRACE /index.html
Response
Host: xxxxxx Via: 1.1 xxxx: 3221 X-Forwarded-For: xx.xxx.xxx.x

Perform a message loop-back test,
providing a debugging mechanism

Módulo

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é

🖥️ Processo de Renderização Visual

1

Estrutura HTML

O arquivo HTML define a estrutura e é analisado (parsed) pelo navegador.

2

Criação do DOM

O navegador converte o código em uma estrutura de árvore chamada Document Object Model.

3

DOM na Memória

O DOM representa a estrutura do documento na memória para interação via JavaScript.

Fluxo de Carregamento com CSS

Load HTML
▶
Parse HTML
▶
Create DOM Tree
▶
Display / Render
Load CSS
▶
Parse CSS
▶
Attach style to DOM nodes
Módulo

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

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.

UI Design

Aparência

Como as interfaces do produto se parecem e funcionam.

Design Visual

Finaliza produtos e interfaces para a utilização do usuário.

Detalhes

Verifica páginas, botões e interações individuais, garantindo que sejam polidos e funcionais.

UX Design

Sentimento

A sensação geral da experiência com o uso do produto.

Prototipação

Criação de wireframes e protótipos testáveis que formam a base do fluxo de usuários.

Visão Geral

Tem uma visão geral de um produto, garantindo que o fluxo seja funcionalmente consistente.

"UI é o que você vê, UX é como você usa e sente."

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.

🧪 UI Lab — Componentes Premium

🌊

Ripple Effect

Animação de onda inspirada no Material Design.

⌛

CSS Loader

Spinners leves construídos apenas com CSS puro.

💎

Glassmorphism

Efeito de vidro fosco com backdrop-filter.

Glass Card
Módulo

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:

📘 Guia Avançado de Acessibilidade: Do's & Don'ts

Boas práticas de design e desenvolvimento para diferentes perfis de usuários, inspiradas no GOV.UK.

🧠 Projetando para usuários com Dislexia

Faça (Do...) Não faça (Don't...)

♿ Hands-on: Testando com NVDA/VoiceOver

  • Ative o Narrador (Windows + Ctrl + Enter) ou VoiceOver (Cmd + F5).
  • Tente navegar por esta página usando apenas as teclas Tab, Shift + Tab e Enter.
  • Feche os olhos e tente entender a estrutura da página apenas ouvindo.
  • Verifique se o foco está sempre visível e se a ordem faz sentido.
Módulo

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;
}

🎯 Seletores CSS

Padrões usados para identificar e aplicar estilos a elementos específicos.

Seletor de Elemento

Seleciona todos os elementos de uma tag específica.

p { color: blue; }

Seletor de ID

Seleciona um único elemento com um atributo id exclusivo.

#pgf { background: #f0f0f0; }

Seletor de Classe

Seleciona elementos que possuem o atributo class.

.pgf { font-weight: bold; }

Live Demo & Code

<p id="pgf" class="pgf">Parágrafo</p>
/* Aplica azul em todos os <p> */
p { color: blue; }

/* Aplica fundo no id="pgf" */
#pgf { background-color: #f0f0f0; }

/* Aplica negrito na classe "pgf" */
.pgf { font-weight: bold; }

Texto de Exemplo

🔗 Seletores Combinados

Permitem combinar seletores para especificar relações hierárquicas entre elementos.

Descendente (espaço)

div p { ... }

Seleciona todos os elementos <p> que estejam dentro de uma <div>, não importa quão profundo.

Filho Direto >

div > p { ... }

Seleciona apenas os elementos <p> que são filhos imediatos da <div>.

Irmão Adjacente +

h1 + p { ... }

Seleciona o primeiro <p> que aparece logo após um <h1>.

Irmãos Gerais ~

h1 ~ p { ... }

Seleciona todos os <p> que são irmãos e aparecem após o <h1>.

📦 Dica: Box Model em ação 

div {
  margin: 20px auto;
  padding: 10px;
  border: 2px solid black;
}

O segredo para centralizar elementos de bloco com largura dinâmica é usar margin: auto nas laterais.

Módulo

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

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

Servidores Web & Deploy

Entenda o ciclo de vida de uma aplicação, do desenvolvimento local (Git) à hospedagem em nuvem (Render/Vercel) com CI/CD.

🐙

Controle de Versão (Git)

O git rastreia mudanças no código. O GitHub é a plataforma social e repositório central para colaboração.

☁️

Hospedagem em Nuvem

Serviços como Render, Vercel e Netlify automatizam o processo de colocar seu site online.

⚙️

CI/CD

Integração Contínua e Deploy Contínuo: toda vez que você faz um git push, o servidor reconstrói seu site.

🏢 Tipos de Hospedagem & Infraestrutura

💎

Servidor Dedicado ($$$$)

A solução de maior performance para projetos que exigem exclusividade total de hardware (CPU, RAM e armazenamento). Não divide recursos, garantindo máxima estabilidade.

Players: HostGator, Hostinger, Locaweb, AWS EC2 Dedicated, HostDime, Bluehost.
🔲

VPS (Virtual Private Server)

Meio-termo entre compartilhada e dedicada. Você recebe uma fatia isolada de um servidor físico com recursos garantidos de CPU e RAM.

☁️

Cloud Hosting

Infraestrutura virtualizada onde os recursos não dependem de uma única máquina física, permitindo escalabilidade instantânea.

🏢

Hospedagem Compartilhada

Divisão de um servidor entre diversos sites. Como um prédio: cada um tem seu espaço, mas compartilham a infraestrutura comum.

🚀 Cultura: DevOps vs DevSecOps

DevOps

União de desenvolvimento (Dev) e operações (Ops) para automatizar e integrar o ciclo de entrega de software.

DevSecOps

Integração proativa da Segurança (Sec) em todas as fases do DevOps, não apenas no final do processo.

⚙️ Por que usar CI/CD?

🤖 Redução de Erros Humanos

A automação de testes e deploys elimina falhas manuais comuns e garante que o código em produção siga padrões rigorosos.

⏱️ Time-to-Market Acelerado

Reduz o ciclo de entrega de semanas ou meses para apenas minutos, acelerando o lançamento de novas funcionalidades.

🔍 Detecção Precoce de Bugs

Problemas são identificados e corrigidos assim que surgem, antes que se tornem complexos e caros de resolver.

💬 Feedback Contínuo

Permite que desenvolvedores vejam o progresso em tempo real e recebam feedback rápido através de lançamentos frequentes.

🤝 Melhoria na Colaboração

Facilita o trabalho de múltiplos devs, resolvendo conflitos de integração automaticamente e aumentando a produtividade.

🛡️ Segurança Integrada

Pipelines modernos incluem verificações de segurança automáticas em cada etapa (DevSecOps), mitigando vulnerabilidades.

🚀 Hands-on: Deploy no Render

  • Crie uma conta no Render.com.
  • Conecte seu repositório do GitHub.
  • Configure o Build Command como (opcional) e o Publish Directory como o local do seu index.html.
  • Seu site ganhará uma URL pública https://projeto.onrender.com!
Módulo

Performance Web & SEO

Sites rápidos e bem estruturados convertem melhor e rankeiam no topo dos buscadores. Core Web Vitals e Meta Tags são as chaves do sucesso.

⚡

Core Web Vitals

Métricas do Google (LCP, FID, CLS) que medem a experiência de carregamento, interatividade e estabilidade visual.

🔍

SEO On-Page

Uso correto de headings (H1-H6), meta descriptions, alt text em imagens e URLs amigáveis para indexação.

📦

Otimização de Assets

Minificação de CSS/JS, compressão de imagens (WebP) e uso de CDNs para reduzir o tempo de carregamento.

LCP (Largest Contentful Paint)

Bom
2.5s

Mede o tempo de carregamento da página (maior elemento).

INP (Interaction to Next Paint)

Bom
100ms

Mede a responsividade e latência das interações.

CLS (Cumulative Layout Shift)

Bom
0.05

Mede a estabilidade visual da página.

📈 Hands-on: Auditoria com Lighthouse

  • Abra o DevTools (F12) no Chrome.
  • Vá na aba Lighthouse.
  • Clique em Analyze page load.
  • Tente chegar aos 100 pontos corrigindo as sugestões!
Módulo

Segurança na Web

Proteja sua aplicação e os dados dos usuários contra os ataques mais comuns da web.

🛡️

HTTPS / SSL

Criptografa a comunicação entre cliente e servidor, impedindo interceptações (Man-in-the-Middle).

🚫

CORS

Cross-Origin Resource Sharing: controla quais domínios podem acessar os recursos da sua API.

☣️

XSS & Injection

Cross-Site Scripting: prevenir a execução de scripts maliciosos injetados por usuários em formulários.

🔒 Hands-on: Verificando o Certificado

  • Clique no ícone de Cadeado na barra de endereços do browser.
  • Veja os detalhes do certificado SSL/TLS.
  • Verifique se o site usa HSTS para forçar conexões seguras.