Антон Литвиненко

:nth-child(-n+5)

.wrapper {
  margin-left: calc(50% - 1200px/2);
  padding: 0 15px;
}

Каждый день одни и те же вопросы
Как на jquery сделать так, что бы при прокрутке страницы классы меню менялись?

Как на меня очень много кода в сети написано именно в контексте лайоута на флоатах. Далеко ходить не нужно, woocommerce все ещё на флоатах.
Понимать как верстать на флоатах нужно например для поддержки легаси сайтов

Используя css анимации и активный слайд
Допустим есть такой слайдер, он имеет hero-title и hero-list

@keyframes fadeInUpSD {
    0% {
        opacity: 0;
        transform: translate3d(0,15%,0)
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.hero-slider .slick-active .hero-title.ajat-animated {
    animation: fadeInUpSD 1s both 1s
}

.hero-slider .slick-active .hero-list.ajat-animated {
    animation: fadeInUpSD 1s both 1.5s
}

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

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

<div class="img-wrapper">
	<img src="img/category/cat3.jpg" alt="">
</div>

.img-wrapper {
	position: relative;
}
.img-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

function headerScroll() {
	if ($(window).scrollTop() > 200) {
		$('.page-header').addClass('scroll');
	} else {
		$('.page-header').removeClass('scroll');
	}
}

headerScroll();

$(window).on('scroll', function(){
	headerScroll();
});

В данном примере overfow hidden фиксит схлопывание родителя, у которого все элементы имеют свойство float. Более правильной альтернативой было бы использование на родителе так называемого clearfix класса

не нужно задавать инлайновые стили через js. все эти стили можно отнаследовать от класса .sticky, а перебить инлайновые стили с помощью просто цсс сложнее.
Например

.page-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 20px 0;
	background-color: #292929;
	transition: padding .25s;
	z-index: 100;
}

.page-header.scroll {
	padding: 10px 0;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,.05);
}

.page-header.scroll .main-menu a {
	color: #292929;
}

.page-header.scroll .main-menu a:hover {
	color: #06bbc7;
}

.main-menu a {
	color: #e5e5e5;
}

.main-menu a:hover {
	color: #06bbc7;
}

Если задумано, что фоновое изображение можно менять, то да, в html.
Но заказчику не нужно будет лазить в html, разработчик позаботится и сделает так, что в html изображение будет выводится из админки, а вот с css так не получится

Что значит размеры слайда динамические?
Два варианта для картинки с object-fit
1. Фиксированная высота слайда, картинке абсолют и обджект фит
2. Даём слайд паддинг топ например 56%. Картинке обсолют и обджект фит. В этом случае слайды всегда будут сохранять пропорции

Разобраться как написан бутстрап очень даже не помешает. Бутстрап вылизан годами и читая его код можно почерпнуть много хороших практик. Мне, например, очень нравится, как в бутстрапе реализованы модальные окна. Настолько, что я написал свое решение, максимально похожее и таскаю его из проекта в проект.
Но нужно не выучить документацию, а именно разобрать код. Это не сделает вас гуру, но определённо не будет лишним

https://youth-worker.org.ua/contacts/
https://css-tricks.com/float-labels-css/

Свойство display не анимируется. Использую так

.elem {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
} 

.elem.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

Плюс транзишн и трансформ если нужно

Это стандартное поведение, фиксед выпадает из потока документа. Если ваш хедер высотой скажем 100 пикселей то нужно чтобы до следующего блока в потоке документа был такой отступ. Я обычно задаю padding-top общей обертке сайта

Если флексами то три колонки, если без колонок, то адекватного способа нет, используйте masonry