Виталий Першин

Если вам нравится подача материала в книгах O'Reilly, то смело можете читать. Это все базовая информация она всегда будет актуальна. То что не рассматривается в этих книгах вы со временем подтяните в других. Но лучше больше практикуйтесь, чтение технической литературы без практики очень плохо усваивается.

Обернуть в контейнер:

100% сходство PerfectPixel делать не стоит. Так как во-первых дизайн не всегда симметричен, иногда дизайнер располагает блоки на глаз и в данном случае нужно понимать, что это не фича. Во-вторых иногда чтобы исправить пару пикселей приходится навешивать не нужные отступы, обертки и т.д.. Сами эти пиксели ничего не изменят, но могут раздуть код, а в последствии еще и заставить дальше его кастылять.

Возник вопрос, а правильно ли я поступаю, что иногда вмешиваюсь во флексы со своими margin отступами? Например, 3 блока расположены друг от друга с помощью justify-content: space-between, но мне нужно чтоб один блок был чуть ближе к одному из блоков или дальше.

Если нужно, то почему бы и нет. В БЭМ для этого используют модификаторы и это очень облегчает жизнь.

Можно без js делать выборку по тегам:

slick('setPosition') нужно вызывать после открытия модального окна, а вы вызываете его просто так. Учитывая что инициализация слайдера у вас через $(document).ready(function() то setPosition и не отработает, но это другая история

Делать условия для конкретных категорий плохая практика. Будет лучше другой категории определить другой шаблон. Есть вот такой бесплатный модуль, который способен это сделать без костылей: https://opencartforum.com/files/file/1986-personal...

Подписываемся на события слайдера и выполняем необходимые действия в нужный момент:

$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        if(slick.slideCount == nextSlide + 1) {
            // code...
        }
    });

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

Можно при помощи градиента и свойства box-decoration-break: clone;

Нет, не устарела и еще долго будет актуальна.

Желательно заливать полноценные рабочие примеры, тогда можно было не только посмотреть, но и поправить.
Вы скорее всего навешали стилей на portfolio__card, но вы не учил того, что каждый слайд в слик слайдере имеет свои свойства, в том числе, для правильно работы он обнуляет margin. Правильнее всего добавлять обертку для каждого слайда, а уже внутри делать свои блоки как хотите:

<div class="container">
	<div class="card-slider">
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>

			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
	</div>
</div>

Не полностью разобрался как у них реализовано, но в основе лежит свойство mix-blend-mode
Написал небольшой пример:

Я так полагаю, поскольку вы добавили тег Bootstrap, у вас проблема в том что container ограничен по ширине.
Вам нужно добавить закрывающий тег, вставить ваш блок и затем снова открыть container:

</div> <!-- закрываем  container  -->
    <div class="decor-line"></div>  <!-- вставляем свой блок с нужными стилями  -->
<div class="container"> <!-- Снова открываем container  -->

Flex контейнер внутри которого блок с точками занимает все свободное пространство. При этом можно ему задать любые свойства и фон:

При помощи clip-path это делается просто и эффективно, а в случае отсутствия поддержки в каком-либо старом браузере, самое худшее что случится, будет просто кнопка без уголка:

С display: none; обратную анимацию вы не сделаете, а вот с visibility: hidden; и transition повторить это легко:

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

В вашем случае я бы советовал добавить второй класс (Да, так можно и нужно) например header-top__item и описал в нем общие свойства:

<div class="header-top__language header-top__item">
<div class="header-top__contact header-top__item">
<div class="header-top__profile header-top__item">

При этом можно не просто создать 2 класса, а сделать микс блоков и элементов, что в дальнейшем позволит их переиспользовать:

<div class="header-top__item language header-top__language"></div>
<div class="header-top__item contact header-top__contact"></div>
<div class="header-top__item profile header-top__profile"></div>

В итоге:
header-top__item - Описывает ряд элементов со схожими свойствами
language, contact, profile - Независимые блоки
header-top__language, header-top__contact, header-top__profile - Модификаторы в контексте header-top (Не самое удачное название header-top но вопрос не в этом)

Вы можете делегировать событие:

$('body').on( 'click', '#delete', function( event ) {
 alert('works');
});

Вставлю свои 5 копеек на флексах, но это не самое лучшее решение: