Как стать программистом с нуля начните с профессии фронтендера

Обновлено: 01.05.2024

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

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

С моей точки зрения, Senior-разработчик — это самодостаточный разработчик, который может сам разобраться в любой задаче.

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

Если говорить о разнице оценки грейдов разработчиков, то можно привести в пример компании, где часто разработчики доходят до позиции Senior за счет быстрого выполнения большого объема монотонных задач, связанных со сферой их деятельности.

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

Team Lead

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

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

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

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

Вторая важная составляющая этой позиции — понимание бизнеса, того, как он работает, и как удовлетворять его потребности. СТО — это тот человек, который стремится сделать качественный продукт, который будет отвечать не только техническим требованиям, но и требованиям бизнеса, чтобы разработчики не закапывались в коде, а производили продукт быстро.

Горизонтальное развитие

Дизайнер

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

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

В любом случае это все зависит от опыта, но, по моему мнению, дизайнер-бывший фронтенд-разработчик имеет преимущество перед тем, кто не имел дела с разработкой.

FullStack/Backend developer

Достаточно часто можно встретить фронтендеров, которые стали FullStack разработчиками. Зачастую это связано с тем, что они пишут бэкенд, в том числе на JavaScript — согласитесь, ведь легко начать писать бэкенд на знакомом языке?

Но и FullStack разработчики, знающие другой язык разработки бэкенда, — тоже не редкость. Это достаточно простой вариант развития, так как параллельно с разработкой и фронтендом можно начать осваивать бэкенд. Так, понемногу и постепенно вы можете стать FullStack-разработчиком или полностью перейти в бэкенд.

Надо сказать, что людей, которые уходят полностью в бэкенд, я встречал нечасто, но такое тоже бывает.

Mobile developer

На JavaScript можно писать практически под любую платформу. Мобильные операционные системы тут не стали исключением. Благодаря этому фронтенд-разработчики часто начинают реализовывать приложения с помощью таких фреймворков как React Native.

Они продолжают писать на привычном React, но с небольшими отличиями, при этом разрабатывая мобильные приложения. Несмотря на это, так как платформа не совершенна, все равно приходится лезть в нативные куски кода, где разработчики сталкиваются со Swift и Kotlin.

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

Любое другое направление

Помимо всего вышесказанного, у фронтенд-разработчика есть куча разных путей для развития в другие IT-профессии. Как пример, Data Science, Project/Product Manager и DevOps.

Если вам нравится позиция тимлида и менеджерские обязанности, вам может понравиться управлять проектом или командой на постоянной основе, не касаясь кода вообще. Если вы работаете фронтендером и вам нравится визуализация различных данных, скорее всего, вам было бы интересно, как эти данные собираются и анализируются. В таком случае направление Data Science было бы наверняка интересно для вас.

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

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

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

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

Это может быть страшно — сменить сферу деятельности и из нетехнаря превратиться в ИТ- специалиста. Однако вокруг нас всё больше примеров таких успешных трансформаций. В том числе — истории нескольких выпускников HTML Academy, которые не только получили новые знания, но и смогли найти работу для их применения на практике.

Журналист → фронтендер
Ирина Смирнова, фронтенд-разработчик в Bookmate

Завязка этой истории зауряднее некуда: окончив университет, я совсем не знала, что делать со своей жизнью. То ли оставаться журналистом средней руки и устроиться на заведомо нелюбимую работу, то ли удавиться сразу. В результате, конечно же, устроилась на работу (нелюбимую), но карьерный вопрос оставался открытым.

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

Лучшего старта в этой сфере для себя я даже придумать не могла. Буквально неделю назад я официально стала фронтенд-разработчиком: получается, потребовалось меньше года, чтобы вырасти из HTML-верстальщика. Наверное, именно это меня и восхищает в IT: то, чего ты достигаешь, прямо пропорционально тому, насколько ты сам выкладываешься, и не зависит от посторонних факторов. А результат твоей работы всегда оценивается объективно, он осязаем и конкретен.

Сотрудник колл-центра → программист
Софья Лапшина, младший разработчик в Performance Lab

Однажды я случайно увидела, как мой друг пишет код. Попутно он рассказывал, какая строчка кода за что отвечает. Мне показалось, что это всё сложно, что надо изучить кучу литературы для того, чтобы хотя бы просто начать этим заниматься. Друг оказался хороший и предложил мне попробовать свои силы в бесплатных онлайн-курсах на HTML Academy. Вот тут и начинается всё самое интересное.

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

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

