Gen-IA para Dev de Código

CodePen + HTML/CSS/JS — Do zero ao deploy usando IA para planejar, gerar, revisar e depurar.

mini-projetos

imersão prática

100%

navegador

Projetos: Landing responsiva • Componente interativo (tabs + tema) • Mini-app com Fetch API • Duo Quiz • Game 2D • Depurar / Refatorar.

Apresente os objetivos. Reforce a IA como parceira de programação: planejar → gerar → testar → iterar.

IA no Dia a Dia

Explore como ferramentas de IA (ChatGPT, Grok, DeepSeek, Gemini, Copilot) podem potencializar sua rotina acadêmica.

ChatGPT

Grok

DeepSeek

Gemini

Copilot

O Desafio Monumental

Produção acelerada de código

Backlog infinito e prazos apertados.
Context-switching e retrabalho.
Boas práticas (acessibilidade, testes) ficam para depois.

Otimizar tarefas-chave

Planejamento guiado por prompts.
Geração inicial + refino incremental.
Checks automatizados: lint, a11y, processo de integração contínua (CI/CD), performance.

A Solução Revolucionária — Velocidade

Manual

Especificar → Codar → Testar

IA-Assistido

Prompt → Gerar → Diagnosticar

Setup & Fluxo com IA

Criar conta e um Pen novo no CodePen (HTML/CSS/JS separados).
Estratégia IA: Prompt → Code → Preview → Debug → Iteração.
Boas práticas de prompt:
- Defina contexto (ex.: "HTML sem frameworks, acessível, mobile-first").
- Especifique restrições (ex.: "sem bibliotecas externas").
- Peça explicação dos passos e testes rápidos.

O que é HTML?

HTML (HyperText Markup Language) é a linguagem de marcação usada para estruturar o conteúdo de páginas web. Ele define elementos como títulos, parágrafos, listas, links e imagens.


<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>Exemplo HTML</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Este é um parágrafo em HTML.</p>
  </body>
</html>

O que é CSS?

CSS (Cascading Style Sheets) é a linguagem que define a apresentação dos elementos HTML: cores, fontes, espaçamentos, tamanhos e layouts.


body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #1dd3f8;
  text-align: center;
}

O que é JavaScript?

JavaScript é a linguagem de programação usada para tornar páginas web interativas. Com ele é possível manipular elementos HTML e reagir a eventos do usuário.


function saudacao(nome) {
  alert("Olá, " + nome + "!");
}

saudacao("Jéfer");

ARIA viva — botão expandir

Exemplo mínimo de aria-expanded + hidden:

Use aria-expanded em controles que abrem/fecham conteúdo.

Crie um exemplo em HTML de um botão com aria-expanded
que controla a exibição de um conteúdo oculto usando hidden.

Landing Responsiva (HTML/CSS)

No CodePen, crie um Pen vazio.
Use a IA para gerar o layout com header, hero, grid de cards e footer.
Peça semântica, acessibilidade e mobile-first.

Prompt sugerido (cole no seu chat de IA):

Quero uma landing page HTML + CSS (sem frameworks) com: header fixo, seção hero com CTA,
grid de 3 cards e footer. Estilo moderno, acessível (aria-labels), tipografia do sistema,
layout mobile-first com max-width centralizado. Entregue apenas o HTML e o CSS, separados,
prontos para colar no CodePen. Inclua comentários explicando as principais regras.

Starter (se precisar):

<!-- HTML (CodePen > aba HTML) -->
<header role="banner" class="site-header">
  <nav aria-label="Primária">
    <h1 class="brand">Minha Landing</h1>
    <button class="cta" aria-label="Ação principal">Começar</button>
  </nav>
</header>
<main class="container">
  <section class="hero">
    <h2>Crie experiências web com IA</h2>
    <p>HTML, CSS e JavaScript com auxílio de IA para acelerar sua entrega.</p>
    <a class="btn" href="#cards">Ver exemplos</a>
  </section>
  <section id="cards" class="grid">
    <article class="card"><h3>Semântica</h3><p>Estruture bem o HTML.</p></article>
    <article class="card"><h3>Responsivo</h3><p>Mobile-first, grid flexível.</p></article>
    <article class="card"><h3>Acessível</h3><p>ARIA e contraste de cores.</p></article>
  </section>
</main>
<footer class="site-footer">© 2025 — Você</footer>

