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

Ближайшие аналоги
https://jsfiddle.net/Ankhena/kLr7onyb/
https://jsfiddle.net/Ankhena/1hu9ot0q/1/

Можно использовать SVG для скругления верхней части основного блока.

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

Почему header может перестать сжиматься?

Почему header может перестать сжиматься?

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

Так что, проверяйте что внутри и его размеры.

Альтернатива - дело вообще не в нем.
Либо удаляйте блоки по одному либо цветные outline вам в помощь.
Не забудьте обводить и псевдоэлементы.

Почему не работает input type="radio"?

Иван Кулаков, кажется вы не поняли, что происходит в вопросе.

В вашем коде вообще нет скрытых через display: none инпутов.

Яндекс не индексирует главную страницу. Почему так и как решить проблему?

Polinaiva01,

галочки нет, страница так не отображается

В смысле вы ждете, что убрали запреты и страница тут же появится в поиске?
Если через месяц не появится, будет повод беспокоиться.

Почему не работает input type="radio"?

Иван Кулаков, форма никак не поможет кликабельности скрытых инпутов..

Почему не работает input type="radio"?

В современном мире уже не нужен этот дикий способ и пустым спаном или псевдо от лейбла.

Можно задать радио и чекбоксам appearance: none и стилизовать их напрямую.
Очень удобно. Даже псевдоэлементы появляются.

В любом случае, нельзя скрывать инпуты через display: none. Гуглите доступное скрытие или visually-hidden.
А также нужны лейблы с вменяемым текстом.

Как реализовать перемещение метки по клику?

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

Как реализовать перемещение метки по клику?

Можно повесить какие-нибудь метки на слайды: классы, data-, nth-child и потом на чистом css через :has.
Или считать клики по стрелкам.

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

И transition.

Вроде всё.

Есть ли смысл учить абсолютно все элементы HTML?

Учить, просто сидеть и учить вообще нет смысла.
Разумнее делать, запомнится оно само.

Есть ли смысл учить абсолютно все элементы HTML?

Нужно знать, где взять информацию.

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

Как вы бы реализовали этот блок на html/css?

Кирилл, всё верно

Как вы бы реализовали этот блок на html/css?

Даем каждому элементу position: absolute

А потом слетает шрифт или меняется текст или просто засунули сайт в автопереводчик...
Но это потом и у посетителя, а не у верстальщика.

Получил заказ на первый сайт от знакомых, выбираю бэкенд систему - cms либо python, что в связи с этим посоветуете?

На чем можете на том и делайте.
Раз знакомые позволили на себе тестировать ваши выдумки, то и пользуйтесь.
По дороге поймете плюсы и минусы выбранного подхода. И найдете новый вариант и так по кругу. Либо окажется, что и первый подходит.

Альтернатива: загуглить. Благо вы не первый, кто решил делать сайт.

Получил заказ на первый сайт от знакомых, выбираю бэкенд систему - cms либо python, что в связи с этим посоветуете?

На каких технологиях писать многостраничный сайт-визитку?

Как вы бы реализовали этот блок на html/css?

гриды
drop-shadow
радиальные градиенты или svg для уголков

На каких технологиях писать многостраничный сайт-визитку?

Так же необходимо учитывать что возможно понадобится администрирование сайта (добавление удаление новостей...).

Зависит от того, кто будет их менять и их навыков.

Можно статикой и любая сборка, чтобы шаблонные вещи не повторять.
Можно приделать Textolite
Можно чуть продвинутей взять генератор статики Eleventy.
Причем, 11ty поддерживает маркдаун вместо html. Это может быть легче и привычнее для людей не знакомых с версткой.
Либо всё таки CMS. Видимо, WP.

Как выровнять шрифт?

Am-glitch, загуглите Минускульные и маюскульные цифры

Как научиться удерживать код в голове?

Немножко разные вопросы в заголовке и в тексте.

Из заголовка:
Что именно вы хотите удерживать в голове? Цвета? Размеры? С какой целью это (или что-то другое) нужно в голове?

Из текста:

а построить именно всю цепочку не хватает мощьности мозгов

Тут тоже не всё ясно, какие цепочки в голове у верстальщика? Цепочки чего и зачем?

Если речь уже про js или типа того, то рецепта глобально два (ну кроме обычной тренировки памяти)
- не держите в голове, пишите/рисуйте на бумажке или в подходящем файлике
- разбивайте задачи на мелкие

Как-то закрывается тег в html! Что делать?

DIVSIDE,
Да, если мы не в полной мере контролируем разметку и опасаемся того, что внутрь закрадется div или заголовки или что-то типа того. Тогда, действительно, лучше не надо.
Оборачиваем в div (или что-то другое более подходящее по смыслу, если имеется).

Почему можно

Часто параграф воспринимается в бытовом смысле, как логическая конструкция. Но в HTML он имеет расширенную область применения и как структурный элемент, служащий для объединения фразового контента.
img + span вполне подходят для этого назначения.

Но автору вообще не нужен там img :)
Если судить по названию в урле.
Убрать его в стили и оставить спокойно только p.
Но там много чего ещё можно сделать с разметкой, если беспокоиться о семантике (Не похоже, что это кому-то нужно, но вопросы и ответы читают не только их авторы).

Как-то закрывается тег в html! Что делать?

В исходном коде меняем h5 на span и всё.

Либо

<h4>
  <img>
  <span></span>
</h4>

И именно h4, а не h5. Потому что предыдущий был h3

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

Ещё вряд ли монетка нужна как img. Скорее всего спокойно можно убрать в стили.
И останется просто

<p id="test-answer-price">
    15
  </p>