Поиск работы
Окончив курсы, начала искать работу. К слову, знала я только вёрстку и что-то слышала про JavaScript. Многие говорят, что новичкам сложно найти работу. А я скажу, что нет, не сложно. Тут, как и везде, главное — чтобы ваши возможности совпадали с потребностями работодателя. Да, к новичкам присматриваются с опасением, но тут уже от вас зависит, как вы проявите себя на собеседовании.

Ожидание vs Реальность, или Мой первый опыт работы в IT-компании
Сразу отмечу, что тут всё зависит от компании, все они на вкус и цвет разные, поэтому рассказывать буду непосредственно о той, где работаю. Сейчас я работаю в Performance Lab. Сама компания занимается различными тестированиями сайтов, приложений и IT-систем.

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

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

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

Именно за это я люблю мир разработки. Всё не всегда бывает гладко, но в целом здесь люди делятся своим опытом и знаниями. Это интересная сфера, которая не даст погрязнуть в однообразии серых будней, которая постоянно развивается и которая даёт возможность проявить себя не только в рамках компании, но и на просторах Всемирной паутины.

Экономист и бизнесмен → бэкенд-разработчик
Артемий Степанов, Backend Developer

По образованию я экономист, ввиду неких обстоятельств и сильного влияния и наставлений отца я выбрал именно этот путь. Он хотел, чтобы я шёл по его стопам, и я это делал. С помощью отца я открыл собственное ООО по юридическим услугам. Но так как меня всё-таки со школьных времён тянуло к программированию, я принял решение, что хочу быть ближе к IT — в итоге недолго думая сменил сферу деятельности компании и её название. Теперь это веб-студия.

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

Однако позднее я понял, что и этого мне недостаточно. К тому времени влияние отца уже было не таким серьёзным, я был вполне независимым человеком. Так совпало, что один из наших верстальщиков приболел, а сроки поджимали. С помощью другого нашего верстальщика я решил вникнуть в проект — сейчас я понимаю, что только якорем тянул разработку вниз по времени, потому что объяснять детали человеку не в теме довольно тяжело.

Я понял, что до сих пор являюсь полным нулём, и стал искать курсы. Друзья-программисты посоветовали бесплатные курсы HTML Academy. И тут, как говорится, понеслось. Я записался на базовый курс по HTML/CSS — после его прохождения понял, что хочу этим заниматься и дальше. Работа с наставником (его зовут Максим Фарига) стала первым толчком к цели.

Окончив курс, я стал потихоньку верстать в свободное время и для проектов своей компании. В Академии идти на базовый курс по JS рекомендуют хотя бы после полугода работы верстальщиком, но я записался на него уже через два месяца. Здесь я познакомился с одним из лучших менторов в своей жизни, Борисом Ванюшиным. Он был строг, не давал никаких поблажек, временами я страдал (в хорошем смысле). Именно такое отношение помогло научиться мыслить как программист. Всё же HTML и CSS — языки разметки, а тут я впервые столкнулся с настоящим языком программирования.

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

Без работы я просидел около семи месяцев, всё это время я учился дальше и параллельно искал работу. В итоге подтянул JS до более-менее нормального уровня, освоил ES6, препроцессоры для CSS и прочие новомодные вещи. В августе этого года меня взяли за стажировку в фирму, которая разрабатывает исключительно сервисы. Около месяца я проработал в ней фронтенд-разработчиком (AngularJS, gulp, Sass), параллельно изучая Node.js. Спустя месяц меня перевели на бэкенд-разработку: я сам захотел, и у меня это получается действительно лучше. Этим до сих пор и занимаюсь.

По итогу всей этой истории можно сказать, что теперь я наконец делаю то, что мне действительно нравится. У меня отличная команда, зарубежные заказчики (из Норвегии), в арсенале — HTML, CSS, Stylus, Sass, JavaScript (ES6), AngularJS, Node.js, Express, MongoDB + Mongoose, Ruby (хотя тут я ещё совсем зелёный).

Весь этот путь занял 11 месяцев. На момент, когда я решил кардинально поменять свою жизнь, мне было 24, сейчас мне 25. Конечно, жалко впустую потраченного времени, жалею, что попал в программирование слишком поздно. С другой стороны, это только подстёгивает к развитию и совершенствованию навыков.

Музыкант → верстальщик
Артём Иванец, младший фронтенд-разработчик в компании eWave

Вот моя история. Я 15 лет профессионально учился музыке, пройдя весь положенный путь: ДМШ, ССУЗ, ВУЗ. Однако позднее я столкнулся с проблемами со здоровьем: пострадали руки — пришлось приостановить музыкальную деятельность. Нужно было придумать, чем заниматься.

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

