Прийшов час осідлати справжнього Буцефала🏇🏻Приборкай норовливого коня разом з Newxel🏇🏻Умови на сайті
×Закрыть

Как стать 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.

LinkedIn

Похожие статьи

70 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

ну jQuery это классика, которую нужно знать.

события, описанные в какой-нибудь, например, повести «Шинель» уже давно не актуальны, но книгу определенно стоит прочесть.

тайпскіпт реакт scss
когда я буду клепать одностраничный ститический сайтик я обязательно прикручу к нему компилятор для ts и реакт, чтоб нарисовать один единственный аккордеон.

Автор, а как сам начинал?

если вообще, то www.ozon.ru/...ontext/detail/id/4030251, потом сидел и тыкал где-то в районе месяца йи2 (под него тогда документация была только на буржуйском) и пытался набросать на нем магазин. ну так, это даже иногда работало, добавляло товары в корзину и позволяло подтвердить заказ.

потом пообщался со знакомым — он сказал есть задача склепать сайтец, а конкретно сверстать макет и натянуть на modx. на что я, собственно, ответил, что идея хорошая, но я ничего не понимаю. в итоге он показал как набрасывать стили к бутстрапу, пару-тройку моментов по jquery и сказал — гугли, че. ну в общем все то, что описывается в 3/4 гайдов по верстке с бутстрапом, если вдумчиво читать.

а конкретно фронтенд у меня как-то всегда учился «по факту»: нужна новая технология? — разбираемся, работаем с ней.

Ах ты конкурентоувеличительныйчеловеккоторыйприглашаетвсехнафронтэндразработкупожалуйстанеделайтакпотомучтоявнадежденайтиработу

Для начала освой технику разделения слов через пробелы

Предлагаю администрации ДОУ добавить «word-break: break-word» специально для комментариев парвиза

а лучше расширить плагин который скрывал комменты/статьи от Юры, и добавить в него Парвиза

В: Стоит ли идти на платные курсы?
О: Конечно стоит.
>>>>>>>>>>>
я надеюсь это шутка =) статья то не плохая =)

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

Я нашёл толковый гайд как стать js девелопером lurkmore.to/...пипаста:Python#JavaScript

Краще вже на курси піти, чесне слово, ніж читати такі статті.

Ментор не нужен? Может, и синьоры/лиды тоже?
Представьте на секунду мир, в котором разрабатывают одни джуны, черпая знания исключительно из гугла...

мы сейчас как бы о периоде обучения. и о том, что ментор во время самообучения не нужен.
а во время работы ментор найдется сам, если компанию интересует качество выпускаемого ими кода.

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

дак суть статьи как раз и есть — подтолкнуть людей к использованию поисковиков.

Вы ведь могли этим тезисом и ограничиться
изначально планировал, но такие короткие статьи не публикуют и мне пришлось добавить воды :(

Якщо людина змогла за останні 20 тисяч років пройти шлях від полювання і збирання до праць Маркса і Канта, то будьте також певні, що знайдуться люди, які спокійненько обійдуться без менторів і виростуть в пристойних розробників. Особисто, я вивчав програмування ще по книжках без інтернету. І запитати теж не було в кого — нічого, якось вивчився:-)

начать можно с этого. последовательно выполняя все упражнения и тут же запуская код в браузере.
www.w3schools.com
ну а дальше — учиться гуглировать (скилл номер 1 для любого разработчика)

Почему именно Frontend? Да, я понимаю что статья так названа, но сначала честно ответьте себе на этот вопрос, а уж потом с уверенностью начинайте обучение! Потому как прочитать и освоить вам придется очень много информации.

Мне кажется негодования всех новичков заключаются в планировании и реализации стратегии обучения. Не понимая технологических инструментов и разновидность возможностей IT-индустрии, новичку сложно ориентироваться в каком-либо направлении образовательного процесса. Здесь, наверное, вина каждого...

По моему мнению, в идеале, должно быть так:
— Школы и высшие учебные заведения прислушиваются к IT-технологиям современного рынка, ведут обучающие программы и пропаганды своих услуг. Где и разъясняют о возможностях и направлениях IT-индустрии.

— IT-компания также ведет пропаганду о деятельности и её стратегии на рынке, для потенциальных сотрудников.

Можно конечно самому обо всем узнать, но не имея малейшего опыта — очень сложно построить эффективную стратегию образования. И да, Английский все таки в первую очередь, а лучше одновременно!

