Desafios Combinados Frontend
Editor Triplo: JSON + HTML + CSS com Validação Integrada
Em Aberto
Preview em Tempo Real
Sistema de Dicas
Validação Automática
  • Clica em "Validar" para avaliar a tua solução.

Manual de Aprendizagem por Capítulos

Segue o trilho estruturado para dominar HTML, CSS e JSON do zero à integração full-stack frontend.

Capítulo 1
HTML5 & Semântica

Estruturação de documentos, elementos semânticos, formulários e acessibilidade ARIA.

Capítulo 2
CSS3 Layouts & Responsive

Modelo de caixas, Flexbox, CSS Grid, estados :hover e Media Queries responsivas.

Capítulo 3
JSON & Modelação de Dados

Sintaxe RFC 8259, objetos aninhados, arrays de dados e consumo em respostas de APIs.

Agenda de Estudo & Planeamento

Semana Meta / Capítulo Exercícios Práticos Estado
Semana 1 Fundamentos HTML5 + JSON Base Exercícios 1 e 2 de JSON Concluído
Semana 2 Estilização CSS & Flexbox Desafios 1 a 5 de CSS Em Progresso
Semana 3 CSS Grid & Objetos JSON Aninhados Desafios Avançados Pendente
Semana 4 Integração Combinada (HTML+CSS+JSON) Desafios Full-Stack Frontend Pendente

Documentação de Consulta Rápida

<div id="..." class="...">: Container genérico.
<button class="...">: Botão interativo.
<h1> a <h6>: Hierarquia de títulos semânticos.

display: flex; flex-direction: column; gap: 12px;: Layout em coluna.
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));: Grelha responsiva.

• Aspas duplas obrigatórias em chaves e textos: "chave": "texto"
• Tipos válidos: String, Number, Boolean (true/false), Array [], Object {}, null.