Ferramenta HTML Playground

Introdução

Um playground HTML é um ambiente online em sandbox onde você pode experimentar códigos sem consequências. Escreva o que quiser, execute, veja os resultados e recomece. É o lugar perfeito para aprender, testar e explorar tecnologias da web.

O que torna um playground diferente?

Um playground é projetado para experimentação. Ao contrário de um IDE de produção, não há estrutura de projeto com que se preocupar, arquivos para salvar e pipeline de implantação. Você tem uma tela em branco e a liberdade de tentar qualquer coisa.

Isto é especialmente valioso para:

• Testando "e se?" cenários rapidamente
• Experimentando novas propriedades CSS sobre as quais você leu
• Experimentando APIs JavaScript que você nunca usou antes
• Construindo protótipos descartáveis
• Reproduzindo bugs isoladamente

Recursos do parque infantil

• Redefinição instantânea — Um clique para retornar ao estado padrão
• Execução em sandbox — O código é executado em um iframe isolado
• Saída do console — Veja registros e erros de JavaScript
• Opção de download — Salve os experimentos que deseja manter
• Otimizado para dispositivos móveis — Experimente em qualquer dispositivo

Ideias para experimentar no playground

1. Crie um spinner de carregamento animado somente CSS
2. Crie um layout de grade responsivo com CSS Grid
3. Crie uma lista de tarefas simples com JavaScript
4. Teste a API Intersection Observer
5. Crie uma alternância de modo claro/escuro
6. Experimente propriedades personalizadas CSS (variáveis)
7. Crie um cronômetro de contagem regressiva

Comece a experimentar

Visite o HTML Code Runner e comece a brincar com o código. Não existem regras, limites e consequências – apenas você e o navegador.

Recursos relacionados

• HTML Code Runner — Execute código instantaneamente
• Como executar código HTML on-line
• Editor HTML on-line
• Ferramenta HTML Playground
• Editor HTML para iniciantes
• Todas as ferramentas para desenvolvedores
• Perguntas frequentes