1. Estruturação Semântica em HTML5
Escreva código acessível e limpo no painel HTML. O editor organiza automaticamente sua marcação em um documento HTML5 padrão.
<div class="interactive-card">
<h2>Controle de Tarefas</h2>
<input type="text" id="taskInput" placeholder="Nova tarefa..." />
<button id="addBtn">Adicionar</button>
<ul id="taskList"></ul>
</div>2. Aplicação de Estilos CSS com Feedback Imediato
Estilize seu componente no painel CSS. A pré-visualização atualiza conforme você digita, preservando o foco e a rolagem da página.
.interactive-card {
max-width: 480px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e6dfd8;
border-radius: 8px;
}3. Inclusão de Lógica com JavaScript Moderno
Programe em ECMAScript moderno. Mensagens de console são capturadas no console virtual integrado para testes imediatos.
document.getElementById('addBtn').onclick = () => {
const input = document.getElementById('taskInput');
if (!input.value) return;
const li = document.createElement('li');
li.textContent = input.value;
document.getElementById('taskList').appendChild(li);
input.value = '';
};4. Testes em Dispositivos Móveis com QR Code
Destaque a janela de pré-visualização para um monitor secundário ou leia o QR code no seu smartphone para testar em um aparelho real.