Leo

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

Frontend roadmap гугли

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

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

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

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

Вам нужен safari. Если что не так в вёрстке, связанной с проблемой в браузере, то вы увидите это на ipad. В случае проблем с размерами элементов, вы и на PC увидеть все нормально.

Почитай БЭМ

Честно говоря, уже и не знаю как без них.

Ну, я бы сказал вебпак с плагином на uglify и очистку ненужных css классов в проде

Друг, тебе пора обратить внимание на Angular, React или Vue. Webpack тоже.

Открой поисковик. Запрос: front-end roadmap

Как я понял там видео же? Тогда надо js для сдвига или hover анимацию.

Можно ещё сделать через overflow hidden. Мне кажется все эти решения попахивают савхозом, но рабочим савхозом.

Я бы в итоге сделал чтобы одна секция была бы со сдвигом, а при hover происходил сдвиг на активную область. Это можно без js. Можно сделать изначально посередине для перфектцианизма.

В консоли разработчика хрома/лисы есть мобильные экраны. Они охватывают большинство необходимых экранов.

Потому что нормальной автоматической верстки нет.
Потому что нужно настраивать логику страницы.
Потому что нужен БЭМ.
Потому что есть куча стандартов нормального написания кода.
Потому что делать надо на препроцессоре CSS.
По ому что нужна совместимость.
Потому что быстрее в коде.
Потому что удобнее в коде
Потому что разделение труда.
Далее уже надоело)

Думаю дело в том что:
a - строка
button - блок

fill, но будут проблемы на safari. Лучше изначально покрасить.