Se a IA retornar CSS confuso, peça “refatore o CSS em seções: reset, layout, componentes”.

M2 — Componentes (JS: Tabs + Tema)

Gerar com IA um componente de tabs acessíveis (ARIA, teclado).
Adicionar um toggle de tema (claro/escuro) persistindo no localStorage.
Testar navegação por teclado (Tab/Setas) e contraste.

Prompt sugerido:

Contexto: Vou usar no CodePen (abas HTML/CSS/JS separadas). Não use frameworks nem bibliotecas.

Objetivo: Criar um componente Tabs acessível (WAI-ARIA) com:

Navegação por teclado apenas com setas Esquerda/Direita (sem Home/End).

Clique do mouse ativa a tab.

Enter/Space também podem ativar a tab focada.

Sem dependências; apenas HTML, CSS e JS puro.

Acessibilidade (obrigatório):

Estrutura:

Um contêiner com data-tabs.

Um div com role="tablist".

Vários button role="tab" com aria-controls apontando para cada painel.

Painéis com role="tabpanel" e aria-labelledby para a tab correspondente.

Estado:

Exatamente uma tab com aria-selected="true" e tabindex="0"; as demais aria-selected="false" e tabindex="-1".

Painéis não ativos devem estar hidden.

Foco visível com :focus-visible.

Interações de teclado (sem Home/End):

Seta Direita: move foco para a próxima tab (loop circular).

Seta Esquerda: move foco para a anterior (loop circular).

Enter ou Barra de Espaço: ativa a tab focada (mostra o painel).

Funcionais:

Clique em uma tab ativa a tab e exibe o painel.

Suporte a múltiplos grupos de tabs na mesma página (o JS deve inicializar todos os data-tabs).

CSS:

Visual limpo (modo claro/escuro opcional com data-theme="light|dark" no :root).

Foco visível e estado de selecionado.

JS:

Funções pequenas e comentadas: initTabs(), setupTabGroup(root), activate(root, index).

Sem variáveis globais “vazando”.

Não usar innerHTML para conteúdo das tabs; apenas alternar hidden, aria-selected e tabIndex.

Entrega:

Três blocos: 1) HTML, 2) CSS, 3) JS — prontos para colar nas abas do CodePen.

Inclua exatamente 3 tabs de exemplo (Introdução, HTML, CSS).

No final, inclua um checklist de verificação manual (5 passos) e explique como testar as setas.

Critérios de aceite (não saia disso):

Setas ←/→ movem apenas o foco entre tabs (loop) — sem ativar painel automaticamente.

Enter/Space ativam a tab focada.

Clique ativa a tab.

Apenas um aria-selected="true" e um painel visível por vez.

Suporta mais de um data-tabs na página.

Starter JS (mínimo funcional):

// Toggle de tema
const btnTheme = document.querySelector('[data-theme-toggle]');
const root = document.documentElement;
const saved = localStorage.getItem('theme') || 'dark';
root.dataset.theme = saved;
btnTheme?.addEventListener('click', ()=>{
  const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
  root.dataset.theme = next;
  localStorage.setItem('theme', next);
});

// Tabs acessíveis (mínimo)
const tablist = document.querySelector('[role="tablist"]');
if(tablist){
  const tabs = tablist.querySelectorAll('[role="tab"]');
  tabs.forEach((tab,i)=>{
    tab.addEventListener('click',()=>activate(i));
    tab.addEventListener('keydown',(e)=>{
      const k=e.key;
      if(['ArrowRight','ArrowLeft','Home','End'].includes(k)){
        e.preventDefault();
        let idx = i + (k==='ArrowRight'?1:k==='ArrowLeft'?-1:0);
        if(k==='Home') idx=0; if(k==='End') idx=tabs.length-1;
        tabs[Math.max(0,Math.min(tabs.length-1,idx))].focus();
      }
    });
  });
  function activate(i){
    const panels = document.querySelectorAll('[role="tabpanel"]');
    tabs.forEach((t,ix)=>{
      const selected = ix===i;
      t.setAttribute('aria-selected', selected);
      t.tabIndex = selected?0:-1;
      panels[ix].hidden = !selected;
    });
  }
  activate(0);
}

M3 — Mini-app com Fetch API

Construir um buscador simples usando uma API pública (ex.: CEP via viacep).

Prompt sugerido:

