Сергей delphinpro

велосипед не мой. вроде работает.

<button class="btn-chapter" data-chapter="1">Глава 1</button>
<button class="btn-chapter" data-chapter="2">Глава 2</button>
<button class="btn-chapter" data-chapter="3">Глава 3</button>
<button class="btn-chapter" data-chapter="4">Глава 4</button>
<button class="btn-chapter" data-chapter="5">Глава 5</button>

<div class="chapter" id="chapter-1"><h2>Глава 1: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-2"><h2>Глава 2: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-3"><h2>Глава 3: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-4"><h2>Глава 4: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-5"><h2>Глава 5: Основы Фотошопа - Растровая графика</h2></div>

.chapter {
  display: none;
}
.chapter.is-open {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {

  const allChapters = document.querySelectorAll('.chapter');

  const closeAllChapters = () => allChapters.forEach(el => el.classList.remove('is-open'));
  const openChapterById = id => document.getElementById(id).classList.add('is-open');;

  document.querySelectorAll('.btn-chapter').forEach(btn => {
    btn.addEventListener('click', () => {
      closeAllChapters();
      openChapterById(`chapter-${btn.dataset.chapter}`);
    });
  });

});

Без обрезки никак. Сами должны понимать. Если пропорции экрана отличаются от пропорций изображения, то обрезка будет по-любому.

Если это какой-то абстрактный фон, то без разницы. Берем несколько картинок разного размера (чтобы на мобилах не грузить лишнего) и подключаем их через медиа-запросы.

Если на фоне есть какой-то объект, то желательно, чтобы он был в центре (из-за обрезки по краям) и нужны два варианта изображения - вертикальное и горизонтальное. Так же через медиазапросы (portrait/landscape) подменяем. Плюс несколько размеров (2-3) под разрешение экранов, с учетом ретины - 2х.

Размер файла должен быть минимальным, это очевидно. Также очевидно, что точный желательный размер вам никто не скажет. Для уменьшения веса файла используйте конвертацию в webp формат.

Чтобы таблица слушалась установки ширины для колонок, то ей нужно выставить фиксированный лэйаут

table {
  table-layout: fixed;
}

Но там кажется остальная доступная ширина будет поровну распределяться между всеми колонками, у которых ширина явно не задана.

Ширина явно указана в стилях - 120px. Так как установлен box-sizing: border-box; то padding в расчет ширины не берем. Итог = 120px.

SVG - векторный формат.
просто укажите нужные размеры в стилях, и браузер сам все увеличит

.my-svg-image {
   width: 200px;
   height: 200px;
}

Ну а если нужно именно файл поправить - то откройте его в векторном редакторе и измените размеры.

Расположить такую же картинку позади и растянуть ее на весь блок. Чтобы не было искажений, установить object-fit:cover; Либо повесить на фон с заполнением background-size: cover;
Заблюрить с помощью filter: blur(10px);

можно имитировать внутренние скругления двумя псевдоэлементами.

В общем случае – никак.
Если использовать неразрывные пробелы между нужными словами (nbsp;) или переносы (br), то можно задать ширину как width: min-content или width: max-content. Но это частные случаи, не универсально.

Самая обычная таблица.

.logo {
  display: grid;
  grid-template-areas: "logo";
}

.logo1, .logo2 {
  grid-area: logo;
  transition: opacity 0.3s ease;
}

.logo1 { opacity: 1; }
.logo2 { opacity: 0; }

.logo_state_2 .logo1 { opacity: 0; }
.logo_state_2 .logo2 { opacity: 1; }

<div class="full-width-section">
    <div class="container">
    </div>
</div>

только так:

<div class="items__item">Длинное&nbsp;описание&nbsp;на 11111111</div>

.items {
  width: min-content;
}

Абсолютное позиционирование отсчитывается от ближайшего не-static элемента. e вас это - li родительского пункта.
сделайте ul с relative и встанет относительно него.

Вы не понимаете сути препроцессоров.
В браузере нет никаких sass переменных. А значит и изменить вы их не можете.

Как правильно сделать переключение темы?

C использованием @use подход принципиально меняется. Область видимости каждого подключаемого так модуля ограничена им самим, и потребуется импортировать из него необходимые сущности в каждом файле использования.

Можете просто не обращать внимания на предупреждения. Или понизить версию sass (кажется до 1.77.8)

Ну или пишите стили по-новому

main.scss

@use 'base.scss';
@use 'banner.scss';

base.scss
$_color: red;

banner.scss

@use './base';
a{
    color: base.$color;
    text-decoration: none;
}

Может быть, в сети, где-то есть актуальная железобетонная инструкции для того, чтобы импорты, переменные, да и Sass нормально завелись?

почитайте первоисточник https://sass-lang.com/documentation/at-rules/use/