Extremum

В общем-то ничего сложного - надо задать какую-то разметку и через js добавлять
Например, нужно добавить текст в инпут для дальнейшей отправки (товар я так понимаю можно заказать). На кнопку вызова попапа вешаем класс link-click и добавляем data-title с заголовком (атрибуты с приставкой data можно добавлять сколько угодно), создаем инпут с именем info в нашем попапе. Добавим jquery:

$('.text-click').click(function(){
        $("input[name=info]").val($(this).attr("data-title"));
    });

все работает. Для изображений что-то похожее, добавим какой-то элемент с классом class-img и добавим изображение в data-src:

$('.text-click').click(function(){
            $($(this).attr('href')).find('.class-img').attr('src', $(this).attr('data-src'));
        });

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

Лично я изучал адаптивную верстку расковыряв bootstrap и foundation. Понемногу собираю собственные заготовки для сеток, сброса стилей и других, необходимых "по-умолчанию" сниппетов.

Медиа запросы актуальны, использование %, em или rem (не для всех браузеров) - на вше усмотрение, при грамотном подходе можно и px использовать с медиа-запросами.

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

Есть неплохое решение с Mouse Wheel Plugin