approximate solution

Как супер быстро обучится и стал джуном?
Раньше изучал вёрстку, есть пара макетов , потом забивал и брал перерывы. Чутка js совсем база . Гит и тд. На код варс начальные задачи решал 8-7 куй.

От этого попахивает мартышеством и Васянством - без обид.

Программирование - навык. Любой навык, не важно какой(гитара, художка etc) - изучается, шлифуется, доводится до мастерства только ежедневным, упорным трудом. Через боль, пот и слезы - если вас интересует выгода, либо через боль, пот и слезы радости, если это вам нравится.

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

https://grid.layoutit.com/ развлекайтесь

а на десктопе используется фактически мобильная версия

Что?

Покажите мне мобильную версию сайта, которая не "разворачивается" контентом для экранов 4к \ 27 дюймов. Хочу посмотреть на этот шедевр дизайна.

Задаете всё в процентах, текст и картинки можно уменьшить пропорционально ширине окна браузера с помощью vw

Вопрос,

не прибегая к медиа-запросам

Блоки которые не должны быть на мобильных тоже будете скрывать без медиа-запросов?)

Не нужно резину сводить к абсолюту, так как резиновая верстка чаще всего используется в совокупности с адаптивом. Без медиа-запросов, если у вас более-менее сложная верстка сейчас никуда.

7 баллов из 100. Я такого еще не встречал

Потому что это крупный бизнес. А не ИП или средний бизнес где основная логика - дрочь с баллами page speed insight.

JavaScript и фреймоворков

learn.javascript.ru - база

Дока Vue - https://ru.vuejs.org/index.html
Книга - https://www.amazon.com/Building-Progressive-Web-Ap...

На класс active(посмотреть какой класс накидывается на активный слайдер) повесить transform: scale(); иtransition: scale ...

При навешивании активного класса на слайд, будет происходить плавное увеличение.

https://maxwellito.github.io/vivus/

https://alexeybychkov.com/css/

Если вы про то что выше по ссылке, где человек называет микроанимацией то, что 99% комьюнити называет - ОБЫЧНАЯ анимация сделанная при помощи стоковых css animation\transform.

Вы можете назвать анимацию хоть - дуперпуперанимация. Смысл и реализация от этого не поменяется.

не могу больше часа сидеть за компьютером: болят ягодицы.

Так делайте перерыв

У меня на часах уведомление на каждые полчаса, после которых 5 минутная прогулка до кулера с водой, и отдых для глаз.

Так же качайте ягодицы, занимайтесь растяжкой, спортом. Скорее всего всему виной плоскожопие и не накачанные ягодицы и таз. У жирных задница не отваливается с утра до вечера сидеть.

Когда скачиваешь готовую верстку в ней бывает много вложений.

Это пример как делать ненужно - обычно такая верстка бывает у неучей, конструкторов сайтов.

В уроках верстки я не видел что бы учили создавать много вложений.

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

Подскажите зачем нужны эти вложения и как научиться верстать так как верстают профессионалы.

Что бы верстать как профессионал, нужно просто верстать очень много, и по ходе дела разбирать свой код и анализировать ошибки. Очень часто "профессионалы" пишут такой код, что вы удивитесь насколько он безграмотный.

Для того что бы верстать очень хорошо - webmasters.teamdev.com - ознакомиться с этим ресурсом.

какие то переменные в css или как то еще оптимизировать код?

Есть, это называется научиться использовать препроцессоры. А именно миксины, инклюды. Ну и почитать про принцип DRY.

Есть картинка пнг. И внутри неё на блоках текст. Но он сверстан, а не является частью изображения.

Гриды вам в помощь, верстается сетка, в каждом блоке сетки - какой нибудь span в котором текст, и он уже будет двигаться по контейнеру, либо поворачиваться с помощью rotate.

Но вот с адаптивностью - нужно будет делать много брейкпоинтов, что бы всё это адаптивно смотрелось(сделать можно, но кастомной писанины будет много).

А так - руки бы там дизайнерам выкручивал бы.

Самый верный вариант - не верстать, а просто отдавать в браузер картинку которая будет менять плотность пикселей и размер для разных экранов. На мобилки - отдай такую, для ретина экранов - 2х, и тд.