Песочница HTML / CSS / JS

Пишите вёрстку и скрипты — результат обновляется сразу справа. Удобно учиться веб-разработке и быстро проверять идеи. Всё выполняется прямо в браузере, в изолированном окне. 

<h1>Привет, codechick! 🐤</h1>
<button id="btn">Нажми меня</button>
<p id="out"></p>
body { font-family: sans-serif; text-align: center; padding: 24px; }
h1 { color: #C77; }
button { padding: 8px 18px; border: 0; border-radius: 10px;
  background: #FFD60A; font-weight: 700; cursor: pointer; }
let n = 0
document.getElementById('btn').onclick = () => {
  n++
  document.getElementById('out').textContent = 'Кликов: ' + n
}
Результат
Готовим превью…

Как это работает

Песочница собирает ваш HTML, CSS и JavaScript в одну страницу и показывает её в изолированном окне (iframe с песочницей): код не имеет доступа к остальному сайту и вашим данным. Изменения применяются автоматически с небольшой задержкой. Это удобный способ учиться вёрстке, экспериментировать со стилями и пробовать скрипты, не настраивая ничего на компьютере.

Поддержать проект