Quero um mini-app HTML/CSS/JS que busque um CEP no serviço ViaCEP.
Campos: input para CEP, botão "Buscar" e área de resultado. Validar CEP (8 dígitos),
mostrar erros amigáveis, e limpar resultado ao apagar o CEP. CSS simples (mobile-first)
com estados de loading/erro. Separe o código para colar no CodePen.

Starter JS (mínimo funcional):

const input = document.querySelector('#cep');
const btn = document.querySelector('#buscar');
const out = document.querySelector('#resultado');
const msg = (t)=>"<p role='status'>"+t+"</p>";

btn?.addEventListener('click', async ()=>{
  const cep = (input.value||'').replace(/\D/g,'');
  if(cep.length!==8){ out.innerHTML = msg('CEP deve ter 8 dígitos.'); return; }
  try{
    out.innerHTML = msg('Buscando...');
    const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
    if(!r.ok) throw new Error('Falha na rede');
    const data = await r.json();
    if(data.erro) throw new Error('CEP não encontrado');
    out.innerHTML = `
      <ul>
        <li><strong>Logradouro:</strong> ${data.logradouro||'-'}</li>
        <li><strong>Bairro:</strong> ${data.bairro||'-'}</li>
        <li><strong>Cidade/UF:</strong> ${data.localidade||'-'}/${data.uf||'-'}</li>
      </ul>`;
  }catch(e){
    out.innerHTML = msg('Erro: '+e.message);
  }
});

input?.addEventListener('input',()=>{
  if(!input.value.trim()) out.innerHTML='';
});

Mini-projeto: Quiz estilo Duolingo (Linux)

Vamos criar um quiz de múltipla escolha “tipo Duolingo” com 5 perguntas sobre comandos Linux.

Prompt sugerido:

Crie um quiz HTML/CSS/JS, estilo Duolingo (sem frameworks), com 5 perguntas sobre
comandos Linux (pwd, ls, cd, mkdir, rm). A cada resposta, mostrar feedback (correto/errado),
marcar progresso, e no fim exibir pontuação. Mobile-first, acessível, sem libs externas.
Separe o código em HTML/CSS/JS para colar no CodePen.

Starter JS (dataset + lógica mínima):

const Q = [
  {q:'Qual comando mostra o diretório atual?', opts:['pwd','ls','cd','whoami'], a:0},
  {q:'Qual comando lista arquivos?', opts:['mv','ls','cat','cp'], a:1},
  {q:'Qual comando muda de diretório?', opts:['cd','echo','du','less'], a:0},
  {q:'Qual comando cria diretório?', opts:['touch','mkdir','rm','rmdir'], a:1},
  {q:'Qual comando remove arquivo?', opts:['grep','rm','find','awk'], a:1},
];
let i=0, score=0;
const qEl = document.querySelector('#q');
const optsEl = document.querySelector('#opts');
const prog = document.querySelector('#prog');

function render(){
  const {q,opts} = Q[i];
  qEl.textContent = q;
  optsEl.innerHTML = '';
  opts.forEach((t,ix)=>{
    const b = document.createElement('button');
    b.className='btn';
    b.textContent = t;
    b.onclick = ()=>check(ix);
    optsEl.appendChild(b);
  });
  prog.textContent = `${i+1}/${Q.length}`;
}
function check(ix){
  if(ix===Q[i].a){ score++; toast('Correto!'); }
  else { toast('Ops, resposta incorreta.'); }
  i++;
  if(i<Q.length) render();
  else finish();
}
function finish(){
  document.querySelector('#quiz').innerHTML = `
    <h3>Pontuação: ${score}/${Q.length}</h3>
    <p>${score>=4?'Excelente!':'Boa! Continue praticando.'}</p>`;
}
function toast(msg){
  const t=document.createElement('div'); t.className='callout'; t.textContent=msg;
  document.querySelector('#quiz').prepend(t); setTimeout(()=>t.remove(),1200);
}
render();

Progresso: 1/5

Pergunta aqui…

Mini-projeto: Jogo 2D (Pong)

Um Pongzinho em HTML Canvas + JS (sem libs): bola quica, raquete controlada e placar simples.

Prompt sugerido:

Crie um jogo 2D "Pong" em HTML/CSS/JS (sem frameworks), usando <canvas>:
- Bola com velocidade/ângulo, colisão com paredes e raquete
- Raquete controlada por teclado (↑/↓) e IA simples do outro lado
- Placar e reinício quando alguém faz ponto
- Código separado (HTML/CSS/JS) para colar no CodePen, com comentários no JS

