12 лабораторных, 4 темы. База обязательна, продвинутая часть бонусом.
Максимум 1900 XP
Каркас «Зёрен»
Тег, вложенность, страница из заголовка, абзацев и списка.
Ссылки и фото
Навигация по секциям и фотография героя.
Первый CSS
Свойство и значение: страница получает цвет и размер текста.
Карточка десерта
Внутри, рамка, снаружи: слои коробки и отступ до соседа.
Поток: блок и строка
Кто занимает всю ширину, кто стоит в строке, как спрятать, не удаляя.
Меню «Зёрен»: главная ось
Логотип слева, ссылки в ряд: направление и распределение.
Витрина «Зёрен»: ряды и переносы
Поперечная ось, переносы, промежутки: сетка витрины.
Липкая шапка и бейдж
Слои: relative, absolute, sticky, z-index.
Страница считает
Переменные и итог: число появляется из скрипта.
Находим в дереве
querySelector и classList: кнопка показывает цены.
Форма без перезагрузки
submit, value, preventDefault: скидка 10%.
Витрина из данных
Массив → карточки. Фильтр перерисовывает. Мостик к React.