Тренажёр «HTML и CSS»: задания с проверкой
Вёрстка с нуля: теги и структура документа, текст, списки, ссылки и картинки, таблицы и формы, затем CSS — селекторы, цвет, шрифты, отступы, рамки, flexbox и адаптивность. Код пишется прямо в браузере, результат видно рядом.
Как тренироваться
Полный тренажёр повторяет темы после сданной домашней работы: выбирает задания по результатам, показывает ошибки и помогает закрепить материал. Для сохранения результатов нужен аккаунт.
Попробуйте задания без регистрации
Что такое HTML?
Что попадает в <code><head></code>, а что — в <code><body></code>?
В чём разница между <b> и <strong>?
Что можно повторить
- Страница — это текст с пометками
Понять, что HTML размечает смысл, а не вид, написать первые теги и научиться закрывать их так, чтобы ничего не поехало.
- Скелет документа
Собрать страницу целиком: доктайп, html, head и body, разобраться, что делает кодировка и название, и научиться писать атрибуты.
- Текст: выделение, переносы, цитаты
Научиться выделять по смыслу, а не по виду, понять, почему пробелы схлопываются, и записывать знаки, которые браузер иначе примет за разметку.
- Списки
Научиться размечать перечни: выбирать между маркированным и нумерованным, правильно вкладывать один список в другой и отличать список определений от обычного.
- Ссылки
Научиться связывать страницы: писать адреса трёх видов, ставить якоря внутри страницы и оборачивать ссылкой целые блоки.
- Картинки
Вставлять картинки правильно: писать описание, задавать пропорции, добавлять подпись и отличать содержание от оформления.
- Блоки, обёртки и классы
Понять, почему одни элементы идут в колонку, а другие в строку, научиться группировать содержимое обёртками и давать элементам имена для стилей.
- Таблицы
Собирать таблицы из строк и ячеек, делить их на шапку и тело, объединять ячейки без поломок и отличать данные от раскладки.
- Формы
Собирать формы, которые работают: с именами полей, связанными подписями, правильными типами и проверкой до отправки.
- Первый CSS
Написать первое правило, разобраться, куда его класть, научиться выбирать нужные элементы селекторами и понимать, какое правило победит.
- Цвет и фон
Научиться записывать цвет, красить текст и фон, пользоваться прозрачностью и градиентом и проверять, читается ли получившееся.
- Текст и шрифты
Настроить типографику: выбрать шрифт со списком запасных, задать межстрочное и начертание, выровнять текст и подключить свой шрифт.
- Коробочная модель
Понять, из чего состоит коробка элемента, научиться задавать отступы, разобраться с box-sizing и схлопыванием и ограничивать ширину.
- Рамки, скругления, тени
Научиться оформлять блоки: рамка и её стороны, скругление углов, тень как признак высоты и состояния при наведении и с клавиатуры.
- Flexbox: блоки в строку
Научиться раскладывать блоки по одной оси: строка вместо столбца, выравнивание вдоль и поперёк, растягивание, перенос — и собрать сетку карточек, которая перестраивается сама.
- Страница на телефоне
Научиться делать страницу пригодной для узкого экрана: мета-тег viewport, медиазапросы, порядок «сначала узкий» и четыре типовые починки.
- Проект: страница целиком
Собрать страницу от DOCTYPE до подвала: каркас документа, смысловая разметка, файл стилей в правильном порядке — и пройти по списку проверки перед сдачей.