Согласен что нужна стратегия обучения, советую книгу «Путь программиста» Джон Сонмез.
книга тоже по сути ментор.

Якось на початках вивчення HTML, CSS мені дали цінну пораду: щоб вижити в цій сфері тобі не обовязково бути не експертом із запамятовування, а експертом з пошуку необхідної інформації

Головне розуміти, що рано чи пізно настане момент, коли зіткнешся з іншою проблемою — треба буде не просто давати результат, а розуміти, як це все працює.

И это касается ни только этой области, а и всего остального тоже.

Статья ни о чем, ресурсов минимум, советы странные. Пол года назад задавался этими же вопросами и, честно говоря, прочитай я эту статью тогда, ничем особо она мне не помогла бы...

это не программа курсов для самообучения, это общий очерк, который предполагает, что интересующийся сможет хотя бы выделить кусок текста, нажать на него правой кнопкой мыши и выбрать пункт «Искать в Google». примерно вот так puu.sh/szp3f/5f352ab143.png

увы, почему-то мы дошли до такого момента, когда людям нужны какие-то тепличные условия «разжуй да в рот поклади».

Согласен, но в этом случае я считаю такому человеку нечего делать в IT, где как раз львиная доля времени уходит на поиск нужной информации...

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

я не стараюсь дать подробное руководство, а лишь стараюсь сподвигнуть человека начать пользоваться поисковыми системами вместо написания очередной темы с мольбами о помощи.

Вот такая еще статья на похожую тему недавно появилась:
medium.com/...ь-5397d1185a10#.2cztoiwwa

И в копилку , даже если полностью отбросить «сыроварную» стилистику — понятние «fron-end» сильно смазано.
Наблюдала недавно за развитием треда под названием (как помню) «почему дизигнеры избегают или не любя верстать» , там красочно повествовалось и иллюстрировалось выдержками из всяких дизайнерзких книг различных эпох, где все выше перечисленное причислялось в обязанности именно дизайнера (этот тренд мазюкать в фотошопе никак не вымрет и даже наоборот распространяется по миру, как выяснилось позже O_o но я не хочу об этом). Получается что (и мне нечем возразить) все вышеперечисленное — это работа дизайнера, а «front-end» разработчик, это получается такой чернорабочий который делает всякое непотребство за которое дизигнер не хочет браться, ну тут еще можно добавить в стилистике объем оплаты и уровень неилитарности такой работы но не надо, никто же не станет хаять такие важные профессии как всякого рода убощики, хотя по аналогии именно на этом уровне в ойти если отталкиваться от таких статей — находится «front-end».
Это с одной стороны, а с другой, есть начинающие «front-end» разрабочики, которым нужно освоиться в этой среде, им нужно перенести свой 10+ лет опыта на новую платформу, это те самые зеленые новички, которым понадобилось 24 дня изучения js что бы портировать кваку в браузер, это такие глыбы которые идут на junior вакансии всего то месяц поковыряв платформу но не понимающие в целом как все должно там быть и чего уже не надо использовать и какие тренды на рынке (кстати про ненужность менторов, в этом случае они пипец как нужны).
И вот, причеслять вротых к первым очень несправедливо, наверное нужно еще одно название, либо называть все своими именами, т.е как в статье описана профессия «младший верстальщик» это далеко не фронт энд и даже не дизайнер.

все правильно, только английский первым номером должен идти. 1 000 000 страниц документации, стаковерфлоу, все самое современное и лучшее — на английском. не только для фронтенда.

«Ментор не нужен.» — не согласен. А вообще все уже масло масляное, и капитан Очевидность.

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

Хочу стать frontend-разработчиком, поверхностно знаю html,css,js, bootstrap, jQuery и т.д.. Учу матчасть в девклабе(сложности, ООП и т.д.) вырабатываю навык — пишем код на си, потом пишем его на с++, java... Понимаю, как работают тесты и что такое review fail. Не умею поиск google, умею пользоваться тех.документацией. Обучение заканчиваю через три месяца. Я все не правильно делаю?

«работающее говно» ) код работает, но написан левой ногой макаки.

первый раз слышу в таком контексте. разве что code review failed.
пробуйте научится в гугл, это очень важный и крайне полезный скил

а что гугл может мне код ревью сделать?=) не придирайтесь, батенька.

гугл очень много чего может, в гугле есть полно coding style гайдов, благодаря неуклонному содержанию которым даже кривой код превращается из «о господи» в «ну спасибо, что хоть читабельно».
а еще в гугле можно найти много примеров хорошего (в данном случае имеется ввиду общепринятого) кода. почитаете исходнички авось и сами начнете писать что-то хорошее.

