// html_css_trainer

Тренажёр HTML, CSS и JavaScript с живым результатом

Меняй разметку и стили слева — готовая страница сразу появится справа. Первое задание работает без регистрации и установки программ.

// первое задание

Поставь карточку в центр и выдели кнопку

Открой styles.css: там есть два закомментированных блока. Раскомментируй их или напиши свой CSS — результат справа обновится сразу.

Условия задания

2–3 минуты

Карточка по центру экрана
Кнопка выделена цветом

:root {
  --canvas: #e9eef8;
  --card: #ffffff;
  --ink: #172033;
  --muted: #667085;
  --accent: #2563eb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: system-ui, sans-serif;
}

.stage {
  min-height: 100vh;
  padding: 32px;

  /* display: grid;
  place-items: center; */
}

.card {
  width: min(320px, 100%);
  padding: 32px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 24px 70px rgb(31 42 68 / 18%);
  text-align: center;
}

.card__avatar {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--accent);
  font-weight: 700;
}

.card h2 { margin: 0 0 8px; }
.card p { margin: 0 0 24px; color: var(--muted); }

.card__action {
  display: inline-flex;
  padding: 12px 20px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;

  /* background: var(--accent);
  border-radius: 10px;
  color: white; */
}

preview.koddo.local

Карточка по центру экрана Кнопка выделена цветом

меняй код — результат обновляется сразу

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

Код выполняется прямо на странице

Демо собирает HTML и CSS в изолированном окне браузера. В полном тренажёре JavaScript запускается в отдельной песочнице без доступа к приложению и внешним запросам.

// что дальше

От разметки до интерактивной страницы

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

семантические теги и структура HTML
выравнивание элементов через Flexbox
двумерные раскладки через CSS Grid
адаптация интерфейса под разные экраны

// faq

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

Тренажёр HTML, CSS и JavaScript бесплатный?

Демо работает без регистрации. После входа доступны шесть бесплатных задач; следующие модули входят в Premium.

Нужно ли устанавливать редактор или расширения?

Нет. Редактор и результат работают в браузере на компьютере или телефоне. Достаточно открыть страницу.

Можно ли запускать JavaScript?

Да. JavaScript появляется в финальном модуле и запускается в изолированной песочнице без доступа к приложению и внешней сети.

Работает ли тренажёр на телефоне?

Да. На узком экране редактор и результат располагаются друг под другом, а переключатель показывает мобильную ширину страницы.