Как адаптировать картинку на сайте для любых устройств?

Скорее всего кеш стилей. Чтобы не заставлять чистить кеш заказчика, измените версию файла стилей

<link rel="stylesheet" href="themes/sitist/css/style.css?v123" >

После знака вопроса любую версию или дату или вообще что угодно.

p.s. div вообще лишний и лого хорошо был в svg

<a class="logo" href="">
  <img class="logo__img" src="img/logo.png" alt="">
</a>

Как грамотно указывать классы в HTML?

Есть 3 кнопки с классами:
.btn .btn--default
.btn .btn--danger
.btn .btn--secondary

В класс btn записываете общие стили.
В модификаторы - уникальные.

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

Вы можете задавать шрифт в единицах vw.
Если картинка не полностью резиновая, а имеет мин и макс размеры, то и для шрифта используйте clamp.
https://jsfiddle.net/Lz7yrdw0/

Как удалить рамку у таблицы?

Я бы модифицировала наоборот. Не отменять свойства, а задавать только нужным
tr:not(:nth-last-child(2)) {}

Как создать такую сетку товаров?

Юсуп Оздоев,

12345 нажимая на эти кнопки должны меняться товары. Я не могу найти образец, чтобы понять как это происходит.

Эммм... А ничего, что в вопросе у вас про сетку, а теперь вы приплели кнопки?

Кнопки пагинации это просто список ссылок. Если вы делаете только верстку, то этого достаточно.

Как создать такую сетку товаров?

Уточните, пожалуйста, что именно вызвало сложности?
Приложите свои попытки на jsfiddle.net или аналоги, так чтобы было видно в чем заключается проблема.

Как в slick-slider модифицировать средний слайд из тех, которые видны на странице?

Вы можете открыть инструменты разработчика и посмотреть какие классы слик присваивает активным слайдам. И написать соответствующий селектор.

Как обрезать линию?

Дело в том, что hr имеет семантическую нагрузку: разделитель контента на смысловые секции.
Но вы уже используете тег section.
А значит, hr лишний.

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

p.s. перед тем как задавать кому-то margin-left: 200px, подумайте о том, что размеры окна браузера (viewport) у разных пользователей могу быть разными. Просто попробуйте хотя бы изменить ширину окна. А лучше через адаптивный режим в инструментах разработчика.

А вам, судя по всему, нужно вовсе не получить отступ в 200, а центрировать блок.
Самое простое это задать ему правый и левый margin в auto. Остальные варианты легко гуглятся по запросу "css центрирование блоков"

Как скрыть flex-контейнер?

Поставьте селекторы в правильном порядке и заодно почитайте про специфичность.

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

Как реализовать данный градиент?

vikas_web,

в макете нету слоя

И пипетка не работает?

Можете пойти длинным путем: нормально вырезать картинку и засунуть в колорзиллу. https://www.colorzilla.com/gradient-editor/

Как реализовать данный градиент?

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

Как делать выемку в бордере?

Таких вопросов тут полный Тостер
https://qna.habr.com/q/1078286
Или любым другим способом создания треугольников.

Создание коротких ссылок, как хранить?

Шикарная пунктуация (не удержалась от комментария)

Как разместить меню сайта как показано на макете?

Сергей delphinpro, ага, тоже хорошо.

Но я бы через кастомное, на случай, если лого или его ширину поменяют.

Как разместить меню сайта как показано на макете?

DimaD0106d,

Я указал хедеру: justify-content: space-between; а левому и правому блоку указал одинаковую ширину!

Если этот вариант проходит переполнение, то ок.

Логотип вообще по центру стоит?

Вам виднее. Если нет, то откройте фотошоп и измерьте.

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

Раз она одна, поставьте её как img. Всем жить будет проще.

Как разместить меню сайта как показано на макете?

Какой смысл дублировать вопросы?
Это уже четвертый или я что-то пропустила?

У вас 3 варианта:
1. Лучший: заменить флекс на грид. Пример тут https://qna.habr.com/q/1075588#answer_2057462
2. Прибить лого в центр абсолютом (или гридами, слоями). Есть шансы, что одно на другое наползет, если сделать не аккуратно.
3. Оставить флексы, крайним блокам задать равную ширину. Можно выяснять её на js.

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

godsplane,

Суть решения я вижу в том чтобы находить тангенс угла

Может, не париться и сразу написать его в data- ?

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

godsplane, тогда понятно

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

И зачем дублировать вопрос?