Как стать фронтенд-разработчиком в 2021 году: дорожная карта

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

• Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
• AirBnB: Попробуйте повторить их футер
• PayPal: Попробуйте повторить их навигацию
• Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
• Stripe: Попробуйте повторить секцию оплаты

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

Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

И не забывайте развлекаться

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

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

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

P.S. от переводчика:

Спасибо за внимание!

Понятие Frontend-разработки

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

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

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

HTML

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

CSS

Если разработчик учит HTML, он обязательно осваивает и CSS (Cascading Style Sheets). Этот язык отвечает за внешний вид страницы. С его помощью вы работаете с цветами, шрифтами и расположением различных блоков. Если простыми словами, то CSS используется для красивого оформления страницы и настройки ее внешнего вида уже после того, как основная структура была написана при помощи HTML.

JavaScript

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

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

Soft Skills и Hard Skills фронтендера

Условно знания можно разделить на Soft Skills и Hard Skills. Они могут отличаться не только по навыкам, но и итоговой зарплате. Программист фронтенд должен понимать различия:

Soft Skills. Личностные качества, необходимые для карьерного роста. Сюда условно относят:

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

Hard Skills. Базовые навыки, которые прописываются в должностных инструкциях. Начальные и основные профессиональные умения. Ими обязан обладать даже junior frontend разработчик.

Основное программное обеспечение или что должен знать frontend и использовать в работе:

• HTML;
• CSS;
• JavaScript;
• jQuery;
• Photoshop;
• Шаблонизаторы.

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

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

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

MVC предков — Первоисточник

Отделение данных от представления является основной темой графических пользовательских интерфейсов (как веб-ориентированных, так и настольных). С MVC — Model View Controller, отделение представления (View) от доменной области (Model) было основной мотивацией проектирования. И, без сомнения, MVC была плодотворной работой, которая повлияла на будущие поколения.

MVC был представлен для Smalltalk-80. В MVC объект View отображает данные, хранящиеся в объекте Model. Прежде чем мы сможем полностью изучить потоки данных в MVC, мы должны понять среды прикладных программ того времени (около 1970-х годов):

• Этот MVC был предназначен только для настольных приложений. Веб еще не родился. Мы говорим о десятилетии до этого.
• Забудьте о Web. Сложных операционных систем с графическим интерфейсом не существует.
• Это означает, что прикладное программное обеспечение было очень близко «железу» систем.

Эти ограничения имели важные последствия для MVC. Обязанностью объекта Controller стало реагирование на пользовательские вводы, такие как клавиатура или мышь, и их преобразование в действия над моделью. Кроме того, отсутствие графических элементов в операционных системах означает, что Представление (View) не соответствует тому, что на экране.

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

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

С точки зрения связей:

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

2. Модель реализует шаблон Observer, и на него подписывается один или несколько объектов View. Когда Model изменяется, она вызывает событие, и View обновляется после реакции на событие.

В MVC есть два разных потока данных. Во View-потоке Model не участвует. Это только изменение пользовательского интерфейса. Показ эффекта нажатия кнопки или реакция на событие прокрутки мыши — пример View-потока.

Сегодня мы больше не используем этот MVC и поэтому иногда его называют классическим MVC или MVC предков (father’s MVC).

Как стать frontend-разработчиком с нуля

Должность верстальщика – первая ступень на пути к должности фронтенд-разработчика. Это самый распространенный вариант.

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

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

Чтобы стать frontend-разработчиком с нуля, первым делом познакомьтесь с HTML-кодом и возьмитесь за изучение CSS.

Затем перейдите к главному инструменту фронтенд-специалиста – JavaScript. Вникните в суть работы с фреймворками и системами контроля версий. Разберитесь в серверных технологиях. Основы веб-дизайна, текстовые и графические редакторы станут для вас плюсом во время поиска работы.

А дальше оттачивайте свои навыки, пополняйте знания.

Можно заниматься саморазвитием, читать тематическую литературу. Список книг по frontend-разработке есть на нашем блоге.

Более быстрый способ узнать все тонкости профессии – обзавестись наставником. Найти его можно на онлайн-курсах.

Где учиться

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

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

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

Вот несколько хороших курсов:

• Профессия Frontend-разработчик
• Frontend-разработчик с нуля
• React: библиотека фронтенд-разработки №1
• Специализация Frontend-разработчик
• Frontend-разработчик
• Профессия “Фронтенд-разработчик”

Узнать подробности и ознакомиться с полным перечнем курсов по frontend-разработке можно на нашем блоге.

Где работать

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

