Интересные решения в верстке

Сразу к делу:

1) слайдер на маленьких устройствах

Есть блок на 5 элементов, логично было предположить, что при адаптиве его можно просто сделать в строку, но тогда придется долго скролить до главного экрана, скрыть тоже не вариант, ведь там подразумевается важная информация телефон и тд. Выходом было сделать слайдер на маленьких расширениях, а на больших — статический блок

2)data-da

Дизайнеры часто жонглируют блоками, а чтобы перекидывать блоки на автомате существует dynamic adaptive(da), подробнее рассказывал в этом посте

3) градиент через псевдоэлемент

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

&:before {
      content: "";      
      background-color: #333333;      
      position: absolute;      
      width: 100%;      
      height: 100%;      
      top: 0;      
      left: 0;      
      opacity: 0.4;      
      z-index: -1;    
 }

4) повторяющийся фон

Важно сделать верстку практичной, заказчик может поменять текст и тогда верстка не должна ломаться, пример:

высота картинки зависит от количества текста, поэтому лучше сделать через повторяющийся фон (спасибо Даниил Дубченко)

5) убрать сдвиг контента при запрете скролла(во время открытия popup)

Даже самые опытные верстальщики упускают этот момент, рекомендую посмотреть данный урок, чтобы делать верстку лучше

6) ховер только на десктопе

Многие упускают этот момент, но это очень сильно бесит, а иногда даже мешает, решение очень простое:

@media (min-width: 992px){   
   &:hover{
   }
 }

7) большой палец(скопление кнопок и большой шрифт)

И последнее. Избегайте скопления иконок, ссылок, кнопок и всего такого, в меню бугрег рекомендую увеличить шрифт, делай так, чтобы тебе было приятно пользоваться, а на этом у меня все, скоро увидимся!