Ольга Ветер

Верстай. Подглядывай, подгугливай и верстай. К 3-4 макету запомнишь основные свойства, после 5 макетов будешь спотыкаться только на каких-то нестандартных моментах.
Еще дополнительно - открывай любой сайт, открывай инструменты разработчика и инспектируй, какой элемент как сделан, какие свойства что делают, меняй их, играйся, запоминай.

Посмотрите книги "программируем с minecraft" разных издательств. Там python (в тех двух, что я видела), но все весьма просто и хорошо разжевано. С участием взрослого точно по силам.
Абсолютно верно написали выше по scratch - очень неплох для старта. С ним же можно делать что-то простое на базе Arduino. Еще под графическое программирование / робототехнику есть шикарнейший lego mindshtorm тоже вполне доступный уже на этот возраст, если цена не смутит.

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

где-то в 2000-м...

Спецификация. Ссылка (тег a) имеет прозрачную модель содержимого и может быть как блочным, так и строчным элементом (И внутри содержать соответственно и строки, и блоки) https://www.w3.org/TR/html/dom.html#transparent

Правильно - без вашей сборки. Или / или. Не надо ужа и ежа скрещивать. Вот зачем вам jquery, например, если вы уже vue решили использовать?
Ну или если вам так уж горит оставить в основе свою сборку, ну подключите vue через script

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

но это сомнительное решение.

Вы хотите разрешение экрана поменять или сделать так, чтобы вне зависимости от вашего разрешения вам показывалась версия сайта под 1920х1080? Первая задача - не реализуема. Браузер не имеет доступа к системным настройкам разрешения вашего экрана.
Если говорить о второй задаче, вероятно вам нужно работать не с offsetWidth/Height а с clientWidth/Height
И сильно сомневаюсь что вам нужно именно у document.documentElement все это менять. Но так как не до конца понимаю, что вы делаете вообще, утверждать трудно.

Ну если бы фон был железно однотонным, проще было бы просто задать фон иконке, а в таком случае - вам правильно сказали выше, верхний бордер через псевдоэлементы к иконке задавать.

используйте svg, и не надо будет всех этих костылей

А что вы вообще делаете?
Во-первых теги должны вкладываться друг в друга как коробочки, тег code должен закрыться до родительского div.
Не понятно что вы хотите сделать с тегом code в принципе.
Где вы пишите css? В отдельном файле - тогда может быть проблема с путями к этому файлу, ошибка в его названии, не подключение файла стилей в разметку вообще. Прямо в разметке - тогда надо его класть в <style></style>
Может быть ошибочным путь к картинке.
Еще у вашего дива могут быть нулевой размер, тогда фона не будет видно.

ну, очень надеюсь, у вас вся эта полоса с картинками - не некий один контейнер у которого 4 ребенка-картинки?
не факт, что это правильное решение, но первый способ, которым я бы пробовала это делать, вот такой:
у нас есть 4 блока с одним классом, в каждом из которых первым ребенком идет картинка. Я бы задала этой картинке обертку, которая, в свою очередь, для простоты, тоже, пожалуй, была бы флекс-блоком, имела ширину 100% (то есть по родителю) и макетную высоту (по наибольшей из картинок). Ну и выравнивание поставить по центру по обеим flex осям. А для img в данном случае можно width и height вообще прописывать инлайново и в стилях прописать max-height: 100% и object-fit: contain, наверное, не будет лишним.

Начнется он (если речь о ближайшем) довольно скоро, главное выспись впрок и разрули дела, чтобы потом хватало времени на все. Это раз. Во-вторых изучи внимательно предварительные материалы и попроходи все доступные интерактивные курсы там же. Пригодится. Подружись с фотошопом, если еще нет. Если этого мало, могу посоветовать https://www.freecodecamp.org/ - очень хороший ресурс, чтобы втянуться с нуля, еще и английский фоном подтянуть немножко.

Мне бы просто посмотреть пару качественных и относительно разжеванных для новичка видео с бест практисес, что бы просто пойти в бой по макетам

увы, это так не работает :) и просто не будет в любом случае, если с нуля.

А вы уверены, что это не во всю ширину экрана страница в принципе, и что там есть некий "контейнер" на том уровне, где вы красные линии провели?

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

Фриланс на начальном этапе сильно затормозит вас в развитии (практические навыки получите, но оценка качества будет крайне субъективной), да и нервы может измотать не слабо. Почувствуете себя сильным специалистом, тогда можно, если это ваша цель. Разработка для себя имеет почти те же минусы в начале пути.

1) Middle разработчику найти работу не трудно. Трудно догнать постоянно убегающий вверх уровень middle разработчика и не сдуться по пути. Есть работодатели, которые по неким своим признакам и в джунах видят людей, способных на этот рывок и с радостью берут из не работу/обучение. Если вы "скроены" под разработку типом мышления и устремлены туда, то без работы не останетесь. Сфера испытывает острую нехватку толковых специалистов. Скажем на каждую вакансию приходит масса предложений, но выбрать из них хоть пару толковых человек под реальные задачи - та еще задача, извиняюсь за тавтологию.

2) Ежедневно фейерверки не завозят и рутины хватает. Требуется как минимум масса внимания, усидчивость, высокий скилл поиска и анализа информации (это не только про гугл, но и про чужой код, например). Это должно вам подходить и нравиться вам. Вас не должна угнетать мысль, что нет потолка знаний, что "вот выучу А и Б, и стану суперзвездой" - тут никогда не сработает. Наоборот "просижу полгодика без работы, отдохну, поживу для себя" превратит вас в аутсайдера. Ну не 100%, но с большой вероятностью. Что придется все время учиться, и не только во время работы, но и после. И это должно радовать. Я реально люблю учиться, обожаю, когда за это платят или это приводит к росту моей ценности позже, кайфую от решения каждой задачи - это те маленькие победы, которые меня мотивируют. Возможно перегорю со временем, но пока так. Хватает и раздражающих моментов, когда надо делать не самые интересные задачи, когда увлекло конкретно то или иное направление или фича, а надо делать не это; когда ТЗ расходится с личными представлениями о прекрасном и так далее. Но это в основном решаемо.

3) Немного утрировано, есть некая база, освоение (практическое) которой, позволит дальше идти в ногу с трендами. Но что-то в этом есть от правды. И именно это позволяет новичкам в некие реальные сроки догнаться до конкурентоспособного уровня.

4) Мне нравится то, что я делаю. Но тут все сугубо индивидуально. Нравится? Получается? Учитесь, практикуйтесь, растите и ничего не бойтесь. Боитесь - может не настолько нравится и стоит посмотреть в какую-либо иную сторону?

Году так в 2010...

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