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

Развитие для начинающих разработчиков

Рассмотрим вариант, когда вы только изучили самые минимальные основы для входа в профессию - HTML и CSS. Скорее всего, в таком случае у вас нет ни каких-либо проектов в портфолио, которые не стыдно показать, ни знаний сторонних фреймворков, библиотек и технологий (либо такие знания очень поверхностные). Несмотря на это, у вас уже имеется определенная база для старта карьеры и развития.

Рассмотрим дальнейшие действия для профессионального развития.

Заполните пробелы

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

Технологии, на которые нужно обратить внимание современному веб-разработчику:

  1. Адаптивная верстка. Без нее сейчас вообще никуда, даже на самых низовых позициях требуется ее понимание и умение адаптировать интерфейс под ходовые размеры и форматы экранов. Если вы не умеете делать адаптацию страниц под разные размеры и форматы экранов, то этому необходимо научиться. Сейчас для этого используют популярные фреймворки и новые технологии, но вполне можно обойтись и стандартными возможностями HTML и CSS.
  2. JavaScript. Это язык программирования, который активно используется в веб-разработке для придания интерактивности верстке и вообще готовому продукту. Необязательно детально изучать весь JS - достаточно будет знать как работать с тем функционалом, который часто используется в разработке: вызове всплывающих окон, анимации, обработки форм, скрытия и отображения элементов при разных условиях.
  3. Начните изучать Bootstrap. Сейчас для верстки активно используются сетки Bootstrap. С их помощью получается сделать каркас страницы более структурированным и адаптивным. По-сути, он представляет из себя набор CSS и JS свойств, которые требуется только грамотно подключить к проекту и научиться правильно применять в процессе верстки. Если вы более-менее умеете работать с HTML, CSS и JS, то проблем с изучением библиотеки Bootstrap у вас не возникнет.
  4. Начните изучать Flexbox-верстку. Flex-технология относительно нова, но она постепенно становится стандартом при верстке веб-страниц. Благодаря новым элементам и свойствам, введенным в HTML и CSS, становится возможна быстрая и удобная адаптивная верстка без необходимости загрузки дополнительных библиотек.

Укрепите имеющиеся знания практикой

Если вы знаете HTML, CSS, немного JavaScript и какие-нибудь фреймворки, типа, Bootstrap, то не факт, что у вас уже “набита” рука. Полученные знания нужно закрепить практикой - не просто сверстать страницу по видеоурокам или при помощи наставника, а самостоятельно найти макет и сверстать его, чтобы в нем работало все так, как задумывалось дизайнером. Идеально, если вам кто-то доверит реальный рабочий проект и даст к нему все необходимые исходники.

Если же получить реальный рабочий проект нет возможности, то вы можете найти в сети бесплатные PSD-исходники дизайна страниц и попробовать по ним сверстать, применяя полученные знания. В процессе верстки у вас наверняка будет что-то не получатся. Это нормально, а ответы на возникшие вопросы можно гуглить или просто пропустить проблемный участок, если даже с использование “костылей” не получается корректно реализовать задуманное.

Пример сайта с PSD-шаблонами

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

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

Начните работать

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

Если вкратце:

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

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

Попробуйте несколько направлений

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

  • серверные языки: PHP, MySQL, Python;
  • работу с базами данных;
  • фреймворки для разработки мобильных веб-приложений, например, React Native;
  • основы тестирования.

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

Развитие для продолжающего разработчика

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

Подробнее изучите JavaScript

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

Изучение JavaScript на продвинутом уровне позволит быстрее и плодотворнее освоить и работать с любым популярным фреймворком. Продвинутая фронтенд-разработка основана исключительно на них. Интересные проекты очень редко делаются на чистом HTML и CSS.

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

Освойте один или несколько популярных фреймворков

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

  1. React JS. Самый популярный фреймворк - по нему много вакансий, учебных материалов, а также есть большое русскоговорящее сообщество. Большинство профессиональных веб-разработчиков рекомендуют начинать глубокое изучение фреймворков именно с React JS. Так вы сможете понять логику их работы, плюс, у вас точно не будет проблем с применением полученных навыков.
  2. Angular. Второй по популярности фреймворк, который часто используется в сложных и массивных проектах. Существует две версии фреймворка, полностью отличных друг от друга. Рекомендуется начинать изучение с Angular 2, так как первая версия постепенно уходит с рынка, а вакансии, где она присутствует, связаны в основном с поддержкой уже готовых проектов.
  3. Vue JS. Третий по популярности JavaScript-фреймворк, который отличается легкостью интегрирования в проекты с использованием других JS-библиотек. Достаточно перспективный и простой в изучении.

Статистика фреймворков по популярности. Синий React, черный Angular

Примечательно, что все три фреймворка написаны на основе JavaScript и JQuery, то есть их знание позволит быстрее освоить данные инструменты. Также детальное освоение одного из фреймворков сделает освоение другого более простым, так как основа и логика работы у всех трех примерно одинаковые.

Берите более сложные проекты

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

Не засиживайтесь на одном месте

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

Примеры интересных вакансий для фронтендера на Хабр Карьера

Общие советы

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

Читайте тематическую литературу

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

Войдите в IT-сообщество

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

Заключение

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