Самый эффективный и быстрый способ это отдать денежку LoftSchool за обучение и пройти курс по верстке. Это будет самое эффективное. Проверено на личном опыте ;)
Но если идти по бесплатном пути, то путь будет долгим и тут главное правильно его составить.
Первое, что нужно понять - принципы работа браузера(и движок, на котором он работает). Это поможет в понимании при написании префиксов для кроссбраузерной верстки.
Дальше же стоит взять за понимание протоколов, IP-адресов и DNS. Также понять как отправляются запросы на сервер и чем отличается frontend от backend.
Это самые азы. Я лично читал очень хорошую книгу, которая раскрывает эти понятия, но она для full stack разработки. Называется "Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 3-е изд". От того же издателя есть много хороших книг по верстке. В общем, на любой вкус найдется.
Следующим делом нужно приступать уже к делу. Нужно знать для начала несколько технологий:
1) HTML/HTML5 - основа основ, без которой сайта и быть не может. Данный язык можно учить на сайте htmlbooks, либо посмотреть уроки на ютубе от того же Гоши Дудоря. Довольно неплохо рассказывает, но очень мало и придется все-равно добить все новые теги самостоятельно.
2) CSS/CSS3 - если нужна визуальная часть для сайта, то тебе точно сюда. А с приходом CSS3 за анимацией тоже можно обращаться без всяких там скриптов буржуйских. Можно также пройти по htmlbooks, либо заглянуть к Дударю на канал. В обязательном порядке советую изучить ванильный CSS и к нему на вооружение взять препроцессор SASS. SASS невероятно облегчает и ускоряет работу. У меня до сих пор от него один лишь восторг.
3) JavaScript(EcmaScript) - изюминка любого сайта, ведь за обработку событий отвечает именно JavaScript. Вывести окошки при клике? К JS! Отправить AJAX запрос на сервер? Тоже к JS. Без него в наше время никуда. Дефолтный js может навеять тоски, поэтому после его изучения сразу же нужно цепляться за jQuery, либо идти еще выше и присмотреть себе какой-нибудь React JS со всеми вытекающими. Но самый главный подарок, который тебе будет как раз к стати от JS - Node.JS. Эта невероятная платформа, с которой я не слажу вот уже пол года. Обязательно к изучению азы Node.Js и для верстки возьми себе либо Gulp, либо Grant и радуйся жизни. Gulp и Grant - сборщики проектов. В них на языке JS можно записать задачи, которые будут выполнять в последствии при обычном запуске приложения через командную строку. К примеру, нужно конкатенировать css файлы и перебросить в продакшн? Да не вопрос, три строчки и они там. Это отличная вещь, но для начала нужно будет пройтись по командной строке - создание файлов, бег по директориям и, конечно же, менеджеры пакетов. Про все это уже тебе расскажет документация, либо рассказчик, когда будешь изучать Ноду(Node.JS).
Это самый основной набор, который позволяет быстро и качественно верстать. В дополнение добавлю Git. Зачем он нужен? Да что бы хранить все свои работы на удаленном репозитории и свободно с ними взаимодействовать. Очень часто работодатель просит ссылку на репозиторий или портфолио. Умение работать с git всегда будет плюсом.
В общем, вот так вот. Максимально коротко расписал мою профессию) Удачи в начинаниях.
Средний
