Мы хотим узнать, насколько хорошо вы применяете на практике языки HTML и CSS и разбираетесь в особенностях работы разных браузеров. Для этого мы предлагаем вам сверстать расписание лекций проекта «Мобилизация». В качестве примера можно использовать прошлогодние данные:
- Школа разработки интерфейсов;
- Школа мобильной разработки;
- Школа мобильного дизайна.
Страница должна быть адаптирована для мобильных браузеров и работать в современных версиях Яндекс.Браузера, Google Chrome, Edge, Firefox, Safari и Opera. По возможности используйте приёмы постепенной деградации CSS. Помимо того, как вы оформите расписание, нам важно оценить, как вы организуете код и сможете оптимизировать результат.
В расписании нужно указать данные для всех трёх школ, а именно:
школу, для которой читается лекция (или несколько школ для общих лекций); тему лекции; имя лектора (должна быть возможность получить дополнительную информацию о лекторе, например во всплывающем окне); дату и место проведения лекции. Добавьте в программу 2–3 общие для всех школ лекции и также отобразите их в расписании. Лекции, которые уже прошли, должны быть помечены соответствующим образом. Для них должна быть доступна ссылка на материалы и видеозапись.
- школу, для которой читается лекция (или несколько школ для общих лекций);
- тему лекции;
- имя лектора (должна быть возможность получить дополнительную информацию о лекторе, например во всплывающем окне);
- дату и место проведения лекции.
- Добавьте в программу 2–3 общие для всех школ лекции и также отобразите их в расписании. Лекции, которые уже прошли, должны быть помечены соответствующим образом. Для них должна быть доступна ссылка на материалы и видеозапись.
Так как цель данного задания проверить наши знания в HTML, CSS и дополнительно JS, то хотелось сделать решение, которое будет работать, если у человека отключен JS, а весь дополнительный функционал не влияющий на отображение с помощью JS. Исходя из этого информация о преподавателе была сделана с помощью псевдоселектора :target. А поиск по школам и закрытие диалогового окна в другой области экрана средствами JS.
Интерфейс построен с помощью спецификации Flexbox так как позволяет писать удобный код для современных устройств. Если для требуемого устройства данная спецификация не имеет поддержки, то можно подключить полифилл.
Постепенная деградация CSS была реализована с помощью PostCSS и autoprefixer.
Также было замечено что браузер Edge не имеет поддержки встроенных в CSS inline SVG, поэтому данные иконки были подключены как статические файлы.
Дизайн был спроектирован исходя из следующих предположений:
- Если лекция не была проведена, то мы должны видеть дату и место проведения
- Если есть ссылка на запись, то мы должны акцентировать внимание на нее