«phpClub» — архив тем ("тредов"), посвящённых изучению PHP и веб-технологий.
Аноним 2019/04/13 22:50:49  №1380575 1
Напоминаю ОП-у глянуть мое из прошлого треда.

> Оп, глянь, как будешь свободен, финальное задание по верстке твое "Webpaint". Остальные аноны тоже можете указать на ошибки.

https://codecoshauni.github.io - сама страница.
https://github.com/codecoshauni/codecoshauni.github.io - ну и код.
Ответы: >>1398384
https://codecoshauni.github.io Аноним 2019/05/12 13:18:03  №1398384 2
>>1398233

Почитай про MVC, например у меня в уроке: https://github.com/codedokode/pasta/blob/master/arch/mvc.md

>>1380575

https://codecoshauni.github.io

Первое, что сразу бросается в глаза: буквы в слове "We are" у тебя значительно толще, чем на макете. Конечно, бывают различия в рендеринге на разных платформах, но не до такой же степени. Проверка показала, что у тебя в h1 используется шрифт в полужирном (font-weight: bold) начертании, а должно использоваться тонкое начертание. Также, в слове Webpaint жирный шрифт искуственно ужирняется сверх нормы. Ну и еще, если присомтреться, то на макете чуть больше межбуквенное расстояние, чем у тебя.

Отступ между надписью "into berautiful things" и кнопкой ниже в полтора раза больше, чем должен быть. Заголовков Consectetur, Tristiquet у тебя вообще нет.

Надпись digital & branding имеет слишком сильный наклон букв. Ты взял шрифт в курсивном начертании и добавил к нему искуственный наклон за счет font-style: italic.

Ну это же грубейшие ошибки, которые сразу видны, если просто открыть рядом макет и твою верстку. Это никуда не годится. Нужно тщательнее проверять свою работу. Есть расширения к браузеру (вроде pixel perfect), которые позволяют накладывать изображение поверх страницы, они могут тебе помочь.

Сами шрифт подключен неправильно. Там используется один шрифт Lato, в разных начертаниях и стилях (font-weight, font-style), а не несколько разных шрифтов. Если делать правильно, то, когда мы используем тег strong, браузер будет автоматически выбирать более жирное начертание. В твоем же случае, он будет искуственно ужирнять буквы. Если правильно подключить шрифт, многие проблемы исправятся сами собой. Почитай про @font-face и про использование font-weight/font-style внутри. Если ты любишь длинные спецификации, то пожалуйста: https://drafts.csswg.org/css-fonts-4/#font-face-rule Если нет, то поищи какой-нибудь другой мануал.

Также, твой способ подключения не позволяет использовать локально установленную версию шрифта Lato.

Тебе нужно тщательно сравнить макет и свою верстку и исправить расхождения. В блоке Consectetur обрати внимание на межстрочный интервал.

Адаптивность требует доработки, а именно:

- блок с заголовками вроде Consectetur просто смотрится плохо на ширине 810 px. Он слишком широкий. Тут было бы логичнее либо сделать их в 2 колонки, либо сделать вертикальным списком для узких экранов, а иконку попробовать вынести вбок. А на маленькой ширине вообще убрать иконку или уменьшить ее размер.
- меню смотрится странно на ширине 810px, оно выстроено вертикально и слева от него огромное пустое место. Можно попробовать поэкспериментировать, выстроив его в 2-3 колонки, или попробовать поместить справа от надписи "We are Webpaint".
- Кнопки All/Graphic на ширине 810 px, наверно, лучше смотрятся в горизонтальном расположении
- В подвале на ширине 810px иконки места и телефона вываливаются на отдельную строку
- На ширине 338px надпись на кнопке See portfolio сдвинута вниз
- На ширине 352px в портфолио очень большие поля слева и справа, лучше их уменьшить и увеличить картинки портфолио. Более того, возможно, на такой маленькой ширине их стоит выводить в 1 колонку.

Заглавные буквы в меню делать лучше за счет CSS свойств. Имена лучше выбирать более осмысленно, не button1, а button-all.

У тебя есть правило:

> font-display: swap;

но оно вроде бы указывается внутри @font-face: https://drafts.csswg.org/css-fonts-4/#font-display-desc