Как импортировать переменные sass во вложенных папках?

https://www.sitepoint.com/simple-gulpy-workflow-sass/

Как реализовать вертикальные линии между блоками при адаптивной вёрстке?

Если не подходит (неизвестен) nth-child, то просто задвинуть за край родителя.

Почему не работает псевдокласс not?

Простой Человек, в общем, это ответ на ваш вопрос

Почему не работает псевдокласс not?

Простой Человек, в каком смысле скоро? Этому поведению 100 тысяч лет.
Наоборот, появляются всё новые и новые возможности.
Более простые эффекты из перечисленных будут работать.

Почему не работает псевдокласс not?

Простой Человек, по меньшей мере hover не там

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

Ниспадающие меню соответственно не должны быть шире черного прямоугольника.

Вычисляйте на JS.
Задавайте для выпадашки макс ширину.
Удобно через кастомные свойства.

Как оценивать сроки по задачам?

Сколько раз вы уже пользовались таймтрекерами?
Какую статистику накопили по похожим задачам?

Как сделать горизонтальный скролл блока с несколькими колонками?

Вопрос на засыпку: откуда возьмется скролл, если контент помещается в блок?

Ширину вы ограничили (Правда, с виду странно ограничивать её 1176 при ширине вьюпорта 768. И логично, что при этос будет скролл у body).
А высоту не ограничили.
Значит, блок просто будет расти вниз, никакой контент из него не вываливается и, логично, скролл не нужен.

Можно ли накладывать/объединять блоки с наружным изображением?

blackSnail,

и сильно с @mdeia не возиться когда это

я не вижу изменений в media кроме bg size.
Проблемы могут начаться только при переполнении.

Альтернатива: задавать точки как фон нижнего блока.
Маленькие блоки делать прозрачными.
Остальное закрашивать бордерами, тенями, псевдиками для маленьких блоков.
Проблема переполнения будет решена для +/- пары строк. Иначе положение иконок на траектории всё равно съедет.
Либо JS.

Можно ли накладывать/объединять блоки с наружным изображением?

blackSnail, в 4 не ясно зачем.
Я бы спросила дизайнера, как он себе представляет переполнение этих блоков.

Можно ли накладывать/объединять блоки с наружным изображением?

Сергей delphinpro

точки - это скорее направляющие

это первое о чем подумала, в частности их цвет на это намекает. Но тогда траектория расположения иконок вообще ничем не оправдана. С другой стороны, мы не видим весь макет, черт знает, что в голове у дизайнеров.
А с третьей стороны, тогда вообще не понятно в чем сложности верстки :)
Поэтому решила прокомментировать верстку точек.

Можно ли накладывать/объединять блоки с наружным изображением?

Иконки отдельно, точки отдельно. Точки позиционировать с помощью bg position. Раз блок по своей сути не подразумевает переполнения.
Вообще, точки очень странно выглядят.

p.s. и не нужно спамить тегами.

Современный учебник HTML/CSS?

Бесплатные курсы мало чем будут отличаться от тех видосиков. Собственно, это они и есть.

Максимально приближенное к вашим потребностям это тренажеры и навыки в HTML Academy, правда бесплатных немного, но и стоят не космос.

Справочники: doka.guide и MDN.

Остальное собирать по кусочкам из разных источников.

Современный учебник HTML/CSS?

htmlbook устарел уже много-много лет назад.
Даже его создатель уже сделал его новую версию webref, но и она уже тоже успела устареть. Что-то обновляется, но и заметно многого не хватает.

Из актуальных справочников я бы предложила Доку и MDN.

Как наложить текст на изображение в Figma?

А не, это же про Фигму, а не про верстку.
Видела, что дизайнеры по простому прикладывают в нужные места уголки svg.
Либо можно попробовать баловаться с объединением фигур и скруглением.

И, поскольку это макет сайта, то верстальщику будет удобнее работать, если вы воспользуетесь первым вариантом с уголками.

Как добраться до placeholder и выровнять по вертикали при наличии #shadow-root (user-agent)?

I_want_to_know, поскольку никаких стилей dropdown вы нам не показывали, то сложно сказать насколько это уместно. Звучит странно.

Вообще, очень редко есть необходимость менять font-size для плейсхолдера. Обычно, он такой же как у инпута.

Как добраться до placeholder и выровнять по вертикали при наличии #shadow-root (user-agent)?

line-height: 1; уберите. Не знаю из какого браузера скрин, но не не все браузеры его воспринимают единицей для инпутов. Не помню сейчас минимальны значения.

Но ни это

при наличии #shadow-root (user-agent)

ни это

Получается, gulp где-то шалит?

не имеют отношения к проблеме.

После экспорта в Photoshop пропал именно градиент. Как можно исправить?

А в jpg? Да и зачем тут png?
А если предварительно слить все слои в один?
А если не экспортом?

В люстре все видно четко. Все градиенты присутствуют

И я не поняла на каком там этапе люстра.

Grid или Flex -сетка с разными условными margin-top и margin-bottom для колонок?

Есть следующий макет, существует ли способ создать общий грид или флекс

Флексами со сдвигом (марджин или трансформ)
Гридами и span 2 и просто пропустить первую ячейку.

Оцените код html и css. Можно ли так делать?

Оцените код html и css.

Любое число меньше нуля.

Можно ли так делать?

Можно, если никому не показывать.
Вообще, нет, нельзя.
В этом коде нарушены правила вложенности тегов (валидность) и семантика.

Не видел, чтобы так кто-то делал, но как по мне интересная штука.

Хорошо, что не видели. Разумные люди такое никому не показывают.

И вроде бы так гораздо быстрее получается писать код с минимальным использованием css.

Это очень странное заявление.
Быстрее писать стили можно используя широкий монитор (или два) и emmet.

Если писать нормально, то ваш код можно существенно сократить.
И заметно уменьшить количество ошибок.