Не умею поиск google,
Я все не правильно делаю?
нет, те вещи конечно же пригодятся, но навык гуглить очень критичен. пока вы запускаете велосипед кто-то другой тупо копирует блок кода со stackoverflow, быстро допиливает его напильником и получает рабочую вещь.

Не понимаю, что такое

категорически не умеют в поиск google
но это мои придирки..
Мне не понятно, какие конкретные умения под этим подразумеваются. Продумано писать ключевые слова для поиска с использованием команд? Но это в принципе и не есть супер-пупер ключевой навык. Или вообще не пользуются гуглом? Мне сложно представить, как такое возможно. Разве что из большущей лени, когда можно кого-то дернуть.
"
кто-то другой тупо копирует блок кода со stackoverflow, быстро допиливает его напильником и получает рабочую вещь.
" После такого совета назовите статью «Как быстро стать быдлокодером и запрыгнуть на галеру» или «Секреты индусского кодинга». Таким фронтендщиком я работал совмещая с проф.деятельностью.
Или вообще не пользуются гуглом? Мне сложно представить, как такое возможно
тема как стать *-разработчиком поднималась в интернете 100600 раз.
пользуется ли гуглом вообще человек, который вместо того, чтоб поискать, бежит создавать новую тему? спорный вопрос.


" После такого совета назовите статью «Как быстро стать быдлокодером и запрыгнуть на галеру» или «Секреты индусского кодинга». Таким фронтендщиком я работал совмещая с проф.деятельностью.
ну со временем приходит понимание, что стоит тащить с so прям как есть, откуда можно взять идею, а что вообще не стоит трогать.


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

Вполне себе цель и статья впору для непрофильного ресурса. Коим доу и становится.

это когда ты требуешь, чтобы тебе повысили зарплату, а тебя посылают

Гриша, не прибедняйся :)

Какие люди! =)
Я не прибедняюсь, богатые тоже плачут кодят ;)

Как бы сказать... это далеко еще не front-end разработка, а только вершина айсберга, и имя ей «верстальщик».

этого достаточно для старта. а дальше либо человек сам начнет заполнять пробелы в знаниях, либо ему нечего ловить.
при той динамике, с которой движется фронтенд, пока он прочтет это выйдет еще 3-5 новых препроцессоров и сменят вершину популярности пара-тройка сборщиков.

Этому треду не хватает ссылки на hackernoon.com/...6-d3a717dd577f#.hiyrtk1cx

Создать топик на доу по этой теме это как пройти гайд по нмп и запушить хелло ворлд в репозиторий — первый шаг на пути к джун девелопер. Так что стоит воспринимать спокойно.

Це все зрозуміло, але все ж таки, як стати front-end розробником?

Стать фуллстэк разработчиком, а потом забыть бекэнд.

Я бэкэндщиком так стал, отстав от фронтэнд:)

Это как? Fullstack без BackEnd уже не Fullstack :))

Потому что щенок без ног — все равно, что физрук — без рук.

Что-то вы все напутали. По сути щенок — без нок...
www.youtube.com/watch?v=5Wl5wyWqFH4

Видимо физрук уже не физрук исходя из того что он без рук :))
Вообще какая-то маниакальная веселуха получается. Я правильно понимаю ваш контекст?

Самурай без меча подобен самураю с мечом, только без меча.

Так то самурай. Что общего между самураем и инвалидами без рук и ног, которые даже не самураи? Ну разве что духом, но тогда им придется очень постараться.

«Я не все понял из этого гайда, может мне стоит создать еще одну тему на DOU?» — ну по сути вы сделали то же самое, очередной топик про «как стать»...

И как на счет препроцессоров? Их тоже требуют.

что те препроцессоры учить? за 2 часа можно разобратся, там же просто немного сахара и все

Я не написала — учить. Нужно как минимум знать о их существовании.

ну их далеко не везде требуют это раз. во-вторых, вы когда открываете вакансию и видите незнакомое слово/абревиатуру то первым делом должны загуглить — и вуаля вы уже о них знаете.

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

Загуглить? Так статья же для

«не умеют в поиск google»

и дальше в статье очень резоно замечают, что без этого скила в индустрии делать нечего

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

сходите на курсы, там расскажут

“не умеют в поиск google”
facepalm

Подписаться на комментарии