Как структуризировать процесс обучения?
У вас среди вопросов уже был подобный и в нём уже указан приоритет технологий для изучения (ответ).
А Petja указал правильный подход изучения каждой отдельной технологии (ответ)
Я хотел бы раскрыть пункт "4. Практика и еще раз практика, решение множества конкретных задач"
За основу можно взять либо то, что нравится лично, либо то, что востребовано.
Первое - более эффективно, потому что заинтересованность - лучший мотиватор.
Второе - более прагматично, потому что решение существующих проблем лежит в основе всех коммерчески успешных проектов. Зарплату программисты получают тоже именно за то, что решают задачи заказчика.
Для примера были взяты свежие задачи с бирж фрилансеров weblancer.net и fl.ru типа "создать тему к CMS", "сделать посадочную страницу" (landing page) или "разработать сайт-визитку".
Были рассмотрены следующие способы изучения:Повторить работы опытных фрилансеров. Исходные макеты либо не дали, либо они уже отличаются от того, что есть на сайте.Включиться в открытый проект. Проблема в том, что сверстать страницы HTML можно несколькими способами, вплоть до image map или таблиц. А сравнить-то результат вёрстки не с чем. Взять где-нибудь бесплатно или купить шаблон, к которому прилагается макет PSD, изучить свёрстанный вариант и повторить. Это оказался самый эффективный способ. Платные шаблоны делают профессионалы, "вылизывают" их, доводят до совершенства. И бесплатные шаблоны есть очень крутые, но их мало.
Мы использовали шаблоны с templatemonster. Там есть шаблоны под популярные CMS и просто HTML шаблоны. Также позже брали примеры из обзоров (35 примеров прекрасных посадочных страниц...) и повторяли несколько из них. Несложный макет в итоге верстается за сутки.
Это покрывает темы (из указанного же списка): XHTML, HTML4, HTML5CSS2.1, CSS3JavaScript, AjaxjQueryTwitter BootstrapCSS GridsCSS FrameworksProgressive Enhancement, Graceful DegradationResponsive Web DesignCSS Pre-Processors (LESS / Sass)CMS (WordPress, Joomla)Data Formats (JSON, XML)Internationalization / LocalizationImage Editing Tools (Photoshop, Fireworks, etc.)работа со шрифтами
Задачи типовые, а охват тем сразу вот какой обширный. Изучение в интенсивном темпе заняло 2...4 месяца. Профессионалом так быстро не станешь, но на позицию junior уже можно претендовать.
Так что мои советы:
1. Чтобы получить бесценную практику, занимайся реальными вещами, а не учебными примерами
2. Используй опыт профессионалов, чтобы повторять и копировать лучшие решения
Но это не отменяет необходимость изучения учебных примеров. Надо знать, откуда копипастить решения :) Онлайн курсы и правильные статьи очень пригодятся.
Вам надо выучить html и css до какого-то необходимого вам минимума и остановится, полностью переключится на JS. Учить его и применять в своих пусть не самых сложных макетах. А потом уже когда почувствуете нехватку знаний по html и css подтяните их.