Оценка уровня верстки?

Question

[Fenz]

Оцените пожалуйста профессиональным взглядом мою верстку.
Можно ли ее выложить в портфолио верстальщика?
Укажите на ошибки, пожалуйста.

mnfend.000webhostapp.com/asd/newproj2

Comments

[sim3x]

Правило хорошего тона - гитхаб и результат на гитхаб пейджес

Answer 1

[Владимир Проскурин]

1) Фон зеленого блока сделан некоретно. Нужно либо использовать цвет с альфой rgba, либо если и делать картинкой, то размером 1x1px
2) Кириллица в CSS файлах.
3) Освойте какую-нибудь методологию (популярен БЭМ, но можете посмотреть также на аналоги, например RSCSS или Atomic CSS).
4) Надо бы сделать hover для кнопок, чтобы цвет менял.
5) .main-form input распространяется даже на кнопки, добавляя к кнопке лишний border-bottom
6) Почему-то заголовок "СОВРЕМЕННЫЙ ПОДХОД К АВТОМАТИЗАЦИИ ..." имеет шестой уровень, хотя по логике, это h2
7) В адаптивке есть косяки, например прижатые к краям экрана блоки, текст под заголовком "Современный подход к автоматизации " имеет странный левый отступ.
8) В модальном окне есть форма, и в ней каждое поле имеет margin-top: 20px, допустим. Но к этому еще добавляется тег br между полями, хотя он там никакой роли не играет, т.к. поля занимают всю ширину, и насильственные переносы строк там не нужны, куда лучше обернуть каждое поле в отдельный div.
9) e-mail'ы и номера телефонов лучше засовывать в ссылку mailto: и tel:.

Это основные ошибки и замечания, остальное либо не заметил (т.к. проверял поверхностно), либо заметил, но посчитал это слишком субъективным.

Comments

[Fenz]

Большое спасибо!

Answer 2

[WapSter]

1) в мобильной версии разные паддинги по краям, где-то слева больше справа вообще его нет, где-то паддинги вообще отсутствуют.
2) Модалка не адаптивная.
3) в мобильной версии невозможно прокрутить страницу до конца вниз.
4) если css не стандартной кодировки utf-8, стоит указывать атрибут charset "кодировка".
5) всегда пропускайте код через валидатор, в глаза бросилось section не используется без заголовка.
6) подключаясь к id селектору в css обрекаете где-то в мире котенка грустить, оно вам надо?
7) шрифт без вертикального выравнивания на разных системах выглядит по разному, в данном случае на кнопках в mac очень заметно, что он подпрыгнут вверх. Советую об этом погуглить.
8) прогоняйте сайт через тесты скорости, к примеру PageSpeed Insights. Расскажет о вашем сайте многое

Comments

[Fenz]

На счет третьего пункта, не знаете как исправить?

Answer 3

[Uwe_Boll]

до портфолио это не дотягивает ибо:
1)семантики нет
2) адаптив хромает

комрады выше или ниже дополнят список

Comments

[Fenz]

header, footer, section, main есть жи)

[Сергей Горячев]

Fenz, если только это считать семантикой, можно больше вообще никогда не верстать)))