У вас среди вопросов уже был подобный и в нём уже указан приоритет технологий для изучения (
ответ).
А
Petja указал правильный подход изучения каждой отдельной технологии (
ответ)
Я хотел бы раскрыть пункт "4. Практика и еще раз практика, решение множества конкретных задач"
За основу можно взять либо то, что нравится лично, либо то, что востребовано.
Первое - более эффективно, потому что заинтересованность - лучший мотиватор.
Второе - более прагматично, потому что решение существующих проблем лежит в основе всех коммерчески успешных проектов. Зарплату программисты получают тоже именно за то, что решают задачи заказчика.
Для примера были взяты свежие задачи с бирж фрилансеров weblancer.net и fl.ru типа "создать тему к CMS", "сделать посадочную страницу" (landing page) или "разработать сайт-визитку".
Были рассмотрены следующие способы изучения:
- Повторить работы опытных фрилансеров. Исходные макеты либо не дали, либо они уже отличаются от того, что есть на сайте.
- Включиться в открытый проект. Проблема в том, что сверстать страницы HTML можно несколькими способами, вплоть до image map или таблиц. А сравнить-то результат вёрстки не с чем.
- Взять где-нибудь бесплатно или купить шаблон, к которому прилагается макет 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. Используй опыт профессионалов, чтобы повторять и копировать лучшие решения
Но это не отменяет необходимость изучения учебных примеров. Надо знать, откуда копипастить решения :) Онлайн курсы и правильные статьи очень пригодятся.
