Koddo
начать бесплатно

// песочница HTML и CSS

HTML, CSS и JavaScript онлайн: редактор с живым результатом

Пиши код — страница обновляется сама, пока печатаешь. Три файла как в настоящем проекте, консоль для JavaScript и просмотр на ширине телефона. Без регистрации и установки.

писать код здесь открыть полный редактор

код хранится в этом браузере — регистрация не нужна

примеры:

код хранится в этом браузере · «поделиться» передаёт его ссылкой целиком

открыть на весь экран ↗

Подсказки появляются при вводе: стрелки выбирают, Enter или Tab вставляет, Esc закрывает, Ctrl и пробел открывают их вручную. Tab без подсказок ставит отступ; чтобы выйти из редактора, нажми Esc, затем Tab.

результат

Правки видны в результате сразу. JavaScript, консоль и шаблоны — в полном редакторе.

полный редактор

Что умеет песочница

Это полноценный редактор для вёрстки в браузере: пишешь HTML, CSS и JavaScript и сразу видишь страницу, как во вкладке браузера, только без файлов на диске.

  • просмотр

    Результат обновляется сам

    Страница пересобирается, пока ты печатаешь, — кнопки «запустить» нет. Ширина 375 и 768 показывает, как она выглядит на телефоне и планшете.

  • три файла

    Как в настоящем проекте

    Разметка в index.html, стили в styles.css, скрипт в script.js. Свой файл с компьютера открывается кнопкой «открыть файл» или перетаскиванием, а в архиве для компьютера всё уже связано.

  • JavaScript

    Консоль и ошибки со строкой

    console.log, ошибки скрипта и отправленные формы видны под результатом. У ошибки есть номер строки: щелчок открывает её в редакторе.

  • без зависаний

    Бесконечный цикл не страшен

    Цикл, который не может закончиться, останавливается через полторы секунды, и консоль называет его строку. Вкладка с кодом не зависает.

  • подсказки

    Редактор как в VS Code

    Тот же движок Monaco: подсветка, подсказки тегов и свойств CSS, парные скобки и кавычки, поиск и замена по Ctrl+F и Ctrl+H.

  • поделиться

    Ссылка с кодом и архив

    Кнопка «поделиться» кладёт код целиком в ссылку, «скачать» собирает архив из трёх файлов. Шаблоны дают быстрый старт: меню на Flexbox, галерея на Grid, анимация, форма.

Как открыть и посмотреть HTML онлайн

  1. Открой файл: кнопка «открыть файл» над кодом или просто перетащи его в окно редактора. Страница .html откроется целиком, а выбранные вместе с ней .css и .js лягут в свои вкладки.
  2. Или вставь код во вкладку index.html вместо шаблона. Можно целую страницу с <head>: блоки <style> и <script> внутри сработают как есть.
  3. Результат появится справа сразу. Ошибки скрипта и console.log — в консоли под ним.
  4. Переключи ширину на 375, чтобы увидеть страницу на телефоне, и поправь стили во вкладке styles.css.

Файл читается в браузере и никуда не отправляется. Чтобы показать страницу другому человеку, нажми «поделиться»: в ссылке будет весь код, и откроется она без регистрации.

«Повтори макет»: игра на CSS

Мишень — картинка 400 на 300 пикселей. Повтори её на HTML и CSS: процент совпадения меняется, пока печатаешь, звёзды дают за 90, 95 и 100%, а при равном счёте выигрывает код покороче. Это вёрстка по макету в миниатюре: размеры, отступы и цвета подбираются до пикселя.

играть с первого уровня макет дня

15 уровней и новый макет каждый день · без регистрации, прогресс и серия дней хранятся в этом браузере

Песочница, тренажёр и игра

Песочница — для своего кода. Когда захочется заданий с проверкой, переходи в тренажёр, а раскладку удобно разогреть в игре.

  1. ты здесь

    Песочница HTML, CSS и JavaScript

    Свой код без заданий: шаблоны, консоль, ссылка «поделиться» и архив из трёх файлов.

    к редактору
  2. задания · первые 6 бесплатно

    Тренажёр HTML и CSS

    21 задание от разметки и оформления до Flexbox, Grid, анимаций и форм на JavaScript. Проверка смотрит на результат, а не на текст кода.

    открыть тренажёр
  3. раскладка · бесплатно

    Игра «Flexbox и Grid»

    50 уровней, где justify-content, align-items и grid-template-columns сажают корабли на площадки.

    открыть игру

Теория с примерами для этой песочницы — в справочнике: теги HTML, ссылки, картинки, таблицы, формы, селекторы CSS, шрифты, переменные, отступы, выравнивание по центру, position, анимация, Flexbox и CSS Grid. Пример из любой статьи открывается в этой песочнице ссылкой под его кодом.

Частые вопросы

Нужна ли регистрация?

Нет. Редактор работает без аккаунта, а код хранится в этом браузере: закроешь вкладку — он останется. Аккаунт нужен в тренажёре HTML и CSS, чтобы сохранять прогресс по заданиям.

Работает ли JavaScript?

Да. Файл script.js выполняется в изолированном окне результата. console.log, ошибки с номером строки и отправленные формы видны в консоли под результатом, а бесконечный цикл останавливается сам через полторы секунды.

Можно подключить картинки, шрифты и библиотеки?

Да, по адресам https: картинки через <img src="https://…">, шрифты Google Fonts, библиотеки с CDN и запросы fetch к открытым API. Формы никуда не уходят: вместо отправки консоль показывает, какие поля ушли бы на сервер.

Куда сохраняется код?

Только в этом браузере, на сервер он не отправляется. «Поделиться» кладёт код целиком в ссылку после знака #, а «скачать» собирает архив из index.html, styles.css и script.js, который открывается на компьютере двойным щелчком.

Чем песочница отличается от тренажёра?

В песочнице свой код и никаких заданий. В тренажёре HTML и CSS — 21 задание от разметки до Flexbox, Grid и форм на JavaScript, а проверка смотрит на результат. Первые 6 заданий бесплатно.

Можно открыть HTML-файл с компьютера?

Да. Нажми «открыть файл» над кодом или перетащи файл в редактор: страница откроется во вкладке index.html и сразу появится в результате, а выбранные вместе с ней .css и .js — в своих вкладках. Ссылки страницы на свои стили и скрипт, например main.css или app.js, работают. Файл читается в браузере, на сервер он не уходит.

Есть ли задания на вёрстку по макету?

Да, игра «Повтори макет»: 15 картинок-мишеней от квадрата до облака на ::before и ::after и новый макет каждый день. Процент совпадения считается, пока печатаешь, звёзды дают за 90, 95 и 100%. Играть можно без регистрации.

Работает ли на телефоне?

Да. На узком экране на этой странице — быстрый редактор HTML и CSS с результатом под кодом. Полный редактор с JavaScript и консолью открывается кнопкой «открыть полный редактор»: код и результат там переключаются вкладками.