Юлия Старченко

В медиа запросе можно изменить absolute на relative, отменить top и left.
Вариант "переверстать" однозначно лучше, если потребуется поддержка проекта.

В идеале нужно стараться соблюдать семантику: таблицу - делать таблицей, всё, что не является таблицей - блоками, и т. п.

ВЕСЬ столбец должен выделяться при наведении.

js, но можно и так css-tricks.com/simple-css-row-column-highlighting/

В итоге не стал заморачиваться таблицами

Конкретно в вашем случае, думаю таблицей (тегом <table>) сделать бы не получилось, так как для карусели нужно, чтобы прокручиваемые элементы были обёрнуты в какой-либо тег. А так как прокручивается всё, кроме первого столбца, то нужна была бы разметка вроде:

<table>
<tr>
    <th>Лиды</th>
    <xxx>
        <td>23</td>
        <td>100</td>
        <td>50</td>
        <!-- ... -->
    </xxx>
</tr>
</table>

Тега подходящего на роль <xxx> в html нет.

0) Ванилла js это и есть обычный js.
1) Начинать надо с одновременного изучения ваниллы и jQuery. По ванилле будете читать книги и всякие статьи, типа как работают замыкания, this, hoisting и так далее. А на jQuery вы собственно будете писать код, который будет что-то, да делать. Никто вам конечно не мешает забить на jQuery и по хардкору угарать только по ванильному жсу, но с огромной вероятностью, вместо того чтобы как то реально практиковаться в написании кода и выполнении каких-то простых задач, вы будете биться головой о стену, ибо для начинающего, работа с DOM (а только и этим можно заниматься поначалу) в ванилле это настоящая пытка. Очень важно пилить много велосипедов.
2) Параллельно прокачиваете css. Там просто поле непаханных возможностей и фишек. Со временем скорее всего придет понимание того, что чего то в обычном css не хватает. Тогда и начнете юзать препроцессоры. Можно конечно и сейчас сразу начать, но я не уверен что от этого будет хоть какая-та польза (а вот риск начать юзать вложенность в full-retard mode имеется).
3) Как только начнете писать хоть какой-то вменяемый js или юзать css с препроцессорами, тогда и придет пора автоматизации фронтэнда. Галпы, автопрефиксеры, склеивание/миницирование стилей/js и все такое. Об этом пункте вообще можно будет не париться долгое время, ибо все ваши задачи будут решаться установкой какого-нибудь генератора yeomana с маджонгом и гейшами.
4) Фрейморвки. Ангулары, реакты, эмберы и так далее. Будете их изучать на основе статей и пет-проджектов, ибо на нормальную работу, где эти самые фрейморвки применяют, с 90% вероятностью не возьмут без опыта владения ими. Учить их все естественно не надо. Достаточно хорошенько покопаться в 1-2, чтобы понять принципы работы основных частей.
4 пункт может с легкостью идти сразу за вторым, если вас больше интересует копание в жсе, и не особо интересно представление. Параллельно со всем перечисленным изучите стайлгайды, методолгии, модульные системы и все подобные вещи, которые необходимы для написания приличного кода.

onePageScroll.js

Правильно. Добавлю только, что в первом варианте элемент с id="content" может находиться на любом уровне вложенности внутри div.

Несомненно, line-height может быть равна 0.

Используя обычные подручные рамки, linear-gradient и и transform:rotate получаем искомое.
Можно поизвращаться с perspective и rotateX, но полученный результат ужасен в FF.

И, по обыкновению, кладём фон с помощью SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="20" preserveAspectRatio="none" viewBox="0 0 60 20">
	<path fill="#ffb600" d="M 0,20 L 10 0 54 3 60 20 z"/>
</svg>

Если хотите красиво презентовать, то совершенно точно свг. Ибо можно будет классно анимировать отрисовку.

modernizr, html5shiv, normalize.css позволяют не особо заморачиваться по поводу кроссбраузерности. Все вместе они собраны в шаблоне-заготовке html5boilerplate.