Критика, критика. Начинающий в сфере front-end разработки. Все-ли я делаю правильно?

1. Одностраничный проект.
2. Исправлю, спасибо.
3. До этого момента не знал о таком шрифте совсем, есть статейка или может сами имеете свободную минутку рассказать как им пользоваться и... как вставить его в свой документ.
4. Спасибо, добавлю в избранное.
5. Да, действительно.
6. Я с этими коробками и сидел все эти дни. Круг позади них ранее был объявлен псевдоэлементом

&::before
                        content: ''
			top: -165px
			left: 50%
			margin-left: -41%
			/* Выравнивание круга */
			width: 390px
			height: 390px
			/* Фиксированная высота и ширина для круга */
			border-radius: 50%
			border: 1px solid #ffffff
			z-index: 1
			/* Ставим блок поверх другого */
			display: block
			position: absolute

А после просто заменил на блок <div class="main-img__wrap">(Тот же код)</div>
7. Будет сделано
8. Это только для экранов 1200 и более?

flare0n,
1. насколько мне известно, неважно одностраничный проект или нет. логотип должен быть ссылкой.
<a class="header__logo" href="#">
3. ниже сказали насчет svg спрайтов, согласна, тоже неплохое решение. Мне нравится этот генератор: https://spritegen.website-performance.org/ (не вижу там svg). Вы перетаскиваете туда свои картинки, потом скачиваете картинку, css, html.
Хотя, я понимаю, что это ещё не вся страница. В footer достаточно часто есть иноки соц.сетей, которые тоже вставляются иконочными шрифтами (или как вариант svg спрайтами), но я предпочитаю шрифт.
8. нет это для всех экранов.

БЭМ - это методология.

<span class="header-contacts__phone__fat">271-54-28</span>

И Вы действительно её неправильно используете. Ознакомьтесь - https://ru.bem.info/ (выберите: методология, быстрый старт)

Насчет адаптива, сама с ним сейчас разбираюсь. Смотрю эти серии роликов, может вам подойдет: https://www.youtube.com/watch?v=5mq70LOOxrc (3 видео) и https://www.youtube.com/watch?v=Au6d1d-vFjU&list=P... (7 видео)

Насчет иконочного шрифта посмотрите какое-нибудь видео, как его подключить.
Помню, скачивается архив, потом подключается в css:
@import url(../fonts/fontawesome/css/all.min.css);
затем, когда Вы пишите в html такой код (его вы копируете на странице, где расположена иконка)
<i class="fab fa-linkedin-in"></i>
у вас появляется иконка. Её размеры регулируете также, как размеры обычного шрифта через font-size.

Атланта, огромное вам спасибо, приду домой буду разбираться

Атланта, логотип ничего никому не должен=)

Делал все по макету, предложенному в курсе.

1. Чем можно ужать изображение, не подскажите?
4. Как понял просто разрешения другие поставить?
5. Чтобы было удобнее редактировать блок, по крайней мере, преподаватель делал так.
6. Тоже самое.
7. Не знаю расшифровки БЭМ, да и вообще, что это значит?
10. С этим особая проблема. Когда адаптировал под планшетные (max-width: 768px), все вроде бы шло нормально, но когда я сделал на один пиксель поменьше он тут же все наворачивал. То-есть для 768 отдельные стили пришлось писать, а для того, что меньше 768 - писать max-width. Если объяснил непонятно, у меня в _media.sass видно как это все сделано. Очень нуждаюсь в консультации по адаптивной верстке, как лучше и т.п, может есть статья какая?
11. Лого бэграундом, потому-что преподаватель на курсе сказал: "так нужно для мобильной версии". на <320px лого меняется на упрощенное. Я так понял, есть какая-то более оптимальная альтернатива?
12. Не совсем понимаю что означает иконочный шрифт. Может я с утра по-раньше туплю... Как я и предупреждал в заголовке - я начинающий в этом деле, и еще многого не знаю/понимаю.

flare0n, по поводу первого пункта — imageoptim хорошо справляется с задачей

5. h1 также хорошо стилизуется и редактируется, делая заголовок div вы теряете семантическую разметку и это плохо сказывается на SEO в дальнейшем

6. то же самое, что и h1

7. что такое БЭМ

11. для этого используйте тег picture

12. иконочный шрифт это то, что отправили вам ранее, fontawesome. отличие от обычного шрифта в том, что в нём не буквы, а специальные символы-иконки, которые можно использовать.

s0xzwasd, огромное спасибо за уделённое время

s0xzwasd, Программа работает только на OC Linux. Для Windows предложена альтернатива - FileOptimizer, скачал его, однако на выходе получаю файл такого же размера с разрешением .jpg.bak

Все никак не могу управиться с тэгом picture

<picture class="header__logo">
							<source srcset="img/header-logo-mobile.png" media="(max-width: 576px)">
							<img src="img/header-logo-mobile.png" alt="Лого">
						</picture>

На сайте отображается криво

flare0n, https://tinypng.com/

flare0n, у вас должен был сам файл оптимизироваться и создаться бэкап с расширением .jpg.bak

s0xzwasd, Да, я принялся его сравнивать, по весу - идентичный.

flare0n, может он ранее уже был оптимизирован

flare0n, picture я бы не рекомендовал юзать, если нужна поддержка старых браузеров: https://caniuse.com/#feat=picture

<!-- Скрываете/показываете нужное медиа запросами -->
<div class="logo">
	<img class="logo__desktop" src="img/header-logo-desktop.png" alt="Лого">
	<img class="logo__mobile" src="img/header-logo-mobile.png" alt="Лого">
</div>

<!-- Ссылкой -->
<a class="logo" href="/">
	<img class="logo__desktop" src="img/header-logo-desktop.png" alt="Лого">
	<img class="logo__mobile" src="img/header-logo-mobile.png" alt="Лого">	
</a>

be_a_man, Спасибо