01 / ABERTURA
DV D E V C L U B
HTML,
CSS,
JavaScript
+ IA
AULA 01 · FUNDAMENTOS DA WEB 4 LINGUAGENS · 1 CARRO · SUPER PODERES
02 / FERRAMENTA · VS CODE
ANTES DE ESCREVER A PRIMEIRA LINHA
Nosso editor de código será o Visual Studio
Code.
[Link] — devclub
EXPLORADOR [Link] [Link]
Gratuito ▸ devclub 1 <!DOCTYPE html>
Baixe e use sem pagar nada. Sem conta, sem teste grátis. 📄 [Link] 2 <html>
🎨 [Link] 3 <body>
4 <h1>Olá, DevClub!</h1>
É da Microsoft ⚡ [Link]
5 </body>
6 </html>
Atualizações frequentes, comunidade gigante, confiável.
Leve e fácil de instalar
Instalador simples. Roda rápido até em máquinas modestas.
Todos os idiomas e plataformas
Windows, macOS, Linux. Interface em português, inglês, etc.
● main Ln 6, Col 8 UTF-8 HTML
FERRAMENTA · VS CODE GRÁTIS · MULTIPLATAFORMA
03 / VS CODE · EXTENSÕES ESSENCIAIS
INSTALE ANTES DA PRÓXIMA AULA
5 extensões que todo dev tem que ter.
Vá em Extensions na barra lateral (ou Ctrl+Shift+X ) e procure pelo nome.
01 02 03 04 05
Portuguese (Brazil) Dracula Official Material Icon Theme Color Highlight Live Server
Language Pack · Microsoft Tema · Dracula Theme Ícones · Philipp Kief CSS · Sergii Naumov Servidor · Ritwick Dey
Traduz a interface inteira do VS Tema escuro com fundo roxo Ícones coloridos para cada tipo de Mostra as cores hexadecimais direto Abre seu HTML no navegador com
Code para português do Brasil. profundo e cores vivas. Um dos pasta e arquivo. Navegação mais no editor — pinta o fundo do código reload automático a cada salvar.
favoritos dos devs. rápida. com a cor. Essencial.
Por quê: cansa menos a vista, código Por quê: bate o olho e já sabe o tipo do Por quê: bate o olho e já sabe a cor do
Por quê: menus e comandos em PT-BR. mais legível. arquivo. CSS. Por quê: vê o resultado na hora, sem F5.
SETUP · VS CODE INSTALE ANTES DA PRÓXIMA AULA
04 / PERGUNTA
COM O EDITOR PRONTO…
O que acontece
exatamente quando
você abre um site?
Quatro linguagens entram em cena — cada uma com um papel específico.
Saber quem faz o quê é o que separa quem copia código de quem realmente entende.
HTML CSS JAVASCRIPT IA
AULA 01 · DEVCLUB → AVANÇAR
HTML
05 / HTML · O CHASSI
COMEÇANDO PELO COMEÇO
HYPERTEXT MARKUP LANGUAGE
O chassi do carro
Define o que existe na página.
A estrutura bruta, sem pintura, sem
motor.
Títulos, parágrafos, botões, imagens, links
Semântica = significado de cada pedaço
Sozinho, funciona — mas parece um documento dos anos 90
CAPÍTULO 01 · HTML ESTRUTURA → O QUE EXISTE
CSS
06 / CSS · PINTURA
AGORA DÁ PRA MOSTRAR PROS AMIGOS
CASCADING STYLE SHEETS
Pintura e acabamento
Define como parece.
Cores, tipografia, tamanhos,
espaçamento, animações.
Cor, fonte, padding, margin, border-radius
Layout (flex, grid) — organiza tudo na tela
Bonito, mas ainda não faz nada ao clicar
CAPÍTULO 02 · CSS APARÊNCIA → COMO PARECE
JS
07 / JAVASCRIPT · MOTOR
AGORA O CARRO ANDA
JAVASCRIPT
O motor
Define como reage.
Reage a cliques, valida formulários,
puxa dados, atualiza a tela sem
recarregar.
Variáveis, funções, eventos (click, input, scroll)
Muda o HTML e o CSS ao vivo — faz a página "pensar"
Conversa com servidores e APIs pela internet
CAPÍTULO 03 · JAVASCRIPT COMPORTAMENTO → COMO REAGE
08 / IA · TRANSFORMER
IA
E AGORA… O SUPER PODER
INTELIGÊNCIA ARTIFICIAL
O carro vira Transformer
O carro se transforma.
Gera conteúdo, entende linguagem,
toma decisões, aprende sozinho.
Chatbots que conversam como gente
Gera textos, imagens, código, resumos
Automações que pensam — não só executam
CAPÍTULO 04 · IA SUPER PODERES → COMO PENSA
09 / A METÁFORA COMPLETA
QUATRO CAMADAS, UM SÓ PRODUTO
Pense num app como um carro Transformer.
01 02 03 04
HTML CSS JS IA
Chassi Pintura & acabamento Motor Transformer
A estrutura bruta. Define o que existe. Sem Cor, forma, estilo. É o que faz o carro ser Dá movimento. Liga faróis, acelera, reage Super poderes. O carro aprende, decide, se
isso, não há carro. esse carro. ao pedal — interatividade. transforma.
METÁFORA COMPLETA HTML · CSS · JS · IA
10 / DEMO · LIGA E DESLIGA
CLIQUE NOS BOTÕES — VEJA CADA CAMADA APARECENDO
Veja na prática o que cada camada faz.
[Link]
NOVO
HTML
Chassi — o esqueleto
LIGADO
Tênis Orbit Run
CSS LIGADO
R$ 599 R$ 449
Pintura e acabamento
Super leve, perfeito para corridas urbanas e treinos longos.
JavaScript Adicionar ao carrinho
LIGADO
Motor — reage ao clique
No carrinho: 0
IA DESLIGADO
Super poder — gera conteúdo
→ Desligue CSS: feio, mas funciona.
→ Desligue JS: bonito, mas travado.
→ Ligue IA: super poder.
DEMO AO VIVO CLIQUE NOS 4 BOTÕES
11 / HTML · OS 3 PILARES
PARA DOMINAR HTML VOCÊ PRECISA ENTENDER 3 COISAS
Toda página é feita de tags, atributos e
conteúdo.
01 PILAR UM 02 PILAR DOIS 03 PILAR TRÊS
Tags Atributos Conteúdo
São as peças da página. Cada tag declara São as configurações de cada tag. Dão É o que fica entre a tag de abertura e a de
que tipo de coisa é aquele elemento — um detalhes extras — pra onde o link vai, qual fechamento. O texto, a imagem, outras tags
título, um parágrafo, um botão, uma imagem. imagem mostrar, qual estilo aplicar. aninhadas — o que o usuário de fato vê.
<h1>Título</h1> <a href="[Link]"> <h1> Olá, mundo </h1>
<p>Parágrafo</p> <img src="[Link]"> // "Olá, mundo" é o
<button>Clique</button> <div class="card"> // conteúdo da tag h1
CAPÍTULO 01 · HTML 3 PILARES → DOMINAR HTML
12 / HTML · ANATOMIA
COMO UMA TAG FUNCIONA
Tudo em HTML é uma tag.
<h1 class="titulo"> Olá, mundo </h1>
CONTEÚDO
TAG DE ABERTURA ATRIBUTO o que aparece na tela TAG DE FECHAMENTO
começa o elemento informação extra termina o elemento
HTML · ANATOMIA <TAG ATRIBUTO="VALOR">CONTEÚDO</TAG>
13 / CSS · SELETOR
ANTES DE PINTAR, VOCÊ PRECISA APONTAR
Como o CSS escolhe quem estilizar.
.titulo color tomato
SELETOR
quem será estilizado { PROPRIEDADE
o que vai mudar : VALOR
como vai ficar ; }
h1 .titulo #logo *
Por tag Por classe Por id Tudo
Pega toda tag <h1> da página. Pega quem tem class="titulo" . Pode repetir. Pega o único com id="logo" . Só um. Pega todos os elementos da página.
CSS · SELETOR SELETOR { PROPRIEDADE: VALOR; }
14 / CSS · AO VIVO
MEXA NOS CONTROLES — O VISUAL MUDA EM TEMPO REAL
CSS é propriedade + valor.
[Link] [Link]
.botao {
background: #15803d;
color: #f0fdf4;
padding: 16px 32px;
border-radius: 12px;
font-size: 20px;
}
background-color
Clique aqui
padding 16px 32px
border-radius 12px
font-size 20px
CSS · AO VIVO MEXA NOS SLIDERS ↓
15 / NOS BASTIDORES
A ORDEM IMPORTA
Como o navegador monta a página.
01 02 03 04 05
Lê o HTML Aplica o CSS Executa o JS Consulta a IA Você interage
Cria a árvore de elementos (o DOM). Pinta, posiciona, dimensiona cada Liga eventos, menus, dados Pede respostas inteligentes via API. Tudo em milissegundos. Parece
elemento. dinâmicos. mágica.
BASTIDORES HTML → CSS → JS → IA → TELA
16 / JS · LÓGICA AO VIVO
CADA CLIQUE = UMA LINHA DE CÓDIGO EXECUTANDO
JS escuta e reage.
[Link] [Link]
// 1. pega o botão e o visor na página
const botao = [Link]('#btn');
const visor = [Link]('#visor');
0
// 2. cria uma variável para contar
let contador = 0;
// 3. quando clicar no botão…
[Link]('click', () => {
contador++; // soma 1
[Link] = contador; // atualiza a tela
});
Clique em mim
Cliques: 0
JS · CONTADOR CLIQUE NO BOTÃO →
17 / JS · VARIÁVEIS
COMO O JAVASCRIPT GUARDA INFORMAÇÃO
Variáveis são caixinhas com etiqueta.
Você guarda um valor dentro e dá um nome pra ele. Depois usa esse nome toda vez que precisar.
[Link]
let textoUsuario ⟵ "padaria do João"
let endereco ⟵ "[Link]
// Guardo o que o usuário digitou
let textoUsuario = "padaria do João"
let botao ⟵ [Link]... // Guardo o endereço da API
let endereco = "[Link]
Pense assim: a caixa tem um nome escrito fora, e um valor guardado dentro. // Guardo uma referência ao botão
Use let quando o valor pode mudar depois. let botao = [Link](".botao-gerar")
JS · VARIÁVEIS CAIXINHAS COM NOME E VALOR
18 / JS · FUNÇÕES
COMO AGRUPAR INSTRUÇÕES E REUTILIZAR
Funções são receitas que você executa quando
quiser.
Você escreve o passo-a-passo uma vez. Depois é só chamar pelo nome — e toda a receita roda de novo.
[Link]
// Defino a receita (a função)
async function gerarPagina() {
// Passo 1 — pegar o texto
gerarPagina()
ENTRA SAI let texto = [Link]
pega o texto
o que o usuário
digitou
→ 1
→ uma landing page
pronta
2 chama a IA
3 mostra o resultado // Passo 2 — chamar a IA
let resposta = await fetch(endereco, ...)
A sacada: você escreve async function gerarPagina() uma vez. // Passo 3 — mostrar na tela
Toda vez que chamar, o passo-a-passo inteiro executa. [Link] = resultado
}
// Depois, chamo a receita quando quiser:
gerarPagina()
JS · FUNÇÕES RECEITAS REUTILIZÁVEIS
19 / JS · EVENTOS
COMO FAZER O CÓDIGO REAGIR AO USUÁRIO
Eventos são olhos vigilantes esperando algo
acontecer.
Você fala pro JS: "fique de olho nesse botão. Quando clicarem, execute essa função." E pronto.
[Link]
// 1. Pegue o botão
let botao = [Link](".botao-gerar")
👆 → 👁️ → ⚡ // 2. Diga: "quando clicar, chame essa função"
Usuário clica addEventListener escuta Função executa [Link]("click", gerarPagina)
// ↑ ↑ ↑
Clique aqui 0 cliques
// quem qual evento o que fazer
Eventos comuns: click , input , submit , scroll , keydown . // Agora, toda vez que o usuário clicar,
// gerarPagina() roda automaticamente.
JS · EVENTOS ESCUTA → REAGE
20 / JS · CHAMADA A API
COMO O SITE CONVERSA COM OUTROS SERVIÇOS
fetch é um entregador que busca dados na
internet.
Seu site fica no computador do usuário. A IA, o clima, o CEP, o estoque — tudo isso mora em outro servidor. O fetch vai lá, pede e traz a resposta.
💻
Seu site
POST [Link]
←
→
200 OK { resposta: "..." }
🤖Groq
[Link]
// O entregador sai, bate na porta da API
no navegador servidor de IA
// e espera a resposta voltar (await)
let resposta = await fetch(endereco, {
3 coisas que você manda: method: "POST",
① o endereço (para onde) headers: {
② o método (POST = enviar algo) "Authorization": "Bearer gsk_..."
③ os dados (o que mandar) },
body: [Link]({
model: "llama-3.3-70b",
messages: [...]
})
})
// Traduzo a resposta de JSON pra objeto
let dados = await [Link]()
// Uso o que a IA gerou
[Link] = [Link][0].[Link]
JS · FETCH PEDE → ESPERA → USA
21 / IA · UM PROMPT, MIL RESULTADOS
A IA CONVERSA — VOCÊ SÓ PRECISA PEDIR
IA gera, entende, decide.
PROMPT RESPOSTA DA IA
Título de produto Resumir texto Slogans Explicar simples Escolha um prompt e clique em "Gerar"…
Escreva um título chamativo para um tênis de corrida leve e
rápido.
Gerar com IA →
→ Linguagem natural · sem código complexo · respostas sob demanda
IA · DEMO UM PROMPT · UMA RESPOSTA GERADA
22 / RESUMO DA AULA
UMA FRASE PARA LEVAR PRA CASA
HTML é o que existe.
CSS é como parece.
JavaScript é como reage.
IA é como pensa.
01 · ESTRUTURA 02 · APARÊNCIA 03 · COMPORTAMENTO 04 · SUPER PODER
HTML CSS JavaScript IA
→ tags, atributos, conteúdo → seletor · propriedade · valor → const, let, funções → prompt · resposta gerada
→ <h1> <p> <img> <a> → color, font, padding, margin → eventos (click, input…) → texto, imagem, código
→ semântica = significado → layout (flex, grid) → muda o DOM ao vivo → automações que pensam
RESUMO EXISTE · PARECE · REAGE · PENSA