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

1) Если говорить об изображении, как обычно пишут верстку, если контент динамический, картинки в такие блоки вставляются любых размеров?

Для контентных:
Делают обертку, задают ей пропорции. Например, через aspect-ratio.
Картинке задают object-fit, object-position.
Если есть варианты для ретины и варианты в разных форматах (webp, avif), то используют теги picture и source.

Для фоновых:
background-size, background-position
Если картинки подготовлены, то супер. Если тяп-ляп, то и выйдет соответственно.

если блоки начинают адаптивно перескакивать, допустим flex: wrap или медиа запрос

С помощью transition.
Но сначала нужно ответить на вопрос: много вы видели пользователей, которые сидят и таскают браузер за край во время просмотра сайта?

Как сделать что бы border не растягивался на всю страницу а только шёл до последней буквы?

Можно удалить ненужный спан, оставить блочность параграфу и задать ширину fit-content.
Но держаться всё это будет только при наличии br

Фигма как включить какое-нибудь расширение если ты в чужом макете?

Сделать себе копию и включать что угодно

Как обрезать картинку с помощью css?

Либо фон

Почему не работает vertical-align: center?

Во-первых, у vertical-align в принципе нет значения center. Во-вторых, vertical-align делает не то, что вы хотите.

Замените на флексы.

А ещё, в идеале, замените span на псевдоэлемент, нечего ему делать в разметке.

Почему не работает градиент на body в псевдоэлементе?

Похоже на какую-то беду с округлениями.

Замените на что-то типа 90deg, red 0 1px, transparent 1px; и сделайте повторяющимся. Т.е. чтобы палка была по краю градиента без calc. Либо наоборот, справа, как удобнее.

При добавлении к иконки i элемента a (ссылка) все ломается?

pologenki, переделать разметку. Например, большую ссылку сделать только с заголовка. Растянуть её или псевдо от неё.

При добавлении к иконки i элемента a (ссылка) все ломается?

При добавлении к иконки i элемента a (ссылка) все ломается!!!

Ссылки нельзя вкладывать в ссылки.
Не забывайте проверять код валидатором и можно будет не ставить три восклицательных знака :)

Как сделать у значение по умолчанию для формы?

Так на сервере его и задайте. Если пусто, то ваше значение. Зачем это таскать в разметку?

Chrome DevTools: Как узнать путь до файла в котором прописаны стили?

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

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

Torcher,
прям так и применить
.wrapper:has(select:active)::before {transform}

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

:active
:has
transform

Как сверстать такую секцию?

Да хоть белый треугольник наложить. По крайней мере тремя разными способами.
Или использовать свойства типа clip-path

Как сделать что бы при уменьшении длины страницы длина блока уменьшалась?

Если длина это высота, то используйте vh.

Но, наверное, в этом блоке есть что-то еще и одним вопросом дело не ограничится.

Почему не работает hyphens?

Сергей delphinpro, не знала этого, тогда хорошо

Почему не работает hyphens?

Svojest, а если заменить на какое-нибудь более распространённое слово? Т.е. выяснить, есть ли слово в словаре или проблема со свойством.

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

Элементы должны менять цвет и прозрачность при наведении.

Все или по одному?
Если всё, то, например, на базе такого https://jsfiddle.net/Ankhena/kLr7onyb/

Пытался ..., но не получилось

Что именно не получилось?
И сделайте, пожалуйста, песочницу со всем этим добром.

Как поменять положение элементов при применении скрипта JS?

Дополню, что он не просто убирает display, а конкретно его дописывает через атрибут style. На тот, который был до none, т.е. в данном случае на inline.

Как воспринимается .toggle( display ) написано прям тут https://api.jquery.com/toggle/

За переключение классов очень много раз плюсую.

Как расположить элемент в grid контейнере?

nwtoneseo, так и пишите, что нужно с 3 по 5, а не с 2 по 4. Или просто span 2

Как расположить элемент в grid контейнере?

Покажите скрином что нужно. А из кода сделайте работающую песочницу на codepen.io