Никита Мелихов

Углубляться в чистый js и учить популярные фреймворки/библиотеки.

Я так понял Вас интересует именно flex.
Я бы предпочел сделать это на grid, ведь он для этого и создан.
Если что, вот мое решение вашей проблемы на css grid
css grid

Есть несколько вариантов подхода верстки разных версий сайта. На мой взгляд, если сайт разрабатывается с нуля, то наиболее правильным будет подход Mobile first. Смысл в том, что вы изначально делаете сайт под мобильные устройства, а уже после, с помощью медиа выражений, добавляете функционал на страницу для ПК и больших экранов.
Вот неплохая статья на данную тему:
https://m.habr.com/ru/post/269419/

Ps. Что вы имели ввиду под "программой для верстки" не очень понял. Верстать можно и в блокноте, и в ide (интегрированная среда разработки), но и там и там нужны как минимум базовые понятия разметки html и стилизации css, в данном случае последняя (ide) просто позволяет упростить и ускорить саму разработку и тестирование, но писать в любом случае придется ручками.

archelon прав. Действительно надо аж 5 шрифтов? В идеале 2, край 3. Часто подключают целый шрифт, чтобы логотип или слово в одном блоке были правильного начертания. Попробуйте заменить такие места на картинку (если лого), а для сео пропишите там невидимый текст. Или бывает дизайнер просто не учитывает нагрузку шрифтовую и фигачит в макете разными шрифтами, тут надо подумать как обойтись парочкой шрифтов.

А вообще касаемо PageSpeed Insights, еще не все по ходу знают:
Чтоб система не ругалась, она хочет при подключении шрифтов ленивую загрузку - font-display: swap, т.е. сначала всё отобразится дефолтными шрифтами, а потом когда загрузятся кастомные, подключатся уже они.
Типа того:

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display:  swap;
}

Правильно будет задать вот так (код ниже), потому что у тебя будет больше возможностей для дальнейшей поддержки. При изменении меню в любом случае генерируется его html, а значит число тэгов не имеет значения. Разделитель можно будет менять, добавлять, убирать, без необходимости редактировать стили и собирать все заново, все делается на стороне бэка. Задав через псевдоэлементы ты обречешь себя мириться с их недостатками и потеряешь возможность быстро что-то изменить.

<div>
   <span>сон</span>
   <span class="separator-slash">/</span>
   <span>ужин</span>
   <span class="separator-dot">.</span>
   <span>завтрак</span>
</div>

Я конечно извиняюсь, но не проще было сделать с помощью flex?

.header-top {
	display: flex;
  justify-content: space-between;;
}

С картинками особо не стал заморачиваться.

например так


Но гриды лучше для этого подходят, если можно их использовать.

Вполне может быть посоленый md5 - т.е. добавляется какая то константная строка.
Узнать какая именно - это мягко говоря затруднительно.

Странный вопрос, так как в ссылке уже имеется рабочий код. Его нужно свопировать и подстроить подсебя.
Вчём сложность?

можно ли выучить react js, только прочитав документацию? и так быстрее?

Можно. И изучение по документации намного быстрее. А видеоуроки - зло, лучше текст.

на самом деле вы должны проектировать ваш rest отталкиваясь от предметной области, от сущностей, а там нет разделения публичка, админка