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

Question

[artem1606]

Оцените, пожалуйста, качество верстки. Подскажите, что можно изменить или исправить.
https://bakum1981.github.io/agro-world/

Comments

[Daria Motorina]

У Вас нет ссылки на верстку

[artem1606]

Прошу прощения. Ссылка добавлена

[Ankhena]

Смотрела 5 минут и нет макета.
Вполне прилично для первых работ.

- Неверно подключены шрифты Segoe
- Где-то текст прилип к следующему блоку
- Лишние обертки
- Изображения являющиеся украшением вставлены как img. В том числе и текст типа "Дизайн"
- Нет hover и других состояний.
- Ничего для доступности.
- Слайдер с лайфхаками не в ту сторону.

[Ankhena]

https://habr.com/ru/company/htmlacademy/blog/566244/

[artem1606]

Спасибо

[artem1606]

Ankhena, единственное по поводу ховеров. На десктопе они есть. А на тач устройствах они отключены. Вроде, как они там не надо?

[Одиночка Айс]

artem1606, да, не нужны

[Ankhena]

Одиночка Айс, artem1606, действительно, зачем ноутам с тач экранами ховеры?

[Одиночка Айс]

Ankhena, клик = действие, не имел дела с тач экранами, но, думаю, смысл тот же - ткнул сарделькой своей равно что кликнул мышкой, не?

[Ankhena]

Одиночка Айс, дело в том, что в этой верстке вообще не работает ховер именно при наличии тач экрана. Хоть мышкой, хоть пальцем.

[Одиночка Айс]

Ankhena, ах вот оно что, тогда да, косяк

Answer 1

[Николай Савельев]

Это жы обычный шаблон из Bootstrap.
Менять и исправлять ничего не надо. Мне норм.
Видео вообще не в тему. при чём здесь семена и море в Таиланде?

Comments

[artem1606]

bootstsrap там вообще не применялся. Ну, а видео нельзя было вставлять настоящее. Но спасибо, учту. Подберу видос какой-нибудь более подходящий.

Answer 2

[Алексей Дубровин]

1)Тег main его не поддерживают большинство.

2)У вас в коде встречаются конструкции с разной последовательностью. Что не есть хорошо.

.любой класс{
width:
display:
}
// Потом другой класс
.любой класс{
display:
width:
}

3)Тк же, если вы используете БЭМ то используйте полностью а не частично.
Конструкции типо
.input._error это вообще что.
зачем после точки ставить ещё спец символ нижнего подчеркивания.

4)HTML - язык для разметки который использует семантику.
Для текста нужно использовать соответствующие теги.
p span, а не div

5) Вы используете заголовки. h1 и h3. Куда делся h2 ? Если его нет то зачем h3

6) Когда делаете меню или любые элементы на которые необходимо производить клик. Не делайте область клика размером с текст. Всегда старайтесь сделать её чуть больше. Особенно критично на мобилках.
Если выбирать нечайно задеть, или тыкать по 10 раз пока не попадешь. То лучше 1

Анимации сделаны не плохо. Нет каких-либо лагов. Или серьёзных просадок
+- Нормальный адаптив.
Можно ещё поработать над доступностью контента. Прикрепляю ссылку на что и для чего.

Comments

[Сергей delphinpro]

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

Поддержку лучше смотреть на caniuse или MDN, там всегда актуально.
https://caniuse.com/mdn-html_elements_main

[Иван К]

2)У вас в коде встречаются конструкции с разной последовательностью. Что не есть хорошо.

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

[Алексей Дубровин]

Сергей delphinpro, Вот тут закосячил. Сяп за исправление

[Сергей delphinpro]

Иван К,

Это замечание мне кажется уже из разряда обсессивно компульсивного расстройства

Вовсе нет =) Весьма популярный пункт в стайлгайдах.
Ребята из джетбрейнс даже опцию в автоформате сделали для сортировки css свойств (по алфавиту или в заданном порядке).

[Алексей Дубровин]

Иван К, Разница в правильности.
У людей есть паттерны(шаблонные поведения) они есть в любом деле.
И понятие ожидаемое поведение.
Именно для этого вводятся стандарты у любой команды что и как делать.
Это в несколько раз ускоряет работу. Тк как вам не нужно думать как именно делает тот или иной человек.
Чем меньше человек думает тем быстрее он решает задачу.
И ещё множество приимуществ.

[Иван К]

Алексей Дубровин, а ну если мы берем командную разработку то тут возможно бэм и паттерны нужны. Работая в одиночку это на результат не влияет. А вот на скорость разработки может влиять. Допустим написал я блок стилей, потом смотрю на результат и понимаю что надо еще пару правил добавить. Быстрее добавить их в конец блока, чем искать для них "правильные" места. Исходя из того что CSS всегда самое долгое и нудное в разработке сайта, экономия времени тут для меня важнее.
Так что правильность для разных случаев разная. Но правила писать свойства в одном порядке нет. На валидность кода это тоже не влияет.

[Алексей Дубровин]

Иван К,
Эм. Вы не разу не использовали. ЕЩё раз человек существо паттерное. Когда вы научились что-то делать вы не думаете где и куда это правильно ставить. Вы знаете куда это вставить.
То что вы ищите это результат того что вы не привыкли к этому, только и всего.
Экономия времени опять же в этом варианте в разы выше, тк как у вас всё шаблонно. Вам не нужны лишние действия в виде поиска по коду или чтению всего класса. Изменения затрагивают только нужные части класса.
Я знаю что всё что связанно с позиционированием и размерами в верху класса. Все свистоперделки с низу.
Когда я вижу класс который мне нужен я начинаю читать ровно с того места где должно быть.
Изучите статьи на эту тему а не вот это вот "Это быстрее потому что я так думаю".
Как только человек начинает использовать препроцы там это становиться ещё заметнее.
Для отслеживания времени можно использовать бесплатные сервисы типа wakatime. И увидеть на своём опыте разницу.
Это учиться в течении мб 1-2 дней. Ускорение с 10 процов даст.
И если для вас верстка является самым долгим в разработки сайта, то я бы подумал ещё раз о компетенции.
У нас верстка это 10% проекта.

[Иван К]

И если для вас верстка является самым долгим в разработки сайта, то я бы подумал ещё раз о компетенции.
У нас верстка это 10% проекта.

Ну я по бекенду больше. Не люблю CSS писать. Я не знаю что за проекты у вас где верстка это 10%, чем сложнее проект тем больше верстки в нем, даже если он гиперсложный в плане функционала верстка не может быть 10% проекта никак.
Я делаю небольшие сайты, магазины и сервисы. Делаю в одно лицо без команды, как фулстак. Так вот если взять средний проект по сложности, например небольшой магазин, то на бекенд уходит пару дней максимум. А вот фронт писать дня 3-4. Это от дизайна конечно тоже зависит. Использую SCSS без него бы еще хуже было бы. Ну и в целом скучно это писать CSS, по этому и сказал что это муторно.

Я знаю что всё что связанно с позиционированием и размерами в верху класса. Все свистоперделки с низу.

Так то да, я тоже всегда пишу позиционирование, потом свойства шрифта, потом остальные свойства. Я не правильно понял изначально ваш посыл и подумал, что совсем строгая одинаковая последовательность свойств должна быть. Это уж было бы явным перебором. А так конечно - начинаешь описывать блок, сперва размеры и позиция, потом шрифт и цвет, потом остальное. Но написать например

.class {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

и

.class {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

лично для меня одинаково.