Практическая работа №3. Восстановление сайта «Двор»: HTML и CSS

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

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

Одна пара · индивидуально · HTML и CSS · после лекций 03 и 04.

Не переписывайте страницу по новому шаблону. Сохраните название пространства, программу, описания и характер оформления. Вам передали проект на исправление, а не заказали новый дизайн.

Передача проекта

Скачать файлы проекта — ZIP

Открыть текущую версию сайта


dvor-start/
├── index.html          — текущая разметка страницы
├── styles.css          — текущие стили
├── START-HERE.md       — запуск и порядок работы
└── investigation.md    — журнал аудита и исправлений

Распакуйте архив в отдельную папку и откройте её в редакторе.
Откройте index.html в браузере. Установка зависимостей, сервер и интернет не требуются.
Работайте в широком окне: ориентир 1280–1440 px. Мобильная версия в эту заявку не входит.
Сохраните before.png и пройдите страницу от начала до конца: мышью, затем клавишами Tab и Enter.
После изменений сохраняйте оба файла и обновляйте страницу.

Все предусмотренные переходы должны вести к разделам этой страницы. Отправку данных, оплату, регистрацию и JavaScript заказчик не запрашивал.

Если архив недоступен, файлы можно сохранить отдельно: index.html, styles.css, журнал, инструкция. Сохраните HTML как исходный код страницы, все файлы — рядом под указанными именами.

Критерий готовности

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

Красивый вид сам по себе не означает готовность. Абзац может выглядеть как ссылка, а неправильно выбранный заголовок — как большой текст. Проверьте и то, что элемент делает, и то, чем он является в HTML.

Этап 1. Восстановите HTML и переходы

Ориентир — 20 минут. Начните с поведения и структуры, чтобы затем не подгонять CSS под неверные элементы.

Заказчик описал проблемы без названий тегов:

Наблюдение	Что требуется восстановить
«Некоторые надписи выглядят как переходы, но не нажимаются и пропускаются при нажатии Tab».	Все пункты меню, «Выбрать событие» и переходы из карточек — настоящие ссылки с работающим адресом.
«Площадка и одна из карточек ведут в никуда. Ещё иногда открывается не тот участок страницы».	Каждый фрагмент адреса находит нужный раздел; идентификаторы уникальны.
«Название страницы и названия разделов оформлены крупно, но структура документа непонятна».	Один главный заголовок; разделы и события образуют последовательную иерархию без пропущенных уровней.
«В разметке трудно отличить главное содержание от меню».	Основное содержание и основная навигация обозначены подходящими семантическими элементами.

Проверьте все похожие элементы, а не только первый найденный пример. Если две одинаковые по смыслу надписи размечены по-разному, выясните, оправдано ли различие.

Что считать полноценным восстановлением

Ссылка выполняет переход, а кнопка — действие. Здесь требуется переход к разделу, поэтому не нужно превращать абзацы в кнопки или имитировать ссылки через cursor: pointer.
Обычные тексты, время и метка «Мест мало» остаются текстом. Не превращайте каждый абзац в ссылку.
Переход из каждой карточки ведёт к подробностям именно этого события.
Значения id не повторяются. Связи aria-labelledby, если они используются, ссылаются на существующие заголовки.
Выбранный уровень заголовка описывает его место в документе. Размер букв задаёт CSS.
Нет бессмысленных обёрток, строчных стилей и повторяющихся атрибутов. Удаляйте обёртку только тогда, когда она действительно не нужна; контейнер сетки сам по себе полезен.

Пройдите все переходы мышью и клавиатурой. Затем проверьте HTML валидатором — можно загрузить локальный файл в Nu HTML Checker . Если интернет недоступен, выполните ручную проверку структуры и перенесите проверку валидатором на сдачу.

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

В журнале есть отдельный раздел для HTML. Запишите найденные проблемы, их причины и выполненные проверки.

Этап 2. Исправьте CSS: опечатки и раскладку

Ориентир — 30 минут. В файле стилей есть и ошибки выбора раскладки, и обычные опечатки в названиях свойств и значениях. Браузер может молча проигнорировать неверное объявление и продолжить показывать страницу.

