Как правильно добавить в данном примере сайдбар и main по бэм?

Genri_Rus, по вашему скрину мало что можно сказать.
Но начните подбирать теги по смыслу. Можно называть вслух. Например: это список фото. Используем ul.
Обертка фотки или картинка + её описание? В первом случае берем div, во втором figure и figcaption

https://doka.guide/html/

В своё время, я просто примерно раз в месяц перечитывала справочник тегов и свойств. Помню - не помню. И помню ли разные нюансы.

Как правильно добавить в данном примере сайдбар и main по бэм?

Genri_Rus, спека

Как правильно добавить в данном примере сайдбар и main по бэм?

Genri_Rus,

В целом правильно у меня сделано?)

Заморачиваться с БЭМ, но забить на семантику? Сложно оценивать это с точки зрения правильности.

Зачем нужен БЭМ или любая другая методология? Чтобы было быстро понятно и удобно.

Как правильно добавить в данном примере сайдбар и main по бэм?

Как правильно по бэм назвать сайдбар и main?

Так и назвать: sidebar или aside и main или main-block

// класс filter или filters?

По-русски это фильтр или фильтры? А по-английски?

Кстати, фильтр, это не очень aside.

Почему иногда в Просмотреть код, нет возможности редактировать?И сами параметры эти в браузере под наклоном?

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

Как сделать колесо для текста css?

https://sitist.ru/curved-text.html

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

А что с ним не так?
Слева текст, справа фон или псевдоэлемент. Ну или img с aria-hidden.

Что именно у вас не получилось?

Как поместить пагинацию внутрь слайда, swiper js?

Ага, а потом во второй и тд. Но пагинация при этом одна.

Как поместить пагинацию внутрь слайда, swiper js?

imko, ну, этой задачке 100 лет уже и решение тоже давно есть.

Как поместить пагинацию внутрь слайда, swiper js?

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

Как поместить пагинацию внутрь слайда, swiper js?

starkingdom, я бы и не стала так делать :)

Как поместить пагинацию внутрь слайда, swiper js?

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

Если все таки прыгать, то а js определяйте положение и меняйте (через кастомное свойство css поудобнее)

Как поместить пагинацию внутрь слайда, swiper js?

starkingdom, вы же понимаете, что пагинация не может быть частью слайда? Или нет?
И вы уверены, что это нормально, что она будет прыгать по высоте от слайда к слайду?

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

У background-attachment: fixed; есть проблемы.
Можно заменить на псевдо соответствующего размера.

В firefox не работает transition opacity?

Я бы перенесла background-image в основной селектор.
И заменила бы all на opacity. Зачем там all, если анимируется только одно конкретное свойство?

Как скруглить низ изображения?

leeroyjenkins176, при ширине блока 118 достаточно 59. Ширина фото не имеет значения.
Либо любого другого размера больше.
Универсальный вариант я написала выше.

Как скруглить низ изображения?

leeroyjenkins176, круг можно рисовать чем угодно, градиентом или псевдо. И прибить к низу.
+ border-radius у обертки как в примере.
Или можно универсально заменить на 0 0 100vmax 100vmax

Что именно у вас не работает?
Сделайте пример на codepen.io

Как сделать анимацию фона в css?

Не понятно, какая анимация. Но в общем виде, например, так: берете svg, располагаете где нужно, при клике (или загрузке) сдвигаете куда нужно.

Как сделать анимацию фона в css?

newfolder_js,

если картинки не видно

А вам что, их видно?

Как рассчитать значения на которые произошел scale?

EryTi,

То есть, если блок шириной например 500px, на мобильном устройстве текст перенесется на новую строку, если использовать адаптивную верстку, с изменением разме а нужно чтобы все элементы располагались в том же виде, что и на десктопе.

Если блоку задать размер 500px и запретить всякие flex-shrink и т.д., то он так и останется шириной 500px.

Также есть мета тег vieport и фиксированная ширина в нем вместо device-width
Либо использование единиц vw (vh, vmin, vmax) как раз для масштабирования. И функции min, max и clamp, чтобы совсем не увлечься.

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