Como testar HTML responsivo

Passos

1. Comece pelo template inicial ou carregue um projeto de exemplo.
2. Edite a estrutura HTML, os estilos CSS e o comportamento JavaScript.
3. Pressione Executar (Ctrl/Cmd + Enter) para atualizar a pré-visualização sandbox.
4. Abra o painel do console para ler logs, avisos e erros.
5. Use os controles responsivos para verificar o layout em larguras comuns.
6. Formate, copie ou baixe seu trabalho como index.html.

Exemplo

Exemplo — Executar

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

Os cartões usam três colunas acima de 600px e uma coluna até 600px. A simulação de largura não substitui testes em dispositivos reais.

Dica

A execução básica de HTML, CSS e JavaScript para a pré-visualização ocorre localmente no seu navegador.

Ferramentas relacionadas