Starter JS (mínimo funcional):

const cv = document.querySelector('canvas');
const ct = cv.getContext('2d');
const W=cv.width=640, H=cv.height=360;

const ball = { x: W/2, y: H/2, r: 8, dx: 4, dy: 3 };
const p1 = { x: 12, y: H/2-30, w: 10, h: 60, dy: 0, speed: 5 };
const p2 = { x: W-22, y: H/2-30, w: 10, h: 60 };
let s1=0, s2=0;

addEventListener('keydown', e=>{
  if(e.key==='ArrowUp') p1.dy = -p1.speed;
  if(e.key==='ArrowDown') p1.dy = p1.speed;
});
addEventListener('keyup', e=>{
  if(['ArrowUp','ArrowDown'].includes(e.key)) p1.dy = 0;
});

function reset(dir=1){
  ball.x=W/2; ball.y=H/2;
  ball.dx = 4*dir; ball.dy = (Math.random()*4-2)||2;
}

function collide(b, p){
  return b.x-b.r <= p.x+p.w && b.x+b.r >= p.x &&
         b.y+b.r >= p.y && b.y-b.r <= p.y+p.h;
}

function step(){
  // move player
  p1.y = Math.max(0, Math.min(H-p1.h, p1.y + p1.dy));
  // "IA" simples segue a bola
  const target = ball.y - p2.h/2;
  p2.y += Math.sign(target - p2.y) * 3;
  p2.y = Math.max(0, Math.min(H-p2.h, p2.y));

  // move bola
  ball.x += ball.dx; ball.y += ball.dy;

  // colisão paredes
  if(ball.y-ball.r<=0 || ball.y+ball.r>=H) ball.dy *= -1;

  // colisão raquetes
  if(collide(ball, p1) && ball.dx<0) ball.dx *= -1;
  if(collide(ball, p2) && ball.dx>0) ball.dx *= -1;

  // ponto
  if(ball.x < 0){ s2++; reset(1); }
  if(ball.x > W){ s1++; reset(-1); }

  // desenha
  ct.clearRect(0,0,W,H);
  // rede
  ct.fillStyle = 'rgba(255,255,255,.25)';
  for(let y=0;y<H;y+=16) ct.fillRect(W/2-1,y,2,8);
  // bola
  ct.fillStyle = '#fff';
  ct.beginPath(); ct.arc(ball.x, ball.y, ball.r, 0, Math.PI*2); ct.fill();
  // raquetes
  ct.fillRect(p1.x,p1.y,p1.w,p1.h);
  ct.fillRect(p2.x,p2.y,p2.w,p2.h);
  // placar
  ct.font = '20px JetBrains Mono, monospace'; ct.fillText(`${s1} : ${s2}`, W/2-18, 24);

  requestAnimationFrame(step);
}
reset(); step();

Dicas: pedir à IA power-ups e níveis de dificuldade; depois exportar para CodePen separando HTML/CSS/JS.

IA para Depurar & Refatorar

Diagnóstico dirigido: cole o erro do console e o trecho mínimo do código.
Refatoração: peça “melhorar legibilidade, extrair funções, nomear variáveis claras”.
Acessibilidade: solicite revisão de ARIA e navegação por teclado.
Performance: peça checklist (paint/layout, CSS pesado, imagens, debounce/throttle).

Prompt rápido:

Tenho este erro no console: <cole aqui>
Este é o trecho mínimo relevante do meu código: <cole aqui>
Mostre a causa provável e proponha uma correção pontual, explicando o motivo,
sem reescrever o arquivo todo.

Avaliação, Publicação & Próximos Passos

Checklist de entrega:
- Semântica correta, responsivo, contraste ok.
- Sem erros no console; acessível por teclado.
- Comentário inicial com autor/data/licença.
Publicar no CodePen: Save → Change View → Full Page → copiar link.
Próximos passos: componentizar (Web Components), testes básicos, pequenas libs utilitárias.

Encerramento & contato

Você sai com uma métodologia de uso da IA como parceira de geração código.

Prof. Jéfer Benedett Dörr — UFPR
E-mail: jefer@ufpr.br
Docs: docs.ufpr.br/~jefer/

Obrigado!