Как правильно сверстать блок?

Что конкретно у Вас не получается? Где Ваш код, с которым нужно помочь?

Как сделать так что перекрестье следовало за стрелочкой мыши при этом когда нажимаешь лкм нажимало там где находится перекрестье а не курсор.html, js?

перекрестье следовало за курсором

при нажатие лкм нажимало там где находится перекрестье а не курсор

Так если одно следует за другим, то какая разница, если курсор и перекрестие в одном месте?

Что почитать про практическое использование на JS?

На ютубе есть много видосов из серии "делаем клон youtube\ozon\amazon" и тд. А так же "делаем проект на HTML CSS JS за 3 дня" и тд и тп. Там и попрактикуетесь и про свободные mock api узнаете.
Ну и когда Вам известно чего Вы хотите, например:

написать плагин сбора любой информации со страницы

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

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

Что-то мне это напоминает...

Как реализовать анимацию падения элементов и дальнейшее их перемещение с помощью курсора?

Чем matter.js не подошёл?

Как я должен манипулировать svg, чтобы..?

Ваш код смотреть времени нет, но есть кое что по лучше)
https://habr.com/ru/articles/349362/

Как сверстать позицию блоков?

У вас на скриншоте:
header(c position: sticky или fixed) + так называемая hero section(так называют первые секции на весь экран, с, как правило, полностью заполняющей фоновой картинкой).
У этой hero секции есть фоновая картинка с диваном и контент, расположенный судя по всему вертикально по центру и горизонтально по правому краю.
А так же есть дополнительный элемент, назовём его "преимущество" - "Собственное производство", который, я считаю, контентно важен, поэтому это не псевдоэлемент. А просто элемент с абсолютным позиционированием

Как сделать вырез в блоке такой же как в макете?

Gracie ST, если считаете ответ решением - стоит его таковым отметить. Это приятно отвечающему и экономит время всем остальным.

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

в первом своём вопросе Вы дали код. В этом чего постеснялись? Как Вы ответить предлагаете? Ссылками на документацию где будет описаны все возможные методы сделать два элемента на одном уровне? Или по хрустальному шару погадать? Или предпочитаете кофейную гущу?

Как перебрать селекторы через for?

Максим К, вот тут Вам очень дельно предлагают. Не нужно в цикле на каждой итерации делать поиск по DOM. Это одна из дорогих операций. Да, Вы может этого не замечаете, потому что Всё отрабатывает быстро, но тем не менее, если заранее знать что делаете плохо - лучше плохо не делать.

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

А ещё, судя по коду, Вы находите в теле документа первые 10 форм. Что, в целом, выглядит очень странно. Что же это за страница такая, на которой 10 форм? И почему Важны только первые 10? Если в 11ой будут такие дочерние элементы - то она не подойдёт? Просто, формы можно не искать, они доступны в document.forms.

Далее. Вы находите первые чекбоксы, которые лежат на конкретном уровне вложенности. Так может им просто задать отдельный класс и искать сразу их?

Есть ли такой проект по Вёрстке который ответит на Любой вопрос?

ali5, https://web.dev/patterns/

Есть ли такой проект по Вёрстке который ответит на Любой вопрос?

ali5, в программировании точно так же одно и то же можно сделать по разному. Часто можно выбирать похожие между похожих паттернов - какой больше подойдёт. А можно вообще никакой не выбирать, а нафигачить лишь бы работало как можно быстрее. Потому что проект этого требует и для для него это подходящее решение.

Но паттерны тоже есть. Есть паттерны вёрстки (Layout patterns) есть паттерны реализации тех или иных вещей\компонентов и так далее. Паттерны оптимизации. Но это мы про них знаем. А дизайнеры - люди еще более творческие. Им не до паттернов. Поэтому фронтенд разработка это вечная война. С дизайнером, с бэкендером и UI\UX.

Есть ли такой проект по Вёрстке который ответит на Любой вопрос?

