Добрый день!
Очень нужна ваша критика. Сверстала первый самостоятельный макет Be latte из рассылки №43. Он, вроде, простой, но мне кажется, что всё сделано не так)
https://github.com/kirill-ek/be-latte - на гитхабе
https://kirill-ek.github.io/be-latte/ - верстка
Есть кое-что, что не совсем так, как надо, но если это ваша первая работа, то можно сказать, что она хорошая.
Подробнее о замечаниях:
-
Часто встречается у вас такой момент, когда вместо вертикального выравнивания в блоке вы используете вертикальные padding (например, main-navigation-list). Ваша верстка на флексах, а значит вы можете воспользоваться свойством выравнивания по поперечной оси -
align-items. -
Как альтернатива для решения проблемы с лого - можно было абсолютно спозиционировать, тогда высота картинки тоже не будет отражаться на высоте nav.
-
Стили кнопок при наведении и в активном состоянии одинаковы. Состояние активности должно хоть чем-то отличаться (степенью прозрачности, например).
-
Еще один часто встречающийся момент: позиционирование псевдоэлемента с чашкой кофе. Вы используете координату top с достаточно большими значениями. При этом можно сказать, что псевдоэлемент всегда располагается внизу блока. И если текста станет больше, может возникнуть ситуация, когда псевдоэлемент окажется сверху на тексте. Поэтому будет лучше, если вы замените top на bottom.
Еще вопрос по псевдоэлементу: почему у него width: 100%? Чашка кофе столько места не занимает.
И еще одно. В качестве пространства под псевдоэлемент вы выделяете то padding-bottom, то margin-bottom. На первый взгляд разницы нет, но она есть. Если у блока будет какой-то фон, отличный от белого, то при использовании margin псевдоэлемент окажется всё равно на белом фоне. Попробуйте проверить это самостоятельно. -
Элементы внутри menu-section скорее всего будут вести на отдельные страницы разделов меню, поэтому лучше, если они будут кликабельны (добавьте внутри заголовков ссылки).
-
В блоке testimonials неправильно размечен слайдер. Даже при условии, что вы его не оживляете, он должен быть собран так, чтобы оставалось добавить переключение.
Номер слайда (а их как минимум три, если судить о переключателях) никак не может быть псевдоэлементом к обертке. Это псевдоэлемент к конкретному слайду.
Блок с переключателями занимает всю ширину родительского. Будет лучше, если его ширина будет соответствовать содержимому. -
В css-коде часто встречаются такие стили:
width: 100%; margin: 0; padding: 0;
Для любого div-а - это стили по умолчанию, и нет необходимости прописывать их явно. Проверьте, в каких случаях их можно убрать.
- Вместо картинки карты вы могли попроовать вставить настоящую, тем более, что адрес местоположения есть.
- Не понимаю, зачем для footer-address сочетание свойств display: inline-block; и width: 100%;
Может это не всё, но самое основное, что заметила.
Кроме замечаний хотелось бы отметить и сильные стороны вашей работы.
- В первую очередь это конечно же использование флексбоксов, а не флоатов.
- Не забыли о normalize.css, что считается хорошей практикой.
- Использовали visually-hidden для заголовка первого уровня.
- Очень правильно сделан блок со ссылками соцсетей в футере (я имею в виду использование текста с названием соцсети у ссылок) + стилизация svg-иконок при наведении.
Если у вас есть вопросы, может вы не уверены еще в каких-то стилях, которые использовали, то уточните.
Большое спасибо за подробный разбор!
п.2 - с логотипом я пробовала разные варианты, но тот, который сейчас, мне понравился больше абсолютного позиционирования. Это же не ошибка?
п.4 - всё уже стало понятно, как только я начала чашку кофе позиционировать через bottom 
Но это я от невнимательности…
п.9 - это незамеченные остатки экспериментов
Всё, что могла - поправила. А вот со слайдером - пока не могу представить, как его разметить правильно.