Как доработать кружок?

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

Как доработать кружок?

1. Взять SVG
2. css.yoksel.ru/radial-gradients
css.yoksel.ru/linear-gradients
3. https://doka.guide/css/box-shadow/

По дороге подумать, зачем для центрирования абсолют.

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

https://habr.com/ru/articles/329820/
или аналогично гридами

Как подключить fontawecome в gulp проект?

I_want_to_know,

если подключу fontawecome через npm i font-awesome как в этом случае, начать пользоваться им?

Аналогично. Только поменяете путь

Что вы имеете ввиду про svg stack и mask

Стек это спрайт не из symbol, а из svg.
Mask это css свойство делающее маски
https://codepen.io/noahblon/post/coloring-svgs-in-...

Как подключить fontawecome в gulp проект?

как прикрутить скаченный fontawecome.

Так импортировать как любой другой файл стилей.
Я понимаю, вы бы спрашивали что делать, если устанавливаете его как пакет.

p.s. в современном мире переходят на вставку иконок через svg stack и mask.

Что можно смотреть/слушать во время учёбы?

А что бы вы еще могли посоветовать подобное по собственному опыту?

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

но сложно себя заставить

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

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

Либо переставить значения bg position так, как вам нужно. Не от 0 до 100, а от 100 до 0.
Либо изменить направление анимации на reverse

Почему появляется скролл, при уменьшении line-height?

Kolya112151, это как раз не странно, а очень даже нормально.
Потому что прокрутка появляется не из-за line-height.

Почему появляется скролл, при уменьшении line-height?

Kolya112151, пожалуйста, сделайте песочницу с проблемой на codepen.io
В которой будет видно, что при line-height: 1.15; есть скролл, а когда этого свойства нет, то и скролла нет.

Почему появляется скролл, при уменьшении line-height?

Скролл не имеет отношения к line-height.
Можете самостоятельно проверить, отменяя это свойство в девтулзах.

Но в показанных вами стилях нет обнуления margin у body.
И именно из-за него появляется скролл: min-height: 100vh; + марджины = скролл.

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

senator, где-то в вопросе есть информация о том, какие браузеры нужно поддерживать?
Для ИЕ5 придётся сменить разметку на table. А также закрасить уголки у скругленных картинок в белый.

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

Список
Грид в 2 колонки
Каждая карточка это li
В ней:
- h3 (подставьте нужный уровень заголовка)
- p с ценой
- div или figure с картинкой внутри
- ссылка Подробнее
Саму карточку тоже верстать гридом. Первым слоем картинку, поверх всё остальное.

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

Судя по вашему скрину, стилей нет вообще.

Растягиваются изображения при flex-wrap:wrap. Как это исправить?

Яков Карелин, еще бы ответ не был бредом...

Почему появляется отступ?

Levott,
вариантов много:
- Грид на 4 ячейки
- Отступ для сайдбара через calc
- Всё засунуть в контейнер, фон для хедера добавлять псевдоэлементом
- Не засовывать хедер в грид
и т.д.

Почему появляется отступ?

Levott, сложно сказать, потому что в вашем коде (если и там разобраться с кавычками), логотип тоже прижимается к левому краю.
Оформите нормально песочницу на codepen.io с видимой проблемой.
Предварительно исправив все ошибки валидатора (и разметку и стили)

p.s. названия классов у вас это нечто... Один раз мне попался в руки такой проект на доработку. Верстальщика прокляла.

Почему появляется отступ?

grid-template-areas: "header header "sidebar main" "footer footer";

кавычку потеряли

В каких слечаях можно использовать ID?

Вадим, угу :)

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

- overflow
- clip-path
- сделать фоном и использовать его свойства
и т.д.

С помощью какого инструмента можно сверстать то что на картинке?

Сергей Мурин,

Если это можно сверстать одним классом, то как это сделать

В один не получится. Либо класс будет у списка, а li сделаете дочерним селектором по классу.
Но я имею в виду, что судя по скрину, в один селектор не выйдет, там намек на flex-grow, а его задают флекс-элементам.

Если grow не нужен, то да, просто flex и flex-wrap списку.

Если нужен, то соответственно, задавайте его детям. И ещё ::after для родителя, чтобы на последней строке не было слишком большого растяжения (опять таки, если нужно)

С помощью какого инструмента можно сверстать то что на картинке?

Флексами