Внимательно прочитайте существующий CSS. Для подозрительного правила посмотрите DevTools → Styles: применилось ли объявление, допустимо ли его значение, выбран ли нужный элемент? Сначала исправьте опечатки, затем проверьте логику размеров и расположения. Не пытайтесь исправить всё заменой одного большого блока CSS.

Основные сообщения заказчика:

Наблюдение	Нужный результат
Навигация уехала за правый край.	Название и меню размещаются без огромного ручного отступа; перенос при нехватке места допустим.
Две колонки сильно вылезают из контейнера.	Колонки и промежуток вместе занимают доступную ширину.
Переходы в карточках находятся на разной высоте.	Настоящие ссылки соседних карточек одной строки выровнены у нижнего края при разной длине текста.
«Мест мало» закрывает вводный текст.	Метка находится в своей карточке и не перекрывает её содержание.
Длинный код звуковой студии налезает на соседей.	Вся строка видна с переносом и остаётся в пределах карточки.
Шапка закрывает начало страницы.	Она сохраняет место в раскладке и остаётся доступной при прокрутке.

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

Ограничения

Работайте в существующих index.html и styles.css, сохраняйте содержание и длинную строку.
Исправляйте существующие правила; не оставляйте десятки дублирующих селекторов в конце файла.
Не используйте !important, строчные стили, JavaScript, библиотеки и CSS-фреймворки.
Не прячьте горизонтальный выход через overflow-x: hidden и не обрезайте проблемный текст.
Не задавайте всем карточкам фиксированную высоту ради положения ссылок.
Не стройте основную раскладку через абсолютные координаты.
Медиазапросы, анимация и новая функциональность не требуются.

Если застряли, используйте лекцию 02 об HTML и лекцию 04 о раскладке. Конспект и документация разрешены; важно понимать выполненное исправление.

Этап 3. Последнее изменение от заказчика

Ориентир — 15 минут. После исправлений заказчик уточнил приоритеты:

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

Выполните запрос в той же общей сетке, без отдельной сетки для главного события и без ручной расстановки каждой карточки.

В журнале объясните, какой класс отвечает за главное событие, кто управляет колонками снаружи и кто — содержимым карточки внутри. Высота разных строк может отличаться; одинаковая высота всех карточек сайта не требуется.

Этап 4. Приёмка и проверка изменений

Ориентир — 10 минут. Скопируйте исправленные HTML и CSS в папку stress-check. В копии выполните четыре изменения одновременно:

Удлините название до «Двор — пространство городских мастерских».
Добавьте пункт меню «Что будет на событиях», ведущий к разделу подробных описаний.
Добавьте обычную карточку с новым названием и описанием из четырёх-пяти предложений; её ссылка должна вести к подходящему описанию.
Удалите другую обычную карточку, сохранив главное событие.

Пройдите приёмку в основной версии и в изменённой копии:

Всё меню, главный переход и переходы из карточек доступны через Tab и работают по Enter.
Каждый переход открывает нужный раздел, его заголовок не закрывается шапкой.
Идентификаторы уникальны, структура заголовков последовательна.
В CSS исправлены неверные названия свойств и значения, а не только скрыты последствия.
Шапка, карточки, длинный текст и метка не перекрывают чужое содержание.
Количество карточек меняется без переписывания сетки, главное событие остаётся на всю ширину.
Ссылки соседних карточек одной строки сохраняют нижнее выравнивание.

Если проверка выявила проблему в общем правиле, исправьте его в обеих версиях. Отметьте результаты в журнале и снимите after.png.

Что передать на сдачу

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


practice-03-фамилия/
├── index.html
├── styles.css
├── investigation.md
├── before.png
├── after.png
└── stress-check/
    ├── index.html
    └── styles.css

Снимки сделайте при одинаковой ширине окна. В журнале пишите коротко: что наблюдали → причина → что изменили → как проверили. Для однотипных подменённых ссылок достаточно одной записи с перечислением мест, которые вы восстановили.

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

ИИ разрешён: укажите в журнале, с чем он помог. На сдаче вы должны найти нужное место в коде и объяснить своё исправление.

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