MasterMike

У меня для вас плохие новости.
Наставникам обычно платят деньги, чтобы они с вами возились.
А это кардинально отличается от ваших пожеланий.

Ну а вообще на фриланс вам пока что еще очень рано.
В офис, только в офис на пару лет минимум.
Никто же, например, не запрещает вам переехать в иной город.
И английский учите.

Как, правило, на входе - разверстанный дизайн, на выходе - работающий сайт на каком-либо движке.

Чтобы примерно представлять процесс, посмотрите, к примеру, обучалки от битрикса (как пример) - их можно найти на официальном сайте в разделе "обучение".

Сильно зависит не только от методологии, но и от самого проекта (на мой взгляд).

Для проекта на битриксе, где просто html, будет одна структура css.
Для проекта, где используется шаблонизатор (по типу twig) будет совершенно другая структура css (кстати, ваш пример, снова же на мой взгляд, напоминает именно этот вариант).
Для проекта на React будет уже третья структура. А есть еще стилизованные элементы, там как быть?

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

p.s. Конвенций нет. Делайте, чтобы работало хорошо и чтобы остальная команда понимала написанное )

Я так понимаю, вы хотите на компьютере расположить сайт по центру экрана, а на мобильной версии - от края (насколько это, конечно, можно было понять из описания вашей проблемы).

Расположение по центру создает margin: 0 auto, вам нужно отключить auto через медиа-запросы для планшетов.

Как пример вам нужно добавить следующий блок кода:

@media screen and (max-width: 1280px) {
    .wrap {
        margin: 0;
    }
}

На тестовом задании были реальные товарные знаки?
Похоже, вы сделали не тестовое задание, а целый коммерческий проект )

Ситуация двоякая: если таковая компания действительно существует, то товарные знаки принадлежат ей.
Однако верстка - как объект интеллектуальной собственности - принадлежит уже вам.
Проверить существование компании можно, например, через сайт "за честный бизнес".

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

p.s. Учите js и переходите во фронтенд. Профессия верстальщика гораздо менее оплачиваемая и гораздо более подвержена таким вот коллизиям.

https://tech.yandex.ru/share/

Очень странный макет, в котором логотип может быть больше ширины экрана.

Посмотрите как сделано перестроение изображение на том же бутстрапе.

Возможно, вам также пригодятся такие единицы как rem.

Как, как. Берем и верстаем )

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

Кому сейчас нужны верстальщики?
Небольшим веб-студиям, работающим на российский рынок. Сайты сейчас есть практически у всех, региональные студии получают заказы через столичных перекупов. Зарплаты верстальщиков в студиях минимальные, те самые пресловутые 200-500 баксов.

Ориентируйтесь в сторону frontend-а - работа на продуктовые, аутсорсинговые, аутстафные компании. Оплата труда там в разы выше, плюс в цене фронты с хорошими навыками верстки.

Ну и смотреть в России в сторону вордпресс - это как заведомо лишать себя крупных зарплат )
С ним программист может хорошо зарабатывать разве что на зарубежном фрилансе - но увы, поговаривают, на тот же апворк с такими навыками одно время не пускали, мол, там своих хватало.