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

Question

[unlik]

Сверстал в своей жизни первый тренировочный макет от и до
Хотелось бы услышать критику, что сделал не так, что можно было бы сделать по-другому или лучше.
u77707.netangels.ru/barber

Comments

[Ankhena]

1. Ошибки валидатора
2. Сначала подключается normalize, потом свои стили
3. Кнопки в макете точно имели такие странные рамки?
4. "Все новости", "как проехать" и "обратная связь" должны быть ссылками
5. Иконки хорошо бы в svg
6. Нет ховеров
7.

.btn:nth-child(3) {
    margin-right: 13px;
}

а если перед кнопкой редактор добавит еще один абзац, то полезете в CSS, считать чайлдов?
8. Писать тексты нужно по правилам русского языка. Если в макете они набраны большими буквами, то нормально и трансформировать потом в CSS.
9.

a {
    color: #fff;
    text-decoration: none;
}

Точно все ссылки в макете белые? А если ссылка появится в тексте новости?
10. Если в новости добавить больше текста, то под меню вылезет белая полоса, потому что сползет фоновая картинка.
11. Если фоновая картинка не загрузится, будет белая поляна с белым текстом.
12. "Разработано" это обычно ссылка.
Подчеркнутое "как нас найти" в футере, тоже ссылка.

Хватит пока

[unlik]

Ankhena, Спасибо

[unlik]

Ankhena, со всеми моментами разобрался и поправил.
Единственный вопрос возник по пункту 10. Если в новости добавить больше текста, то под меню вылезет белая полоса, потому что сползет фоновая картинка.
Я так понимаю так как страница становится длинной, то фонового изображения не хватает? Как быть в таком случае?

[Ankhena]

unlik, в данном случае использовать bg position.
Верстальщик должен предусмотреть все случаи переполнения блоков, а также варианты, когда содержимого совсем мало.

Answer 1

[wqertAnna]

1. отзывчивый интерфейс!
Это безумно важно.
Всё что интерактивно, должно реагировать на действия пользователей
нужны стили для псевдокласса :hover на кнопки
при наведении на ссылки соц.сетей, они тоже должны как-то реагировать. Например, самое простое opacity: .8
И также не забудьте про cursor: pointer для всего с чем можно взаимодействовать

2. не видела макет, но Вы уверены, что у кнопок должен быть этот серый сомнительный border?
Мне кажется, так лучше (зеленая стрелка) border: 0
уберите оранжевый outline при :focus (синяя стрелка)


3. телефон должен быть ссылкой и тогда он кликабельный
<a href="tel:[phone]">[phone]</a>
4. КАК НАС НАЙТИ? в footer, как я понимаю, это тоже должны быть ссылка

5. я бы убрала outline у input при focus
и placeholder должен исчезать, когда курсор в поле, а он исчезает у вас только при вводе

Вы правильно сделали padding-left у полей ввода, но почему нет padding-right. В общем, это не очень красиво.


Правильно делаете, что используете тег time)

Насчет семантики
В общем, зеленые стрелки означают, что вы правильно использовали теги h2 и p
Красные говорят о неправильном использовании этих тегов


Там где красные стрелки я бы посоветовала использовать div и span
Смотрите div и span это просто строительные блоки без семантики

заголовки и параграфы обладают семантическим смыслом, поэтому советую использовать их там, где они нужны.

Когда я начинала, старший наставник скинул это сообщение:

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

6. footer не прижат к низу

Comments

[unlik]

Спасибо большое за развернутый ответ)

[wqertAnna]

unlik, удачи вам в верстке)

p.s. не обязательно везде, где текст большими буквами, его туда печатать таким.
Просто пропишите в стилях
text-transform: uppercase;

[unlik]

wqertAnna, Это знаю. Просто в макете был большими, скопировал и вставил)

[Ankhena]

и placeholder должен исчезать, когда курсор в поле, а он исчезает у вас только при вводе

Спорный вопрос.

