Aula 05 - Inspeção - Entendendo Sites com a IA

O que é o Inspecionar Elemento / Ferramentas de Desenvolvedor (F12)

O Inspecionar Elemento / Ferramentas de Desenvolvedor é o conjunto de ferramentas do navegador que mostra o código por trás da tela. Inspecionar Elemento é a porta de entrada (clique direito em qualquer parte da página → Inspecionar). Ferramentas de Desenvolvedor (DevTools) é o conjunto completo que abre - com as abas Elements, Styles e Console. Atalho: F12.

Quando eu abro, eu vejo o HTML que monta a estrutura, o CSS que aplica as cores e espaçamentos, e quando existe, o JavaScript que faz as coisas acontecerem.

O que eu vejo	O que faz
HTML	Estrutura: títulos, parágrafos, botões, imagens
CSS	Visual: cores, fontes, tamanhos, espaçamento
JavaScript	Comportamento: botões que clicam, menus que abrem

Já vimos o que é cada um na Aula 01 - aqui é só como ver cada um no navegador. Detalhe completo em 01-integracao-web-ia.md.

Pra que serve inspecionar?

Objetivo	Exemplo prático
Aprender com sites bonitos	“Como esse site faz o botão ficar com aquela sombra?”
Copiar técnicas	“Qual fonte eles usam? Qual o tamanho do espaçamento?”
Resolver problemas	“Por que meu site não fica bonito no celular?”
Entender padrões	“Todos os sites profissionais usam a mesma estrutura de header?”
Pedir à IA com contexto	“Olha esse código - como eu faço algo parecido?”

Como acessar - passo a passo

No computador (Chrome, Edge, Firefox)

Abro qualquer site que eu gosto - pode ser o Instagram, o site de uma loja, qualquer coisa
Aperto F12 no teclado
Uma tela nova aparece do lado direito ou embaixo - esse é o painel de Ferramentas de Desenvolvedor (DevTools) - o Inspecionar Elemento / Ferramentas de Desenvolvedor
Clico com o botão direito em qualquer elemento da página e escolho “Inspecionar” - ou uso Ctrl+Shift+C para selecionar um elemento direto na tela

Atalho importante:

F12 - abre/fecha o inspetor

Ctrl+Shift+C - ativa o modo de seleção (eu clico no elemento que quero analisar)

Esc - fecha o inspetor

No celular (Chrome Android)

Abro o site no navegador do celular
Clico nos três pontinhos no canto superior direito
Escolho “Desktop site” (versão pra computador)
Conecto o celular no computador com cabo USB
No Chrome do computador, abro chrome://inspect
O celular aparece na lista - eu clico em “Inspect”

No celular é mais complicado. Por isso, a gente foca no computador - onde o F12 funciona com um toque.

Conhecendo a tela

Quando eu abro o F12, vejo uma tela com várias abas. As três mais importantes pra hoje são:

Aba	O que mostra	Quando usar
Elements (Elementos)	A estrutura viva do site (DOM) - a planta que o navegador montou	Pra ver a organização do conteúdo
Styles (Estilos)	O CSS aplicado a cada elemento	Pra ver cores, fontes, espaçamento
Console	Recados e erros do navegador - vermelho indica o que quebrou	Pra ver o que falhou e copiar o erro pra IA

Conhecendo o painel de Elementos

Relembrando o que é o HTML

HTML é a estrutura do site. É como os ossos do corpo - por si só não são bonitos, mas sem eles nada funciona.

Quando eu olho o painel de Elementos, vejo algo assim:

<header class="hero">
  <h1>Bem-vindo à Maria da Padaria</h1>
  <p>Doces artesanais feitos com amor</p>
  <a href="https://wa.me/5511999999999" class="botao">Faça seu pedido</a>
</header>

Cada linha é uma etiqueta (tag). Elas dizem ao navegador o que cada coisa é:

Etiqueta	O que significa	Analogia
`<header>`	Cabeçalho da página	A fachada da loja
`<h1>`	Título principal	O letreiro grande
`<h2>`, `<h3>`	Subtítulos	Letras menores na vitrine
`<p>`	Parágrafo de texto	Texto da vitrine
`<a>`	Link (âncora)	O botão que eu clico
`<img>`	Imagem	A foto no cardápio
`<div>`	Bloco genérico	Uma caixa que segura várias coisas
`<section>`	Seção da página	Uma sala da loja
`<footer>`	Rodapé	A placa no pé da loja

