Ankhena

В каком смысле "необходимо"?
Но вообще, уже много лет есть замена шрифту - это символьные svg спрайты.
А теперь и стеки из svg, которые работают откуда хочешь. И из разметки и из стилей.

Мне ещё симпатичен вариант использования иконок в кастомных свойствах css. А дальше bg или маски.

<h1 class="main-title">
      мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
      достижения
</h1>

А, поскольку, это скорее украшение строки, а нормальный логотип уже есть наверху слева, то нет смысла его дублировать как img и можно сократить до:

<h1 class="main-title">
     <span class="main-title__beautiful-string">мои </span>
      достижения
</h1>

.main-title__beautiful-string {
  display: block;
}

.main-title__beautiful-string::after {
  content: "";
  display: inline-block;
  vartical-align: middle;
  bg: иконка
}

Либо флексом.

Убираете инлайновый fill и красите на здоровье

.socials__link:hover {
  fill: red;
}

А ещё лучше перейти с символьных спрайтов на стеки и не мусорить в разметке, а использовать mask
Сборка стеков, например: https://www.npmjs.com/package/gulp-stacksvg
Также они вставятся и в use и в css в качестве content, bg или mask.
Про маски https://codepen.io/noahblon/post/coloring-svgs-in-...

Разбейте задачу на этапы. Чем мельче, тем лучше. Отметьте те, которые можете решить (с помощью гугла, этого сервиса и т.д.). Те, которые совсем не можете - делегируйте.

Это получается Понедельник это одна страница, а Вторник другая или как?

Тут, наверное, нужно посмотреть как это сделано у других, благо таких приложений полно. И решить как оно должно быть у вас. Мы-то точно не знаем :)

Дальше потихоньку решайте эти мелкие задачки.

p.s. глядишь, пока это сделаете, всё и пройдёт и найдете приложение себе по вкусу.

Простейшая вариация
https://jsfiddle.net/pd7segt0/

Только у себя в head добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0">

без него @media не будут работать.

Там же редактор проще некуда, выделили и раскрасили.


Для Zero

Использовать SVG или увеличенные изображения для Retina дисплеев?

Да!
:)

Для растровых изображений использовать <picture> (не забудьте полифил для поддержки ИЕ) или атрибут srcset.

Да векторных - SVG.

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

Хрустальный шарик говорит, это потому что файл html находится на одном уровне с папкой img.
А в коде вы пишете, что из папки в которой лежит html нужно выйти на уровень наверх и уже там поискать папку img. А её там нет.
На локалхосте такой проблемы нет, потому что даже если написать ../../../../../img/ то выше localhost не прыгнет.

Значит, нужно исправить пути.

Сейчас не нужно подключать ttf, нужны woff2 и woff

Подключать так (название файла должно быть одинаковым, меняется начертание и жирность)

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        }

Использовать так:

div {
      font-family: OpenSans, Arial, sans-serif;
      font-weight: bold;
    }

Либо идете на google fonts и подключаете оттуда https://fonts.google.com/specimen/Open+Sans
Нужные вариации выбираются.

<meta name="theme-color" content="#f00">

https://jsfiddle.net/e14x0pvy/
Либо SVG

.d1 {
  background: linear-gradient(to left top, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));
}

.d2 {
  border-bottom: 1px solid red;
  transform: rotate(-30deg);
}

.d3 {
  border-bottom: 1px solid red;
  transform: skew(0, -30deg);
}

ami.responsivedesign.is

Задать основную ширину min-width
и ее же задать в meta viewport

<meta name="viewport" content="width=ШИРИНА, initial-scale=1">

так: https://jsfiddle.net/h963ozt0/
цвета, угол и размеры сами поставьте

Вот так: https://codepen.io/anon/pen/VQGRLg

Да, можно:
делала для другой задачи: https://jsfiddle.net/Ankhena/2xubg90z/
Для вашей больше подойдет так, попроще: https://jsfiddle.net/Ankhena/L8myb66u/

p.s. и не надо использовать fieldset, не по назначению и там где можно обойтись без него.