После этого смог устроиться на работу в крупную компанию, которая разрабатывает проекты в сфере e-commerce для заказчиков из австралийского региона. Устроился я туда не сразу: сначала получил около 30 отказов — даже без приглашения на собеседование. На самом интервью я показал себя не лучшим образом, завалил часть по JS, но по вёрстке проблем не возникло.

Как выяснилось, обучение в Академии даёт всё, что нужно для получения работы и старта в профессии, и даже больше того. В этом я убедился, когда столкнулся с джуниорами, которые учились сами. Я доволен: мне нравится работа, и никто мне не запрещает параллельно заниматься искусством.

Организатор гастролей → разработчик чат-ботов
Евгений Ладыженский, младший фронтенд-разработчик, создатель чат-ботов

Решение о смене работы далось мне очень тяжело. До весны 2015 года я семь лет вполне успешно занимался организацией гастролей. Однако меня всё время преследовало ощущение того, что я занимаюсь не своим делом и постепенно деградирую. Выйти же из зоны комфорта было страшно: казалось, что в 36 лет менять профессию уже поздно.

В детстве я мечтал быть программистом, но в своё время пошёл по пути наименьшего сопротивления и поступил в тот вуз, куда мне хватало баллов, — лишь бы не идти в армию. Отважившись на кардинальные перемены, я вспомнил о юношеской мечте и решил наконец связать себя с программированием.

Поначалу я пытался учиться по книгам, но этот процесс требовал больших усилий и значительного времени. Поэтому когда я наткнулся на рекомендацию HTML Academy, то решил пройти базовый курс по HTML и CSS. После этого сразу же сумел найти работу верстальщиком, а после прохождения базового курса по JS устроился на позицию младшего фронтенд-разработчика, спустя ещё некоторое время увлёкся разработкой чат-ботов и открыл собственный бизнес в этом направлении.

Если трезво оценивать свои возможности и не просить с ходу много денег, то работу найти несложно. Главное — помнить, что в любой профессии всегда был и будет дефицит адекватных людей.

Что касается сложностей, то, конечно, они были: прежде всего большинство знакомых и родственников высказывали сомнения в разумности кардинальной смены профессии. Отсюда мораль: не стоит никому рассказывать о своём решении до тех пор, пока перемены не станут необратимыми. Иначе можно и самому засомневаться в успехе.

На самом же деле здесь нет ничего невозможного, главное — очень сильно захотеть научиться новому.

ТВ-продюсер → фриланс-разработчик
Александр Половников, фронтенд-разработчик, фрилансер, наставник HTML Academy

Семь лет я проработал в продюсерской компании, которая занималась производством телевизионных программ, фильмов и сериалов.

Всё изменилось, когда я случайно наткнулся на курсы академии. Решил попробовать — и так увлёкся, что за несколько вечеров без перерыва прошёл их все и записался на интенсив. Он мне тоже понравился: знания усваивались очень быстро и легко. Нужно было двигаться дальше — а я ещё не очень хорошо понимал разницу между фронтенд- и бэкенд-разработкой. Мне посоветовали пройти стартующий курс по Ruby on Rails, что я и сделал. Оказалось, что знать хотя бы один серверный язык очень полезно для фронтендера.

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

Но самое классное произошло, когда я приехал в гости в офис академии. Разговор зашёл о работе, кто-то упомянул новую фриланс-площадку Rubrain — она недавно открылась, все о ней слышали, но никто ещё не пробовал. Я отправил администрации своё резюме с описаниями навыков, рассказом о себе и просьбой добавить меня в базу. Через пару дней мне пришло письмо об одобрении моей заявки, а ещё чуть позже мне позвонил один из основателей площадки и предложил поработать на них: нужно было помочь с сайтом.

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

Пройдя этот путь, я сделал для себя несколько выводов. Во-первых, учиться лучше на практике: работа над реальными фриланс-проектами помогла не забыть теорию и быстрее получать новые навыки. Кроме того, хороший способ обучения — поработать над каким-либо открытым проектом. Так можно разобраться с инструментом и начать применять его на практике, притом что работа над open source не предполагает жёстких сроков и требований. Это хороший способ научиться чему-то новому, а если проект выстрелит — получить плюс в портфолио.

Кстати, о портфолио: чтобы начать получать заказы, оно должно быть. А где его взять начинающему фронтендеру? Лучший вариант — найти в интернете бесплатные или недорогие стоковые макеты и сверстать их. Пять таких качественных работ — и получится достойное портфолио.

