Conversation
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Flickmate</title> | ||
| <link rel="icon" href="assets/favicon.ico"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| </head> | ||
| <body> | ||
| Flickmate is coming soon... | ||
| <div class="page-wrapper"> |
There was a problem hiding this comment.
Хорошее оформление структуры страницы, page-wrapper делает макет гибким
| <body> | ||
| Flickmate is coming soon... | ||
| <div class="page-wrapper"> | ||
| <header class="main-header"> |
There was a problem hiding this comment.
Использован семантический header, что улучшает читаемость и SEO
| <header class="main-header"> | ||
| <h1>Каталог фильмов</h1> | ||
| </header> | ||
| <main class="content-wrapper"> |
There was a problem hiding this comment.
Разделение на main и section логичное, структура читается легко
src/index.html
Outdated
| <main class="content-wrapper"> | ||
| <section class="movie-list"> | ||
| <article class="movie-item"> | ||
| <a href="#"> |
There was a problem hiding this comment.
Для a href="#" можно добавить title или aria-label, чтобы улучшить доступность
There was a problem hiding this comment.
Good point в общем случае, но здесь немного другая ситуация. Внутри <a> находится текст – скринридер поймёт это и озвучит его содержимое.
Если бы внутри ссылки не было текста (например, это была бы просто кликабельная картинка), то можно было бы добавить aria-label, но в данном случае это будет лишним.
| margin: 0 auto; | ||
| } | ||
|
|
||
| .movie-item a { |
There was a problem hiding this comment.
Можно добавить cursor: pointer, чтобы при наведении было понятно, что элемент кликабелен
There was a problem hiding this comment.
Логично, но браузеры делают это за нас: если у <a> есть href, то такой элемент считается интерактивным, и к нему применяются нужные стили. См. демо или скриншот:
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .movie-item-poster img { |
There was a problem hiding this comment.
Настройки изображений корректные, они не растягиваются и сохраняют пропорции
| color: var(--color-base); | ||
| } | ||
|
|
||
| @media (max-width: 1024px) { |
There was a problem hiding this comment.
Адаптивность работает хорошо, соответствует заданию
| @@ -0,0 +1,5 @@ | |||
| .truncate { | |||
There was a problem hiding this comment.
Класс truncate делает всё, что нужно, и аккуратно обрезает длинные строки
There was a problem hiding this comment.
Сделаю саммари здесь :) В целом, мне сложно выделить какие-либо критические моменты и дать рекомендации: код выполнен грамотно и структурировано. Если разобрать отдельно по критериям, то картина следующая:
Читаемость и понятность кода.
- Код читается очень легко: структура HTML логична, есть чёткое разделение на
header,main,sectionиarticle - Названия классов понятные, например, movie-item, movie-item-desc, movie-item-title сразу объясняют, что делает блок
- CSS организован аккуратно, в каждом файле отдельная смысловая часть, что улучшает восприятие и редактирование
Отсутствие ошибок
- Код не содержит критических ошибок, все теги корректно закрыты, структура документа правильная
- Я не поняла, почему в начале нет
!DOCTYPE htmlиlang="ru", но может быть так надо...
Модульность и переиспользуемость кода
- Проект разделён на отдельные CSS-файлы: common.css, movie-list.css, utils.css. Каждый файл отвечает за свою часть логики: базовые стили, сетка фильмов и утилиты
Соответствие стандартам форматирования и кодирования
- Код соответствует стандартам: используются CSS-переменные, адаптивные единицы, аккуратное форматирование
- Шрифты подключены корректно через Google Fonts, структура отступов единообразна
- Можно улучшить ещё чуть-чуть, добавив
cursor: pointerдля кликабельных элементов иcolor-scheme: darkв:rootдля поддержки системной темы, но это так, ради предложения
Соответствие требованиям задания
- Есть ссылка на вёрстку и исходные макеты в Figma
- Используются семантические теги, например,
header,main,section,article - В стилях использованы CSS-переменные -- заданы в
:root - Для задания стилей используются преимущественно классы. Стили везде применяются через классы, например,
.movie-item,.movie-list,.main-headerи др., без жёсткой привязки к тегам - Классы проименованы в соответствие с бизнес-значением элемента. Имена классов отражают смысл: movie-item, movie-item-title, movie-item-desc -- это именно элементы фильма, а не технические названия вроде box1 или col2
- Есть позиционирование элементов с помощью
display: flex/display: grid. Используется grid для сетки фильмов и flex для внутренней компоновки карточек - Вёрстка соответствует выбранным макетам
- Вёрстка адаптирована под десктоп, планшет и мобильные устройства через медиазапросы для 1024px и 600px
Есть ссылка на вёрстку и исходные макеты [ok] |
Оставлю комментарий для себя. В требованиях не был указан объем работы. Все подзадачи выполнены в полном объеме, включая задание со звёздочкой. Добавлен шаблонизатор. Технически работа выполнена аккуратно и чисто и содержит всё необходимое для оценки навыков вёрстки, по крайней мере, обратное не сказано. С моей точки зрения, суммарно это выглядит как значительно выше ожиданий (10/10). |
3 participants
Задача
https://github.com/two-devs-teaching/hse-web-programming-2025/blob/main/hw/hw-1-html-css/README.md
Что сделано
Свёрстана главная страница сервиса по макету.
На реализованной странице пользователь может просматривать список фильмов и краткую информацию о них.
Макет реализован мной ранее в рамках курса UCD (первый год магистратуры) и содержит дизайн нескольких страниц гипотетического сервиса. Присутствует UI Kit с описанием компонентов, типографики и т.д. – он использовался для инициализации CSS-переменных. Кроме того, в макете есть интерактивный прототип, который учитывался при имплементации UX, в частности, для создания анимации.
Демо
https://emworks.github.io/flickmate/feature/hw1/
Чеклист
Критерии выполненного задания:
Задание со звёздочкой:
Дополнительно (не было в задании):