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

Q: Можно вставить свой HTML и CSS?

Да. Замени код во вкладках index.html и styles.css — результат справа обновится сразу, а подсказки редактора работают и для своего кода. Кнопка «сбросить» вернёт код задания.

Пиши код слева — страница справа обновляется на каждом символе. Первое задание решается прямо здесь, без регистрации и установки.

задание · 1 минута

Оформи карточку за три шага

Впиши своё имя
Во вкладке index.html замени «Алекс Ким» на своё имя — оно сразу появится справа.
Покрась кнопку
Открой styles.css и в правиле .button замени gray на tomato — или на любой другой цвет: royalblue, seagreen, orange.
Скругли углы кнопки
Там же, на пустой строке в .button, допиши border-radius: 10px; — после первых букв редактор подскажет свойство.

<main class="page">
  <article class="card">
    <div class="avatar">АК</div>
    <h2>Алекс Ким</h2>
    <p>Фронтенд-разработчик</p>
    <a class="button" href="#">Написать</a>
  </article>
</main>

/* Кнопка «Написать» */
.button {
  display: inline-block;
  padding: 12px 24px;
  background: gray;
  color: white;
  font-weight: bold;
  text-decoration: none;
  
}

/* Страница и карточка — их можно не трогать */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #eef2f8;
}

.page {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.card {
  width: 200px;
  padding: 28px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 16px 40px rgb(0 0 0 / 12%);
  text-align: center;
}

.avatar {
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #2563eb;
  font-weight: bold;
}

h2 {
  margin: 0 0 8px;
}

p {
  margin: 0 0 24px;
  color: #667085;
}

результат

Правки видны справа сразу, а шаги отмечаются сами.

Для живого результата нужен JavaScript: он собирает HTML и CSS в окно справа. Включи его и обнови страницу.

Что за чем: тренажёр, игра, JavaScript

Тренажёр ведёт от разметки к формам на JavaScript. Игра по Flexbox и Grid его не повторяет: в ней только раскладка, одно-два свойства на уровень.

ты здесь
Тренажёр HTML, CSS и JavaScript

Начни с разметки и оформления, как в задании выше: 21 задание, первые 6 бесплатно. Дальше — Flexbox, Grid, анимации и формы на JavaScript.
открыть тренажёр
раскладка · бесплатно
Игра «Flexbox и Grid»

Когда дойдёшь до раскладки, свойства удобно разогреть по одному: 50 уровней, где justify-content, align-items и grid-template-columns сажают корабли на площадки.
открыть игру
дальше
JavaScript с нуля

Свёрстанную страницу пора оживлять: уроки JavaScript и путь «JavaScript с нуля» с задачами на автопроверке.
уроки JavaScript

Программа: 21 задание в 7 модулях

Задания ведут от статичной страницы к интерактивной форме: каждый модуль добавляет один приём, а каждое задание занимает 4–12 минут. Весь тренажёр — примерно 2 часа работы. Первые два модуля, 6 заданий, бесплатны; модули с Flexbox до JavaScript открывает Premium.

HTML-разметка
бесплатно

структура страницы, смысловые теги, доступная форма с подписями
1. 01Разметь страницу рецепта
2. 02Собери смысловую карточку
3. 03Собери доступную форму
Оформление
бесплатно

отступы, скругления и тени, ссылка в виде кнопки, заметное уведомление
1. 04Добавь карточке воздух
2. 05Преврати ссылку в кнопку
3. 06Оформи уведомление
Flexbox и выравнивание
Premium

центр по обеим осям, ряд кнопок, шапка с логотипом и меню
1. 07Поставь карточку в центр
2. 08Выстрой кнопки в ряд
3. 09Собери панель навигации
Position и слои
Premium

absolute внутри relative, бейдж в углу карточки, fixed-панель у края экрана
1. 10Зажги статус «онлайн»
2. 11Закрепи бейдж PRO
3. 12Закрепи cookie-панель
Grid-сетка
Premium

равные колонки, каркас с сайдбаром, галерея, которая сама меняет число колонок
1. 13Разложи статистику сеткой
2. 14Собери каркас приложения
3. 15Сделай галерею адаптивной
Микроанимации
Premium

transition и hover, @keyframes, prefers-reduced-motion
1. 16Оживи кнопки на hover
2. 17Заставь индикатор пульсировать
3. 18Отключи анимацию по настройке
JavaScript-интерактивность
Premium

клик и показ панели, фильтр по data-атрибутам, форма без перезагрузки
1. 19Раскрой детали проекта
2. 20Отфильтруй портфолио
3. 21Оживи форму подписки

Что проверяет тренажёр

Проверка смотрит на результат в окне предпросмотра, а не на текст кода: итоговые стили и разметку. Поэтому в задании выше засчитывается любой цвет кнопки — tomato, #ff6347 или rgb(255 99 71), лишь бы текст на нём читался, а в заданиях про раскладку — и Flexbox, и Grid. У каждого задания несколько требований, и выполненные отмечаются по отдельности: видно, что уже получилось, а что ещё нет.

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

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

Да, задание на этой странице и первые 6 заданий тренажёра открываются без регистрации: прогресс хранится в браузере, а аккаунт сохранит его насовсем. Следующие модули входят в Premium.

Чем тренажёр отличается от игры по Flexbox и Grid?

Игра тренирует только раскладку: 50 уровней, в каждом одно-два свойства Flexbox или Grid, а вместо страницы — поле с кораблями. Тренажёр — вёрстка настоящих страниц: разметка, оформление, Flexbox, position, Grid, анимации и JavaScript. Новичку лучше начать с тренажёра, а игру открыть, когда дойдёшь до раскладки.

Можно вставить свой HTML и CSS?

Да. Замени код во вкладках index.html и styles.css — результат справа обновится сразу, а подсказки редактора работают и для своего кода. Кнопка «сбросить» вернёт код задания.

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

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

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

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

Оформи карточку за три шага

Что за чем: тренажёр, игра, JavaScript