Islam Ibakaev

лучше длинный класс

Проблема решений выше в том, что они не учитывают, что лого выходит за пределы шапки. Хлебные крошки находятся в теге main. Соответственно, твоё лого должно быть за пределами тега header, скажем, аккурат после открываюшего тега body. Боди должен иметь position: relative, а лого - position: absolute; left: 50%; transform: translateX(-50%);
Вёрстку шапки делается изи на флексбокс: 5 колонок налево, 5 направо, а родителю этих колонок justify-content: space-between; К примеру, если взять сетку из bs4, то будет так:

<div class="row justify-content-between">
  <div class="col-lg-5"></div>
  <div class="col-lg-5"></div>
</div>

изобретаешь велосипед
https://isotope.metafizzy.co/filtering.html

.title {color: black; font-size: 30px;}
.title--color2 {color: red;}
.title--color3 {color: green;}
.title--big {font-size: 60px;}

<h1 class="title title--color3 title--big"></h1>

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

UPDATE: пардон, не заметил что речь идёт именно о owl карусели, но, в любом случае, на slick тоже можно такое сделать.

приоритет такой: сначала jquery, затем popper.js, затем bootstrap.min.js
или такой: сначала jquery, затем popper.js, затем utils.js, затем tabs.js

bricks.js будет получше masonry

div[class*="block-"]:not(:first-child) { margin-top: -50px; }

Наверняка ты задаёшь этот вопрос, чтобы определить свои дальнейшие действия в неопределённой ситуации. В таком случае, действуй с расчётом, что тебя кинут.

Что делать с версткой которую сделал верстальщик?

повторно использовать почти не получится

На backend это же все должно быть по идеи разбито на шаблоны при помощи того же pug.

зачем? все шаблоны находятся на клиенте и будут(если использовать server-side rendering) рисоваться на сервере(изоморфное приложение)

Вот хороший стартер, чтобы пощупать server-side react.

похоже на immutable(functional)css типа tachyons и basscss

в хроме ctrl + shift + J -> ctrl + shift + M -> вбиваем в эмулятор 1920 X 1080 (клиенту скажи)

offtop: сам придумал эффект при клике на "Купить"? Если посмотрел в какой-то статье или блоге - дай плиз ссылку)

1. гугл в помощь
2. по дефолту - не нужно

как насчёт этого?

я насчитал пять компонентов: c-searchbar, c-searchbar-menu, c-searchbar-dropdown, c-searchbar-megamenu, c-searchbar-megamenu-tags(бем с префиксами)

соответсвенно выглядеть должно так

<div class="c-searchbar">
    ...
    <ul class="c-searchbar__menu c-searchbar-menu">
			
      <li class="dropdown [ c-searchbar__dropdown c-searchbar-dropdown ]">
        <a href="#" class="dropdown-toggle [ c-searchbar-menu__link ]" data-toggle="dropdown">Country <b class="caret"></b></a>
        <div class="dropdown-menu [ c-searchbar__megamenu c-searchbar-megamenu ]">
          <div class="container">
            <div class="c-searchbar-megamenu__header">
              <div class="c-searchbar-megamenu__tags c-searchbar-megamenu-tags">
                <div class="c-searchbar-megamenu-tags__item">CZECH REPUBLIC <button type="button" class="remove-tag"></button></div>
                <div class="c-searchbar-megamenu-tag__item">CONSUMERS ELECTRONICS</div>									
              </div>
            </div>
          </div>
        </div>
      </li>
			
			<li class="c-searchbar-menu__item"></li>
			
    </ul>
  ...
</div>

Есть тонкий момент, стилистика компонента не должна содержать правил позиционирования. То есть ты не должен задавать margin, padding, position(и что-то ещё) в классе c-searchbar-dropdown, а должен для этих целей использовать c-searchbar__dropdown. Если же компонент c-searchbar-dropdown не будет иметь правил позиционирования ,то можно(наверное) убрать класс c-searchbar__dropdown

установи yeoman командой npm install -g yo
установи webapp-generator (сгенерирует дефолтный шаблон для будущего сайта) командой npm install -g webapp-generator
установи gulp-cli и bower командой npm install -g gulp-cli bower

и наконец командаyo webapp чтобы поднять каркас

Вообщем всё это объясняется на самом сайте yeoman.io

UPDATE: поскольку этот вопрос очень многих заинтересовал, я написал простой стартер для вёрстки с pug.
вкратце: под капотом проект, который скаффолдит webapp-generator, только приспособленный для работы с pug, убрана папка тестов, добавлен gulp-uncss(чтобы отрезать неиспользумемые стили фреймворка) и почищен gulpfile.js
Вобщем форкайте, лайкайте, пулл-реквестите(если хотите)

тебе нужно смотреть в сторону библиотек, делающих page transition, типа barba.js
и уж вряд ли стоит изобретать колесо

так?