Как в 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, вряд ли это ответ на вопрос, почему не может...

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

Почему вы не можете br указать в тексте?

Градиент на css?

Оборачиваете img в figure.
Для figure задаете класс.
Для него псевдоэлемент, ему градиент.
Располагаете псевдо выше картинки грилами или абсолютами.

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

Margo0490,

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

А у вас они снаружи?
Прямо так и написать.
Теги для белых блоков внутри тега для темного...

Но судя по вопросу, вам разумнее пойти на фриланс.
Хотя там тоже придется как-то переформулировать задание, чтобы было понятно что у вас есть и что должны делать эти "белые блоки".

Как сделать чтобы высота меню разширялась когда происходит flex-wrap?

jarderRek, никак не задавать.
Задавайте высоту или отступы ссылкам.

Как сделать чтобы высота меню разширялась когда происходит flex-wrap?

выходи за высоту синей плашки. Как это исправить?

Нужно разобраться с собственной логикой.
Вы задали для синей полосы фикс высоту. Но хотите чтобы она растягивалась.
Придется определиться: либо одно либо другое.

Как вложить изображения в панель навигации?

Ссылка должна быть внутри li, а не наоборот.

Как мне добавить эти изображения к данным ссылкам?

Псевдоэлементами. Это ведь украшения ссылок, а не контентные изображения.

Как комбинировать transition из разных классов?

Писать в один класс, а свойства через запятую.

Как запрограммировать такую полоску?

Вова, таки заголовок это блок, т.е. микс ;)

Как запрограммировать такую полоску?

Только block тут вообще лишний.
Если только не нужен контейнер для контентной части.

Почему width:100% ведет себя по разному в зависимости от flex-direction?

Так обведите блоки рамочками и всё прояснится.