ummahusla

Вынести меню из врапера который ограничивает ширину, если это не возможно разбить верстку на блоки.
Например:

<div class="wrapper">
 тут блоки
</div>
<div class="menu">Блок с меню на 100%</div>
<div class="wrapper">
 тут снова блоки
</div>

Сначала нужно расписать функционал приложения по пунктам: составить список тех функций, которые будут у приложения. Далеко в будущее заходить не надо, так как планы могут поменяться.
Потом взять те пункты, без которых приложение не состоится, самые минимальные и базовые вещи, и сделать их. Например, для магазина это: витрина товаров, возможность заказать товар, указав адрес доставки. Корзина и регистрация на этом этапе не обязательны, так как магазин может работать и без них. А без витрины и возможности заказать товар не может. После реализации этих базовых функций уже можно накручивать функционал дальше.
Суть в том, что на каждом этапе у тебя должно быть законченное, рабочее приложение. Разница между этапами — степень проработки деталей функционала приложения. Это метод прогрессивного джипега :) Или agile.
Чтобы понять, с чего начать, нужно посмотреть на приложение глазами пользователя: пользователь заходит на сайт, видит витрину товаров, видит описание у товара, цену, другие параметры, кнопку купить и т. д. То есть нужно реализовывать сценарии поведения пользователя. Можно даже acceptance-тесты накатать — помогает собрать мысли.

Предположим, что с будущей функциональностью Вы определились. Тогда Вы точно знаете, кто или что будет поставлять данные, и кто/что будет их потреблять.

Теперь выясните, кто будет обращаться к вашей системе, чтобы передать или забрать данные, а к чему будет обращаться Ваша программа. Те системы или пользователи, которые обращаются к программе сами, нарисуйте схематически на листе бумаги вверху. Те, к которым будет обращаться программа (включая БД), - снизу.

Теперь нарисуйте под каждым нарисованным сверху субъектом прямоугольник с названием UI или API - это интерфейсы, к которым будет обращаться пользователь или внешняя управляющая система. Иногда UI тоже может обращаться к API. Объедините все прямоугольники с UI одним контуром и обзовите слоем UI. Объедините все прямоугольники с API и обзовите слоем сервисов.

Для систем, нарисованных снизу, укажите компоненты, которые будут отвечать за доступ к этим системам. Объедините все эти компоненты одним контуром и обзовите слоем доступа к данным.

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

Теперь справа нарисуйте несколько длинных прямоугольников снизу доверху и написшите в них: логирование, конфигурация, мониторинг производительности, обработка исключений и что-то ещё, что является общей инфраструктурой (или сквозной функциональностью) для всех слоёв вашей программы.

Получите логическую архитектуру. Разбросайте слои по серверам - получите физическую архитектуру.

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

Full Page Screen Capture

WordPress вполне подойдет, кастомного функционала там практически нет, все реализуется на уровне темы и нескольких плагинов (Advanced Custom Fields Pro, Faceted Search, Membership Pro и еще парочка - надо смотреть по требованиям).

Есть также и готовые решения, например:

https://wpjobmanager.com/ (free)
wpjobboard.net ($)
https://premium.wpmudev.org/project/jobs-and-experts/ ($)

Тут еще подборка тем и плагинов (не забудьте полистать комментарии):

colorlib.com/wp/best-wordpress-job-board-themes

Когда я делал нечто похожее (но с интерактивными картами), я слушал событие на самом холсте. Брал из события координаты (event.pageX и event.pageY) и по ним искал вхождение в нужный мне элемент на холсте (я хранил координаты элементов в памяти). Вот код моей функции:

$("#myCanvas").on("click", function(event){
		var pt = [event.pageX, event.pageY];
		var elem = findP(pt);
});

function findP (pt) { // polygons это массив элементов (объекты с данными и координатами), в которых хранятся координаты вершин многоугольников (points).
		for (var z = 0; z < polygons.length; z++) { 			var polyz = polygons[z].points;
			for(var c = false, i = -1, l = polyz.length, j = l - 1; ++i < l; j = i)
				((polyz[i][1] <= pt[1] && pt[1] < polyz[j][1]) || (polyz[j][1] <= pt[1] && pt[1] < polyz[i][1]))
				&& (pt[0] < (polyz[j][0] - polyz[i][0]) * (pt[1] - polyz[i][1]) / (polyz[j][1] - polyz[i][1]) + polyz[i][0])
				&& (c = !c);
			if (c) return polygons[z].properties;
		} return null;
	}

Можно смело заменить событие click на hover/mouseover, код будет такой же. Только стоит добавить debounce или throttling на обработчик, чтобы снизить нагрузку.

Для юниора уже все выполняете. Дальше могут вариации в зависимости от специфики и направления вашей фирмы.

Перечисленного более чем достаточно.

"интересные же задачи" связаны не с количеством умений, а с качеством.
Не с тем, что человек умеет, а что понимает.
И это уже не уровень юниора.