Как бы вы оценили верстку макета?

Question

[Анна]

Здравствуйте, я начинающий верстальщик и хотела бы принять критику в сторону моего первого адаптивного макета. Вот ссылка. Над чем мне нужно еще поработать, что нужно исправить?

Comments

[BATPYIIIKOB]

Думаю стоит немного поработать над типографикой (меню, контент..)
Слишком толстая белая обводка батонов "LOREM IPSUM" (сильно контрастирует).
В общем вёрстка чистенькая, аккуратная (по коду).

[Kovalsky]

Чистенько, красиво. Но мобайл по сути поломан.

[Анна]

Kovalsky, спасибо) А можно подробнее про мобайл?

[Kovalsky]

Анна, это я вам наврал; у меня появился горизонтальный скрол и мобильное меню почему-то открылось с position: relative, а не fixed, от того создалось впечатление что все порушилось. Если меню это не проблема, то горизонтальный скрол это грустно

Answer 1

[Максим]

Полупустые страницы ума мало надо - сверстайте магазин и его адаптируйте

Comments

[Анна]

Спасибо за ответ) Да это не сложный макет, дальше буду делать что-то поинтереснее.

[Максим]

Анна, сразу начинайте со сложного - проблемы придут - будем решать вместе

[Анна]

Спасибо)

Answer 2

[Александр Епихин]

Иконки используйте только svg. Удобно размещать их в спрайте. И при ховере менять цвет.

Для элементов которые меняют свои свойства по hover добавляйте transition для плавного изменения свойств.

Используйте подход mobile first. Т.е. сначала пишите стили для самого маленького экрана, а потом с помощью медиазапросов min-width переопределяется свойства для больших экранов.

Для указания размеров текста лучше использовать относительные единицы измерения em/rem. Это позволит некоторым пользователям с помощью настроек браузера изменять размер шрифта.

Появление навигации на маленьких экранах сделайте с анимацией.

Вертикальные отступы между блоками лучше делать с помощью margin, а не padding. Например social__item. Нет никакой нужды делать его таким высоким. Убери лишние padding и добавьте margin-bottom у nav.

В этой секции точки не стоит прятать на маленьких экранах. Задайте все размеры через em и через медиа-запросы меняйте размер шрифта у родительского блока info (кстати почему их два?)

Comments

[Анна]

Спасибо за ответ) А блока info и правда два, я не помню почему я так сделала

[Kovalsky]

А почему иконки только в svg?

[Александр Епихин]

Kovalsky, потому что их можно масштабировать без потери качества и векторная графика лучше отрисовывается. Вектор можно стилизовать, не только однотонный, но и многоцветный. С растром придется иметь несколько вариантов оформления.

[Kovalsky]

Александр Епихин, а я не говорил про растр, я говорил про упаковку иконок в такой же векторный формат как и SVG - в шрифтовые наборы типа TTF, WOFF и другие.

[Александр Епихин]

svg лучше стилизуются, их можно анимировать, со шрифтами есть некоторые проблемы

Answer 3

[Ilya Muromtsev]

Да замечательно всё! Дальше больше! Молодец!)

Comments

[Анна]

Спасибо)

Answer 4

[Radjah]

Просто дохренища пустого места, но зато всё вылетает и плавно появляется при скроллинге.
Минимум полезной информации и максимум свистоперделок.

Comments

[Анна]

Спасибо за ответ) учту в дальнейшем

Answer 5

[fallus]

Это невероятно. Вот-вот должен позвонить президент.

Comments

[Анна]

Спасибо за ответ) Хочется слышать конструктивную критику. Вначале я писала что новичок в этой сфере и никаких сверх ожиданий у меня нету!

Answer 6

[Владислав Цепляев]

Мне понравилось, сделала красиво)

Answer 7

[Kirill Makarov]

Лично у меня ехала анимация на телефоне, точнее прыгало разрешение на экране. В остальном очень даже хорошо для первых версток. В код не без, сказать по нему не могу.