Редактор-копирайтер → фронтенд-разработчик международного стартапа
Николай, фронтенд-разработчик

Меняю профессию я не в первый раз: к 2014 году успел поработать редактором в СМИ и на телевидении, копирайтером в больших рекламных агентствах, сотрудником техподдержки (это было не очень интересно) и менеджером интернет-проектов.

Почти всегда моя работа так или иначе была связана с интернетом, так что однажды мне захотелось оказаться среди тех, кто делает все эти чудесные сервисы и сайты. Всё началось в 2014 году — тогда мне было 32 года. Обычное дело: понадобилось сделать что-то для сайта компании, денег на фрилансеров не было — я полез разбираться сайт, наткнулся на сайт академии, прошёл все доступные на тот момент курсы и… втянулся.

В апреле того же года я успешно окончил третий поток базового интенсива по вёрстке и задумался о смене профессии, потому что верстать мне понравилось.

Найти работу оказалось непросто, сначала ничего не получалось. Я откликался на вакансии, получал отказы, неудачно выполнил тестовое задание для CSSSR, найти заказы на фриланс тоже не удавалось. Но рук я не опускал, продолжал искать, самостоятельно изучая то, чего не рассказывали на базовом интенсиве (а других тогда ещё не было).

И вот однажды меня пригласили на собеседование на должность стажёра-верстальщика. Я его прошёл и получил свою первую работу в команде веб-разработки. Можно сказать, мне повезло: в компании мне выделили наставника, который многому меня научил, сами проекты тоже были интересными. Мы создавали сайты для крупных компаний — операторов связи, у каждой из них были требования к качеству и стилю кода, используемым технологиям. Именно тогда я разобрался с БЭМ, научился использовать препроцессоры, вник в работу с PHP-шаблонизаторами, адаптивной вёрсткой, Гитом и многим другим.

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

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

Что ещё? Отмечу только одно (про остальное скажут другие) — сам тоже хочу подтянуть этот момент: ходите на конференции и митапы, больше общайтесь, выступайте, заводите новые знакомств. Это расширит ваш кругозор, мотивирует увеличить собственные знания, к тому же будет к кому обратиться с вопросом, а кто-то из знакомых, вполне возможно, однажды пригласит вас на работу.

Заключение
Опыт наших студентов в смене профессии говорит о том, что нет ничего невозможного. Однако и этот процесс можно оптимизировать. Вот что нужно знать нетехнарям, которые захотели переквалифицироваться в ИТ-специалиста:

Обучение

Кто такой Frontend-разработчик?

Frontend разработчик — это инженер-программист, который создаёт веб-сайты с помощью таких языков программирования, как HTML, CSS и JavaScript.

Что делают Frontend-разработчики и чем занимаются?

Обязанности на примере одной из вакансий:

Разработка новых игровых фичей в команде с гейм-дизайнером.
Оптимизация производительности.
Ревью и рефакторинг устаревших решений.
Глубокая интеграция с нашим веб-порталом.
Развивать, поддерживать и рефакторить код на Vue;
Изредка поддерживать старый код на Node.JS для совместимости с новым кодом;
При желании — экспериментировать и решать нестандартные задачи на Svelte (научим и покажем);
Проводить и проходить ревью и решать другие frontend-задачи.

Что должен знать и уметь Frontend-разработчик?

Требования к Frontend-разработчикам:

Адаптивная вёрстка сайтов и писем
Работа с TypeScript
Уверенное знание JavaScript и ООП
Разработка серверных приложений на Node.js
Работа в системе контроля версий Git
Разработка десктопных приложений на Ionic/Electron
Знание React.js/Angular/Vue.js
Понимание алгоритмов и структур данных в проектах

Востребованность и зарплаты Frontend-разработчика

На сайте поиска работы в данный момент открыто 8 519 вакансий, с каждым месяцем спрос на Frontend-разработчиков растет.

Количество вакансий с указанной зарплатой Frontend-разработчика по всей России:

от 95 000 руб. – 2 707
от 180 000 руб. – 1 762
от 265 000 руб. – 784
от 350 000 руб. – 346
от 435 000 руб. – 75

Вакансий с указанным уровнем дохода по Москве:

от 85 000 руб. – 1 065
от 170 000 руб. – 809
от 255 000 руб. – 424
от 340 000 руб. – 181
от 425 000 руб. – 52

Вакансий с указанным уровнем дохода по Санкт-Петербургу:

от 95 000 руб. – 461
от 180 000 руб. – 331
от 265 000 руб. – 137
от 350 000 руб. – 61
от 435 000 руб. – 14

Как стать Frontend-разработчиком и где учиться?