Regra simples: <h1> é o título mais importante. <h2> é o segundo. <h3> o terceiro. E assim por diante. É a hierarquia de títulos - igual um documento com títulos e subtítulos.

Como navegar pelo painel

Clico num elemento na árvore HTML - ele fica destacado na tela
O painel do lado mostra o que esse elemento é, quais classes ele tem, e o que afeta ele visualmente
Clico na setinha ao lado de um elemento pra expandir e ver os filhos
Duplo clique no texto pra editar (só na minha tela - não muda o site original)

O que procurar na estrutura

O que observar	Por quê	Exemplo
Hierarquia de títulos	Se o `h1` vem primeiro, depois `h2`, depois `h3` - tá organizado	Um site bom tem `h1` > `h2` > `h3` em ordem
Uso de `<section>`	Sites bons separam conteúdo em seções claras	Cada bloco da página é uma `<section>`
Classes com nomes claros	`"botao-cta"` é melhor que `"div3"`	Indica que quem escreveu pensou na organização
Imagens com `alt`	Texto alternativo pra acessibilidade	`<img alt="Foto de bolo de chocolate">`

O que é o DOM - a planta viva do site

HTML é o arquivo que eu escrevo. O DOM é o que o navegador monta a partir desse arquivo. É a planta viva da página.

O arquivo .html é a planta no papel. O DOM é a casa já construída que eu vejo no painel Elements: com salas (<header>, <section>, <footer>) e móveis (<h1>, <p>, <img>, <a>). Cada móvel está dentro de uma sala, cada sala dentro da casa - formando uma árvore.

html
 └─ body
     ├─ header
     │   ├─ h1 (letreiro)
     │   └─ p (frase)
     └─ section
         ├─ h2 (título da sala)
         └─ img (foto na parede)

O que eu vejo no Elements é o DOM, não o arquivo .html cru. Por isso:

Se eu apago ou mudo algo no Elements, a casa muda na hora na tela - mas a planta no papel continua igual. Ao recarregar, volta ao original. É só teste.
Se o h1 não está dentro do header ou a ordem é h3 antes de h1, a planta está torta - a estrutura não faz sentido.

Já vimos a analogia esqueleto/roupa na Aula 01. O DOM é o esqueleto já montado, em pé, que eu posso tocar no Elements.

Como usar com a IA: copio um trecho do DOM e pergunto: “Essa ordem de salas faz sentido? O h1 vem antes do h2? Esse header está no lugar certo?”

Conhecendo o painel de Estilos (CSS)

Relembrando o que é o CSS

CSS é a roupa do site. É ele que diz: “esse texto fica vermelho”, “esse botão fica arredondado”, “esse espaçamento fica de 20 pixels”.

Quando eu seleciono um elemento no painel de Elementos, o painel de Estilos mostra tudo o que afeta ele visualmente:

.hero {
  background-color: #FFF8F0;
  padding: 60px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  color: #D2691E;
  font-family: 'Nunito', sans-serif;
}

.botao {
  background-color: #E8722A;
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
}

Propriedades CSS mais comuns

Propriedade	O que faz	Exemplo
`color`	Cor do texto	`color: #333;` (cinza escuro)
`background-color`	Cor de fundo	`background-color: #FFF8F0;` (bege claro)
`font-size`	Tamanho da fonte	`font-size: 2rem;` (título grande)
`font-family`	Tipo da fonte	`font-family: 'Nunito', sans-serif;`
`padding`	Espaço dentro do elemento	`padding: 20px;` (espaço interno)
`margin`	Espaço fora do elemento	`margin: 0 auto;` (centraliza)
`border-radius`	Arredondamento das bordas	`border-radius: 50px;` (borda redonda)
`display`	Como o elemento aparece	`display: flex;` (organiza em linha)
`gap`	Espaço entre itens flex	`gap: 16px;` (espaço entre blocos)
`max-width`	Largura máxima	`max-width: 1200px;` (não passa disso)
`box-shadow`	Sombra	`box-shadow: 0 2px 8px rgba(0,0,0,0.1);`

