Можно ли в фигме скрыть эффект в read-only mode?

Сергей Бурдужа, угу. Тут либо так либо так.
Как не печально, редкий проект обходится без клонирования.

Как сделать автоподгон картинки под разные разрешения?

https://developer.mozilla.org/ru/docs/Web/CSS/obje...

Как написать JS код чтобы управлять активностью ссылок?

У всех убираете, кликнутой добавляете. Всё.

Как выровнять картинку на всю ширину и высоту ее контейнера, при этом чтобы ширина и высота контейнера не изменилась?

object-fit

Как вынести блоки сбоку как на макете?

Alisa, в песочнице из вопроса у body нет флекса.
Либо можно поместить блоки в контейнер и задать флекс ему.
Контейнер также будет служить ограничителем ширины особенно на больших экранах

Флекс родитель со скролом, не закрашиваются все элементы?

MegaPuxapb, кто сказал, что нужно на флексах и почему?
Почему не гриды? Или display table?

Вы там всё равно не используете возможности флексов, строго закрепляя ширину дочерних, чтобы получить ровные столбцы.

Как сделать отображение "Карточек" 2x2?

Как сделать отображение «Карточек» 2x2?

Судя по тому, что в песочнице сейчас, с этой задачей вы уже справились.

Осталось разместить кругляшки и текст.
Это делается теми же гридами или флексами.

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

Вам нужно заменить в какой-то из частей id на data- атрибут. Потому что id не могут повторяться в рамках одной страницы.

<div class="outer__wrapper">
        <div class="outer__element" data-target="element-0">Outer Test0</div>
        <div class="outer__element" data-target="element-1">Outer Test1</div>
        <div class="outer__element" data-target="element-2">Outer Test2</div>
        <div class="inner__wrapper">
            <div class="inner__element" id="element-0">Outer Test0</div>
            <div class="inner__element" id="element-1">Outer Test1</div>
            <div class="inner__element" id="element-2">Outer Test2</div>
        </div>
</div>

И дальше в стилях указываете через запятую селекторы для каждой пары.

[data-target="element-0"]:hover ~ .inner__wrapper #element-0

На сколько могут быть длинными модификаторы в БЭМ?

Прочитайте про миксы в БЭМ. Раз вы пытаетесь в таком стиле называть классы.

Либо упрощать названия profle__page-contacts-phone -> profle__phone

Как весь текст кроме кнопки сместить под фотографию? Чтобы он не находился в рандомном порядке?

1Aspect1, чтобы мы могли вам как-то помочь, нужно:
1. Сделать песочницу на codepen.io с тем, что у вас есть сейчас и так, чтобы была видна проблема.
Вместо картинок можно использовать заглушки https://picsum.photos/
2. Прикрепить скрин того, как должно быть.

Как в Figma сделать перенос элементов, если не хватает ширины контейнера в auto layout?

Есть плагин https://www.figma.com/community/plugin/10544447779...

Почему прописывают брейкпоинты контейнеру?

Большинству людей проще написать это один раз контейнеру, чем 100 раз каждой секции.

А даже если по отдельности в готовом CSS, то всё равно один раз с помощью миксина в исходниках.

Но ситуации бывают разные.

Как вынести блоки сбоку как на макете?

К сведению: jsfiddle не работает на территории России, соответственно, желающих смотреть ваш код через VPN может оказаться не так и много. Так что сейчас разумнее codepen.io

По теме:
Я так понимаю, что есть main и aside и вы хотите поставить их рядом.
Так и где флекс или грид у их родителя?

Какие есть актуальные качественные материалы по верстке на чистом html,css,js в 2022?

сами знаете, как некоторые могут делать в нарушение семантики итд), какой из них лучший?

Поэтому имеет смысл перепроверять полученные данные, откуда бы они не пришли ;)
Чем раньше вы самостоятельно научитесь отличать качественные материалы от некачественных, тем раньше начнете писать качественный код (простите за тавтологию).

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

Почему не подключается шрифт из @fontface?

Почему не подключается шрифт из @fontface?

1. Неверные пути
2. Подключили файлы только для жирного шрифта, а пишете обычным.
3. Битый шрифт
4. Например, в шрифте нет кириллицы, а хотите писать кириллицей.

p.s. Вообще, современным браузерам достаточно woff2. Если нужно поддерживать предыдущее поколение, то ещё + woff, а не вот эта вся помойка.

Где можно скачать курсы по верстке?

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

Как научиться верстать без проблем?

Почему обрезается фоновая картинка?

Вам нужен не cover, потому что cover как раз таки обрезает то, что не влезло.
https://developer.mozilla.org/ru/docs/Web/CSS/back...

Как грамотно сверстать адаптивную сетку этого блока?

Что мы видим в макете:
нумерованный список с текстом.
У каждого элемента кроме последнего по три украшения.
Стрелки можно убрать в фон (или всего списка или элемента).
Останется два псевдоэлемента: один используем под счетчик через counter-reset, couter-increment, другой для svg'шки.
И дальше через nth-child располагаете текст и псевдо в каждой li.

Как сверстать что бы одна часть текста была с левой стороны, а другая по центру?

Удобнее всего гридами
https://qna.habr.com/q/1088262

Перенос строки с помощью css?

SuperToster, вряд ли это ответ на вопрос, почему не может...