@erickmortiny

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

Здравствуйте, можете оценить мою вёрстку?Одна из первых работ, а именно вторая вёрстка и первая в котором использовал scss, он не адаптирован для маленьких либо слишком больших устройств, следующий мой макет будет с адаптацией, но пока хочу что-бы вы мне указали на ошибки которые я допустил!Вот ссылка: https://c0ral0vii.github.io/twomaket/
  • Вопрос задан
  • 281 просмотр
Решения вопроса 1
kryamk
@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 и уже ему отсупы

Вроде бы дичи никакой не посоветовал, но всё равно учтите что ситуации разные, на вкус и цвет фломастеры тоже разные
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
origami1024
@origami1024
went out for a night walk
Почти сносно, иди работай
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы