tema_sun

grid-template-areas, например

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

Фигня какая-то. В верстке (как и в любом кодинге) основное время занимает не написание кода, а продумывание того как все сделать поддерживаемым и хорошо работающим. Сам код написать это 3% времени.

Так если вы сами знает, что ошибок много, то зачем показываете? Исправьте сначала, то о чем знаете.
Ну и поскольку я топлю за БЭМ, то рекомендую попробовать его применить.

Вынесите инициализацию переменной из функции.

IT - это обучение всю жизнь. Верстка является частичкой IT и я вас уверяю, даже через 15 лет вы сможете узнать в этом нехитром в целом деле что-то новое.
Если возникает вопрос "а не бросить ли", то конечно бросить. Без немотивированного интереса вы не достигните чего-либо значительного в этой сфере.

Быстрое прототипирование.

Для монохромных иконок использую кастомный иконочный шрифт. Для многоцветных по-разному - это может и свг быть, и наложение. В целом, на мой взгляд проблема из пальца высосана.

Не в каждом макете это сработает. Ими не так-то просто пользоваться, как кажется на первый взгляд.

Если возможно отказаться от тега button, то возможен такой вариант:
https://codepen.io/anon/pen/oJgRza

С button это по идее работать не будет, т.к.

Разрешенный контент
Текстовый контент, но без вложенных элементов label. Недопустимы другие оборачиваемые в label элементы помимо целевого.

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Простое задание. Как-раз для джуна.

Работать поэтапно, чтобы минимизировать возможные потери.

Например, сверстать их флексбоксом, а на мобильном разрешении использовать flex-direction: column