https://codepen.io/tag/skeleton
И в Гугле skeleton loading поищите.
Есть доклад по поводу скелетонов https://youtu.be/JRlCIPkwheA

Как называется вот это состояние загрузки?
Как это называется и как это реализовать?
Как сделать placeholder/preloader контент-блоков при загрузке страницы?
Как называются серые блоки, отображающиеся на сайте до загрузки контента (как на ютубе, например)?
Как создать скелетный экран?
Preloader как у ...?
Как называется библиотека?

1. Теги h1 и h2 нужно использовать для заголовков, а не для всего подряд.
2. В теге ul должны быть элементы списка, а не ссылки. https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
3. В img должен быть атрибут alt (для декоративных - пустой)
4. Разметку нужно проверять валидатором https://validator.w3.org/
5. Иконки нужно не в png,а svg (и в спрайт объединить)
6. Ширину, да и высоту кнопки не стоит делать фиксированными (по крайней мере min-width)
7. Контейнеры разной ширины предусмотрены дизайном?
8. letter-spacing: -0.4; -0.4 - это сколько? https://developer.mozilla.org/ru/docs/Web/CSS/lett...
9. Ссылкам в меню задайте padding - пользователь не должен целиться в область ссылки
10. Скрипты из head перенести перед </body> либо атрибут async


chrome dev tools => audits => accessibility страдает явно

document.getElementById("myBtn").disabled = true;
https://developer.mozilla.org/ru/docs/Web/API/HTML...

.grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
}

.grid > * {
  grid-column: span 3; /* по умолчанию все широкие */
}

.grid > :nth-child(9n + 3),
.grid > :nth-child(9n + 4),
.grid > :nth-child(9n + 8) {
  grid-column: span 2; /* узкие элементы */
}

Можете ещё попробовать 14 колоночную сетку, узкие - 4 колонки, широкие - 5. Или 11 колонок (4 и 3). А вообще такие вещи нужно брать из макета или уточнять у дизайнера, какими флюидами он прочувствовал такие пропорции?