Пиши код слева — страница справа обновляется на каждом символе. Первое задание решается прямо здесь, без регистрации и установки.
задание · 1 минута
Во вкладке index.html замени «Алекс Ким» на своё имя — оно сразу появится справа.
Открой styles.css и в правиле .button замени gray на tomato — или на любой другой цвет: royalblue, seagreen, orange.
Там же, на пустой строке в .button, допиши border-radius: 10px; — после первых букв редактор подскажет свойство.
Подсказки появляются при вводе: стрелки выбирают, Enter или Tab вставляет, Esc закрывает, Ctrl и пробел открывают их вручную. Tab без подсказок ставит отступ; чтобы выйти из редактора, нажми Esc, затем Tab.
Правки видны справа сразу, а шаги отмечаются сами.
Один уровень от задания до «Задание выполнено» — так, как его проходят в тренажёре Koddo: код и живая страница рядом, проверка по результату, эталон поверх твоей вёрстки и следующий уровень.
В редакторе — index.html, styles.css и script.js, рядом — окно с результатом. Меняешь свойство, и страница перерисовывается сразу: видно, что сделала каждая строка.
«проверить» сверяет не текст кода, а то, что получилось: итоговые стили и разметку. Каждое требование отмечается отдельно, к промаху открывается подсказка, а вкладка «наложение» кладёт эталон поверх твоей страницы — видно, чего не хватает.
Все пункты выполнены — уровень готов: видно, сколько ушло проверок, а следующий уровень открывается одной кнопкой. Модули идут от разметки и оформления к Flexbox, Grid, анимациям и JavaScript.
Тренажёр ведёт от разметки к формам на JavaScript. Игра по Flexbox и Grid его не повторяет: в ней только раскладка, одно-два свойства на уровень.
Начни с разметки и оформления, как в задании выше: 21 задание, первые 6 бесплатно. Дальше — Flexbox, Grid, анимации и формы на JavaScript.
открыть тренажёрКогда дойдёшь до раскладки, свойства удобно разогреть по одному: 50 уровней, где justify-content, align-items и grid-template-columns сажают корабли на площадки. А целую картинку на CSS собирает игра «Повтори макет».
Свёрстанную страницу пора оживлять: уроки JavaScript и курс «JavaScript с нуля» с задачами на автопроверке.
уроки JavaScriptЗадания ведут от статичной страницы к интерактивной форме: каждый модуль добавляет один приём, а каждое задание занимает 4–12 минут. Весь тренажёр — примерно 2 часа работы. Первые два модуля, 6 заданий, бесплатны; модули с Flexbox до JavaScript открывает Premium.
структура страницы, смысловые теги, доступная форма с подписями
отступы, скругления и тени, ссылка в виде кнопки, заметное уведомление
центр по обеим осям, ряд кнопок, шапка с логотипом и меню
теория: Flexbox, выравнивание по центру
absolute внутри relative, бейдж в углу карточки, fixed-панель у края экрана
теория: position
равные колонки, каркас с сайдбаром, галерея, которая сама меняет число колонок
теория: CSS Grid
transition и hover, @keyframes, prefers-reduced-motion
теория: анимация
клик и показ панели, фильтр по data-атрибутам, форма без перезагрузки
Проверка смотрит на результат в окне предпросмотра, а не на текст кода: итоговые стили и разметку. Поэтому в задании выше засчитывается любой цвет кнопки — tomato, #ff6347 или rgb(255 99 71), лишь бы текст на нём читался, а в заданиях про раскладку — и Flexbox, и Grid. У каждого задания несколько требований, и выполненные отмечаются по отдельности: видно, что уже получилось, а что ещё нет.
Да, задание на этой странице и первые 6 заданий тренажёра открываются без регистрации: прогресс хранится в браузере, а аккаунт сохранит его насовсем. Следующие модули входят в Premium.
Игра тренирует только раскладку: 50 уровней, в каждом одно-два свойства Flexbox или Grid, а вместо страницы — поле с кораблями. Тренажёр — вёрстка настоящих страниц: разметка, оформление, Flexbox, position, Grid, анимации и JavaScript. Новичку лучше начать с тренажёра, а игру открыть, когда дойдёшь до раскладки.
Да. Замени код во вкладках index.html и styles.css — результат справа обновится сразу, а подсказки редактора работают и для своего кода. Кнопка «сбросить» вернёт код задания.
Да. JavaScript появляется в финальном модуле тренажёра и запускается в изолированной песочнице без доступа к приложению и внешней сети.
Да. Задание на этой странице на узком экране встаёт столбиком: сверху редактор, под ним результат, а переключатель над результатом показывает страницу шириной телефона. В самом тренажёре задание, код и результат на телефоне открываются вкладками, а результат можно сравнить с эталоном так же, как на компьютере.
