8 шагов организации процесса обучения веб-технологиям

Восемь шагов, как грамотно подойти к процессу самостоятельного обучения веб-технологиям.

Кратко: верь, направление, ограничь, литература, не застревай, практика, действуй, целостность.

1 Верь в себя
Будь уверен в себе и знай, что у тебя все получится. Не только потому, что это правда, но и потому, что вера в силу своего интеллекта действительно увеличивает его.

2 Выбери направление
Ориентироваться можно либо на свои желания, либо на востребованность. Востребованность можно изучить по новым заявкам на биржах фрилансеров (odesk.com) и по вакансиям на должности веб-разработчика.
3 Ограничь список технологий
Выдели небольшой список технологий, которые будешь изучать за один раз. Список технологий можно найти в требованиям к вакансиям на должности веб-разработчика. И в задачах для фрилансеров.
Если есть желание что-то сделать, но не известно какими технологиями это делается — воспользуйся сервисами ответов toster.ru, hashcode.ru, stackoverflow.com — сначала поищи аналогичные вопросы, а если не найдёшь — задай свой. Или спроси меня.

4 Подбери учебные материалы
Поисковые системы позволят найти книги и документацию. Ищи отзывы к книгам. Найди фрагмент книги, оцени понятность или сложность. Спроси специалистов — есть ли книга и документация лучше той, что ты нашёл. Возможно, потребуется предварительно изучить что-то более простое. Например, прежде чем написать плагин для Angular.js, нужно изучить javascript.

5 Не застревай на учебных материалах
Первым этапом проглоти книгу или документацию как можно быстрее, чтобы иметь возможность ориентироваться в том, что там написано. Некоторым достаточно запомнить оглавление, а некоторым — глоссарий в конце книги. Я, например, не помню содержимое главы «Знакомьтесь — Pyrus» из книги «PHP. Объекты, шаблоны и методики программирования (PHP: Objects, Patterns, and Practice)» (Мэт Зандстра), но помню, что это про установку пакетов расширений PEAR (это для PHP), и знаю что есть чужие полезные библиотеки функций, которые можно подключить в свой проект и знаю, где прочитать, когда потребуется их подключить.
Может и звучит как шутка, но книга в туалете ускоряет прочтение 🙂 Это факт, подтверждённый практикой многих экспериментаторов.
6 Закрепи на практике
Теоретическое обучение продолжать смысла нет, надо делать практические работы по этой технологии.

• Проверь. Проверь всё. Закодируй и проверь ВСЕ учебные примеры, заглядывая в книгу или в документацию, «гугля» отдельные моменты.
  Поверь — не все примеры авторов работают правильно и им нельзя верить на 100%.
  • Во-первых, из-за авторских опечаток.
  • Во-вторых, из-за разницы в версиях. Например, код из книги по языку Python 2.6 будет работать иначе в современной версии интерпретатора Python 3.3.
  • В-третьих, если ты читаешь электронный вариант книги, который был отсканирован и распознан с печатной версии, то в примерах программного кода значительное количество ошибок распознавания отдельных букв, которые ведут к ошибкам. Например, в примерах Python часто ошибаются в количестве отступов слева в каждой строке, пропускают запятые, заменяют двоеточие «:» на букву «i».
• Сломай и почини. Сломай пример кода из книги или документации, исполни его и разберись, как именно и почему он стал работать не так, как было. Попроси коллегу, друга или члена семьи испортить код в двух-трёх местах. Не пользуясь подсказками среды разработки (например, открой код в простом текстом редакторе без подсветки синтаксиса), найди и исправь ошибки.
• Пойми и объясни. Открой произвольный пример кода из книги, документации и построчно расскажи своими словам, что он делает. Вслух, сам себе или коллеге. Эта практика пригодится, я даю гарантию на 200%. Понимать чужой программный код — это, пожалуй, одна из самых важных задач в программировании. Потому что прежде чем что-то делать, надо понять, что уже сделано или где сделано неправильно. А чтобы получить помощь в проблемной ситуации, надо уметь описать, что ты хотел сделать и что уже попробовал сделать сам. Иначе часто будут отвечать в духе «извините, наш штатный телепат в отпуске».

Примени широко известный метод утёнка — возьми себе игрушку и рассказывай о всех проблемах ей. Считается, что правильная формулировка вопроса содержит как минимум половину ответа, а также это дает толчок мыслям, направляя их в нужное русло. У программистов проговаривание алгоритма вслух позволяет воспроизвести его действие и, возможно, натолкнуться на ошибку. Mail.RU создал виртуального интерактивного утёнка-собеседника для тех, кто стесняется держать утёнка на столе. Есть некоторые виды гаджетов, которые на столе программиста смотрятся вполне уместно.

В своих менторских программах я предлагаю использовать диктофон или рассказывать мне по скайпу. Если захочется — буду жизнерадостно крякать
🙂 Кря!

7 Действуй
Цель обучения не в том, чтобы знать, а в том, чтобы действовать. Практика и еще раз практика, решение множества конкретных задач — это и есть единственный путь к профессионализму.

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

К примеру, для закрепления знаний по веб-технологиям, которые относятся к задачам верстальщика, были взяты задачи с бирж фрилансеров weblancer.net и fl.ru на тему «создать тему к CMS», «сделать посадочную страницу» или «сделать сайт-визитку».

Были рассмотрены следующие способы:
1. Повторить работы опытных фрилансеров. Я просил у них макет PSD для какого-нибудь уже готового красивого сайта. В результате либо макета уже нет, либо он не соответствует текущей версии сайта.
2. Включиться в работу по проекту как один из кандидатов. А через некоторое время посмотреть на сайте заказчика, как это было решено. Проблема оказалась в том, что можно несколькими способами сверстать страницы HTML «пиксел-в-пиксел» похожие на макет, вплоть до image map или таблиц. Но образец для сравнения может появиться через неделю или даже месяц, когда они будут выставлены на сайте заказчика. Это слишком долго. И не факт, что в этом «образце» не окажется не современная табличная вёрстка.
3. Взять где-нибудь бесплатно или купить тему для выбранной CMS (например, на templatemonster), изучить свёрстанный вариант и повторить. Это оказался самый эффективный способ. Там и кроссбраузерная вёрстка, и responsevice, и grasefull degradation, удобный набор javascript, а в очень крутых темах ещё и с десяток дополнений к wordpress в составе темы — заодно и в PHP попрактиковаться можно.
4. Примеры посадочных страниц брали в templatemonster из раздела «HTML шаблоны», а позже из обзоров (пример: 35 примеров прекрасных посадочных страниц…) и повторяли несколько из них.

8 Связывай с уже имеющимися знаниями
Если можешь мысленно связать свои знания с тем, что уже выучил раньше, это поможет более быстро и эффективно учиться. Не оставляй знания обособленно — встраивай их в большую картину мира, которая есть в твоём воображении. Воображение — уникальная способность человека, позволяет строить абстракции и понимать непонятное.