Spaceoddity

Не надо писать готовое решение. Надо просто натолкнуть автора на правильную работу с таблицами:
Продолжите все линии в вашей таблице до границ само таблицы. Это будет сетка вашей таблицы, т.е. даст вам необходимое кол-во рядов и столбцов. С этими данными строите таблицу. А зоны объединения рядов и столбцов делаете с помощью colspan и rowspan. На grid суть точно такая же.
P.S. Я тут вижу 7 столбцов и 4 ряда. С этими данными и стройте таблицу.

Покажу как у меня сделано (vue):

export default {
	data() {
		return {
			actualColor: 'light'
		};
	},

	methods: {

		changeColorLight: function(event){
			if(event){
				if(this.actualColor === 'monokai') {
					this.actualColor = "light";
					this.changeColorClass();
				};
			};
		},

		changeColorMonokai: function(event){
			if(event){
				if(this.actualColor === 'light') {
					this.actualColor = "monokai";
					this.changeColorClass();
				};
			};
		},

		changeColorClass: function() {
			let html = document.documentElement;
			html.className = this.actualColor;
		}
}

/******************************************************************************
	Colorscheme variables
******************************************************************************/
html.light{
	--background:#ffffff;
	--background_nav:#f3f3f3;
	--foreground:#800000;
	--foreground_script:#000000;
	--foreground_brackets:#800000;
	--foreground_script-brackets:#000000;
	--foreground_cursor:#000000;
	--selection:#add6ff;
	--counter:#237893;
}
html.monokai{
	--background:#272822;
	--background_nav:#1e1f1c;
	--foreground:#f92672;
	--foreground_script:#a6e22e;
	--foreground_brackets:#f8f8f0;
	--foreground_script-brackets:#f8f8f0;
	--foreground_cursor:#f8f8f0;
	--selection:#575b61;
	--counter:#90908a;
}
.content{
	grid-column:content;
	grid-row:1;
	background-color:var(--background);
}
/* ну и т.д. */

Ссылки на файлы надо указывать в html-коде. Т.е. данные будет хранить html-код.
В js-файле объект player.source (на который вы указали стрелочкой на скрине) хранит данные о "треке запускаемом по умолчанию" (насколько я понял из коммента в коде).
А чуть ниже этого объекта как раз функция, которая по клику берёт значение data-audio из html-кода и запускает воспроизведение файла.
Если путаница с путями файлов, попробуйте законсолить вывод data-audio в веб-инспекторе:

let audiourl = $(this).attr('data-audio');
console.log(audiourl);
player.source = {

Слайдер должен состоять из блоков. В каждом блоке три картинки, по центру абсолютно спозиционированная надпись.
https://codepen.io/nantohome/pen/abdjdxP

И в чём тут проблема?))
Представьте себе таблицу 3x3 c размером ячеек 25% 50% 25%. Как именно вы её будете реализовывать (table, блоки, флексбоксы, грид) - на ваш вкус.

Изолированные стили работают только в вашем проекте. И изолируют стили для отдельных компонентов - чтобы они не пересекались со стилями другого компонента. Например, в вашем проекте используются два калькулятора: простой и инженерный. Вот чтобы стили калькуляторов не пересекались - их изолируют. На самом деле это так себе практика. Всё это легко решается применением уникальных классов.
Ну и, конечно, если вы интегрируете свой проект в какой-то другой - никто не гарантирует что какие-то более специфичные стили целевого проекта не перепишут ваши. Так что уникальные префиксы для классов - вполне себе вариант.

Кажется понял что загвоздка была в HtmlWebpackPlugin. Но теперь приходится прописывать в опциях все используемые шаблоны, а нельзя ли это как-то автоматизировать? Чтобы он просто брал все файлы из папки и выводил их (с теми же именами по умолчанию, например).

"Не стоит плодить сущности без нужды" (с) У. Оккам
Разбивайте блоки по логическим и семантическим признакам. Т.е. просто задумайтесь - как ВАМ БУДЕТ УДОБНЕЕ потом работать.
Кнопки - окей. Выносите для них общие стили. А позиционирование делайте контекстным селектором от родителя. Либо навешивайте отдельный класс (именно для позиционирования).
Тут ещё такой момент, что вы заранее не можете знать насколько общие стили будут иметь эти "переиспользуемые блоки" (ну серьёзно, у меня уже просто люто бомбит от этого БЭМа, переиспользуются в основном как раз элементы, но по "семантике БЭМа" - это, мать их за ногу, блоки)))
Например, вы вынесли весь декоратив в общий стиль. А для модификации оставили позиционирование. А зватра вам дизайнер даёт практически идентичную кнопку, но другой высоты. Вы её можете контекстом снова поправить. А послезавтра снова другая высота. И в итоге получается что выносить надо как раз стиль для поздних кнопок, а вот первую делать "модифицируемой".
Так что я бы просто набирал стили as is. А уж потом, при желании, можно и рефакторинг сделать - и объединить, вынести какие-то отдельные стили.

А в чём проблема-то? Слева слайдер, справа отдельно выведены элементы слайдера в виде сетки.

.menu__item {
  white-space: nowrap;
}

Знаете, вам для этого не нужен JS и уж тем более jQ - это всё вёрсткой делается.
Но вы уже заюзали бутстрап, так что... удачи! )))

https://chrome.google.com/webstore/detail/perfectp...
Лепите макет поверх страницы и в веб-инспекторе подгоняете размеры. Измерять линейкой для pixelperfect не лучший вариант - как минимум, рендеринг шрифтов будет разный (и междустрочное).

h1, h2, h3, h4, h5, h6, h7{
 font-size:24px !important;
 margin:0 !important;
}

заголовок и так блочный элемент

Это от многих факторов зависит. Ну и CMS обычно используют не для разработки, а для клиента (которому как раз и надо контентом управлять).