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

Question

[SubSpace]

Здраствуйте это мой первый свёрстанный сайт оцените пожалуйста, дайте советов каких нибудь, буду очень благодарен. https://subspace228.github.io/Krolevarka/
на сайт внимания не обращайте так-как делал для друзей

Comments

[Araya]

тут оценивать то нечего, 3 пустых блока и пару предложений?

[Ankhena]

1. Валидацию не проходит.
2. Криво

3. Фото и текст производят тошнотное впечатление, они отбили желание смотреть дальше.

[lrsvolk]

Вот видно неровность

[Ярослав Александров]

Полно макетов хороших, неужели не смог найти для вёрстки поинтереснее?

Answer 1

[pereyaslavskiy]

Вот несколько основных советов/претензий, над которыми стоит поработать:
1. Испоьзуйте флексы по нормальному, а то у вас десктопе .team__row как флекс, а для мобильного уже как блок. flex-wrap вам в помошь
2. Очень много медиа запросов. Для вашего макета хватит и одного-двух.
3. Используйте относительные величины вместо пикселей. Это касается и отступов и ширины блоков. Будет меньше работы и не нужно горы медиазапросов.

Comments

[SubSpace]

Спасибо огромное!

[lrsvolk]

1. Код не смотрел, но что плохого в том, что на мобильном display: block ?
2. +
3. Код не смотрел, но все же с относительными величинами тоже нужно быть осторожнее (написал, т.к. новички зачастую впадают в крайность)

[Ankhena]

1.

Зачем бы развлекать браузер флексами и врапами, когда блоки сами встают в столбик при display: block.

3.

Тоже сомнительный совет.
Если где-то что-то остается постоянным, например, эти самые отступы или ширина блоков и т.д., то почему бы не писать их в px.

[pereyaslavskiy]

lrsvolk,
1. ничего плохого, но зачем писать лишнее, если flex изначально добавлен и удовлетворяет макету.
display: block для мобильного в отдельном медиазапросе не нужен. Уж лучше flex в медиазапрос
3. Это касательно этого конкретного макета - написать правильно две строчки всяко лучше, чем писать 8 медиазапросов. Но в целом согласен, нужно понимать чем vw от % отличается

[pereyaslavskiy]

Ankhena,
3. к строкам типа margin-top: 220px и height: 400px это не относится.

[Ankhena]

pereyaslavskiy, тогда имеет смысл расписывать ситуации где уместны px, а где нет.
Общая рекомендация использовать относительные единицы неверна.

В этом конкретном случае я подозреваю, что дизайнер тут и мимо не проходил, но если у дизайнера при любой ширине шапка должна быть не меньше 400px, то будут px. Разве что это будет не height, а min-height.
А про высоту и вовсе отдельная история.
Но ведь есть желание учится у человека, значит шансы есть.