Алекс Глебов

https://codepen.io/SkiperX/pen/MWWpLBO

не кроссбраузерно backdrop-filter: blur(30px);

Первая причина использовать переменные - если значение нужно в 2х местах и более. Чтоб не копипастить.
Одинаковые transition, размеры заголовков и тд.

Втарая - удобство настройки компонентов. Например гамбургер. Он есть в каждом проекте, но меняется цвет, размеры и тд. Это удобно вынести в переменные и не лезти править внутри.

Третья - базовое значение. Например для отступов.

$indent: 8px;
.elem {
  padding: $indent*2 $indent*3;
}

Для адаптива нужно познакомится с сеткой и медиа запросами.
Дальше раскладываешь блоки по колонкам.
Ширина блоков подстраивается под ширину колонок.
С уменьшением ширины экрана постепенно идет перестроение сетки в одну колонку.
На ютубе много практических видео по верстке

1) можно создать отдельный файл для сетки и прописать там. Если нет сетки то сделать его page__wrapper.
класс page повешать на боди
2) сделать их блоками по бем. Вообще это и есть блоки в твоем примере. Все что внутри лучше сделать элементами и выносить в блоки только если нужно переиспользовать еще где то.
3) все изменения блоков через модификатор. При этом блок ничего не знает о своем положении, оно задается через элемент родительского блока
4) для этого можно сделать файлик с базовыми стилями
5) все что относится к блоку в его файле

основы в htmlacademy
потом вот подробный план обучения
webmasters.teamdev.com

решает в итоге практика, бери psd и верстай, смотри как это делают в ютубе

наследование было в smacss
в беме от него ушли
почитайте про методологии
https://html5.by/blog/bem-amcss-oocss-atomiccss-op...
https://ru.bem.info/

https://codepen.io/SkiperX/pen/zYOzeLx

Адаптивная верстка это .container в бутстрапе, там в каждом брекпоинте своя фиксированная ширина.
А между брекпоинтами ничего не меняется, кроме отступов от края экрана до контейнера.
По сути 5 вариантов фиксированной верстки.

Еще там есть container-fluid с шириной 100% и падингами по краям. Вот он для резины, оно же отзывчивая верстка. Когда размеры элементов зависят от ширины экрана.

Css фреймворки нужны больше бекам, они помогают делать функционал, когда совсем нет верстки. Ну и от верстальщиков их требуют, чтобы понятнее верстка была.
С ними нужно познакомится чтобы понимать, как должна вести себя верстка и не верстать плакаты. Но под макет же подгонять фреймворк гемор еще тот. Так что использовать не всегда получится.

Набор базовых компонентов, которые повторяются из проекта в проект. вполне может заменить собой фреймворк.

А от сетки одни плюсы. Флекс, конечно, гибкий, но в нем очень много багов. Просто надоест их фиксить и начнете верстать по сетке. Это такой скелет верстки, который работает везде и не ломается.

У вас 400 и 600 font-weight подключены c google font, они будут работать. Остальные нужно указать в link-e

Нормально для первого раза

Absolute и relative старайся не использовать (для сдвига блоков), делай позиционирование через flex и отступы.

Не смотри на верстку как на плакат. Контент там еще изменится, блоки могут передвигаться. Верстка от этого ломаться не должна.