👨‍💻️ Как стать профессиональным веб-разработчиком с нуля и найти первую работу

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

Итак, вы решили или задумались о том, чтобы стать веб-разработчиком. Интерес рациональный:

• веб-сайты и веб-приложения не теряют актуальности;
• самые востребованные IT-профессии относятся к веб-разработке;
• заработная плата в отрасли достигает 300 000 ₽;
• в сети достаточно ресурсов, чтобы научиться всему самостоятельно.

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

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

Знакомьтесь – веб-разработчик

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

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

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

1. FrontEnd Web Developer (фронтенд-разработчик) – занимается всем, что видят пользователи: внешним представлением сайтов и приложений, версткой, элементами интерфейса.
2. BackEnd Web Developer (бэкенд-разработчик) – отвечает за логику работы сайтов и приложений, а также обмен данными с удаленным сервером.

Профессионалов, освоивших оба направления, называют Full-Stack Web Developer (фулстек разработчик). Но начинать лучше с чего-то одного. Выберите:

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

Выбор определит, что вы будете изучать и применять на практике.

Как стать веб-разработчиком

1. Начните с основ

В зависимости от специализации вам понадобится различный набор навыков.

Фронтенд

HTML/HTML5

HTML (Hyper Text Markup Language) – язык для отображения данных на сайте. Без него веб-страницы напоминают текст в «Блокноте». Заголовки, списки, таблицы, изображения, кнопки, формы и т. д. – всё это HTML.

HTML5 – последний стандарт языка, поддерживающий ряд важных возможностей. Например, вставка аудио и видео, технология drag-n-drop, векторная графика в SVG, геолокация и т. п.

CSS/CSS3

CSS (Cascading Style Sheets) – способ придать сайту единое оформление, не используя лишний код. Это подобие библиотеки стилей, где вы описываете характеристики визуальных элементов. Например, цвет кнопок или шрифт текста.

CSS3 – активно развивающееся поколение CSS. С ним легко создавать анимации, для которых раньше был нужен JavaScript.

JavaScript

JavaScript – язык программирования, который оживляет сайты, делая их интерактивными. Слайдеры, всплывающие окна, анимация текста, «живой» поиск, мини-игры – всё это реализуется с помощью этого языка.

Три перечисленных столпа фронтенд-разработки (HTML, CSS, JavaScript) часто включают в один курс. Вот подходящие учебные материалы:

• Знакомство с веб-разработкой (HTML, CSS, PHP, JavaScript)
• Уроки HTML5 и CSS
• Современный учебник JavaScript
• Примеры красивых сайтов с HTML, CSS и JavaScript

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

• Vue.js. Самый простой в изучении фреймворк. Активно развивается, подходит для небольших проектов.
• React. Разработка Facebook. Используется для более крупных проектов, требует большего времени для вхождения. На нем, например, сделан фронтенд нашего сайта.
• Angular. Содержит много готовых решений, включая элементы дизайна, подходит для крупных проектов.

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

Бэкенд

Программирование

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

1. PHP – основа основ динамических сайтов, 79% всех сайтов работают на нём. Сколько вариантов отображения может иметь главная страница интернет-магазина? С одним товаром в корзине, с двумя товарами, для Москвы, для Новосибирска, если вход в аккаунт выполнен или не выполнен и т. п. – создавать под каждый случай отдельный HTML-файл было бы невыносимо.

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

Учебные материалы:

• Курс PHP для начинающих
• Обновляемый учебник PHP

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

Учебные материалы:

• Онлайн курс программирования Python 3 с нуля
• Уроки по языку программирования Python

3. Ruby – еще один высокоуровневый язык, который используется для быстрого прототипирования крупных проектов. Известная платформа бронирования жилья Airbnb и сервис для стартапов Kickstarter написаны на Ruby.

Учебные материалы:

• Бесплатный курс по Ruby Романа Пушкина
• Викиучебник Ruby

4. JavaScript – на нем можно писать не только фронтенд, но и бэкенд. Для этого нужно познакомиться с программной платформой Node.js. Она позволяет использовать JavaScript не только в интернет-браузере, но и где угодно ещё.