Да я Вам даже перечислять устану всё что и как можно делать)
А ещё, часто не существует единственно правильного решения. Одно и то же можно сверстать сильно по разному. Вы же не будете каждый блок верстать всеми вариантами, что придут в голову?
Изучайте возможности и применяйте их по необходимости.
Не нужно делать одну большую свалку.
Во-первых, Вы сами в ней утоните.
Во-вторых, скорее всего это будет низкокачественный проект.
В-третьих "и приминить этот шаблон" - это будет работать только если Вы будете делать шаблонные проекты. Очень похожие между собой. В остальных случаях - просто скопировать вёрстку из одного проекта в другой без правок - будет сложноприменимо. Только если это какие-то прям атомарные частички. А если у проекта есть свой дизайнер, то всё усугубляется. Они часто пытаются как-то выпендриться. А если дизайнер пришёл в веб из мира иллюстраций то это вообще отдельная история. Можете какой-то системности не ждать от слова совсем.

Есть ли такой проект по Вёрстке который ответит на Любой вопрос?

Ankhena, так человек хочет всё и сразу так ещё и по видео) Чтоб один раз по видео сделать, а потом копипастить)
интересно сколько часов видео о создании такого проекта бы шло)

Стоит ли использовать технику встраивания критически важных стилей для ускорения загрузки страницы сайта?

В своих рассуждениях Вы допустили ряд не всегда реалистичных предположений, повлиявших на Ваши выводы.
Итак:

1. 
   

   время на загрузку 100 кб 100 мс.

   - Это если интернет хороший. А хороший интернет далеко не везде. И, будто бы, чем дальше на запад - тем он хуже\дороже. Я про мобильный интернет. Для хорошего безлимитного интернета эта оптимизация практически бессмысленна (ну разве что пэйдж спид ублажить).
   
   
2. 
   Эту технику, как правило, используют для оптимизации критически важных страниц. Как правило, главной страницы\каталога. А не для всех страниц, которые могут строиться на 10ти разных шаблонах.
   
   
3. 
   Суть оптимизации в том, чтобы уместить в первый TCP пакет как можно больше полезной для рендеринга информации. Я уже не помню сколько там точно и лень идти гуглить(всё же загуглил), но там что-то около 14кб (https://habr.com/ru/articles/684836/). Поэтому если Вы пихаете критического CSS на 100кб - то это уже совсем не так полезно. А даже скорее действительно вредно.
   
   

Accordion, открывается только первый элемент, как фикс?

Изучить базу.
Ну хотя бы почитать про методы, которые в коде используются..

https://learn.javascript.ru/searching-elements-dom...

Как решить - заменить поиск не одного элемента, а всех, удовлетворяющих селектору.

Как сделать такую анимацию SVG из фигмы?

Альберт Макс, Тогда в чём вопрос - не понятно.
Умеете в код - используйте что душе угодно, чтобы реализовать эту анимацию. Как делать свг анимации полно в интернете информации. Хоть keyframes.

Не умеете в код - идите в условный svgator и там мышкой всё наклацаете.

Почему анимация неверно проигрывается?

Так а почему ей возвращаться снизу, если у Вас только 2 состояния описано.
1) Подняться наверх (y: -100)
2) Вернуться в начальное (y: 0)

И ни строчки про то чтобы оказаться снизу.

Как сделать такую анимацию SVG из фигмы?

Ankhena, Да, тоже обратил внимание, но списал это на "подачу" идеи.
Альберт Макс Возможно, там не по ховеру, а по фокусу на кнопку.

Но это ничего не меняет в алгоритме из первого комментария.

Как сделать такую анимацию SVG из фигмы?

Альберт Макс, что такое svg курсор? Гифка это же то, как это должно выглядеть, так? То есть это схематично форма, на которой кнопка, так? При наведении на кнопку кнопка закрашивается а у формы добавляется тень. Или не так?

Как сделать такую анимацию SVG из фигмы?

Для начала разбить на шаги и определить их более конкретно.
1) Не в "определённый момент" а по наведению на кнопку, так? За реакцию наведения отвечают стили с псевдоклассом :hover
2) Дочерний элемент не может влиять на родительский. Поэтому задать тень родителю(форме) при наведении на ребёнка нельзя. Но в современном CSS можно указать родителю, что если он имеет ребёнка с ховером, то добавить ему правила отображения. Делается это через псевдокласc :has, но тут нужно обратить внимание на браузерную поддержку.

Альтернативный вариант - если у формы будет posiiton: relative, а у кнопки будет абсолютно спозиционированный псевдоэлемент размером на всю форму и при наведении на кнопку псевдоэлемент будет отрисовывать тень.