Карьерная лестница начинается с пункта “стажер”. Работа позволит набраться опыта и узнать на практике, что такое фронтенд-разработка.

Вакансии можно найти на профильных IT-ресурсах или на популярном сервисе по поиску работы hh.ru.

Если вам достаточно подработки или вы еще совсем “зеленый”, найти работу и испытать себя можно на биржах фриланса. Есть международные сервисы, например, Upwork, Freelancer, Joomlancers, Gigster, Codeable и YouTeam. А есть русскоязычные: Kwork, FL, Freelance.

Биржи помогут начинающим программистам набить руку, собрать портфолио и научиться работать с заказчиками.

У опытного специалиста есть три варианта совершенствования в работе:

1. Вертикальный – рост по карьерной лестнице, постепенное завоевание новых должностей.
2. Горизонтальный – непрерывное совершенствование своих навыков, что приводит к повышению цены за свои услуги.
3. Диверсификационный – обретение новых навыков, смежных специальности фронтенд-разработчик, и последующая переквалификация. Так часто frontend-developer превращается в backend-разработчика.

Как осваивать фронтенд-разработку

Надо начать с основ языка HTML и CSS. Вы должны изучить именно основы этих языков, понимать главные принципы их синтаксиса, знать самые популярные теги. Детально знакомиться с CSS и HTML вы будете в процессе работы над реальными проектами. Так получится намного эффективнее.

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

Итак, основы есть. Следующий шаг – знакомство с сервисами, которые автоматизируют работу, помогают уменьшать объем кода, визуализировать результаты:

1. Git – чтобы сходу отслеживать изменения в коде, которые вы делаете, сохранять их и пересматривать при необходимости.
2. Bootstrap – чтобы создавать яркие и красочные макеты веб-сайтов, не углубляясь в тонкости программирования. Этот сервис многофункциональный и позволяет легко делать очень классные сайты. Которые точно будут «радовать» глаз.
3. Bulma – еще один сервис, чем-то напоминающий Bootstrap. В нем вы будете работать только со стилями CSS, джава скриптов здесь нет. Bulma позволяет изменить в отображении вашей веб-страницы практически все – любые элементы. Причем самыми разными способами. Если разберетесь в этой программе – научитесь делать сайты даже для очень привередливых заказчиков.
4. БЭМ – это подход к программированию, согласно которому вы делите весь свой код на блоки и потом можете использовать уже созданные блоки для выполнения схожих задач. БЭМ будет экономить ваше время и сокращать общий объем кода.
5. Stylus – тоже помогает сокращать код, использовать такие элементы, которые будут «подставлять» нужные теги, чтобы вы не набирали их вручную. Это и быстрее, и проще. И ошибок будете допускать меньше.
6. Vue.js и библиотека Lodash – для более быстрой работы с джава скриптами.

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

Выходим за пределы серверной части

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

Мир серверной MVC, генерирующей HTML + JavaScript. Код JS разбросан по страницам. JavaScript в основном используется для улучшения UX за счет сокращения циклов просмотра сервера (Server View Cycles). Такие вещи, как отправка формы, проверка ввода и т.д. обрабатываются клиентским кодом.

Это самая распространенная архитектура в истории веб-приложений. Большинство приложений B2C, SEO-дружественных веб-сайтов, особенно созданных с помощью CMS — Content Management Systems, используют его. Количество клиентского кода зависит от потребностей приложения.

Эта архитектура как таковая никогда не была действительно стандартизирована и поэтому не имеет названия. Она развивалась инкрементном стиле и до сих пор считается расширением Web MVC. ASP.NET MVC, Java Struts, Python Django, Ruby ROR, PHP CodeIgniter — некоторые из широко используемых сред, широко использующих серверную MVC или Web MVC.

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

Где работает и сколько получает, карьерный рост

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

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

Сеньор – опытный разработчик, знающий разработку проектов на различных уровнях. Senior frontend developer одна из самых высокооплачиваемых стадий вакансии frontend разработки.

Зарплата фронтенд разработчика колеблется от 40 000 рублей и практически не имеет потолка. Напрямую зависит от умений и навыков специалиста.

Средняя зарплата через год работы для juniors, которые обладают качественным portfolio колеблется от 70 000 рублей. Большинство вакансий предполагают работу из дома. Средний потолок 250 000 рублей, но при работе на фрилансе уровень верхней границы отсутствует.

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

• предприятия, создающие софт для бизнеса;
• IT-компании;
• веб-студии;
• стартапы;
• агентства аутсорсинга.

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

