Nikolay Talanov

codepen.io/suez/pen/3ab440ea3764172b866d3f911c3e28... - вот простой вариант.

Сверстать сайт с шириной в 1600 пикселей не проблема. Проблема сделать так, чтобы контент хорошо было видно на десктопах с более низкой шириной, аля 960-1300, имея всю ту же pixel-perfect верстку. Просить отдельный макет для мелких десктопов - мертвый номер, ибо почти никто не будет над таким париться. Делать примитивную резину для десктопа - выбор для тех, кого устраивает клепание говносайтиков. Ибо на сайтах с нормальным дизайном важно сохранение пропорций, 2015 год все таки.
Я сейчас пилю фронт-енд для китайского интернет-магазина, у которого все десктоп макеты 1800px шириной. При этом им важно, чтобы на каком-нибудь ноутбуке с 1376x768 все выглядело так же, но при этом влезало. В итоге делаю все в rem юнитах. 1800 пикселей стартовая точка, где html, body {font-size: 125%;}, то есть 1rem = 20px (о том, почему не 62.5% для 1rem=10px, напишу ниже). Далее, через media-queries, снижаясь на каждые 10% от ширины, уменьшаю font-size на 10% (то есть на 12.5% в нашем случае). И так вплоть до 1.1к пикселей, то есть почти самого низкого десктопа. Заказчик в восторге, все выглядит ровно так как ему надо на всех разрешениях во всех браузерах (ему естественно не нужен убогий ie8).
По поводу font-size: 125% - я изначально делал 62.5%, но при понижении до 40%- font-size (аля ~1300px) вебкитовские браузеры на MacOs начинали считать что такая величина шрифта слишком мала для юзера и сами по своей воле рандомно увеличивали габариты элементов. Увеличив весь font-size вдвое, проблема изчезла.

Вы <textarea> закрыли тегом </textarea>?

Спрашивайте у клиента. Если сам клиент точно не знает - узнаете какая примерно у него аудитория. Если вы делаете какую-нибудь "онлайн-бухгалтерию", как выше в примере привели, то придется мучатся с каким-нибудь 8 осликом. Если вы делаете какой-нибудь визуально-навороченный сайт, который явно не ориентирован на странных людей с древними ИЕ, то клиент с легкостью может сказать "ие10+ нам подойдет", ибо затраты ради полноценного graceful degradation под ие9- попросту будут не оправданы из-за отсутствия надобности в таких сомнительных клиентах.
+ если клиент наобум говорит "ие8+, да чтоб даже какие-то эффекты работали" без дополнительной информации почему так, то вам надо изучить этот вопрос и предоставить ему статистику. Я просто сразу говорю что из-за отсутствия многих фич, разработка под такое старье будет сжирать на 20-50% больше времени и сильно деморализует меня, и после этого клиент внезапно начинает думать головой.

Писать код очень лень, напишу примерно возможные варианты:
1) Использование css blend-modes. Но мне кажется что с неоднородной картинкой не прокатит такое.
2) Дублировать этот заголовок, поменять его цвет, поместить его внутрь скошенного контейнера, повернуть его в обратную сторону с помощью skew (вы ведь скошенный контейнер через skew будете делать) и с помощью translateY все это дело двигать (аля контейнер двигается вверх, а заголовок вниз). В виде описания возможно выглядит сложно, но как только вы накидаете какой-нибудь кривой пример, станет куда проще.
Вот например 2 демки с похожим эффектом маски (только без скошенных углов, но это по сути дела 1 свойство добавить):
codepen.io/suez/pen/XJGOyL - здесь текст в пунктах меню "перекрашивается" в белый, хотя на самом деле внутри перемещающегося блока просто расположен дубликат списка, который движется в обратную сторону, во время движения самого блока.
codepen.io/suez/pen/kqlIJ - моя самая первая демка на эту тему, код там скорее всего жутковатый, но зато можно легко понять как работает этот mask эффект через F12.

word-break: break-all;
примененный к элементу с текстом, обеспечит перенос не влезающих в строку слов (если вам это необходимо конечно).
И поверх всего этого савим еще overflow: hidden; для самого контейнера, если вы хотите чтобы за его пределы ничего не вылезало.

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 пункт может с легкостью идти сразу за вторым, если вас больше интересует копание в жсе, и не особо интересно представление. Параллельно со всем перечисленным изучите стайлгайды, методолгии, модульные системы и все подобные вещи, которые необходимы для написания приличного кода.

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

1) Свг. Оно для этого лучше всего подходит. Денис посоветовал D3, это наверное самый классический вариант.
2) Можно на канвасе. Но на фоне свг это оверкилл, и его надо юзать только если вы захотите сделать что-то невероятно уникальное с какими-то неприлично крутыми эффектами.
3) Можно на css. Валентин дал ссылку на codrops демку, но есть еще более старая и не менее крутая версия - stackoverflow.com/questions/13132864/creating-a-ra...
Правда там имеются некоторые проблемы, ибо демку с тех пор никто не фиксил, скинул просто для ознакомления с "темной магией".
Так же еще чекните вот это - sarasoueidan.com/tools/circulus
Крутой интрумент от Сары, с помощью которого можно кастомизировать меню как следует. Но оно в плане дизайна не совсем подходит в вашем случае.

Если эта штука будет абсолютно статичной - то делайте картинкой и не парьтесь.
Если хочется чтобы эффекты можно было присобачить - делайте свг.
tympanus.net/Development/TextInputEffects/index2.html - чекните Nao и Shoko, там при фокусе/блюре как раз идет анимация волнистой линии. Правда там линии изначально прямые, а кривая часть спрятана в оверфлоу и видна только во время анимации. У вас по виду так же красиво не получится сделать.

В контроллере, где вы хотите получить этот id, вам надо вставить $routeParams как зависимость, и тогда вы получите id вот так - $routeParams.id