Варианты обучения для Frontend-разработчика с нуля:

Самостоятельное обучение – всевозможные видео на YouTube, книги, форумы, самоучители и т.д. Плюсы – дешево или очень недорого. Минусы – нет системности, самостоятельное обучение может оказаться неэффективным, полученные навыки могут оказаться невостребованными у работодателя;
Онлайн-обучение. Пройти курс можно на одной из образовательных платформ. Такие курсы рассчитаны на людей без особой подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику – это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.

Ниже сделали обзор 15+ лучших онлайн-курсов.

15+ лучших курсов для обучения Frontend-разработчика: подробный обзор

Что смогут выпускники:

создавать адаптивные веб-сайты с использованием CSS, Flexbox
разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML
писать сложные компоненты на React и интерфейсы с авторизацией и с подключением к бекенду

Вы научитесь:
• создавать страницы на чистом HTML
• позиционировать элементы на странице с помощью CSS
• применять семантическую верстку
• использовать средства разработчика в браузере
• верстать адаптивные веб-страницы на Flexbox
• загружать свой код на GitHub

Вы научитесь:
• писать простые программы на Javascript
• применять ООП в Javascript
• создавать сложные скрипты с обработкой событий
• работать с форматом JSON
• использовать препроцессоры CSS
• работать по методологии БЭМ

Вы научитесь:
• разрабатывать приложения на React
• использовать продвинутый API
• писать свои компоненты на React
• создавать приложение на Angular
• создавать приложение на Vue.js
• использовать анимацию на CSS или на React
• применять библиотеку Redux на приложении React

Вы научитесь:
• подключать приложение к базе данных
• разворачивать приложение на Node.js
• писать unit-тесты

Вы научитесь:
• составлять резюме и сопроводительное письмо
• готовиться к собеседованию
• адаптироваться работе в команде
• оформлять свой профиль на фриланс-биржах
• искать заказы на биржах и общаться с заказчиками

Сертификат после успешного обучения. Отзывы студентов курса на сайте.

Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с Flexbox и JavaScript
Соберите крутое портфолио из 9 жизнеспособных проектов для получения работы своей мечты
Формат обучения – Онлайн-занятия 2-3 раза в неделю + домашние работы
Уровень – С нуля
Документ – Диплом о профессиональной переподготовке

Программа курса

Вёрстка сайта на HTML и CSS

Теги для вёрстки контента страницы
Теги для вёрстки структуры страницы
Теги для вёрстки форм
Селекторы CSS
Определение контекста элементов
Блочная модель
Позиционирование элементов
Оформление текста
Оформление декоративных элементов
Состояние интерактивных элементов

Мобильная и адаптивная вёрстка

Вёрстка резинового макета
Резиновые изображения
Медиа-запросы и медиа-функции
Вёрстка мобильных устройств
Вёрстка адаптивного макета
Адаптивная типографика, выбор breakpoints
Адаптивные изображения

Английский язык для начинающих разработчиков

Лексика, без которой не обойтись
Как вести переписку на английском
Чтение документации и анализ требований
Программирование
Тестирование ПО
Стрессовые ситуации
Устранение неполадок
Работа и роли в команде
Поддерживаем любую беседу на английском
Собрания, презентации на высшем уровне

Основы программирования

Алгоритмы
Переменные, числа и строки
Логика и математика
Ветвление кода
Алгоритм с множественным выбором
Ошибки в коде
Массивы
Циклы
Подпрограмма, функция
Объекты
Синхронное и асинхронное выполнение алгоритма

Git — система контроля версий

Предназначение системы контроля версий
Основные операции (фиксация и откат изменений, поиск, история)
Работа с сервисом GitHub
Ветки, слияние веток и разрешение конфликтов

Основы JavaScript

Основы отладки
Базовый синтаксис
Расширенный синтаксис
Типы данных
Функции, объекты
Прототип и конструктор объекта
ООП в JS (ES6)
Обработка исключений и замыкания
Прототип массива, функции высшего порядка
Асинхронность

Основы JavaScript в браузере

Возможности JavaScript в браузере
Способы поиска нужного HTML-элемента
Объект события
DOM
Работа с HTML-формами
Изменение структуры HTML-документа
Асинхронные запросы
Хранение состояния на клиенте

Продвинутый JavaScript

Стандарты и рабочее окружение
Модули и Webpack
Платформы: браузер vs Node.js
Unit-тестирование
Прототипы, конструкторы, классы и наследование
Object, Reflection и Proxy
Регулярные выражения
Контейнеры
ArrayBuffer
Promises, async/await, timers & event loop
Символы, итераторы, генераторы
TypeScript

