Фронтенд для новичка. Куда идти и что делать?
Всем привет!
Данная статья возникла по мотивам моего доклада на wsd в Минске 29 октября и по большей части дублирует видео с выступления с той разницей, что некоторые моменты я решила уточнить, развернуть. Кроме того, добавлено еще несколько ссылок.
Статья не претендует на оригинальность тезисов: речь скорее об объединении в единый текст массы витающих в воздухе идей.
Важным моментом является то, что я сама — тоже новичок. Я закончила два базовых интенсива HTML Academy — один в августе этого года, а второй закончился буквально вчера. Кроме того, я еще удаленно учусь веб-дизайну, тоже с нуля. Поэтому вторым названием моего доклада было: «19 советов от новичка к новичку». Сейчас я уже думаю, что речь идет не о 19 советах, а о 6 гранях обучения, но суть та же — я новичок и предполагается, что вы помните об этом до конца статьи.
Надеюсь, статья пригодится не только начинающим, но и наставникам, хотя бы как пример обратной связи. Я также приветствую дискуссию по поводу содержания статьи, так как полагаю, что, по крайней мере, некоторые пункты требуют дополнения, обсуждения и прояснения.
Ссылки в статье не носят исчерпывающий характер. Это значит, что если вас заинтересовал какой-либо пункт — поищите еще, обязательно найдете еще не менее пары-тройки интересных и полезных ссылок, которых тут нет.
Итак, что первое рекомендуют новичку, который задался вопросом «с чего начать»?
1. Абсолютные очевидности
Существует некий список совершенно стандартных рекомендаций в духе капитана Очевидность. Собственно, даже если Вы лишь недавно начали самообучение, то уже почти наверняка слышали о них. Но на случай, если моя статья Вам попалась одной из первых, расскажу подробней о том, что советуют в первую очередь.
Ну, во-первых, обычно предлагают длинный список необходимых навыков и ссылки на курсы, каналы на youtube и онлайн-уроки. Вот, например, две хороших статьи-подборки:
· Как HTML-верстальщику поднять свой уровень. Алексей Крекотун;
· Практическое руководство для тех, кто хочет стать профессиональным веб-разработчиком. Майя Яровая;
Курсы — это очень хорошая рекомендация: курсы дают структурированные знания. Каналы на ютубе также хороши. Однако, стоит помнить, что, как правило, программу курсов разрабатывает несколько человек, а канал на ютубе обычно ведется кем-то одним. Реже как основу для программы самообучения рекомендуют от начала до конца пройти какую-либо ликбезную книгу, но и такое бывает.
Курсы и каналы также могут быть хорошим подспорьем наставнику, т.к. позволяют обучать азам новичков, не тратя свое время впустую.
· Курсы HTML Academy для всех, где бы вы не находились;
· Курсы Epic Skills для тех, кто по вечерам свободен в Санкт-Петербурге и готов куда-то идти;
· Канал Sorax’a на youtube с обучающими видео-курсами;
Потом распространенной рекомендацией является призыв читать хорошие новостные ленты, блоги и слушать хорошие подкасты. Мол, окружи себя средой. Это тоже отлично, и, как правило, отлично для любого уровня.
Еще один совет — вести свой блог. Ведение блога о верстке предполагает, что учащийся вынужден постоянно собирать, анализировать и проверять информацию, которую предлагает читателям. Разумеется, этот вариант хорош только в случае, если ваше желание сделать хороший материал значительно больше желания вести блог ради блога.
· Веб-стандарты — новости фронтенда без ерунды в виде статей, видео и массы прекрасных материалов;
· Подкаст Веб-стандартов — новости фронтенда без ерунды в аудио-формате;
· Хабрахабр — статьи, много-много статей. Просто загляните сюда;
· Htmlbook — cайт о HTML, CSS, веб-дизайне, графике и процессе создания сайтов. Своего рода справочник по фронтенду;
· Сss-live — жизнь во фронтенде;
· Про CSS — сайт для влюбленных в css;
Работа с кодом. Наконец, есть группа распространенных советов по работе с кодом. Например, действительно очень полезно верстать от начала до конца — новички часто «залипают» на первом макете, впадая в перфекционизм и прокрастинацию. Эти два недуга принципиально важно научиться преодолевать (об этом, кстати, подробнее будет сказано ниже).
Полезно также почаще смотреть на чужой код и разбираться, что и как делают другие люди. Будьте осторожны: отнюдь не все, что делают другие верстальщики действительно достойно подражания. Скорее, речь о том, чтобы понимать, как и что может работать, хотя и не факт, что этому чему-то действительно стоит так выглядеть.
Действенно и обратное: хорошей практикой будут попытки скопировать чужие находки, не подглядывая в код. Т.е. если вы видите интересное решение с анимацией кнопки, выпаданием меню или работой с фоном, попробуйте сделать хотя бы приблизительно то же, что видите. Безусловно, этот совет предполагает, что вы уже в целом в курсе многих вещей. Но также правда и в том, что такая тренировка заставит вас мобилизовать свои познания, быть активным, самостоятельно писать, а не копировать.
· CodePen — например, тут можно искать интересные примеры отдельных элементов страницы, которые может быть полезно изучить;
Еще один способ работы, который я встречала, — рекомендация исправлять чужие ошибки. Т.е. попробуйте взять какую-либо страницу в сети и переделать ее «чтоб было нормально».
Также рекомендуют начать свой проект. Сделайте сайт для своей бабушки! Или тетушки. Тут главное помнить, что если у вас нет макета для такого сайта и\или художественно-дизайнерского образования, то, скорее всего, вам может не понравиться результат. Но работа над своим проектом позволяет задать те вопросы, которые бы не возникли вовсе, работайте вы исключительно над разжеванными учебными материалами.
Постоянно расти. Тут все очевидно, таков закон «джунглей». Кроме того, непрерывность обучения не дает забыть, растерять приобретенные ранее навыки в паузах.
Итак, это самые топовые советы новичку, которые я встречала — «пройди курсы», «верстай как чёрт», «читай правильное» и так далее. Вроде с ними все отлично, но что-то не так. Какие важные моменты остаются за кадром?
2. Где взять буйки, чтобы за них не заплывать?
Не знаю, как вы, а я потонула в первый момент в потоках информации. И это первая глобальная проблема. Возникает вопрос: как отличить условно и не условно плохие материалы от действительно хороших? Для себя я нашла четыре решения, которые мне помогают фильтровать материал.
Учите в первую очередь назубок основы — html, css и js. Это значит, в частности, что less, sass, фреймворки (да, Bootstrap) и библиотеки Java Script не изучаются в первую очередь. Они второстепенны. Почему так? Ну, очевидно — все эти классные и удобные инструменты возникли как решения каких-то конкретных проблем на основе вышеозначенной триады. Зная основы, лучше пользуешься вспомогашками и лучше понимаешь, что именно тебе сейчас нужно. Не знаешь основ — не понимаешь контекста, не понимаешь, как работает, имеешь меньший контроль над работой.
Второй способ не утонуть в материалах — смотреть вакансии и резюме. Понимание того, что реально нужно работодателю позволяет получить представление о том, как лучше выстроить программу самообучения. Но не смотрите только вакансии — часто заказчики не отличают дизайнера от верстальщика, верстальщика от Js-программиста и т.д. Смотрите и резюме — они тоже дают ценную информацию к размышлению. + такие просмотры вам помогут освоить как стоит и как не стоит оформлять свое резюме. И да, хорошая практика держать перед глазами какие-то особо вдохновляющие примеры резюме и вакансий — у меня так, например, в закладках лежит пара примеров как мест, где я бы хотела работать, так и резюме людей, о которых я полагаю, что они молодцы. Меня такое постоянное напоминание о цели мотивирует учиться.
· HeadHunter — место, где ищут и предлагают работу;
· SuperJob. Стажировки — для тех, у кого мало опыта;
Третий совет для «тонущих» — ориентироваться на стайлгайды\кодгайды. Дело в том, что когда вы смотрите на youtube курс Васи Петичкина, вы видите версию работы с кодом Васи Петичкина, а кодгайды возникают в командах, там, где не один человек сам для себя решает как ему удобней работать, а группа людей организует свою работу хорошо.
· Кодгайд: почему, зачем и как? Алексей Симоненко;
Ну и четвертый — существуют веб-стандарты. Не ленитесь читать документацию! Кроме того, не совершать глупостей могут помочь валидаторы.
· W3C — Консорциум Всемирной паутины, спецификации css и html;
· Mozilla. Документация по JavaScript;
Итак, мы вооружились информацией и ориентирами. Чего еще не хватает?
3. Здравого смысла не хватает.
Сейчас поясню, о чем я.
Очень часто в рекламе не очень качественных обучающих программ можно встретить слова «просто», «быстро» и «легко». Это такие слова-ловушки: всем нам хочется все быстренько освоить и быть молодцами, и вот на эту-то мечту такие пассажи нас и ловят. Но правда в том, что так не бывает. Ну не станете вы программистом за две недели. Нет. И верстальщиком хорошим за неделю. И нельзя познать веб за час (а мне такое предлагали). Это не может быть быстро просто потому, что большая скорость изучения предполагает или поверхностность, или переизбыток информации, которую еще необходимо будет усвоить.
Если вы — наставник и пишете свой курс, то не впадайте в иллюзию: быстро, просто и легко все-таки при нормальном варианте обучения быть не может. Может быть интересно? Да. Трудно, но в меру? Да. Обязательно будут сильно мотивированные ученики, но основная масса будет медленнее, чем вы ожидаете, и им будет труднее, чем вы ожидаете. И это нормально.
Есть еще пара моментов, в которых новичка порой переклинивает.
Во-первых, «в пути разберусь». Это когда новичок берет заказ, пройдя пару курсов в сети и его первый макет — его же первый заказ. Это зло. Серьезно, не делайте так! Работая с заказчиком, не стоит на нем тренироваться. Вряд ли вы познаете добро, спешно клепая проект в сроки — разве что научитесь делать быстро и плохо. Правда состоит в том, что работодатель ждет от вас качественной работы и способен влиять на вашу профессиональную репутацию. Тренировать навыки лучше в благотворительных проектах и своих личных.
Во-вторых, «и так сойдет!». Это когда в учебном или рабочем проекте не доделывается то, что стоит доделать, если размышлять трезво. Работа сдается в целом живой, но страшненькой.
Иногда такое отношение может быть полезно (нет перфекционизму!), но не когда это ключевой принцип в работе. И уж тем более этот подход плох, если вы новичок: скорее всего, забрасываются проблемные для вас точки, например, если вы не разобрались со вкусом с css-анимацией, то высока вероятность, что именно на нее у вас вечно не будет хватать времени и сил.
Наставникам стоит учесть, что оба зверя могут возникать по их вине в том числе. Возможно, стоит давать ученикам обратную связь относительно того, готовы ли они к заказам или нет. Возможно, стоит сбросить скорость обучения, если появилась небрежность. А может быть, наоборот, ученику предъявляется слишком мало и он скидывает планку. Подумайте, можно решить такие проблемы, поменяв модель обучения. Помните, что вы можете в таких ситуациях влиять на своих учеников.
Ну и, наконец, еще противник здравого смысла — переутомление разного рода. Оно тоже родом из спешки, но могут быть и другие причины. Очень часто новички бросаются грудью на амбразуру, чтобы очень быстро перегореть. Нет смысла учиться на износ: работа на грани возможного продуктивна лишь короткими периодами, как адреналиновая встряска, но не как стиль жизни. Отдыхайте! Крепкий полноценный сон, здоровая еда, забота о здоровье — это те факторы, которые реально помогают вам лидировать.
· К чему приводит недостаток сна. Ирина Баранская — душеспасительное чтение, мотивирующее высыпаться;
4. «Лэт ми спик фром май харт!»
И есть еще одна проблемная точка — английский язык. Эта проблема тем менее очевидна, чем больше становится ресурсов по веб-разработке на русском языке. Правда состоит в том, что на английском языке материалов гораздо больше и, что важно, документация тоже на английском языке. Кроме того, английский — язык международного общения. Если вы не хотите ограничивать свою карьеру, если хотите работать не только в России и не только с соотечественниками — учите язык. И в первую очередь учитесь читать.
Изучение английского языка для любой профессии можно разделить на два параллельных потока. Первый поток — это изучение грамматики и общей лексики. Второй поток — изучение специальной лексики и необходимых для вашей области специфических языковых навыков (например, далеко не всем необходимо уметь грамотно вести деловую переписку или составлять ТЗ на английском).
С первым потоком все просто: подойдут фактически любые общие курсы и учебники. Ну, например, вот такие:
· Грамматика. Сборник упражнений. Ю. Голицинский;
· Spoken English. Пособие по разговорной речи. Ю. Голицинский;
· English Grammar. Reference & Practice. Version 2.0. А. Берестова, Т. Дроздова и др.;
· Everyday English. А. Берестова, Т. Дроздова и др.;
А что касается наращивания специальной лексики, то тут пока я надумала для себя вот такие варианты:
1) есть учебники, ориентированные на IT. Можно заниматься по таким учебникам как, например, English for Information Technology; но учтите, что, как правило, в таких учебниках много того, что вам может и не пригодиться, так как рассматривается лексика, касающаяся не только фронтенда. И потом, если учебник свежий, то он неминуемо очень дорогой, а если старый — то вы вряд ли почерпнете из него актуальную для вас лексику;
2) пересмотреть курсы по тому, что вы уже знаете, на английском языке. Как это работает? Если вы уже неплохо освоили css и html, то маловероятно, что вы совершенно ничего не поймете из звучащего в англоязычном курсе по основам css и html. Берите курсы с возможностью подключения субтитров, чтобы, если что, гуглить незнакомые слова, и смотрите. Почти наверняка к концу курса вы запомните, как и что называется и пишется. Кроме того, не исключено, что в курсе будет что-то еще не знакомое вам и в техническом плане, да и повторение — мать учения, поэтому эта авантюра будет точно не зря.
· Khan Academy;
· Udemy;
· Codecademy;
3) читать интересные и приятные материалы. Интерес подстегнет вас читать, не смотря на страх увязнуть в языке. Например, загляните сюда:
· Lea Verou;
5. Окружение
Этот пункт о том, как могут реальные люди повлиять на ваш успех в самообучении и обучении.
Самое главное, что есть в этом вопросе — нам всем нужно код-ревью. Как бы сильно вам не казалось, что вы верстаете как бог, — нужен сторонний взгляд на ваш код. В своем глазу сложно заметить бревно, глаза имеют свойство замыливаться, а некоторые практики кажутся нам бесподобными только в силу малого опыта. Код-ревью необходимо просто потому, что вы знаете не все.
И первое, что приходит в голову — нужен тут человек, у которого опыта больше, чем у вас. Наставник, например.
Наставник. Давайте я немного нарушу традицию хвалебных пассажей в адрес наставников и скажу прозаическую вещь: наставник — это человек из плоти и костей, который знает, умеет и трогал больше вашего в данной области и готов с вами этим опытом делиться и делится. Я пойду дальше — если вы нашли себе наставника, то это не значит, что вы автоматически стали гуру верстки или у вас появилась такая гарантия. Это значит, что просто у вас есть контакты человека, который не против что-то вам сообщить новое или указать на ошибки.
Важно еще понимать, что один из ключевых моментов — это ваша симпатия к этому человеку. Не тратьте время человека, который вам глубоко не симпатичен: продуктивная учеба не очень часто получается при таких взаимоотношениях.
Тут много разных моментов, но постарайтесь осознать крепче иного следующее: наставник не гуру, не волшебник и не спаситель. Возможно даже, что вы можете обойтись без него.
А наставникам полезно помнить, что когда вы учите, то вам важно не только хорошо разбираться в своей области, но и уже иметь навыки преподавания или честно наращивать их. Быть профи в преподаваемой теме порой не достаточно при работе с новичками.
Но тут есть и другая сторона вопроса. Постарайтесь быть хорошим учеником — соблюдать договоренности, не быть назойливым, четко обговорите условия сотрудничества. Уважайте наставника. Уточните, что именно получает наставник от процесса обучения, возможно, вы можете быть полезны своей обратной связью. Помните, что наставник не всесилен и, что очень важно, не очень много вам должен.
Подробнее о теме “наставник-новичок” читайте и смотрите:
· Максим Усачев. Путь верстальщика;
· Алёна Батицкая. Профи < Новичок;
· Максим Усачев. Путь наставника;
Новичку также хорошо иметь связь с «одноуровневыми» будущими коллегами. Тут смысл заключается в том, что вы сами можете попробовать проводить код-ревью друг другу — это проще, чем «взрослый» код, да и менее страшно. В процессе вырабатывается навык искать ошибки, общаться о них. Но помните, что, когда вы проверяете такого же новичка как вы, или вас проверяет новичок, то речь не о настоящей полноценной проверке.
Кроме того, между «одноуровневыми» новичками может возникнуть здоровая конкуренция, подстегивающая вас в учебе, ведь довольно грустно учиться в среде, где вообще все, кроме вас, круче и уже давно забыли как это — быть новичком.
Есть и еще один бонус. Сколько бы я не писала «одноуровневый», «одинаковый по уровню» и прочее, все равно, вероятность того, что ваши познания с другим новичком совпадут, стремится к нулю. Ваш собеседник почти наверняка будет знать не меньше 10 обучающих ресурсов, книг или каналов, о которых вы не слышали; будет уметь совершенно не то, что умеете вы; ваши «слабые места» будут не совпадать. Следовательно, вполне возможен осторожный обмен информацией со скидкой на то, что есть вероятность наткнуться на не очень качественные материалы.
Наставники! Возможно, стоит знакомить учеников между собой по всем вышеперечисленным причинам.
Еще может быть полезным познакомиться с людьми из смежных областей. По трем причинам: можно познать детали того, что будут делать с результатом вашей работы другие люди, можно узнать как создается то, с чем вы работаете, и можно обрасти ценными контактами.
1)Что будут делать с результатом вашей работы другие люди. Цель вашей верстки — не просто сверстать как получится, а сверстать так, чтобы было возможно работать с вашей версткой в дальнейшем.
2)Как создается то, с чем вы работаете. Я про макет, если речь идет о верстке. Иметь представление о работе веб-дизайнера хорошо хотя бы ради того, чтобы избавится от ложных стереотипов типа «да такое каждый может нарисовать», «он ничего не делает, просто рисует» и тому подобных.
3)Обрасти ценными контактами. Тут все очевидно — сейчас вы учитесь и мало что умеете, но, возможно, в перспективе к вам может прийти со стороны этих людей предложение о работе или наоборот, вы будете рады пригласить в свою компанию хорошо знакомых вам специалистов, с которыми у вас уже налажен хороший контакт.
Помимо наставников, людей одного с вами уровня и людей, осваивающих и освоивших смежные области, может быть полезно иметь перед глазами вдохновляющие примеры. Например, это может быть человек, поразивший вас силой духа, трудолюбием или своей философией. Или человек, резюме которого для вас служит воодушевляющим ориентиром. Или автор наиболее ценных для вас учебных материалов. Не важно. Главное — ваша личная заинтересованность личностью человека и ваше желание повторить за ним какие-то его шаги в жизни.
· Виталий Колесник. Фила. — один из примеров того, чем может быть полезны лично для вас вдохновляющие примеры;
6. Неочевидности
Ну и, наконец, есть ряд неочевидных навыков, которые так же могут вам помочь.
Во-первых, это знакомство с логикой. Если человек слабо дружит с логикой, то ему сложнее находить ошибки, находить решения ошибок, задавать вопросы. Такому человеку просто труднее соображать. Причем в любой сфере. Тут поможет любой учебник логики.
· Краткий курс логики: Искусство правильного мышления. Дмитрий Гусев;
Во-вторых, вам не помешает знакомство с математикой. Если вы прибыли во фронтенд из края счастливых гуманитариев и ваших познаниях в алгебре есть серьезные пробелы, то я вас огорчу: придется вспомнить про то, что такое синусы, косинусы и логарифмы. Это будет полезно и сильно поможет вам.
В-третьих, умение задавать вопросы. Тут речь не только о навыке вообще верно сформулировать запрос в гугл, но и еще и о смелости выставить себя «идиотом», но спросить у окружающих, что да как. Это едва ли не ключевой навык, он развивается не только логикой, но и работой над собой.
· Как правильно вести себя на новой работе. 10 вредных советов. Алена Батицкая — смешные слайды к докладу о том, как важно задавать вопросы;
Кстати, если вас мучает проблема того, что вам как-то неловко спрашивать, или вы прокрастинируете, или не заботитесь о себе, или мало просите за свою работу, или постоянно конфликтуете с начальством, или вы перфекционист, то… Вам нужен психолог. Это совершенно неочевидно, но все эти проблемы — классические запросы к специалисту, просто мало кто знает, что психологи и с этим работают. Можно также попробовать решить часть проблем самостоятельно, с помощью книг. Но если вы видите, что проблема скорее связана не техническими моментами работы, а с вашей личностью или окружающими людьми, а также понимаете, что время идет, а проблема не уходит, то действительно есть смысл поискать специалиста. Имейте в виду, что в этой сфере много шарлатанов и действительно помочь может скорее человек с профильным образованием, чем «бизнес-коуч, ведущий медитаций, тренер личного роста», окончивший ВУЗ, скажем, на микробиолога. Хотя тоже раз на раз не приходится.
· Как победить стресс и депрессию. Маккей М., Дэвис М., Фэннинг П. — хорошая книга для самостоятельной работы с некоторыми трудностями;
Ну и, наконец, еще одна неочевидная тема — расширение кругозора. Серьезно, если вы учитесь верстать, то изучать только верстку не очень умно. Как минимум стоит посмотреть какой-то общий вводный курс по вебу, чтобы хотя бы понимать контекст. Кроме того, неочевидно, но если вы плохо понимаете материал по одному языку, то вам может очень помочь материал по другому — просто в силу того, что процесс сравнения и анализа никто не отменял.
На этом все.
