Можете оценить вёрстку?

Question

[erickmortiny]

Здравствуйте, можете оценить мою вёрстку?Одна из первых работ, а именно вторая вёрстка и первая в котором использовал scss, он не адаптирован для маленьких либо слишком больших устройств, следующий мой макет будет с адаптацией, но пока хочу что-бы вы мне указали на ошибки которые я допустил!Вот ссылка: https://c0ral0vii.github.io/twomaket/

Comments

[bingumd]

зачем так делать?

.navbar .navbar-brand .navbar-text-sign, .navbar .navbar-brand .navbar-text-login, .navbar .navbar-brand .navbar-text-rss {
   ...
}

если можно сделать примерно так:

.navbar-brand a:not(:last-child) {
  border-right: 1px solid white;
  padding: 0 7px 0 7px;
}

и таких примеров у вас очень много.

[bingumd]

и еще почитаете про БЕМ, поможет убрать каскадность в css

[Михаил]

семантика? что это?
<button><a href="#">READ MORE »</a></button>

Answer 1

[kryamk]

Для адаптива понадобится мета тег в head

<meta name="viewport" content="width=device-width, initial-scale=1">

Не помешали бы стили для контейнера, например такие:

.container {
	width: 1920px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

Секция navbar:
заменить флоаты на флексы, и по высоте позиционировать align-items а не марджинами

Секция top-panel:
Здесь у вас margin-top у секции и margin-bottom у подзаголовка. Заменить на паддинги у секции.
Для секций обычно задаются паддинги, ибо если якорное меню, то чтобы текст не прижимался прям к самому верху, а было пространство.
В правой части у заголовка, описания и кнопки правый марджин. Зачем задавать трем элементам, когда можно просто родителю задать паддинг?
В кнопке находится ссылка. Выберите что-нибудь одно. Кнопки обычно используются для какого-либо действия, например открытие мобильного меню. Для перехода на другие страницы, якорное меню - ссылка.

Секция слайдер:
Для стрелок слайдера думаю предпочтительне position: absolute; ну и выровнять по центру
position: absolute; top: 50%; transform: translateY(-50%);
slider-bottom - задайте ему паддинг, а не параграфу марджин

Секция column-text:
Расстояние между заголовком и картинкой состоит из маржинов того и другого элемента, поди лучше определиться на каком-то одном..
У Read More margin-bottom, когда явно просится паддинг для родителя, ну или как вариант высота для слайда/слайдера

Футер
Опять же марджины у элементов, когда предпочтительнее паддинги у родителя или предка.
Флоаты использовать для обтекания картинок, а теперь рулят флексы.

Общие советы
Для сеток флексы и гриды, тут когда как и кому как. Поизучайте.
Все img предлагаю оборачивать в обертку, мало ли там придется подложку полупрозрачную наложить, параллакс или ещё что. Можно к примеру в тег picture
Старайтесь избегать большой вложенности.
По поводу неймнига. Все рекомендуют БЭМ, но он мне не зашёл. Да и в верстке самое сложное это придумать названия классам )
Старайте не прописывать стили тегам, сегодня это p, завтра span. Или добавится такой же элемент, для которого как раз не нужны эти стили
Но понятно, что зависит от ситуации. Например в меню обычно обращаются к ul и li, потому-что при натяжке на cms придётся твои классы добавлять или переделывать стили
Чтобы не писать через запятую свойства каждому однотипному элементу задать общий класс. Например для элементов navbar-brand подошел бы navbar-brand__item и уже ему отсупы

Вроде бы дичи никакой не посоветовал, но всё равно учтите что ситуации разные, на вкус и цвет фломастеры тоже разные

Comments

[erickmortiny]

Спасибо большое всё учту, только не могу понять когда именно нужно использовать padding и margin например у меня есть текст который нужно отодвинуть от края на 20px то что мне нужно будет использовать?
И ещё хочу спросить что даст мета тег в head?
В остальном вроде всё понял, спасибо большое за ваш комментарий, буду улучшаться =)

[kryamk]

Данный метатег чтобы страница сжималась, а не масштабировалась.
Ну допустим есть карточка товара, там вертикально идут название, картинка, цена и описание. И у всех отступ слева от края карточки 15px, вот и задаёте карточке левый паддинг 15px. А если у какого-то элемента отступ больше, то дополнительно отодвигаете его маржином обычно, а порой паддингом - иногода не принципиально, а иногда ситуация требует.

[erickmortiny]

kryamk, kryamk, Хорошо, всё понял, спасибо большое за обьяснение

Answer 2

[origami1024]

Почти сносно, иди работай