Продвинутый JavaScript в браузере

Библиотека React

Карьера в Frontend-разработке

Frontend-разработчик: задачи, работа в команде
Поиск работы: компания vs фриланс
Карьерная траектория: из студента в senior
Первое собеседование
Тренды Frontend-разработки: за какими ресурсами следить
Резюме, сопроводительное письмо, портфолио

Ваше резюме после обучения:

Вёрстка под тач и мобильные устройства
Работа с Flexbox и JavaScript
Способность правильно использовать переменные, числа и строки
Создание прототипа и конструктора объекта
Использование выражений в JavaScript
Применение символов, итераторов и генераторов
Импорт и экспорт модулей
Создание интерактивных веб-страниц
Работа с файлами и медиаресурсами
Применение принципов клиент-серверного взаимодействия
Создание одностраничных веб-приложений (SPA)
Навыки использования библиотеки React, JSX, React router, VirtualDom

Программа обучения

Неделя 1 — Workflow
— Знакомимся с наставником и группой.
— При помощи webpack-сборки верстаем выбранный макет выпускного проекта.
— Размещаем результат на Github и сдаём на проверку наставнику.

Вводное занятие
Yarn
PUG
Webpack
Figma для верстальщика
Flexbox
GIT
Компонентный подход

Неделя 2 — Vue.js
— Делаем верстку адаптивной.
— Реализуем блок “Скиллы” на Vue.js.
— Реализуем блок “Мои проекты” на Vue.js.
— Реализуем блок “Слайдер для отзывов” с помощью Vue.js плагина.

js
Vue 3. Обзор изменений
Адаптивная вёрстка
js. Виджеты

Неделя 3 — Нативный JavaScript
— Верстаем админку.
— Изучаем Storybook и применяем в своём проекте.
— Осуществляем необходимую обработку (валидацию) форм проекта.

JavaScript — ES6
Storybook
js. Работа в среде приложения
js. Сборка страницы

Неделя 4 — Vue.js, SPA
— Реализуем SPA в админ-панели.
— Изучаем работу с данными через хранилище приложения
— Используем ajax для связи с api, настраиваем взаимодействия клиент-сервер.

js. Написание приложения
js. Composition API
Асинхронность в JavaScript
Работа с api для проекта портфолио
js. Работа с сервером

Неделя 5 — Практика
— Выводим сохраненные данные из админ-панели на лендинг.
— Тестируем компоненты.
— Групповая работа над проектом с наставником.

Тестирование JS-кода
js. Тестирование компонентов
Анимации во Vue.js
js. Завершение работы над проектом

Неделя 6 — Завершение работы над проектом
— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.

Ключевые навыки

Уверенная работа с Vue.js.
Уверенная работа с React.js.
Опыт разработки SPA-приложений.
Уверенная работа с SVG.
Кроссбраузерная верстка.
Уверенная работа с консолью и пакетными менеджерами.
Работа с Gulp, Webpack, NPM.
Работа с Git.
Освоение новых технологий за короткие сроки.

Освойте современную профессию: вы научитесь создавать сайты и приложения, проектировать интерфейсы и работать со сложными инструментами frontend-разработчика.

Программа обучения

Как учиться эффективно. Видеокурс от методистов GeekUniversity
Основы программирования
Базовый курс

I четверть. Веб-верстка

— Научитесь верстать сайты, создадите страницу и подготовитесь к созданию планировщика задач
— Освоите библиотеку Bootstrap, препроцессоры LESS и SASS
— Освоите адаптивную вёрстку, принципы кроссбраузерности и валидности
— Создадите посадочную страницу

HTML/CSS. Интерактивный курс
Профессиональная вёрстка

II четверть. Frontend-разработка

— Освоите JavaScript и принципы ООП
— Научитесь работать с Parcel, Webpack, Vue.js и сторонними API
— Сможете работать в различном окружении и подключать сторонние библиотеки

Проект

— Приложение для учета расходов

Базовый курс JavaScript
Продвинутый курс JavaScript
Инструменты сборки проектов
js

III четверть. Библиотека ReactJS и основы backend-разработки

— Научитесь работать с ReactJS
— Сможете применять ECMAScript 6 и использовать концепцию Flux
— Освоите основы разработки бэкенда на Node.js и сможете создавать различные REST API

Библиотека ReactJS. Базовый курс
Платформа Node.js

IV четверть. Разработка от идеи до релиза

— Познакомитесь с методологиями Agile, Scrum, Kanban
— Получите навыки командной разработки и научитесь работать с GIT
— Изучите принципы Continuous Integration и Continuous Delivery

