Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

Про БЭМ вам там в ответах уже понаписали разного хорошего.
Но у меня вопрос: номер телефона и иконка это точно поиск?

Как прекрипить футер к самому нижу?

Zumich, в современном мире, футер прибивают к низу страницы флексами или гридами. Способы многократно описаны и легко гуглятся по запросу "липкий футер", "sticky footer".
Вариант с флексами более предпочтителен при разной структуре страниц. Например, если не все страницы четко состоят из header, main, footer. Тогда проще задать flex-grow для main, чем думать для которой строки на какой странице задать 1fr в гриде.

На вашей странице футер уже встанет на приличное место, если прекратить задавать ему свойства, смысл которых вы не понимаете. А именно про relative и координаты.

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

Зачем вы пишете три раза одинаковые свойства для трех соц.сетей. А если их будет 10? Так и будете долбить? Может всё таки им один общий класс задать?

Как прекрипить футер к самому нижу?

aspirantes, ну да, когда не было гридов и флексов, приходилось извращаться и так, как вы пишете. Но сейчас-то зачем такое советовать?

Какой .gitignore юзать и почему он всё ещё видит папку .idea?

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

https://git-scm.com/book/ru/v2/%D0%9D%D0%B0%D1%81%...

https://qna.habr.com/q/1102296 (ответ Сергея)

Почему не применяются стили для псевдоэлемента?

Не вижу, чтобы там что-то не применялось.

Как выравнять 2 блока по центру?

Ася, да, флекс применяется к родителю.
И, если что, jsfiddle не работает в России, пользуйтесь, пожалуйста, codepen.io

Font-dislay: swap. Как избежать смещение макета?

alexsun7, кстати, зачем вам старый ttf?
Современным браузерам нужен woff2. На всякий случай, для предыдущих поколений можно подгружать и просто woff.

Как выравнять 2 блока по центру?

display:flex;
justify-content: center

Либо нужно поставить саму форму по центру. Хоть флексом родителя хоть обычными margin auto.

Но пока сложно точно сказать, потому что не ясно что именно у вас не получилось и где код и песочница на codepen.io

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

Обычные фоновые картинки.

Тексты на последнем скрине абсолютами или гридами.

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

Абсолюты позиционируются относительно ближайшего предка с position, отличным от static (чаще это relative).
По идее, этого знания должно хватить.

Как правильно сверстать информацию о пользователе в шапке сайта?

Muranx, если без картинки теряется смысл происходящего, то картинка делается контентной.

а это вы имели ввиду что пустому диву нельзя давать .div{ background: url("url.png"); такое свойство, т.е. нужно создавать псевдоэлемент для див блока, и уже ему давать свойство в виде урла картинки? Так?

Я имела в виду, что если можно обойтись без лишних тегов, то это прекрасно. Пустой div для того, чтобы вставить фоновую иконку не нужен. Он легко заменяется на псевдо от blockLink.

Как правильно сверстать информацию о пользователе в шапке сайта?

imko,

Ставить в одну ячейку то что я хочу наложить?

Да

Какие плюшки?

Нет абсолюта, нет нового слоя, всё в потоке

Как правильно сверстать информацию о пользователе в шапке сайта?

Muranx, img это контентные изображения, без которых потеряется часть смысла.
Убираем стили, смотрим, что осталось. Без картинок не понятно => контентные. Всё ок => украшения (псевдоэлемент, а не пустой div).
Откуда и как при этом пользователи что-то грузят без разницы. Если не умеете пользоваться кастомными свойствами css, то ок, путь img и aria-hidden к ним.

userInfo - от этой обертки можно избавиться, заменив флекс на грид.

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

Просто фон для обертки картинки.
Ну или псевдо (только гридами, а не абсолютом, по возможности)

Как реализовать фильтр на js c чекбоксами?

idiumriobstenu, вы как-нибудь разметку к валидной приведите.
Какие ещё div вокруг tr? Где сам table? Ну и всё такое.
Атрибут внутри tr это вообще нечто.

В js лучше манипулировать классами, чем напрямую свойствами css, особенно если это касается display.

Как реализовать фильтр на js c чекбоксами?

Собственно это и без js решается, если нужно просто скрыть лишние.
Ставите инпут перед списком.
Сообщениям задаете data-атрибуты
Селектором по соседям скрываете или не скрываете лишние.

Font-dislay: swap. Как избежать смещение макета?

alexsun7, попробуйте, возможно, это поможет загрузить и отрисовать шрифт быстрее.

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

Псевдик для кнопки, шириной 100vw. Прибить налево к правому краю кнопки.
Направо сделать от него тень.
Вываливание по ширине налево не дает прокрутки. Тень тоже не дает прокрутки.
Не нужно будет делать уродский overflow.

Либо задать border для секции, если она на всю ширину окна.

Font-dislay: swap. Как избежать смещение макета?

Вы используете preload для шрифтов?

Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

Антон Горецкий, да, псевдо ужатый в ноль будет по центру. Но при ховере нет. У меня в ответе подробно написано, почему.

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

Levott, и почему же вы тогда не отметили ответ решением? Ну и там лайк всякий? )))