Как создать круглый прогресс бар с кругляшком на конце?

Нарисовать кружок circle. Если всё в svg. Вращать с помощью @keyframes и transform-origin

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

Genri_Rus, нет, такого я не предлагаю

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

Genri_Rus,

Просто на многих сайтах используют фильтрацию внутри aside.

Спека разрешает. Даже для nav.
Нравится - оставьте.

А есть статья на эту тему?

Полно. Гуглите.

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

Genri_Rus, осталось вытащить из aside

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

Genri_Rus, правильнее использовать теги по назначению.
Я немножко устала писать одно и тоже. Уже всё расписала, теги назвала.
Но если вам так неудобно, то пишите дивами и плевать там на всех.

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

Иван Шевченко, сегодня словила почти аналогичный глюк в девтулзах.
Во-первых, при выделении нужного блока показывает не тот селектор, во-вторых, указывает, что стили написаны в style. А это вовсе не так.

Как скрывают файл со стилями css?

Артем, слушайте, сегодня словила почти аналогичный глюк в девтулзах

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

Genri_Rus, нет

Как отключить создание папки ".vscode"?

Если не хочешь, чтобы она попадала в репозиторий - добавь её в gitignore.

Можно даже в глобальный

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

Genri_Rus,

А вот с фильтрами как быть?

Ну так и быть
Фильтр - filters или form form--filters
Филдсет - form__group, form__fieldset, form__item.
legend - __title, __legend
список параметров внутри филдсета - __list
один параметр __characteristic, __parameter
инпут - __input, __field
label - __label

Короче, словарь в руки и вперед.

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

Genri_Rus,

при наведении на картинку должны появиться иконки как на фрипике.

На фрипике это кнопки, а не иконки.

Ну пусть так

<ul class="gallery">
  <li class="gallery__item picture">
    <a class="picture__link">
      <img class="picture__img" src="" alt="">
    </a>
    <div class="picture__more-info">
      <h2 class="picture__title">Название фото</h2>
      <p class="picture__description">Текст</p>
      <ul class="picture__action-list">
        <li>
          <button class="picture__action">
            <span class="visually-hidden">В избранное</span>
          </button>
        </li>
        <li>
          <button class="picture__action">
            <span class="visually-hidden">Сохранить</span>
          </button>
        </li>
      </ul>
    </div>    
  </li>
</ul>

Можно раздробить еще на блоки. Или наоборот, не выделять picture в блок.

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

Genri_Rus, еще раз: я без понятия кто такие у вас gallery__thumbnail-icon. Почему у картинки две иконки? Почему иконки это дивы? Почему они называются превьюшками?
На фрипике это кнопки. Ну а кнопки это теги button.
Если это какие-то метки для пользователя, то должен быть текст. Сами иконки фоном или псевдиками.
Если это кнопки, то текст тоже должен быть. Хотя бы в aria-label.

Где конец у ссылки неизвестно.

Зачем заголовку обертка? Заголовки это теги h1-h6. Если это подпись к картинке, то это figcaption.
Опять же gallery__thumbnail-name как-то связан с теми двумя иконками? Иконки две, но заголовок у них один?

Про список уже сказала.

Про то что фильтр не aside тоже сказала. Тут фильтр скорее выступает в роли навигации и, вероятно, формирует урл (так обычно бывает). Поэтому нельзя сказать, что он не имеет отношения к происходящему.

Выше я написала тактику: называйте вещи своими именами.

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

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

Genri_Rus,

Можно же wrapper перед сайдбаром и main добавлять?

Можно же div перед aside и main добавлять?
Правила вложенности тегов регламентируются спекой.
div используется там, где нет подходящих по смыслу тегов. Я выше дала ссылку на спеку, где это написано.

Как правильно добавить в данном примере сайдбар и 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.

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