div-span-dupla-Ramon-Isabella

💻 DIV x SPAN + LLMs

Dupla: Ramon & Isabella

Comparativo entre Claude 4.5 Sonnet e GPT-5 na geração, explicação e depuração de código HTML/CSS.

⚙️ Como Rodar o Projeto

  1. Abra a pasta 01-base/ no VS Code.
  2. Clique com o botão direito em index.html → Open with Live Server (ou abra diretamente no navegador).
  3. O arquivo styles.css já está vinculado externamente.
  4. As versões experimentais e correções estão nas pastas 02-experimentos/ e 03-bugs-e-correcoes/.
  5. Toda a documentação e comparativos estão na pasta docs/.

🧩 Etapa 1 — Pessoa A (Ramon / Claude 4.5)

Data Hora Etapa Descrição
14/10/2025 11:25 Prompt 1 Definição teórica — diferença entre elementos block-level e inline-level com exemplos de uso de DIV e SPAN.
14/10/2025 11:45 Prompt 2 Criação do código base (index.html e styles.css) com três cartões exemplificando uso de DIV e SPAN.
14/10/2025 12:02 Prompt 3 Aplicação do Box Model, adicionando bordas, padding, outline e comentários explicativos no CSS.

✅ Entregas concluídas:

🧠 Etapa 2 — Pessoa B (Isabella / GPT-5)

e continuação com Claude (Ramon) nos Prompts 7 e 8

Data Hora Etapa Descrição
15/10/2025 18:27 Prompt 1 Definição teórica — replicação da explicação com GPT-5 (comparativo com Claude).
15/10/2025 18:56 Prompt 2 Geração da base com HTML semântico (header, main, section) e CSS externo com comentários detalhados.
15/10/2025 19:12 Prompt 3 Aplicação do Box Model com classes e variáveis customizadas, simulando camadas coloridas de content/padding/border/margin.
15/10/2025 19:28 Prompt 4 Transformação de <span> em blocos (display:block) com comparação de comportamento visual.
15/10/2025 19:42 Prompt 5 Uso de display:inline-block para manter elementos lado a lado com largura e altura definidas.
15/10/2025 19:58 Prompt 6 Comparativo visual (3 DIVs empilhadas x 4 SPANs em linha) com legenda explicativa e grid responsivo.
15/10/2025 20:15 Prompt 7 (Ramon / Claude 4.5) Análise e correção de bugs envolvendo display, width/height e margens.
15/10/2025 20:32 Prompt 8 (Ramon / Claude 4.5) Inserção de elementos semânticos e atributos ARIA para acessibilidade sem afetar o layout.
15/10/2025 20:42 Prompt 9 (Isabella / GPT-5) Geração de teste de conhecimento com 6 questões (3 múltipla escolha e 3 V/F) sobre display.

✅ Entregas concluídas:

📊 Comparativo de LLMs — Claude 4.5 x GPT-5

Critério Claude 4.5 GPT-5 Observações
Correção técnica (block/inline/ib) 5 5 Ambos corretos; GPT-5 deu explicações mais detalhadas e complementares.
HTML/CSS semântico e limpo 4 5 Claude foi direto; GPT-5 aplicou HTML semântico e boas práticas modernas.
Depuração (bugs e layout) 4 5 Claude identificou erros corretamente; GPT-5 otimizou hierarquia e identação.
Clareza das explicações 5 5 Ambos explicaram bem, mas GPT-5 trouxe mais contexto didático.
Acessibilidade mínima 4 5 GPT-5 adicionou aria-label, role e uso semântico claro.

Médias: Claude 4.5 → 4.4 • GPT-5 → 5.0

Conclusão:

📘 Relatório Final — Dupla Ramon & Isabella

O que aprendemos

Diferenças entre LLMs

Claude 4.5: direto, sintético, ótimo para conceitos e debugging.
GPT-5: detalhado, técnico e voltado a boas práticas de estrutura e acessibilidade.

Erros comuns e correções

✍️ Projeto desenvolvido para a atividade “DIV x SPAN + LLMs” — Uniacademia (Out/2025)
Dupla: Ramon & Isabella — Claude 4.5 Sonnet x GPT-5