Практическая работа №4. Адаптивная страница события

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

Две пары · индивидуально · HTML и CSS · заключительная работа по CSS.

Страницу нужно разработать с нуля. Конспекты и документацию использовать можно: на защите вы объясните свои решения и внесёте небольшое изменение в собственный код.

Цель и результат

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

В папке работы должны находиться:

practice-04-event/
├── index.html
├── styles.css
├── decisions.md
└── images/          — если используете локальные изображения

Откройте index.html в браузере: установка зависимостей, сервер и интернет для просмотра страницы не требуются. Если используете изображения, сохраните их в папку проекта и укажите источник в decisions.md. Можно обойтись собственной иллюстрацией или графикой средствами CSS.

Ограничения

• Используйте HTML и один внешний CSS-файл. Подключите стили ко всей странице через link.
• Не используйте JavaScript, CSS-фреймворки, конструкторы и готовые шаблоны. Не нужно создавать работающую регистрацию или отправку формы.
• Не применяйте строчные стили и !important. Не стройте основную раскладку абсолютным позиционированием, пробелами или переносами <br>.
• Используйте содержательные тексты по выбранной теме: посетитель должен понимать содержание карточек и условия участия. Не оставляйте Lorem ipsum и «Карточка 1».
• Не выдавайте вымышленное событие за реальное: если оно придумано, укажите это на странице.

Что должно быть на странице

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

Используйте один h1, последовательную иерархию заголовков и подходящие семантические элементы, в том числе header, nav, main, section и footer. У ссылок на разделы должны быть существующие и уникальные цели id. Для содержательного изображения напишите подходящий alt; декоративному изображению задайте пустой alt.

Этап 1. Спланируйте и создайте структуру

1. Выберите событие и придумайте название, дату, место и четыре пункта программы.
2. Набросайте порядок разделов. Решите, к каким из них должна вести навигация.
3. Создайте index.html, укажите язык страницы, кодировку, заголовок вкладки и настройку viewport.
4. Добавьте разделы, тексты, ссылки и изображение или иллюстрацию. Проверьте, что переходы действительно ведут к нужному содержимому.

Сначала убедитесь, что страница понятна без оформления: структура и содержание должны работать до CSS.

Этап 2. Оформите страницу и соберите раскладку

1. Подключите styles.css. Задайте читаемую типографику, цвета, отступы и ограничение ширины содержимого.
2. Используйте Flexbox хотя бы для одной задачи, например для навигации или содержимого карточки.
3. Используйте Grid для программы: на широком экране карточки располагаются в нескольких колонках.
4. Дайте повторяющимся элементам общие классы. Например, изменение одного правила должно менять оформление всех карточек программы.
5. Проверьте длинные названия и описания: текст не должен обрезаться или перекрывать соседние элементы.

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

Этап 3. Адаптируйте страницу

Страница должна оставаться удобной при разной ширине окна. Проверьте её примерно при 375, 768 и 1280 px, а затем изменяйте ширину плавно между этими значениями.

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

После каждого изменения сохраняйте оба файла и обновляйте страницу. Если заметили переполнение, найдите элемент и правило, которые его вызывают, с помощью DevTools; не скрывайте проблему только через overflow: hidden.

Этап 4. Состояния и движение

1. Оформите :hover для ссылок или кнопок. Не скрывайте важную информацию и действия только за наведением.
2. Добавьте заметный :focus-visible для всех интерактивных элементов. Проверьте переходы клавишами Tab и Enter.
3. Добавьте плавный transition хотя бы для одного изменения состояния.
4. Создайте одну короткую анимацию через @keyframes, которая помогает восприятию и не мешает чтению. Например, можно один раз показать декоративный элемент или блок при появлении страницы.
5. Учтите prefers-reduced-motion: reduce: отключите или уменьшите движение. При этом текст, ссылки и индикатор фокуса должны оставаться видимыми и доступными.

Ссылка предназначена для перехода. Если элемент ничего не делает без JavaScript, не создавайте имитацию работающей кнопки.

Этап 5. Проверьте устойчивость и подготовьте сдачу

Скопируйте готовый проект в отдельную папку stress-check и в копии одновременно:

1. Удлините название события на несколько слов.
2. Добавьте в меню ещё одну рабочую ссылку на существующий раздел.
3. Добавьте пятую карточку программы с длинным заголовком и описанием из нескольких предложений.

Проверьте копию на узком и широком экране. Исправьте в основном проекте найденные недостатки правил, если они относятся к его раскладке, затем повторите проверку копии с обновлёнными стилями. Сдайте исходный проект и папку stress-check.

В decisions.md коротко ответьте:

1. Для кого событие и что посетитель должен узнать в первую очередь?
2. Где использованы Flexbox и Grid и почему?
3. При какой ширине меняется раскладка и почему выбрана эта граница?
4. Как вы проверили управление с клавиатуры и настройку уменьшения движения?
5. Что изменилось при проверке с длинным текстом и новой карточкой? Пришлось ли что-то исправлять?
6. Откуда взяты изображения, если они использованы?

Перед сдачей

• Страница открывается из папки проекта, стили и локальные изображения загружаются.
• Все обязательные разделы заполнены; вымышленное событие обозначено как учебное.
• Навигация и остальные ссылки ведут к правильным целям; id не повторяются.
• На узком, промежуточном и широком экране содержание читается без горизонтальной прокрутки страницы.
• Пункты навигации и ссылки доступны с клавиатуры, фокус заметен.
• Переход и анимация работают; при уменьшении движения содержание и действия остаются доступными.
• В копии stress-check добавлены длинное название, пункт меню и карточка; раскладка остаётся удобной.
• Есть decisions.md с ответами и источниками изображений.

Защита

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

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