1. Вертикальный. Получение новой должности, стандартное продвижение по карьерной лестнице.
2. Горизонтальный. Постоянное развитие навыков, повышение от джуна до сеньора. Чем выше статус, тем выше оплата за услуги.
3. Диверсификационный. Обретение новых навыков в смежной специальности с последующей переквалификацией.

Универсальный работник, который может охватывать задачи и из других областей – наиболее востребованный специалист для компании

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

Как стать фронтенд-разработчиком

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

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

Онлайн-курс от Skillbox даст основы HTML, CSS и JavaScript, научит создавать сайты и оптимизировать их под различные устройства. Дают навыки работы с анимацией оптимизации кода.

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

Ускоренный курс от Гикбрейнс. За 5 месяцев научат создавать крутые сайты. Живое общение в экспертами-практиками, большое количество практики, работа с наставником, удобное разбиение материала по блокам.

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

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

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

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

Machine learning in Frontend. Trial

ML может применяться в задачах разработки веб-интерфейсов. Благодаря библиотеке Tensorflow, которая является одной из популярных библиотек для ML и имеет версию для Node.js и браузера, мы получаем возможность машинного обучения на известном стеке. Здесь JavaScript подтверждает свою универсальность.

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

Одна из наших команд экспериментировала и сделала сервис, предсказывающий вероятность посещения следующей страницы. Затем интегрировала этот сервис в стратегию предзагрузки одного из проектов — теперь в некоторых случаях пользователь при переходе на следующую страницу увидит ее моментально, без ожидания загрузки. Мы разработали свое решение на базе Tensorflow.js. Конкретно для этой задачи существует open-source-решение от Google — Guess.js, которое на основе данных из Google Analytics делает похожее. Советуем попробовать.

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

Что такое фронтенд и чем занимается специалист

Frontend — это разработка интерфейса, с которым взаимодействуют пользователи. Называется она так, потому что это создание наружной части сайта или приложения, а значит, находится снаружи/спереди (front).

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

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

Главные инструменты в этой сфере — языки веб-разметки (HTML, CSS) и программирования (JavaScript):

• JavaScript используется для создания UI (user interface — интерфейс пользователя) с нуля;
• На HTML производится основная верстка, где интерфейс переводится на язык, понятный современным браузерам;
• Через CSS прикрепляются стили к структурированным документам (в случае с frontend это прикрепление стилей к документам HTML).

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

Из этого выходит, что профессия фронтенд-разработчика требует постоянного обучения и нахождения в курсе событий в индустрии.

Отличие frontend от backend

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

За все обработки и действия, которые производятся на серверах, отвечает другой специалист — бэкенд-разработчик. Так как это разные профессии, в backend используется другой инструментал, включающий языки программирования PHP, Perl, Java, Python, Ruby, фреймворки и SQL для работы с данными. Кстати, на нашем сайте есть обзор профессии PHP-программиста.

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

Достоинства и недостатки

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

Перечень плюсов:

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

Список минусов:

• Во многих вакансиях по этой специальности есть требования, касающиеся бэкенда;
• Обязательно взаимодействие с другими сотрудниками (далеко не для всех это минус);
• Хоть JavaScript и не такой сложный и требовательный, как, например, C++, для того чтобы им уверенно владеть, нужно иметь начальные знания алгебры.

Карьерный рост и зарплата

Карьера бэкенд-разработчика начинается со ступени “стажер”. Средняя заработная плата – 20–40 тыс. руб.

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

Он работает под началом своих старших коллег и перенимает у них опыт. Зарабатывает от 30 до 60 тыс. руб.

Средний специалист на продвинутом уровне разбирается в языках программирования. Активно использует фреймворки и начинает самостоятельно выполняет задачи на проекте. Зарплата колеблется в районе 70–120 тыс. руб.

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

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

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

Цена за его работу начинается от 150 тыс. и может удваиваться, а в некоторых случаях – утраиваться.

После карьеры бэкенд-разработчика можно осваивать новую вершину – должность фулстек-разработчика – специалиста, совмещающего в себе frontend и backend-программиста.

Если говорить о зарплатах в городах, то выстраивается такая картина:

1. Москва: 80 000–300 000 руб.
2. Санкт-Петербург: 70 000–250 000 руб.
3. Калининград: 40 000–170 000 руб.
4. Ростов-на-Дону: 30 000–220 000 руб.
5. Омск: 40 000–150 000 руб.
6. Хабаровск: 60 000–160 000 руб.

Все цифры – это средние значения. Все зависит от навыков программирования, общих тематических знаний, опыта и личностных характеристик.