Оцените качество верстки и дайте советы новичку. Какие грубые ошибки(кроме шрифта) в нем присутствуют?

Question

[Антон]

Добрый вечер. Кому не сложно, оцените качество верстки(это мой первый макет).

Онлайн:
antonweb.github.io

Сам макет:
https://yadi.sk/d/z2qfzcRxmCLqx

p.s. Шрифта в интернете не нашел, поэтому загрузил его локально.

Comments

[Lynn «Кофеман»]

Традиционное предложение сломать что-нибудь дизайнеру за светлосерый текст на белом фоне.

Или хотя бы отберите у него мак, выдайте монитор трёхлетней давности и не давайте его настраивать…

Answer 1

[Котик Антон]

p.s. Шрифта в интернете не нашел, поэтому загрузил его локально.

А чтобы установить его локально, вы же его откуда-то взяли?
Используйте www.fontsquirrel.com/tools/webfont-generator

Кстати, шрифт есть там же:
www.fontsquirrel.com/fonts/montserrat

Тянуть весь Font Awesome ради нескольких иконок - перебор. Используйте сервис вроде: fontello.com
Кстати, иконки у вас отличаются от тех, что в макете.

В макете - всё разложено по сетке, у вас - нет.
https://habrastorage.org/files/314/ef1/09d/314ef10...
Пользуйтесь хотя бы bootstrap'овской сектой: bootstrap-ru.com/scaffolding.php

Вместо сброса стилей (reset) используйте normalize.css:
stackoverflow.com/questions/6887336/what-is-the-di...

Красные точки я бы сделал через всевдоэлемент :after. У вас слишком уж большой селектор получается для красной точки. Представьте, что вы не одну бы страницу верстали, и блоков с точками было бы не четыре, а сорок четыре.

.hero-text span,
.features-item span,
.portfolio-column-right span,
.team-section span {
  color: #fa5c65;
}

UPD:
Есть лишние теги: вместо <a href="#"><i class="fa fa-twitter"></i></a> можно было писать <a href="#" class="fa fa-twitter"></a>.
Неиспользуемый класс portfolio-section.

Comments

[Антон]

Спасибо за ответ. Если вас не затруднит ответить: 1)А какие замечания к коду html(именование классов, структура)?
2) Для дальнейшего развития просто брать новые PSD и верстать не допуская прошлых ошибок?

[Котик Антон]

Антон:
1) В целом норм.
2) Брать макеты посложнее, и верстать не только главную, и не только для десктопов, но и для мобильных. Постепенно начинать использовать git/препроцессоры/grunt/gulp и т. д.

Что нужно знать Front-end разработчику в 2014 году?
Чем отличается верстальщик от front-end developer?
Шаги становления хорошего фроненд разработчика?

[Антон]

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

Answer 2

[Артем Спиридонов]

Не адаптивно. Тривиально.

Есть смысл в такой верстке без адаптивности? Если это лендинг, тогда по вертикали можно выровнять.

У меня отображается корректно (Firefox 42.0 for Ubuntu).