Каждый из перечисленных языков используется не сам по себе, а как язык фреймворка: для PHP это обычно Laravel или Symfony, для Python это Django или Flask, Ruby стал особенно известен из-за Ruby on Rails, а у JavaScript каждый день появляются новые решения: Express.js, Next.js, Meteor.js и т. д.

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

Базы данных

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

Учебные материалы:

• Интерактивный учебник по SQL
• Прекрасный интерактивный тренажер по SQL на Stepik

2. Прокачайте soft skills

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

1. Способность к концентрации. Объем информации, который вы будете получать в начале пути, колоссален. Учитесь отличать первоочередное от второстепенного. Если следовать каждому совету, вы будете менять язык программирования каждые две недели.
2. Коммуникабельность. Общение с коллегами поможет в решении рабочих задач, со знакомыми – в поисках работы мечты.
3. Умение принимать критику. У каждого разработчика свой подход к программированию, разбираться в чужом коде – непростая задача. Не принимайте критику на свой счет, выделяйте только конструктивные предложения.
4. Умение признавать ошибки. В командной работе важно вовремя сообщать об ошибках. Как бы ни было неприятно, это позволит быстрее их исправить и избежать в будущем.
5. Уверенность в себе. Практически каждый девелопер чувствует себя самозванцем. Не верьте внутренним голосам, которые говорят, что разработка не для вас. Нравится создавать сайты – действуйте!

Учебные материалы:

• Большая подборка материалов по развитию soft skills

3. Практикуйтесь

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

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

• Группа “По бартеру” ВКонтакте
• Группа “Веб-программисты, веб-разработчики” ВКонтакте
• Ищу WEB/IT-специалистов: агрегатор объявлений
• Telegram-канал “Фриланс Таверна”
• Платформа “Дистанция”

Не беритесь за большие проекты, не попробовав свои силы. Полноценный веб-девелопмент работает по тем же принципам, просто в другом масштабе.

4. Станьте частью сообщества

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

С любыми вопросами отправляйтесь по этим ссылкам:

• StackOverflow: форумы, вопросы и ответы, поиск работы
• Хабр: статьи, кейсы, работа и фриланс
• Форум web-программистов
• Reddit, раздел /webdev

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

Для получения новых знаний подпишитесь на каналы Telegram:

• @frontendproglib – библиотека фронтендера;
• @pyproglib – библиотека питониста;
• @phpproglib – библиотека пхпшника;
• @coding_ru – русскоязычный чат веб-разработчиков;
• @devchat – еще один;
• @webprogrammingru – и еще;
• @front_end_dev – для тех, кто выбрал фронтенд;
• @phpme – все про язык PHP;
• @jslang – все про JavaScript;
• @rubylang – про Ruby и Rails;
• @nodejs_ru – о Node.js и связанных сервисах;
• @ru_python – программисты на Python.

Где найти работу

Если вы не сторонник full-time или хотите пройти «боевое крещение» на фрилансе, поищите проекты в нашей публикации «Где программисту искать удаленную работу?»

Вакансии веб-девелоперов также размещают здесь:

• HeadHunter
• Хабр Карьера
• StackOverflow, раздел Jobs
• SuperJob

Создавая резюме для новой профессии, используйте универсальную формулировку «Junior Web Developer». В скобках добавьте «FrontEnd» или «BackEnd», в зависимости от специализации. Так работодатели увидят, что вы претендуете на стартовую позицию, и поймут, чем хотите заниматься.

Следующие ступени карьерного роста – Middle Web Developer (ставка 50 – 200 тыс. ₽) и Senior Web Developer (ставка 120 – 250 тыс. ₽). При смене компании с повышением позиции будьте готовы не только показать портфолио, но и выполнить тестовое задание. Часто оно проверяет знание нужных фреймворков и типичных задач – отличный стимул освежить и расширить навыки.

Итог

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

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

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

• освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
• сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
• поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
• разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
• углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
• изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.