Как правильно изучать верстку c переходом на front-end?
HTML5&CSS3, в любом случае самое первое, что стоит изучить. Html Book - неплохой вариант, для новичка, но всё же в идеале оф. сайт консорциума с документацией www.w3.org
Думаю, для хорошего верстальщика и front-end developer'a важно понимать "кухню". 
Есть не плохая книга, мне лично очень нравится, Джон Дакетт "HTML и CSS". Книга не из дешевых, но лично мне очень помогла в изучение основ. 
Далее, опять таки на мой взгляд, хотя бы на уровне синтаксиса - изучить JavaScript. Пока не говорю, про библиотеку JQuery. Но она по сути, важна. Книга - Бер Биро, Иегуда Кац "Подробное руководство по продвинутому JavaScript".
В плане опыта, тут уж наверное понятно, верстать и еще раз верстать, по мере решения определенных задач растет скилл, так сказать. Умение искать ответ в Google тоже немаловажный навык. 
Хороший способ изучать чужой код и искать объяснение тому или иному действию. Лучше всего, код тех сайтов, которые действительно хорошо сделаны..
Свой код после верстки, можно проверить на валидаторе оф. сайта консорциума. Просто нужно вставить ссылку туда на свой сайт и он анализирует. 
На YouTube, есть видеоуроки по многим направлениям. Из самых крутых на мой взгляд, Sorax
В целом терпение и желание именно заниматься версткой и front-end. Удачи )
Изучайте работу с HTML5-объектами и учитесь грамотно кодировать на нативном JS.
После этого - по-мере необходимости используйте библиотеки.
Библиотеку jquery используйте ИСКЛЮЧИТЕЛЬНО! после того как освоите нативный кодинг более-менее.