Как структуризировать процесс обучения?

У вас среди вопросов уже был подобный и в нём уже указан приоритет технологий для изучения (ответ).

А Petja указал правильный подход изучения каждой отдельной технологии (ответ)

Я хотел бы раскрыть пункт "4. Практика и еще раз практика, решение множества конкретных задач"

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

Для примера были взяты свежие задачи с бирж фрилансеров weblancer.net и fl.ru типа "создать тему к CMS", "сделать посадочную страницу" (landing page) или "разработать сайт-визитку".

Были рассмотрены следующие способы изучения:

1. Повторить работы опытных фрилансеров. Исходные макеты либо не дали, либо они уже отличаются от того, что есть на сайте.
2. Включиться в открытый проект. Проблема в том, что сверстать страницы HTML можно несколькими способами, вплоть до image map или таблиц. А сравнить-то результат вёрстки не с чем.
3. Взять где-нибудь бесплатно или купить шаблон, к которому прилагается макет PSD, изучить свёрстанный вариант и повторить. Это оказался самый эффективный способ. Платные шаблоны делают профессионалы, "вылизывают" их, доводят до совершенства. И бесплатные шаблоны есть очень крутые, но их мало.

Мы использовали шаблоны с templatemonster. Там есть шаблоны под популярные CMS и просто HTML шаблоны. Также позже брали примеры из обзоров (35 примеров прекрасных посадочных страниц...) и повторяли несколько из них. Несложный макет в итоге верстается за сутки.

Это покрывает темы (из указанного же списка):

• XHTML, HTML4, HTML5
• CSS2.1, CSS3
• JavaScript, Ajax
• jQuery
• Twitter Bootstrap
• CSS Grids
• CSS Frameworks
• Progressive Enhancement, Graceful Degradation
• Responsive Web Design
• CSS Pre-Processors (LESS / Sass)
• CMS (WordPress, Joomla)
• Data Formats (JSON, XML)
• Internationalization / Localization
• Image Editing Tools (Photoshop, Fireworks, etc.)
• работа со шрифтами

Задачи типовые, а охват тем сразу вот какой обширный. Изучение в интенсивном темпе заняло 2...4 месяца. Профессионалом так быстро не станешь, но на позицию junior уже можно претендовать.

Так что мои советы:
1. Чтобы получить бесценную практику, занимайся реальными вещами, а не учебными примерами
2. Используй опыт профессионалов, чтобы повторять и копировать лучшие решения

Но это не отменяет необходимость изучения учебных примеров. Надо знать, откуда копипастить решения :) Онлайн курсы и правильные статьи очень пригодятся.

Я для себя выработал такой алгоритм:
Если мне надо изучить технологию
1) Выбираю по отзывам чтиво: книгу или документацию
2) Читаю ее, не вдумываясь, просто чтобы прочесть и ориентироваться потом что там, примерно, где написано
3) Теоретическое обучение продолжать смысла нет, делаю работу по этой технологии, заглядывая в книгу или документацию, "гугля" отдельные моменты
4) Практика и еще раз практика, решение множества конкретных задач - есть единственный путь к профессионализму...

Нужно знать css синтаксис, различия между display:inline, display:inline-block, display: block, display: flex-box. Так же нужно понимать что такое общий поток эллементов, что происходит когда вы ставите на элемент float:left/right, position:absolute/fixed/relative и т.д. Естественно просто знать что это все и для чего. Те же флексбоксы досканально знать не обязательно, достаточно знать только то, какие проблемы оно решает.

А все остальное - это так... украшательства. Даже не особо стоит вдаваться в нюансы как это все в разных браузерах работает, это проще в процессе постигать.

Знание этого всего больше относятся к DOM и тому, как с ним работать, так что и в изучении JS должно хоть сколько нибудь помочь.

Я скажу вам так: даже если вы изучите все существующие на свете книги по самым лучшим методологиям, практического опыта вам не заменит ничего. Теоретические знания - это важно, они предотвращают большую часть говнокода. Особенно в этом помогают шаблоны проектирования. Но вопрос был немного не в этом, поэтому возвращаюсь к теме: я бы рекомендовал вам купить подписку на ресурсы а-ля codeschool и т.п., такие ресурсы помогают получить правильную базу. Как ни крутите, но лучший расклад - это "знать по чуть-чуть", на большее вы не сможете рассчитывать в первое время. Я искрине желаю вам удачи, и верю, что у вас всё получится!

Вам надо выучить html и css до какого-то необходимого вам минимума и остановится, полностью переключится на JS. Учить его и применять в своих пусть не самых сложных макетах. А потом уже когда почувствуете нехватку знаний по html и css подтяните их.

А я не соглашусь, можно быть верстальщиком не зная js, php , я например их не знаю, только учу, но работаю уже, но нужно уметь работать с CMS, плагинами, ставить свою верстку на движки, делать их изменяемыми, писать админку для того чтобы шаблон изменялся, слайдеры и прочую анимацию, благо есть решения в интернете, главное правильно искать, вот когда вы этому всему научитесь, то тогда можно изучать и php и js, для реализации того, чего не реализовано, а так в прицнипе все стандартное можно сделать из готового, главное знать что и где и каК)

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

Я бы посоветовал codeacademy.com
Там есть курс и по js, начиная с азов, и по jquery, с применением html/css/js.
Советую потому, что в курсах очень последовательно объясняется материал, это куда лучше чем искать информацию отрывками. Ну и в отличии от книг идет проверка усвоенного материала.

Думаю, лучше будет набраться стартового скилла, что бы устроится на работу. А дальше уже в процессе двигаться. Адаптивная вёрстка не везде используется. Попробуйте поискать тестовые задания, дизайны и попробовать их самостоятельно отверстать.
Поискать самые сочные и трендовые дизайны можно тут dribbble.com/shots

JS не обязателен для начинающего верстака.
Знания JS'a это уже больше frond-end разработка. А там уже глубокие задачи которые чаще всего, на РФ рынке, делаются back-end разработчиками (программистами). У нас джуниор верстаки JS вообще не трогают. В основном только стилизируют плагины под дизайн. А так как плагины используются известные, то за пару часов легко находятся гайды по тому что и как стилизировать.