Dica rápida: quando eu vejo um número com rem, é um tamanho relativo. 1rem = tamanho padrão da fonte (geralmente 16px). 2rem = o dobro.

Como testar estilos ao vivo

O painel de Estilos não é só pra olhar - é pra testar:

Clico numa propriedade (ex: color: #333)
Troco o valor - digito uma cor nova
Vejo o resultado na tela - instantaneamente
Se não gostou, aperto Ctrl+Z e volta

É como provar uma roupa antes de comprar. Eu testo o estilo, vejo se fica bom, e só depois aplico de verdade no meu projeto.

Valores que mudam tudo

Propriedade	Valor comum	Efeito visual
`border-radius: 0`	Sem arredondamento	Botão quadrado, “cortante”
`border-radius: 50px`	Muito arredondado	Botão pill, “amigo”
`padding: 8px`	Pouco respiro	Elemento apertado
`padding: 40px`	Muito respiro	Elemento respirando
`font-weight: 400`	Fonte normal	Texto leve
`font-weight: 700`	Fonte bold	Texto forte, chamativo
`opacity: 0.5`	Semi-transparente	Elemento mais suave
`gap: 0`	Sem espaço	Elementos colados
`gap: 32px`	Espaço generoso	Elementos separados

Aba Console - lendo erros

O que é o Console

O Console é o caderno de recados do navegador. Verde e amarelo são avisos. Vermelho indica que algo quebrou e o site não fez o que deveria.

Para abrir: com as Ferramentas de Desenvolvedor já abertas, clique na aba Console no topo, ou aperte Esc para abrir o Console embaixo do Elements/Styles.

É como a luz vermelha do painel do carro: não diz só “tem problema”, diz qual peça falhou.

O erro que você mais vai ver: 404

O vermelho mais comum em sites estáticos é o 404 - arquivo não encontrado:

Failed to load resource: the server responded with a status of 404 (imagem.jpg)
Failed to load resource: the server responded with a status of 404 (style.css)

O que significa em português: o navegador procurou o arquivo e não achou. Geralmente é caminho errado (src="imagem.jpg" quando o arquivo está em imagens/imagem.jpg) ou arquivo que não foi enviado no push.

Analogia: endereço de entrega errado - o caminhão saiu, procurou e voltou porque a casa não existe.

Quando o style.css dá 404, o site fica sem roupa. Quando a imagem dá 404, aparece o ícone de imagem quebrada.

Haverá vários tipos de erros

O 404 é só um exemplo. O Console pode mostrar muitos erros vermelhos diferentes. Não precisa decorar. O importante é o gesto: todo vermelho tem uma mensagem que a IA sabe ler. O mesmo gesto (copiar → colar na IA → pedir correção) vale para qualquer um.

Categoria de vermelho	O que o navegador está dizendo	Exemplo de mensagem (só para reconhecer)
Recurso não encontrado	Procurei e não achei	`404 (Not Found)`
Recurso bloqueado	Achei mas não posso entregar por segurança ou permissão	`403 / CORS / Mixed Content`
Código quebrado	Achei o arquivo mas não entendi o que está escrito	`SyntaxError / Unexpected token`

Como copiar e corrigir com a IA

Copio a mensagem vermelha: clique com botão direito no erro → Copy message ou Copy → Copy message
Colo na IA junto com o trecho do meu projeto:
Peço em português simples:

“Colei o erro do Console: [colar mensagem vermelha completa]. Esse é o trecho do meu projeto: [colar HTML ou caminho do arquivo]. Explica em português simples por que deu esse vermelho e me dá a correção.”

“Esse 404 da imagem: o caminho está certo? Como deve ficar o src para funcionar no GitHub Pages/Vercel?”

Dica: copie a mensagem completa, não só o número. Failed to load resource: 404 (imagens/foto.jpg) ajuda mais que só 404.

Revisão relâmpago - as 3 regras de UX da Aula 01

Lembram de hierarquia, contraste e respiro da Aula 01? Hoje vamos medir cada uma com o F12. Detalhe completo das regras → Aula 01. Paletas e pesos → Aula 07. Aqui só medimos.

Regra	Onde já vimos	Como provar no F12
Hierarquia	Aula 01 Regra 1 + Aula 02 Hierarquia `h1 > h2 > h3 > p`	Elements: ver se `h1` vem antes de `h2` e `h3` + Styles: `font-size` (h1 2.5-4rem é o maior, h2 1.8-2.5rem, h3 1.3-1.8rem, p 1rem)
Contraste	Aula 01 Regra 2 - texto precisa ser legível contra o fundo	Styles: comparar `color` (texto) vs `background-color` (fundo) + copiar hex `#E8722A` para testar
Respiro	Aula 01 Regra 3 - espaço vazio não é desperdício	Styles: ver `padding` (dentro) e `margin` (fora) + overlay azul para padding e laranja para margin no navegador

Se um site tem tudo do mesmo tamanho, o olho não sabe para onde olhar. É como uma página onde tudo é sublinhado - se tudo é importante, nada é.

Valores de referência rápida (para a análise):

Elemento	Tamanho típico	Para medir
`h1`	2.5rem - 4rem	Deve ser o maior da página
`h2`	1.8rem - 2.5rem	Menor que h1
`h3`	1.3rem - 1.8rem	Menor que h2
`p`	1rem	Corpo do texto
`padding: 8px`	Pequeno	Apertado
`padding: 16px`	Médio	Confortável
`padding: 32px - 64px`	Grande	Espaçoso
`padding: 80px+`	Hero	Respiração

Usando a IA pra explicar o código

Por que usar a IA pra isso?

Às vezes eu olho o código e não entendo nada. “O que é display: flex? Por que gap: 16px faz os itens ficarem em linha? O que essa classe .hero significa?”

É aí que a IA ajuda. Eu copio o trecho de código e pergunto: “Explica esse código como se eu fosse um iniciante.”

Como fazer na prática

Passo 1: Copio o código do inspetor

No painel de Elementos, clico com o botão direito no elemento e escolho “Copy” → “Copy outerHTML”. Isso copia o trecho de HTML.

No painel de Estilos, seleciono o CSS e copio com Ctrl+C.

Passo 2: Colei no chat da IA

Colo o código e peço pra explicar:

“Esse é o HTML de um site que eu gosto. Explica a estrutura pra mim, como se eu fosse um iniciante. Qual é a função de cada parte?”

“Esse é o CSS de um botão que eu achei bonito. Explica cada propriedade e como ela afeta o visual.”

Passo 3: A IA explica e eu anoto

A IA vai quebrar o código em pedaços e explicar cada um. Eu anoto o que faz sentido e aplico no meu projeto.

Prompts úteis pra isso

Prompt	O que a IA faz
“Explica esse HTML como se eu fosse iniciante”	Quebra a estrutura em partes simples
“Qual a paleta de cores desse site?”	Lista todas as cores usadas e sugere combinações
“Como esse botão ficou com essa sombra?”	Explica a propriedade `box-shadow`
“Por que esse site fica diferente no celular?”	Explica media queries e responsividade
“Como faço pra copiar esse estilo pro meu projeto?”	Gera código adaptado ao meu contexto
“O que esse `display: flex` faz aqui?”	Explica o layout flex de forma visual
“Por que esse espaçamento funciona tão bem?”	Explica a relação entre padding, margin e respiro
“Explica esse erro do Console: [colar mensagem vermelha]”	Traduz o vermelho em português simples e diz por que quebrou
“Corrige esse caminho 404 para mim: [colar caminho]”	Reescreve o src ou href certo para GitHub Pages/Vercel
“Esse DOM está semântico? Se não, reescreva com header, main, section”	Reorganiza a planta da página com significado

Dica: quanto mais específico o prompt, melhor a resposta. Para erros do Console, sempre cole a mensagem completa.

Guia: analisar um site de referência

Passo 1: Escolher o site

Eu escolho um site que eu gosto - pode ser de qualquer negócio. O importante é que ele tenha um visual que eu considero “bonito” ou “profissional”.

Sugestões de sites pra analisar:

Tipo de site	Exemplo	Por quê analisar
Loja online	Magazine Luiza, Americanas	Grid de produtos, botões de compra, hierarquia
Restaurante	iFood, Rappi	Cardápio visual, cores quentes, CTA de pedido
Portfólio	Sites de designers no Dribbble	Criatividade, uso de espaço, identidade
Institucional	Bancos, empresas de tecnologia	Profissionalismo, confiança, organização

Importante: o objetivo não é copiar - é aprender.

Passo 2: Abrir o F12 e explorar

Abro o site no navegador
Aperto F12 pra abrir o inspetor
Clico em “Inspecionar” (ou Ctrl+Shift+C)
Clico no título principal do site - vejo o HTML e o CSS
Anoto: qual a fonte? qual o tamanho? qual a cor?

Passo 2b: Checar o Console

Clique na aba Console ou aperte Esc. Se tiver vermelho, anote a mensagem completa. Se não tiver, ótimo - o site carregou sem erro. Se tiver 404, copie para corrigir com a IA no Passo 6.

Passo 3: Mapear a hierarquia visual

Olho a página inteira e anoto a ordem em que o olho lê:

Ordem	Elemento	Tamanho	Cor	Peso
1	Título principal	Grande (ex: 3rem)	Cor de destaque	Alto
2	Subtítulo	Médio (ex: 1.5rem)	Cor neutra	Médio
3	Botão de ação	Grande, colorido	Cor primária	Alto
4	Texto descritivo	Normal (1rem)	Cinza escuro	Baixo
5	Rodapé	Pequeno (0.875rem)	Cinza claro	Muito baixo

Passo 4: Mapear as cores

Seleciono cada elemento principal e anoto as cores:

Elemento	`color`	`background-color`
Título	`#333333`	`transparent`
Botão	`#FFFFFF`	`#E8722A`
Fundo da seção	`#333333`	`#1A1A2E`
Texto do rodapé	`#999999`	`#1A1A2E`

Passo 5: Mapear o espaçamento

Anoto os valores de padding e margin dos blocos principais:

Bloco	`padding`	`margin`	Sensação
Hero (destaque)	`80px 20px`	`0`	Respira bastante
Seção de produtos	`40px 20px`	`0`	Confortável
Rodapé	`24px 20px`	`0`	Compacto

Passo 6: Perguntar pra IA

Copio o código que encontrei e pergunto pra IA:

“Esse é o HTML e CSS de um site que eu gosto. Explica por que o espaçamento funciona tão bem, como eu posso aplicar algo parecido no meu projeto, e quais são os pontos principais que fazem esse site parecer profissional.”

Se tinha vermelho no Console, incluo também:

“Tive esse erro no Console: [colar mensagem vermelha]. Esse é o DOM do meu projeto: [colar trecho]. Por que quebrou e como corrijo?”

A IA vai dar insights que eu sozinho não perceberia - e é aí que o aprendizado acontece.

Passo 7: Anotar aprendizados

No final, eu tenho uma lista de coisas que posso aplicar no meu projeto:

Aprendizado	Como aplicar
Usar `padding: 60px` no hero	Meu hero fica respirando
Botão com `border-radius: 50px`	Botão pill, visual moderno
Fonte sans-serif pra tudo	Limpeza e legibilidade
Máximo 3 cores principais	Não fico confuso

Prompts pra analisar código

Aqui vão prompts prontos que eu posso copiar e colar no chat da IA:

Pra analisar a estrutura HTML

“Esse é o HTML de um site que eu gosto: [cole o código aqui]

Explica a estrutura como se eu fosse um iniciante. Qual é a função de cada tag? Por que os títulos estão em ordem? O que eu posso aprender pra aplicar no meu projeto?“

Pra analisar o CSS

“Esse é o CSS de um site que eu achei bonito: [cole o código aqui]

Explique cada propriedade visual: cores, fontes, espaçamento, bordas. Por que esse estilo funciona? Como eu adapto algo parecido pro meu projeto?“

Pra entender por que algo funciona

“Esse site fica muito bonito e profissional. Eu inspecionei com F12 e achei isso:

Fonte: Nunito, sans-serif

Cores: #E8722A (laranja), #FFF8F0 (bege), #333333 (texto)

Espaçamento: padding de 60px nos blocos principais

Botões: border-radius 50px, padding 14px 28px

Explica por que essa combinação funciona tão bem e como eu aplico algo parecido no meu projeto.“

Pra comparar dois sites

“Eu analisei dois sites: Site 1: [descrição简略] Site 2: [descrição简略]

Qual tem hierarquia visual melhor? Qual tem contraste melhor? Qual tem espaçamento mais profissional? Me dê sugestões de como combinar o melhor dos dois.“

Pra gerar código a partir da análise

“Baseado nessa análise de um site que eu gosto: [cole suas anotações]

Gere o HTML e CSS básico pra replicar esse estilo no meu projeto de [descrever o projeto]. Mantenha as mesmas proporções de espaçamento, hierarquia de títulos e paleta de cores.“

Problemas comuns

Problema	Por que acontece	Solução
“O F12 não abre”	Algumas teclas de função bloqueiam o F12	Tentar `Fn+F12` ou `Ctrl+Shift+I`
“Não entendo nada do código”	HTML e CSS parecem chineses no início	Pedir pra IA explicar como se fosse iniciante
“Não consigo copiar o CSS”	O CSS tá em vários arquivos diferentes	Clicar em cada estilo individual e copiar uma propriedade por vez
“O site muda quando eu mexo no F12”	As alterações no F12 são temporárias - DOM é só teste	É assim mesmo - é pra testar. Pra aplicar de verdade, preciso mudar o arquivo do projeto e fazer push
“Console vermelho 404 imagem ou css”	Caminho errado ou arquivo não enviado	Copiar a mensagem vermelha completa e pedir pra IA corrigir o src ou href, depois fazer push
“Mudei no F12 e sumiu ao recarregar”	DOM não é o arquivo - é a planta viva	Normal - aplicar correção no projeto, não no Elements
“Não sei o que procurar”	Falta experiência de análise	Usar o checklist de inspeção como referência
“A IA não entende o código que eu coleio”	Código muito grande ou sem contexto	Colar trechos menores e explicar o que quero saber
“Não acho a paleta de cores”	Cores podem estar em vários arquivos	Usar a aba Computed no painel de Estilos - ela mostra o valor final de cada propriedade

Dicas de ouro

1. Inspetor não é só pra quem programa. Qualquer pessoa pode usar o F12 pra aprender. É como uma lupa digital.

2. Cada site bonito é uma aula. Se eu gosto de um site, eu inspeciono. Se gosto de um botão, eu inspeciono. Se gosto de uma cor, eu inspeciono.

3. Não decore - entenda. Não preciso memorizar padding: 60px. Preciso entender que “espaço grande = respiração”. O valor específico eu vejo na hora.

4. A IA é minha tradutora. Código é outra linguagem. A IA traduz do “código” pro “português do dia a dia”.

5. Anote tudo. O que eu aprendo hoje, eu uso amanhã. Um caderninho de anotações de inspeção é meu maior patrimônio.

Recursos pra explorar

Recurso	O que encontro
MDN Web Docs	Documentação completa de HTML e CSS
W3Schools	Tutoriais interativos de HTML, CSS e JavaScript
CSS-Tricks	Dicas e truques de CSS
Dribbble	Inspiração visual de design
Awwwards	Sites com qualidade reconhecida

Resumo do encontro

Conceito	O que é	Analogia
Inspecionar Elemento / Ferramentas de Desenvolvedor (F12)	Ferramentas do navegador para ver o código por trás da tela	-
HTML	A estrutura do site (arquivo)	A planta no papel
DOM	A planta viva que o navegador monta a partir do HTML - é o que o Elements mostra	A casa já construída
CSS	O visual do site	A roupa
Console	Caderno de erros do navegador - vermelho indica o que quebrou	Luz vermelha do painel do carro
Hierarquia visual	A ordem em que o olho lê	O letreiro da loja
Paleta de cores	As cores que o site usa	As cores da marca
Espaçamento	O respiro entre os elementos	A distância entre móveis
Contraste	A diferença entre texto e fundo	Texto legível contra o fundo
IA como tradutora e corretora	A IA explica código e corrige erro do Console em português simples	O amigo que sabe tudo

A mensagem final: um site bonito não é acidente - é decisão. Cada cor, cada espaço, cada tamanho tem um motivo. E agora eu sei como descobrir esse motivo. O F12 é minha chave, e a IA é minha tradutora.