Leo

Верстка и дизайн - разные вещи. В современной вёрстке требуется мышление программиста. Из постановки вопроса я вижу, что вы изначально предвзято отнеслись в верстке.
Если вам не нравится работать над логикой клиента - переходите в чисто бэк. Задач чисто на бэк более чем достаточно.

Честно говоря ещё не встречал таких книг по программированию, что нельзя найти в удобоваримом формате. Могу посоветовать купить электронную книгу с возможностью воспроизведения изображений. Похоже что у вас редкий язык.
P.S. Я все анатомические атласы и учебники на Айпаде таскал.

Я ушел из меда будучи фельдшером, т.к. хотел жить, а не откладывать. Работал на скорой, потом в операционной. Во время работы учился программировать. Сейчас работаю программистом. Так и не смог полноценно совместить несколько видов одновременного образования. Могу посоветовать ходить в туалет с книгой. Аудиокниги не зашли, только расстабляющее чтиво и общеобразовательное. Ещё устраивал интенсивы недельные при мотиваторах (типа устройства на работу через неделю) и в отпуске.

Гугл - frontend roadmap

Погугли frontend roadmap. Верстка это начало frontend.

По теме заработка: до 14-16 это фриланс только. Заказы на вёрстку есть. И без CMS большое количество. С 14 можно пробовать как стажор или junior в вёрстку или фнонтенд. Если будет портфолио хорошее и знания, то все реально.

Друг, ты сделал промис без return. Вставь return у стрелочной функции. Сейчас функция ничего не возвращает. Но глобально участок кода так себе.

P.S. Внутри then тоже не имеет return. Напиши return Promise.resolve(data), если тебе консоль нужна еще

Learn.javascript на англ версии самое актуальное

Нормальных верстальщиков не так уж и много. Но! Я сильно сомневаюсь что ваших знаний достаточно для нормальной верстки, т.к. опыта у вас нет. Если нет друзей и знакомых, то рекомендую придумать шутливые проекты самостоятельно.

Я выделяю 2 момента (исключая частности JS с равенством), возможно это будет полезно для вас.

Первый. После декларации чего либо при не указанном значении, что либо будет неопределенно, соответственно undefined.

Второе. Null - обнуление. Если что-то важно очистить или присвоить логический ноль, то следует присваивать именно это.

Если соблюдать эти правила, то подводных камней не будет. В частности встречал случай с Object.assign. Если нужно спроицировать объект на условно нулевую (чистую) модель, у модели не должно быть undefined, иначе свойство присвоено не будет (должно быть null).

https://roadmap.sh/frontend
До JS на позицию junior. Очень желательны: БЭМ, CSS фреймворк и SCSS.
Основной критерий адекватность, обучаемость. Наличие небольшого портфолио из работ болванок приветствуется и может стать критичным в выборе фактором.

Когда меня спрашивают как фронтендера "сколько это будет стоить?", я перевожу свое время в цифры и ставлю надбавочные коэффициенты (за срочность, за плохое тз и т.д.).

Например, время frontend-end developer'а в стеке с Angular, уровня middle в среднем стоит 160к/160= 1к за час.

Одна страница со среднем уровнем логики это 8 часов (с затратами на вёрстку, логику, отладку, рефакторинг, архитектуру).

Средний сайт магазин предпологаю 6-10 страниц. Итого 100к.

Хреновое тз + 20%.
Срочность ("хочу за месяц в продакшн") +50%.
Непроверенный/ненадежный заказчик или жопа чует беду = +25-50% и половина предоплаты с невозвратом в случае отказа либо любой иной причины.
Нет нормального бекенда с sdk (т.е. делать самому элементарный бэк) +100%.
Подключить то то, сё то - отдельное дополнение к договору и отдельная цена.

P.S. Вопрос был о чистой вёрстке? 10 стр непонятного качества 20-40к.

Frontend roadmap гугли

Дай бог памяти в кроссплатформенности... На Angular 8 появилась возможность указания нужных браузеров для версионности, но это для js вроде. Для css такой штуки нет.

Следовательно актуально для Angular. Что там в ReactJS и Vue не знаю, но думаю тоже самое.

Я скажу не изобретать велосипед. Если css анимации с подставлением классов через js не достаточно, то использовать библиотеки. Только не jQuery. Используйте наиболее популярные библиотеки (можно оценить по скачаным в npm и смотреть на более обновляемые). Главным принципом отбора должны служить нужные конкретно вам функции.

Я на всякий случай дополню. SPA сейчас строится на Angular, ReactJS или Vue. Данный тип разработки позвонят компилировать приложение без перезагрузки страниц.

Простите, если я слишком прямолинеен, но рядовой юзер имеет опредиленное разрешение экрана (он не разработчик). Максимум 2, если это смена ориентации экрана. Если вы собираетесь учитывать ВСЕ кейсы по ПИКСЕЛЯМ, т.е. играться потехи ради, то это ради прикола, а не работы.
Статистику по используемым разрешениям вы можете найти в Гугле. К примеру, вам стоит учитывать 4к, 2к, 1280 (не обязательно, но желательно), 1024 (планшеты), 800 и ниже (мобилы).
Ещё раз обозначу, только условленные разрешения вам нужны. Не играйтесь, а работайте.

Вообще это 3 блочных элемента, имеющих border и опредиленным значением height (одинаковым). В данном примере видно только фиксированную ширину блока, так что flexbox или простое значение - по выбору. Margin, естественно.
Сам блок для центрирования надписи по современному теоретически использует display: flex + внутренний блок с текстом с margin: auto.
Будет здесь обычный div блок или button как контейнер зависит от целей.

Может я лошара, но почему просто не сделать div.wrapper, внутри которого IMG и 2 div блока с position: absolute (z-index: 1 и 2)?

Больше элементов - больше узлов - больше файл и больше затрат интерпретацию