Может ли кто проверить верстку?

Question

[Doxi]

https://github.com/doxideniss/doxideniss.github.io
doxideniss.github.io

Comments

[Сергей delphinpro]

font: 52px/35px "Roboto-Light", sans-serif

высота строки меньше размера шрифта (отмазки не катят, так не делается)

font: 11.5px/26px

Дробные пиксели

width: 865px

width: 265px

прощай адаптив (хотя бы мах-width 100% добавить и то уже будет лучше...)

line-height: 22px

высота строки в пикселях. да еще для тега параграфа без класса.

"RobotoSlab-Bold"

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

"Roboto-Light"
"RobotoSlab-Bold"

Не нужно подключать так шрифты. Нужно давать им правильное имя (Roboto и Roboto Slab) а вес и начертание задавать свойствами font-weight и font-style

Весь файл пестрит магическими числами. Вероятно пикселями выравнивал по макету.

Непоследовательность в именовании классов
для блока .about заголовок назван .about__title, а для блока .news - .news__item-title, хотя структура у них похожа (список - элемент списка - описание сущности)

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

[tema_sun]

font-size: 11px для основного текста - это зло. Не делайте так.

[Doxi]

Сергей:
1. магические числа взялись из макета, ибо сам макет был 2к шириной, я изменил в фотошопе его на 1440, и потом появились эти магические числа, так и верстал
2.насчет высоты не знаю, в фотошопе пишет в пикселях, так и верстал
3. везде вроде есть класс
4.насчет шрифтов спасибо, так и буду делать, не знал)
5.БЭМ не до конца понял, в абоут там основной заголовок а в ньювз так там есть основной, и есть списка

А так очень большое спасибо)

Answer 1

[Tizi]

Вообщем как дизайнер скажу тебе
1- меняй цвет текста который ты вводишь на белый

2- для кого столько пустого места

3- почему на кнопках в хедере есть :hover а остальные просто кликабельный без эффектов ( ну это чисто моя придирка )

Со стороны программиста скажу:
1- пили адаптацию сайта под разные девайсы

а то вот так вот выходит.
2- блоки не занимаю свою высоту


P.s: код не проверял из за недостатка времени.
и если посидеть поискать можно еще что то найти.
И да воспринимай это как критику. )

Comments

[Doxi]

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

[Tizi]

Doxi: это так то что сразу в глаза бросаются
По поводу адаптива. там есть блоки на оранжевом фоне(3 столбика), которые +- с адаптивом. взгляни что там и как. мб исправишь .
Я сам сейчас ушел изучать FlexBox на нем адаптивность просто делать. если интересно взгляни. и да, в FlexBox не встречал такого что блок не занимает своей высоты ( всегда берет то что ему нужно )

[ziss]

Doxi:
Можно так:
.news__item-btn:not(:last-child){
display:inline-block;
margin-bottom: 30px;
}

И добавьте ховер-эффекты, а то непривычно смотрится. А так, то более-менее, если первая верстка, даже по БЭМ (внимательно не смотрел).

Answer 2

[Андрей Гончаров]

Изображения в png - не юзать если это не примитивная графика ли графика с прозрачностью. Самое главное - фон в шапке, он весит неприлично много 1.8мб, смени его на jpg 60%, и по умолчанию цвет фона шапки ставь темный, чтоб пока не загрузилось изображение, хоть текст в шапке можно было прочитать. Центрировать фоны секций тоже надо.
Круглые изображение - тоже перевести из png в jpg и закруглит ьи сделать бордер css-ом.

По разметке все не плохо.

Comments

[Doxi]

Спасибо, все переведу в jpg, а вот насчет круглых так они так и были в макете круглые

[Андрей Гончаров]

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

[Doxi]

Андрей Гончаров: окей, буду знать)
и еще например все фоновые изображения с градиентом, но я их просто так и сохранил, делать ли градиент в фотошопе, если да то как?

[Андрей Гончаров]

Желательно темные оверлеи над фоновыми изображениями тоже воспроизводить с помощью css. Вообще все что можно сделать на css - делать на css. В разумных пределах, конечно.

[Сергей delphinpro]

Doxi:

были в макете круглые

В правильном макете к изображениям применяется обтравочная маска. Ее нужно выключить, для того чтобы сохранить прямоугольную картинку.