Оцените пожалуйста верстку?

Question

[Юрий Иванов]

Добрый день, самообучаюсь вебу, случайно наткнулся на тестовое в одну компанию. Захотелось попробовать сделать. Но я вот вообще не уверен в своей верстке, хочу попросить вашего мнения/советов.

верстка

https://scrappyjs666.github.io/test/dist/index.html

вот верстка, очень маленькая
Что интересует
1.Адаптивность ( *Минимальная ширина страницы, при которой она отображается корректно – 320 рх. Все указанные в задании элементы присутствуют как на десктопной, так и на мобильной версии* с тз)
2.Семантика (хедер, секции, заголовки) нормально ли употреблены
3.Нормально ли названы классы
Ну и вообще любые другие советы и указания на косяки

Comments

[Mly]

А про что этот макет?

[Ankhena]

1. Каким образом можно воспользоваться поиском, если это одинокий инпут без формы и сабмита? (Читалки, клавиатуры, мышки).
Там же: почему вы считаете лупу контентным изображением? Аналогичный вопрос и про другие иконки.
2. У вас практически весь текст свёрстан заголовками разного уровня. А что не заголовки, то div.
Даже количество страниц у вас заголовок. Ладно бы ещё секция вокруг была бы..
3. Дальше про пагинацию: всё таки пользователь ожидает, что номера страниц, а также стрелки будут кликабельными.
А не просто сообщением "а там ещё есть страницы".
4. Это в макете такие отступы были?

spoiler

5. Очень странно выглядит

spoiler

Хватит пока

[Юрий Иванов]

Mly, в плане про что?

[Danny Arty]

На вид пойдет, но я бы сделал несколько замечаний:
1. Множество картинок, которые не несут смысловую нагрузку, вставлены с помощью тега <img>. Лучше вставляйте фоном.
2. Если уж верстаете макет, то старайтесь сделать так, чтобы условно для посадки его на CMS, нужно было произвести минимум изменений. Например в шапке не просто input, а внутри тега form и лупа не просто img, а button или input. В пагинации стрелочки у вас просто картинки(???).
3. Зачем оборачивать тег main в ненужный wrapper?
4. В мобилке я бы поправил пагинацию - в один ряд смотрится не очень.
5. И либо макет страшный, либо эти padding-и сбоку на всех версиях выглядят cringe

upd. Кстати да, согласен с комментом выше - употребляете там, где не нужно html-элементы заголовок секций (h1-h6)

[Юрий Иванов]

Ankhena, Спасибо огромное, стараемся, исправляемся, становимся лучше

[Юрий Иванов]

Danny Arty, Спасибо большое!

Answer 1

[Илья Ломаев]

1) Лого вставлено через PNG, должно быть SVG! Сразу в глаза бросается!
2) Картинку в поиске лучше через псевдоэлемент вставлять
3) Инпут надо в form оборачивать (в хэдэре)
4) Profile и repositories - почему в обернуты? Секция - это весь этот экран в совокупности, это просто divы должны быть
5) ссылка gaearon, структура - h3 внутри ссылки, это что вообще?)
6) Картинки фолловеров - псевдоэлементами должны быть вставлены (ИМХО)
7) "249" после заголовка Repositories - тоже должен быть псевдоэлемент (или спан хотя бы, точно не часть заголовка)
8) с ссылками в правом блоке тоже самое - почему теги h внутри ссылки? ЗАЧЕМ?))
9) В карточках нижняя надпись - не заголовок, либо просто внутри div текст, либо span
10) В pagination опять заголовком вставлено, это не заголовок, он не объявляет важный информационный блок! И опять же разбиение на spanы должно быть, чтобы с backend'а данные подставлять удобно

Answer 2

[Тимур Гордеев]

Я бы, конечно, посоветовал больше анализировать вёрстку реальных проектов. Потому что типичные ошибки перечислены. То есть, ошибки ошибками, но куда полезнее будет реальный опыт. Иначе так постоянно будет масса ошибок) Попробуйте взять какую-нибудь нишу сайтов, и изучить вёрстку каждого из них, лучше популярных.
Даже вот теги h - вполне известная истина, как размещать.