Проекты

— Командный выпускной проект. Пройдете этапы профессиональной разработки: от поиска идеи до тестирования и релиза продукта

Профессиональная разработка веб-приложений
Командная разработка дипломного проекта

Курсы вне четверти

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

Подготовка к техническому собеседованию
Основы баз данных. Видеокурс
Базы данных
Рабочая станция
Фриланс-разработчик: курс подготовки
Подготовка к поиску работы

Ключевые навыки

— Верстаю сайты и владею адаптивной версткой.
— Создаю одностраничные приложения
— Работаю с HTML и CSS, Node.js
— Владею инструментами для модульной сборки — Parcel и Webpack
— Использую Vue.js и основных библиотек его экосистемы, разрабатываю компоненты на Vue.js
— Работаю с библиотекой ReactJS
— Использую концепцию Flux с применением библиотек Redux

Вы изучите основы HTML, CSS и JavaScript, научитесь создавать сайты и приложения для любых устройств, оптимизировать код и работать с анимацией. Соберёте портфолио и сможете начать карьеру разработчика.

Чему вы научитесь

Верстать сайты и приложения для всех типов устройств
Создавать сайты и приложения с помощью JavaScript
Работать с системой Git и GitLab
Использовать библиотеки jQuery, React, Redux для ускорения процесса разработки
Делать сайты, которые будут корректно открываться в любом браузере
Тестировать вёрстку
Анимировать веб-страницы

Программа

Вас ждут 5 тематических блоков, прохождение которых можно приравнять к году работы.

Веб-вёрстка

Веб-вёрстка. Базовый уровень
Веб-вёрстка. Продвинутый уровень

Онлайн-сессии по веб-разработке

Библиотека jQuery.
Адаптация макета под мобильные устройства.
Практикум по интерактивным элементам.
Что такое Webpack.
Сборка проекта на Gulp и обзор препроцессора Sass.
Анимация в CSS.

JavaScript

JavaScript. Базовый уровень
JavaScript. Продвинутый уровень

Дипломные проекты

Программа курса

HTML и CSS. Профессиональная вёрстка сайтов

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

HTML и CSS. Адаптивная вёрстка и автоматизация

Вы научитесь создавать разметку по методологии БЭМ, использовать препроцессоры, строить адаптивные сетки, работать с адаптивной и ретиновой графикой, использовать инструменты автоматизации и настраивать сборку проекта для публикации.

JavaScript. Профессиональная разработка веб-интерфейсов

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

Подготовка вёрстки для cистем управления контентом (CMS)

Вёрстка — это один из начальных этапов работы над продуктом. Чаще всего следующим этапом является интеграция вёрстки в систему управления контентом (CMS). Во время интеграции из вёрстки делают шаблоны, в которые CMS подставляет содержание. При этом содержание меняется самим клиентом, поэтому важно делать вёрстку таким образом, чтобы её было удобно интегрировать в CMS.

Обзор популярных систем управления контентом, демонстрация админки и процесса работы с админкой со стороны конечного пользователя
Подготовка вёрстки под разделение на шаблоны. Выделение повторяющихся частей, организация стилей и скриптов
Работа с генерируемым контентом. Разметка основной контактной области, работа с генерируемыми изображениями и стилями
Подготовка вёрстки под расширение и изменение объёма контента и информационных блоков

Вёрстка React-компонентов

Вёрстка с нуля в экосистеме React и создание интерактивных React компонентов.

Фундаментальными технологиями фронтенд разработки являются HTML (для создания структуры страницы), CSS (для стилизации) и JavaScript (для интерактивности). По этой причине базовые знания в вышеупомянутых областях непременно вам необходимы. Однако, в 2020 году необходимо знать, что такое фреймворки, системы контроля версий и многие другие вещи, упрощающие жизнь современному разработчику. Давайте подробней остановимся на каждой из них.

HTML и CSS

HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets) являются основой веб-разработки. Без этих двух технологий вы не сможете создавать веб-дизайн и получите на выходе простой текст на экране. Вы даже не сможете добавить изображение на страницу без HTML!

Прежде чем начать карьеру веб-разработчика, вы должны стать специалистом в HTML и CSS. Хорошая новость, уверенное знание этих технологий можно получить всего за несколько недель изучения. У нас вы можете пройти курс по основам HTML!

JavaScript

