Prompt:
Crie uma página HTML completa, auto-explicativa e interativa sobre o Inspetor de Elementos do browser (DevTools). O objetivo é que o aluno aprenda usando o próprio DevTools enquanto lê — a página detecta automaticamente quando cada desafio foi concluído usando MutationObserver, sem nenhum botão "concluí".
Contexto: Esta é a Aula 01 de um curso "Programação Web do Zero com IA", voltado para iniciantes absolutos. O arquivo será salvo no repositório do curso e explicado em vídeo. O aluno provavelmente nunca abriu o DevTools antes.
Estrutura da página:
1. Header da aula
Número da aula (01), título "Inspecionando a página", subtítulo: "Sua primeira ferramenta de dev já está instalada no seu browser."
2. Missão inicial — gancho imediato
Logo no topo, um bloco de missão que instrui o aluno a abrir o DevTools agora:
Windows/Linux: F12 ou Ctrl + Shift + I
Mac: Cmd + Option + I
Ou: clique direito em qualquer elemento → "Inspecionar"
Exiba um elemento visual chamativo (caixa com borda pulsante, label "← inspecione-me") com a instrução de abrir o DevTools nele para começar.
3. Três desafios sequenciais com detecção automática
Cada desafio é um card com: número, título, instrução clara, elemento-alvo na própria página, e barra de status que muda automaticamente de "aguardando…" para "✓ detectado!" assim que o MutationObserver confirmar a ação. O próximo desafio só aparece (com fade-in) após o anterior ser concluído.
Desafio 1 — Encontre o atributo secreto
O elemento-alvo tem um atributo data-secret="..." com uma palavra escondida (ex: data-secret="teletype"). A instrução é: inspecione o elemento no painel Elements e encontre o valor do atributo. Abaixo do elemento, há um <input> onde o aluno digita o valor. A página valida via JavaScript (input.value.trim().toLowerCase() === 'teletype') e marca como concluído ao acertar. Feedback em tempo real: enquanto errado, borda vermelha; ao acertar, borda verde e avança.
Desafio 2 — Edite o DOM ao vivo
O elemento-alvo é um parágrafo com o texto exato "Mude este texto no DevTools" e um atributo id="desafio-2-alvo". A instrução é: no painel Elements, dê duplo-clique no texto e mude para qualquer outra coisa. Um MutationObserver com { childList: true, characterData: true, subtree: true } monitora o elemento. Assim que o textContent mudar para qualquer coisa diferente do original, marca como concluído e revela: "Você editou o DOM ao vivo. Isso não muda o arquivo — só a memória do browser. Recarregue a página e o texto volta."
Desafio 3 — Mude o CSS ao vivo
O elemento-alvo é uma caixa com id="desafio-3-alvo", cor de fundo definida via CSS externo/interno (ex: background-color: #e94f37). A instrução é: no painel Styles do DevTools, mude a cor de fundo para qualquer outra cor. Um MutationObserver com { attributes: true, attributeFilter: ['style'] } detecta quando o browser aplica a mudança como style inline no elemento. Assim que detectar qualquer valor de background ou background-color no style inline diferente do original, marca como concluído e revela: "Quando você edita no painel Styles, o browser aplica a mudança como CSS inline. É assim que devs testam visual sem salvar arquivo."
Desafio 4 — Delete e ressuscite
O elemento-alvo é um card com id="desafio-4-alvo" e texto "Delete-me no DevTools (depois me ressuscite)". A instrução é: selecione o elemento no painel Elements e pressione Delete para removê-lo. Um MutationObserver no elemento pai com { childList: true } detecta a remoção. Ao detectar, a página imediatamente: marca como concluído, exibe um botão "Ressuscitar elemento" que reinserere o elemento no DOM via JavaScript, e revela: "Você pode destruir e reconstruir o DOM sem medo. O arquivo original nunca foi tocado."
4. O que é o DOM (revelado após todos os desafios)
Seção que aparece com fade-in só após os 4 desafios concluídos. Explica: DOM = Document Object Model. O browser lê o HTML e constrói uma árvore de objetos na memória. O DevTools é uma janela para essa árvore — e o JavaScript é o que permite manipulá-la programaticamente. Exibe uma árvore visual simples em ASCII estilizado:
document
└── html
├── head
└── body
├── header
├── main
│ ├── section#desafio-1
│ ├── section#desafio-2
│ └── section#desafio-3
└── footer
Adicione uma nota: "Percebeu? Esta própria página tem essa estrutura. Você pode vê-la agora no DevTools."
5. Por que isso importa
Três cards curtos: (1) Debugar sem reler o código-fonte inteiro; (2) Experimentar CSS sem salvar arquivo; (3) Entender qualquer site do mundo — inspecione e aprenda.
6. Rodapé
"Aula 01 · Curso Programação Web do Zero com IA" + botão "Próxima aula →".
Implementação técnica — MutationObserver:
Cada observer deve ser instanciado apenas quando o desafio correspondente se tornar ativo (não todos de uma vez). Após detectar a conclusão, chame observer.disconnect() imediatamente para evitar loops. Use uma função concluirDesafio(n) centralizada que: marca o card como concluído visualmente, desconecta o observer, e após 800ms de delay revela o próximo desafio com fade-in. O código deve ser limpo e comentado em português, pois o aluno vai abrir no DevTools e ler o fonte como parte do aprendizado — o próprio código é material didático.
Estética:
Fundo escuro #0f0e0c, fontes DM Mono + Fraunces via Google Fonts, verde #60d88a para concluído, vermelho #ff5e5e para erro/aguardando, amarelo-lima #c8f060 como accent principal. Barra de progresso scroll-driven no topo. Cards de desafio com três estados visuais distintos: bloqueado (opacidade reduzida), ativo (borda pulsante em accent), concluído (borda verde, badge "✓ concluído"). Elementos-alvo de cada desafio com label flutuante "← alvo deste desafio". Tudo em português brasileiro. Arquivo único .html sem dependências externas além do Google Fonts.