В общем, зеленые стрелки означают, что вы правильно использовали теги h2 и p
Красные говорят о неправильном использовании этих тегов

Тоже спорный.
С точки зрения семантики это заголовки.
Нужны ли они тут с точки зрения SEO это отдельная история, но не полностью забота верстальщика.

заголовки и параграфы обладают семантическим смыслом, поэтому советую использовать их там, где они нужны.

<p> в HTML служит для группировки любого связанного содержимого, включая поля формы, картинки и т.д., а не только в смысле абзаца в общечеловеческом смысле.

[WapSter]

5. я бы убрала outline у input при focus.

Очень вредный совет, не стоит так делать

[Ankhena]

Тимур Турсунбаев, я бы сказала так: outline можно и убрать, но тогда обязательно заменить на что-то другое, чтобы был заметен фокус.

[wqertAnna]

Ankhena, вопрос с placeholder спорный?
Мне кажется, это более чем ожидаемое поведение

С точки зрения семантики это заголовки.
Нужны ли они тут с точки зрения SEO это отдельная история, но не полностью забота верстальщика.

А зачем нужна семантика, если ни для сео?
(Этот вопрос не риторический, я просто полагаю, что семантика нужна только для сео, но может это не так)
И если мы понимаем, что "быстро", "круто" и "дорого" это сомнительные заголовки и тем более h3, то лучше использовать div

Outline однозначно убрать!
Да, вместо него лучше как-то выделить фокус на поле, но эти доисторические оранжевые линии портят впечатление от верстки.

[Ankhena]

wqertAnna,

А зачем нужна семантика, если ни для сео?

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

вопрос с placeholder спорный?
Мне кажется, это более чем ожидаемое поведение

Да, это холивар, можете погуглить, их полно. Участвовать в нем я не хочу.
Наиболее разумное решение, на мой взгляд, это поднимать плейсхолдер при фокусе, чтобы человек видел в каком формате от него требуют вводить данные.

Outline однозначно убрать!
Да, вместо него лучше как-то выделить фокус на поле, но эти доисторические оранжевые линии портят впечатление от верстки.

Его можно убрать и заменить или перекрасить. У подавляющего большинства они голубые и выглядят не так страшно. Убрать без замены нельзя.
В данном случае лучше оставить стандартное поведение браузера и человек (может быть) поморщится, но поймет где фокус, чем убрать совсем и он просто просто заблудится.

[NaN]

wqertAnna , а как же accessibility? Тогда нужно что-то другое придумать, да пусть даже изменение цвета bg кнопки

уберите оранжевый outline при :focus (синяя стрелка)

Answer 2

[Рональд Макдональд]

Нужно ли что-то комментировать?

Comments

[unlik]

Это какое устройство?
Адаптив не делал. Выше 960 пикс вроде все ок.

[Рональд Макдональд]

unlik, ноутбук, Windows 10, FullHD, Chrome, браузер на 70% экрана.

[unlik]

Очень странно

[Рональд Макдональд]

unlik, хм, интересно, открыл снова и всё норм.

[unlik]

Рональд Макдональд, Выше на мак

И вот на windows в виртуалке

[unlik]

Рональд Макдональд, возможно в шрифтах проблема была, подключил после первого Вашего сообщения

[Рональд Макдональд]

unlik, скорее всего :)

[unlik]

Рональд Макдональд, Так есть какие-то замечания? К которым например клиент может придраться)) Конечно же не беря в рассчет адаптив, он еще впереди.

[Rustam Bainazarov]

unlik, проблем в вёрстке много, узких мест много, но для первого раза более чем адекватно.

[Рональд Макдональд]

unlik, да норм, только я бы выбор времени сделал выпадающим списком, а дату - календарём. Вбивать четыре поля муторно :)

[unlik]

Рустам Байназаров, какие например проблемы и узкие места? На будущее))

[Антон Литвиненко]

нормалайз надо подключать до стилей

[Rustam Bainazarov]

unlik, лень писать, просто вставил свои три копейки. Такое только с опытом придёт.