Дизайн страницы учебного курса

Страница курса помогает выбрать маршрут до начала чтения. Она должна объяснять общий результат, предпосылки и последовательность уроков, а не просто перечислять все статьи одинаковыми карточками. У большой библиотеки это особенно важно: соседство материалов в каталоге ещё не делает их связной учебной серией.

В этом уроке вы оформите отдельную course.html для «Дизайна учебного сайта». Она использует палитру и типографику reading-lab после шестнадцатой главы, но имеет собственную композиционную задачу. Содержимое уроков и их постоянные адреса остаются прежними.

Результат курса и результат главы

В начале страницы назовём общий проект: законченная учебная статья, её варианты и регламент дальнейшего оформления. Это крупнее результата одной главы. Урок о таблицах решает сопоставление данных, а весь курс связывает этот объект с сеткой, текстом и навигацией. Такое различие помогает человеку оценить объём работы.

Предпосылки также должны быть конкретными. Базовые HTML и CSS нужны для чтения селекторов и изменения готовой разметки. Генератор Markdown не является новой задачей серии. Если человек ещё не понимает HTML, полезнее предложить соответствующее введение, чем обещать одинаково лёгкий старт всем.

У курса есть основная часть и независимые углубления. Первые шестнадцать глав развивают один макет. Последующие рассматривают шрифты, печать, ресурсы, темы и применение к библиотеке. На странице должно быть видно, что углубления берут итог основной части, а не обязательно требуют последовательного выполнения всех соседних.

Не используйте продолжительность как главное доказательство ценности. Число уроков описывает структуру, но не гарантирует скорость освоения или качество результата. В нашем примере нет измеренной длительности. Честное перечисление предпосылок и результатов полезнее декоративного обещания «профессиональный дизайн за час».

Список с понятными результатами

Полный course.html предоставлен в учебной папке. Он содержит все двадцать четыре адреса будущих глав и рядом называет результат каждой. Эти маршруты относятся к черновикам до их выпуска, поэтому в верхней области статус указан явно. Страница является макетом курса, а не утверждением о доступности уже опубликованных уроков.

Для понимания формы рассмотрим один полный элемент списка. Это не отдельный документ:

<li class="lab-course-item">
  <span class="lab-course-number">07</span>
  <div>
    <h3><a href="/articles/article-design-07-long-code.html">Оформление длинных блоков кода</a></h3>
    <p>Читаемый листинг с собственной прокруткой и сохранёнными строками.</p>
  </div>
</li>

Номер показывает положение, название — предмет, пояснение — самостоятельный результат. Если название уже исчерпывающе сообщает действие, пояснение должно добавить ограничение или артефакт, а не повторить те же слова. Так список становится маршрутом, который можно просмотреть и осмысленно выбрать.

Результат главы не должен обещать больше её содержания. Урок о цветовых ролях не превращается в полный курс бренд-дизайна, а глава печати не гарантирует доступный издательский PDF. Точное описание сохраняет доверие к серии и помогает редактору не раздувать заголовки.

Визуальный слой страницы курса

Создайте полный файл lesson-22.css и подключите его после основной версии в course.html:

.reading-lab .lab-course { max-width: 58rem; margin-inline: auto; }
.reading-lab .lab-course-lead { max-width: 62ch; font-size: 1.125rem; }
.reading-lab .lab-course-block { margin-block: 2.5rem; }
.reading-lab .lab-course-list { list-style: none; padding: 0; margin: 1rem 0; }
.reading-lab .lab-course-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--lab-line); }
.reading-lab .lab-course-number { color: var(--lab-muted); font-size: .875rem; padding-block-start: .2rem; }
.reading-lab .lab-course-item h3 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.reading-lab .lab-course-item p { margin: .5rem 0 0; color: var(--lab-muted); }
.reading-lab .lab-course-status { padding: 1rem; background: var(--lab-surface); border-radius: var(--lab-radius); }

Ожидается последовательный список, в котором номер не конкурирует с названием. Разделитель относится к строке списка, а не превращается в цветной бордер одной грани карточки. Группы основного блока и углублений отделены большим расстоянием и собственными заголовками.

На узком экране название переносится внутри гибкой дорожки. Номер остаётся коротким ориентиром. Фиксированная высота строки не используется, поэтому пояснение может занимать несколько строк без пересечения. Если длинный результат неудобен, сначала уточните редакционную формулировку, а не обрезайте важное содержание.

Двадцать четыре крупные карточки с яркими фонами создали бы длинную тяжёлую страницу. Поэтому основной список спокойный. Отдельная поверхность используется только для статуса макета и краткого контекста. Это пример того, как один дизайн-компонент не обязан применяться ко всему перечню материалов.

Группировка по смыслу

Основную часть можно разделить на блоки композиции, сложного содержания и окружения статьи. Группы должны отражать зависимость результатов. «Первые восемь» является числовой границей, но не всегда объясняет изменение задачи. В нашем плане смысловые блоки помогут читателю понимать, зачем сначала появилась сетка, а затем компоненты.

В углублениях уместны короткие обозначения самостоятельности. Человек, которому нужна печать, может взять итог основной версии и соответствующую главу. Не заставляйте его проходить видеодемонстрации только потому, что их номер меньше. Числовой порядок остаётся удобным перечислением, но не превращается в ложную зависимость.

Страница курса не заменяет общий каталог. Каталог показывает темы и проекты, курс — последовательность. Одна статья может быть доступна через оба пути, сохраняя один адрес. Поэтому нельзя создавать отдельную копию урока под адресом курса ради единообразной структуры папок.

Также не добавляем индикаторы «пройдено» без собственной системы данных. Посещённая ссылка или сохранённая позиция не доказывает усвоение. Если позже появится личный учебный маршрут, он получит отдельное объяснение состояний. Наш макет показывает программу и доступные направления.

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

Также избегайте автоматической нумерации по общему каталогу. Курс имеет собственную последовательность, которая объясняется предпосылками. Добавление материала в другую тему не должно незаметно переставить середину учебного проекта. Компонент списка отображает заданный порядок, а источник этого порядка остаётся отдельным договором.

Выбор начала и продолжения

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

Проверьте будущим просмотром длинное название главы и группу из нескольких самостоятельных углублений. Ожидайте, что разница между обязательной основой и вариантами понятна словами, а не только цветом. Не называйте такую структуру проверенной на читателях, пока соответствующие наблюдения не сделаны.

Можно также подготовить короткую серию из трёх материалов на той же форме списка. Она не должна требовать пустых дополнительных групп ради совпадения с большим курсом. Компонент показывает действительную структуру, а не заставляет редакцию дополнять программу до определённого числа.

Результат урока — самостоятельная страница курса с полным маршрутом и точными описаниями. В следующей главе вернёмся к архиву ProfessorWeb и рассмотрим, как применить современное оформление к старым HTML-обёрткам без смены их содержания и адресов.