Оцените Верстку?

Question

[Денис]

С мая изучаю html/css,сверстал 2 макет,прошу оценить и подсказать,где у меня основные ошибки,что подучить и так далее.Заранее Спасибо!! https://yadi.sk/d/KjtiZzgiekLYYg

Comments

[VegasChickiChicki]

Без негатива. "Начинающий frontend" вы будете в шоке, когда узнаете что такое хотя бы самый зеленый и начинающий, но "frontend", вы пока еще далеко не фронт энд. Что бы мы оценили вашу верстку, залейте ее куда нибудь, что бы мы просты тыкнули на ссылку и увидели сайт. Самый простой способ - гитхаб.

[WapSter]

В архиве? Серьезно? Из 2005 звонили, свое дерьмо назад просили.

Answer 1

[amangida]

Хорошо, но есть недочёт в виде картинок, которые вылазят за рамки контейнера. Вы указали max-width для контейнера, равный 78%, но не указали max-width: 100% для картинки в нём.

Answer 2

[Павел]

Стрелка какая-то странная, при наведении подсвечивается только часть, и вообще, на неё сложно навестись:

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

Коэффициент контраста надписей и фона на некоторых элементах слишком низок, с точки зрения доступности (accessibility) это плохо.




И что такие шакальные картинки, на них прямо артефакты сжатия видны, используй другие методы сжатия например

А ещё

почему-то адблоком блокируются эти пикчи

Comments

[Денис]

Спасибо большое за подробное объяснения,мне было бы очень полезно,если бы вы еще пробежались непосредственно по самому коду и указали на основные ошибки.Спасибо!

[Павел]

Денис, ок, по css: кое-где пропущены двоеточия (721, 1142), кое-где их по два (259).
margin: 0 3%; margin-bottom: 40px; можно записать как margin: 0 3% 40px; (1545),
и так далее (556, 657, 666, 700, 1101, 1108, 1115).
В html на 800 забыли закрыть div.
"Пустые" теги наподобие поддерживаются не во всех браузерах.
Почему где-то иконки svg, а где-то png, стоит всё перерисовать в svg.
И плюс то, что написал ув Vanitson.

Answer 3

[Vanitson]

В целом неплохо. Когда я учился, у меня второй макет был намного хуже)

Как-то совсем топорно сделаны стрелки. Если не критично, можете использовать Вот это для выбора стрелок на слайдер например. Не используйте цифры в названиях классов. Альтернатива: "arrow-left-top", "arrow-right-top".
Почему не использовали bootstrap (лично мое мнение, с ним было бы проще, много одинаковых элементов расположенных горизонтально)? Принципиально, или еще не знакомы?

Почему padding а не align-items: center? Используйте флекс по полной, это мощный инструмент который упрощает жизнь.
Свойство transition устанавливайте на сам элемент, а не на hover, тогда анимация будет плавная и при наведении, и при уводе курсора с элемента.
Далее все более менее, как для второго макета, очень даже неплохо.
Повторюсь, хорошо ознакомьтесь с флексами, есть много мест в вашем коде, которые можно было сделать проще с помощью этого инструмента.
P.S. - Не стоит воспринимать мои слова как истину, уверен есть много людей которые сделали бы лучше, чем так как я написал, я просто выражаю мнение на основе своего опыта.

Comments

[Денис]

Спасибо большое! Приму все к сведению, на счет стрелок,тогда еще не знал вообще как правильно их делать,сейчас вроде более менее разобрался.
На счет цифр в названиях, учту больше не повторю такой ошибки)).
С bootstrapom не знаком) пока только верстаю на чистом html / css, что бы натренировать руку ну и понять че к чему))
Флексы подучу!!

Спасибо большое за помощь!!!

[Vanitson]

Был рад помочь, если планируете дальше идти по пути фроненда, главное правило - учитесь гуглить. Как уже многие до меня говорили, 90% вопросов уже задавали до вас сотни человек)

[Денис]

Vanitson, Да естественно планирую)), гуглю большую часть своей учебы сейчас)),просто без наставника сложнее и некому проверить тот же код и указать на ошибки,что бы в дальнейшем их не допускал!!)). Спасибо еще раз!

[Vanitson]

Денис, оставил мейл в инфо, можете скинуть свои контакты туда.

Answer 4

[Сергей Поздняков]

Отсутствует всё, не нужно шаблонить.

Comments

[Денис]

По подробнее можно?А то ничего не понятно