JavaScript позволяет добавить огромный функционал вашей веб-странице. Вы можете создавать довольно функциональные веб-приложения используя только HTML, CSS и JavaScript (сокращенно JS). На самом базовом уровне, JS позволяет вам добавить интерактивности. Вы можете использовать его для создания карты, которая обновляется в реальном времени, интерактивных элементов и онлайн-игр. Такие сайты, как Pinterest используют JavaScript по полной для создания дружелюбного пользовательского интерфейса.

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

JQuery

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

JavaScript фреймворки

JS фреймворки (включая AngularJS, Backbone, Ember и ReactJS) предоставляют готовую структуру вашего JavaScript кода. Существуют различные типы фреймворков под разнообразные нужды, однако четыре вышеупомянутых являются самыми популярными в списке требований при приеме на работу в 2020 году. Фреймворки действительно ускоряют процесс разработки, предоставляя вам ускоренный старт, и могут использоваться в связке с библиотеками вроде JQuery для минимизации временных затрат на написание типовых блоков.

Frontend фреймворки

CSS и Frontend фреймворки (самым популярным является Bootstrap) делают для CSS то же, что и JS фреймворки для JavaScript: они ускоряют разработку, предоставляя отправную точку с готовой стартовой структурой проекта. Поскольку от проекта к проекту базовые CSS блоки повторяются, фреймворк, определяющий все за вас, является очень полезным. Большинство работодателей требуют знание того, что такое frontend фреймворки и как с ними работать.

RESTful сервисы и API

Не вдаваясь в технические подробности, REST расшифровывается, как Representational State Transfer, что означает “передача состояния представления”. В общих чертах, это технология, упрощающая связь компонентов в сети. И RESTful сервисы и API - это сервисы архитектуры REST. Почитать об этом подробнее вы можете здесь.

Предположим, вы решили написать приложение, которое отсортирует всех ваших друзей в социальной сети по дате добавления. Вы можете сделать запрос к RESTful API ВКонтакте для получения списка ваших друзей. То же самое возможно и с Twitter, и с Facebook, которые также используют RESTful API.

Системы управления контентом и платформы E-commerce

Практически каждый веб-сайт построен на системе управления контентом (CMS). Платформы E-commerce являются одной из разновидностей CMS. Самая популярная в мире CMS - это WordPress, которая находится за занавесом миллионов сайтов, почти 60% всех сайтов, использующих CMS, построены на WordPress. Другие популярные CMS это Joomla, Drupal и Magento. Даже поверхностные знания этих систем дадут вам преимущество при устройстве на работу.

Тестирование и отладка

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

Unit-тесты - это процесс тестирования отдельных блоков исходного кода и специализированный фреймворки для подобного рода тестирования предоставляют достаточно удобный функционал. Существуют разные фреймворки для разных языков программирования.

Другой тип тестирования - это UI-тесты, также известные как функциональные тесты. Здесь проверяется общее поведение веб-сайта при взаимодействии с ним пользователя.

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

Git и системы контроля версий

Системы контроля версий позволяют вам отслеживать изменения, вносимые в код со временем. Они также позволяют легко возвращаться к предыдущим версиям кода, если вы что-либо испортите. Git - это наиболее распространенная система контроля версий. Знание Git для разработчика является необходимым требованием практически в каждой компании. У нас вы можете изучить основы работы с git.

Что должен знать профессиональный фронтенд-разработчик сегодня

В последние несколько лет React, одна из библиотек JavaScript, становится стандартом frontend разработки - и это на руку кроссплатформенным разработчикам, с такими преимуществами React Native, как:

простая и интуитивно понятная философия объявления представлений (views) и состояний (state), делающая код чистым, читаемым и легкоотлаживаемым;
умный и эффективный рендеринг, который перерисовывает компоненты только в случае необходимости, при изменении состояния.

Говоря простым языком, React связывает вместе HTML и JavaScript.

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

Учитывая вездесущность множества форм-фактором различных устройств (мобильные телефоны, планшеты, десктопные ПК), мы бы также рекомендовали к изучению способы построения адаптивных web-страниц. Существует большое разнообразие библиотек JavaScript и CSS, которые прекрасно справляются с этой задачей. Многие из них основаны на рекомендациях Google’s Material Design.

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

Webpack для модульной сборки (хотя опыт Webpack довольно ужасен и выбор сообщества в области сборки меняется каждые 1-2 года);
JSON Web Token для авторизации (своего рода, замена куки, которые ранее были стандартом);
Relay/GraphQL или Redux или Flux, в зависимости от того, насколько глубоко вы хотите погружаться в потоки и выборки данных;

А также большое разнообразие библиотек для отладки, оптимизации производительности, тестирования, управления проектами и т.п.

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

Читайте также: