Ваше мнение о верстке?

Question

[Irissska89]

Добрый вечер!
Как оцените верстку, со скидкой на то, что это моя вторая работа?)
Подскажите пожалуйста на что обратить внимание в дальнейшем? Вообщем буду рада конструктивной критике) Спасибо!
https://zi-web.github.io/veggie/

Comments

[Angry Developer]

• чёрный текст на цветном фоне
  
• favicon.ico потерян
  
• нет адаптивности
  

[tema_sun]

Норм. Теперь надо поправить косяки, что вам указали и сделать его адаптивным.

[Irissska89]

Angry Developer, спасибо за комментарий!
Цвет шрифта такой по макету, изменять его при уменьшении ширины экрана?
favicon где должен вообще быть?)

[Irissska89]

tema_sun, спасибо за комментарий!

Answer 1

[Антон Спирин]

В форме, которая к слову выглядит странно из-за разных отступов, вы используете padding для отступа сверху, правильно использовать и padding и margin

spoiler

У вас так получается outline box поля ввода размером с этот огромный padding. Выглядит это не очень красиво.

Неправильно подогнали размер изображения

Его лучше тегом img добавлять. Эту разницу когда лучше использовать img, когда backgroung-image надо понимать.

В остальном все, вроде, красиво.

Попробуйте сверстать адаптивный сайт в следующий раз или этот попробуйте сделать адаптивным.

Comments

[Irissska89]

Спасибо за отклик!
Попытаюсь сделать неадаптивный макет адаптивным)

Answer 2

[Aleksey Solovyev]

Совет: верстайте готовые макеты, которые найдете в интернете( freebies.flatro.ru/publications/category/landings ).
Ибо когда Вы рисуете сами свой макет, то используете навыки\идеи, которые Вам известны(другие техники Вам просто еще не известны в угоду опыта). Используя чужой макет, Вы сталкиваетесь с проблемами, которых еще не знаете. Пусть то новая тень или косая линия заднего фона... + вы не дизайнер. Сможете избежать ужаса, который у Вас на сайте сейчас.

со скидкой на то, что это моя вторая работа - ??? Вы ждете каких-то поблажек? Либо справляетесь с работой, либо нет. Вам нужны советы или просто красивые слова, что Ваша верстка норм? За в2 к маме и бабушке.

По макету.
Поздравляю! Вы научились использовать flex(нет. Вот Вам для изучения после понимания статьи - да). На этом Ваш макет заканчивается.

1. Ваша верстка поедет на разных браузерах. Добавляйте префиксы или используйте другие свойства
   
2. Перечитайте методологию БЭМ. Вам надо лучше понимать\отделять блоки по их назначению.
   
   • Секции special, about, menu... - это одинаковые блоки. Почему названия разные?
     Создайте section.row как делают бутстрапы всякие...
     
   • Заголовки секций в отдельный блок:
     div.header(div::before), h2.header__title header__title--center/--right что-то такое...
     
   • И тд по всем элемента...
     
   
   
3. Сбрасывайте дефолтные стили элементов:
   Список в nav имеет отступы, которые по-разному будут выглядеть. В footer'е поля ввода.
   Не надо так делать. Вся форма чудно изначально сверстана(что это за отступы дикие?). Ее я повторно не смогу использовать на сайте - в этом суть БЭМ. Примеры форм Вот Ваша: делать по аналогии
   
4. Это нормально?
   
   
5. Учитывайте размеры экрана при переносе элементов:
   
   Очевидно, что должно быть иначе. Надо добавить модификаторы(Смотреть пункт 1)
   
6. ????
   
   
7. Чем main-nav__item--active от обычного отличается? Зачем стили тогда к нему?
   
8. Почему нет стилей для маленьких экранов?
   
9. Иконки надо использовать svg формата + добавить их в спрайты
   
10. Оптимизируйте изображения
    
11. Оптимизируйте шрифты
    
12. Начинайте изучать препроцессоры
    
13. .....
    

.... для начала хватит....

Ну и куча проблем по дизайну(думаю к теме данного топика не имеет отношения )... почему и советовал ваше тренироваться на готовых макетах из интернета.

ps не надо зацикливаться на 1 сайте. Не надо доводить его до идеала - идеала нет. Берите следующий макет и верстайте с учетом ошибок. С опытом будет проще называть элементы. Использовать figure в нужном месте и тд

Comments

[Irissska89]

Эмм.. Это и есть готовый макет!)
"С скидкой" в данном контексте "с разъяснениями", ну как для новичков, так понятнее? Посему мне незачем ждать ни от кого "поблажек"))
Спасибо большое за ваше мнение, посмотрю ваши рекомендации.

Answer 3

[SagePtr]

Читабельность местами ужасная, тут например:

Comments

[Irissska89]

Спасибо за отзыв!
А как бы Вы посоветовали поступить с цветом шрифта? Просто изменять цвет, в зависимости от ширины экрана?

[IIIu6ko]

Irissska89, Если подобная херня будет в реальном проекте, то смело говорите заказчику, пусть дизайнер всё нормально делает, не ломайте себе голову. Если заказчик просит "сделать красиво" Вас, то смело доплату берите за косяки дизайнера.

Вижу 3 варианта решения проблемы:
1. Использовать background-position-x: right; для фона,
2. Заменить фоновое изображение на сплошной цвет,
3. Сделать фон;

[Irissska89]

IIIu6ko, спасибо большое за подсказки!
1 вариант отлично в footer получилось)