Как стать front-end разработчиком

Как показывает частота мелькания новых тем с вопросом: «Посоветуйте, что учить, чтобы стать фронтенд девелопером?» на DOU (и не только), большинство юных (и не очень) дарований, решивших посвятить себя веб-разработке и дарить миру красивые и полезные сайты, решительно и категорически не умеют в поиск google. Эта статья как раз призвана остановить (или хотя бы задержать) орды стремящихся заполонить информационное пространство своими однообразными вопросами.

IT — это мир дедлайнов, «нужно сделать на вчера» и паленых нервов. Первые N лет ты будешь регулярно сталкиваться с вещами, которых ты не понимаешь, которые алогичны. С текущего момента тебе придется усвоить очень много новых вещей и понятий. И если ты к этому не готов, то, наверное, ты можешь дальше не читать эту статью. Я разобью мое дальнейшее повествование на несколько частей, после каждой из которых ты сможешь оценить, стоила ли игра свеч и стоит ли продолжать. Итак, перейдем к перечислению вещей, которые придется выучить для начала.

HTML + CSS

Это вот та самая штуковина, благодаря которой сайт обретает свою индивидуальность (или наоборот) и красиво выглядит (иногда). Больше сведений на эту тему можно получить из Википедии, там довольно понятно описано, с чем тебе предстоит иметь дела ближайшие несколько недель. Подробно читать тут — HTML, CSS.

Не старайся запомнить все и сразу. На данном этапе твоя задача — понять, что это работает, и получить представление о возможностях (то есть, что с помощью HTML ты можешь создавать элементы, а с помощью CSS — украшать их). И тебе вовсе не важно сейчас помнить наизусть порядок значений для box-shadow или разбираться в хитросплетениях flexbox. В конце концов, это всегда можно поискать в гугле или найти нужный ответ на stackoverflow.

Bootstrap

Это как конструктор лего для двух предыдущих штук — вместо того, чтоб собственноручно выпиливать лобзиком из цельного куска пластика чертового робота, ты можешь просто взять набор деталек и собрать робота из них. Правда, детальки все угловатые, поэтому иногда приходится дорабатывать конструктор напильником. Но в целом приятная штука и очень много где требуется.

Если дружишь с английским хотя бы на уровне более-менее свободного чтения текстов, переведенных гугл транслейтом, то отличными ресурсами для освоения будут getbootstrap.com и w3schools.com/bootstrap. Если же нет — тебе не повезло в интернете полно руководств на русском и украинском. Поверь, без навыка находить полезную информацию тебе тут не выжить.

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

Гайды по верстке

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

Этот пункт следует повторять пока ты не начнешь понимать, что вообще происходит вокруг тебя и не научишься хоть криво, но все же применять @media для разных размеров экрана.

Самостоятельная верстка по макету

PSD макеты — по этому запросу гугл выдает 368 000 страниц. Верстаешь найденные макеты, пока не начнет получаться похоже на оригинал. Вообще должно быть один в один строго до пикселя (ладно, до двух, только никому не говори) — это называется pixel perfect.

После этого пункта ты можешь смело составлять резюме и искать почтового бота, который завалит эйчаров письмами счастья твоими мольбами. Работу ты, скорее всего, не найдешь (а я и не говорил, что будет легко), но, по крайней мере, получишь опыт общения. А, может, и найдешь — чем черт не шутит.

Ты, скорее всего, еще не умеешь в JavaScript от слова «вообще», но если рисковый парень и не боишься злого зверя «заказчика», то можешь попытать удачи на freelance-биржах. Лендинги в целом в цене.

JavaScript

У большинства тех, кто имеет дело с JavaScript, бытует мнение, что начинать учить его следует тут — learn.javascript.ru. И они, в общем-то, правы.

Опять же, твоя задача — не заучить все функции и языковые конструкции, а понять, что ты можешь сделать. После успешного прочтения можно перейти к чему-то более обширному и прочесть «JavaScript: Подробное руководство» Дэвида Флэнагана.

jQuery

Параллельно или после прочтения вышеуказанных ресурсов по JavaScript можно начинать учить jQuery. Всю документацию по нему перечитывать не стоит, но вот прочесть брошюрку, например, Шевчука вполне желательно — «jQuery для начинающих».

Поздравляю, по окончанию этого пункта ты можешь носить гордое звание «формошлеп» и свободно брать заказы из раздела «верстка» какого-нибудь fl.ru или upwork.com. В общем-то, на этом можешь остановиться.

Фреймворки

Разбираешь популярный JS-фреймворк. Учить какую-нибудь малоизвестную эзотерику явно не стоит, лучше выбрать что-то, что регулярно мелькает в разделе вакансий: react.js, angular или angular2, например, вполне сойдут. А лучше, конечно же, все три. Гайдов, видеоуроков и документации по всему этому счастью довольно большое количество (едва ли меньше, чем вопросов «как стать front-end разработчиком»), так что ты должен справиться.

Английский язык

Попутно начинай учить английский. Без этой штуки тут особо далеко не прыгнешь, да и относительно вменяемое знание языка значительно повысит твою ценность как начинающего разработчика — так что получить junior вакансию и начать работать за еду будет чуть проще. Никто не требует от тебя умения литературно изъясняться, но прочесть документацию или ответ на stackoverflow ты просто обязан уметь.

Вот ты и закончил первый этап своего обучения. Не обольщайся. В процессе работы ты поймешь, что это было довольно просто, ведь второй этап будет длиться всё время, пока ты будешь работать по этой специальности. Тебе предстоит узнать еще очень много нового и интересного. И не всегда ты будешь рад этим знаниям. После этого этапа ты можешь начинать искать вакансии junior front-end developer либо, если еще недостаточно хорош, бесплатные курсы-стажировки при IT-компаниях, которые заявляют о возможном трудоустройстве после этих самых курсов.

Само собой, что эта статья и я ничего тебе обещать и гарантировать не хотим и не будем. Все зависит от многих факторов, в том числе даже от доли везения.

Частые вопросы

В: Где найти ментора?
О: Ментор не нужен. Но если тебе так хочется, то на DOU есть несколько тематических веток. Хотя в целом обычно достаточно просто хорошо погуглить ответы на свои вопросы — этим ты сохранишь потенциальному ментору пару-тройку миллионов нервных клеток.

В: Стоит ли идти на платные курсы?
О: Конечно стоит. А еще обязательно вышли 100 долларов Бакаре Тунде, брату первого нигерийского астронавта.

В: Я не все понял из этого гайда, может мне стоит создать еще одну тему на DOU?
О: Попробуй лучше спросить в комментариях, авось кто-нибудь и ответит. А вопросы на технические темы можно задать на Stackoverflow.

И, помни, умение «хорошо поискать» является критичным для разработчика, и если ты не разовьешь его, то делать тебе тут нечего.

Спасибо за поддержку и редактуру @Stefan Skliarov.