8 шагов, чтобы получать 200 тысяч за код

Сохраните в закладки сейчас, скажете спасибо через год. Сначала шаги, в конце каждого этапа — ссылки для внеклассного чтения.

1. Познакомьтесь с веб-разработкой

Продолжительность этапа: 1 месяц.

Сначала будет много непонятных слов, аббревиатур и голова пойдёт кругом. В одном JavaScript десятка три направлений, поэтому нужно понять, ваше ли это вообще. Смотрите видео на Ютубе или тренируйтесь на тренажёрах. Другой вариант — по учебникам, но с ними сложнее всего. Электронные пока держатся, а вот бумажные устарели ещё до публикации.

Что знать на этом этапе:

1. Структуру HTML.
2. Отличия фронтенда и бэкенда.
3. Разметку и оформление текста.
4. Как размечать страницу по макету.
5. Как ставить ссылки и вставлять изображения.
6. Основы CSS — правила, селекторы, свойства и каскадирование.
7. Хотя бы немного понимать, как работает и где применяется JavaScript.

Для начала вам даже не нужен сайт. Чтобы было проще и дешевле — настройте на домашнем компьютере сервер и экспериментируйте там. Можно и код покрутить, и вёрстку поломать, и написать пару скриптов на PHP.

Где применять знания. Пока просто поймите, какая из областей веб-разработки нравится больше (и нравится ли вообще хоть что-то).

Что читать:

• Веб-разработка, с чего начать
• Книжки по разработке
• Книжки по JavaScript
• Сколько человек делают сайт
• Чем отличаются фронтенд, бэкенд и фулстек

2. Постепенно увеличивайте уровень сложности

Продолжительность этапа: 2 месяца, деньги — до 10 тысяч.

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

База. На этом этапе нужно знать обо всём, из чего строятся страницы — о формах, таблицах, медиа-элементах и всём остальном. Хорошо строить сетки, отличать флексы от гридов и декорировать страницы. Ещё хорошо бы не путать друг с другом переменные, типы, условия, циклы, массивы и объекты. Хотя бы со словарём и StackOverflow.

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

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

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

А ещё не бойтесь, что всё сломалось или не получается. Это как в качалке — сначала тяжело, а потом бицуха.

3. Запишитесь на полноценный курс и пройдите его

Продолжительность этапа: до полугода.

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

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

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

В курсах по вёрстке должны быть:

• Семантическая разметка
• Сетки на флексах и гридах
• БЭМ
• Адаптивная вёрстка
• Анимация интерактивных элементов
• Векторная графика
• Ретиновая и адаптивная графика
• Доступность
• Автоматизация

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

Концепции:

• Работа с DOM-деревом
• Встроенные API
• Шаблонизация
• Асинхронность
• Валидация форм
• Области видимости функций
• Модульность
• Объекты, иммутабельность и компонентный подход
• Связывание данных

Аббревиатуры:

• HTTP: XML, JSON, JSONP, XMLHttpRequest
• REST API
• DRY, KISS, SOLID
• ООП

Инструменты для вёрстки и JavaScript:

• Препроцессоры (LESS, Sass)
• Gulp или webpack для автоматизации сборки
• Git для контроля версий
• Figma для графики
• Chrome DevTools для отладки
• Терминал

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

Делайте проекты, которые интересны лично вам или полезны в хозяйстве.

Идеи проектов для тренировки: **

• Клон несложной игры из восьмидесятых: Space Invaders, Pacman или что-нибудь с Atari 2600. Да хоть крестики-нолики (но против компьютера).
• Интерфейс для умного дома. Выведите на одну страницу показания датчиков.
• Время прибытия транспорта на остановку у дома. Берём открытые данные и крутим их.
• Таск-трекер. Их делают все, но вдруг у вас получится первый нормальный.

Деньги. После курсов по вёрстке можно пойти младшим верстальщиком за 25–45 тысяч (в зависимости от города) и делать хорошие сайты. Обычно верстальщикам быстро наскучивает верстать, и они идут на курсы по JavaScript — это увеличивает количество задач и поднимает зарплату до 63 тысяч. К тому же хорошие разработчики быстро растут, так как их меньше, чем нужно в индустрии.

4. Найдите знакомого, который разбирается в теме

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

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

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

5. Выучите какой-нибудь фреймворк

Продолжительность этапа: 1–3 месяца, в зависимости от занятости.

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

Что учить. Самые популярные и прибыльные для фронтендеров — React, Angular, Vue, Svelte и Preact. Для бэкендеров — Laravel, Flask, Django, Express.js и Ruby on Rails.

Если вы знаете JavaScript, но вам понравилось делать бэкенд, попробуйте Express.js — это фреймворк для Node.js.

Суть фреймворков. Они устаревают быстрее бумажных книг по фреймворкам. Будьте готовы доучиваться, так как на очередном месте работы может понадобиться Vue вместо React, с которым вы уже знакомы. Поэтому относитесь к ним серьёзно, но не слишком.

Где применять знания. Для практики на этом этапе попробуйте сделать какое-нибудь тестовое задание по React — на Гитхабе есть репозиторий, где лежат задания разных крупных компаний. Выберите то, которое понравилось, разберитесь и реализуйте. А потом положите результат к себе на Гитхаб — лишним не будет.

Деньги. На этом этапе можно зарабатывать ещё больше — средняя зарплата React-разработчика около 150 тысяч. И чем дольше и лучше вы работаете, тем больше получаете.

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

6. Пройдите стажировку с командой

Продолжительность этапа: до полугода.

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

Где стажироваться. Это или несколько месяцев в крупной компании летом (обычно туда берут студентов старших курсов), или от 3 месяцев до полугода в компании, которая целенаправленно берёт стажёров на вырост.

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

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

Компании, которые берут себе стажёров, часто встраивают их в команду с менеджером, тестировщиком и другими программистами — вот тут-то и нужно проявить себя.

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

Что читать: **

• Как устроен «Акселератор» в HTML Academy
• Всё о стажировке в «Лиге А.»

7. Найдите работу

Продолжительность этапа: у кого как.

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

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

Деньги. Зависит от компании и города. Если вы знаете и умеете всё, что написано выше, хорошо ладите с коллегами и можете спроектировать большой сайт самостоятельно, можно претендовать на зарплату, о которой мы писали в пункте 5. С постоянным развитием и обучением она может повышаться почти бесконечно — потолка особо нет. Тут уж как договоритесь.

Что читать:

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

8. Участвуйте в жизни сообщества

Продолжительность этапа: всю остальную карьеру.

Если вам есть чем поделиться, ваша ценность растёт.

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

Куда ездить. На митапы из этого календаря.

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

Учитесь вообще всё время

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

Как получать 200 тысяч за код

1. Познакомиться с веб-разработкой и определиться с направлением.
2. Постепенно доучивать более сложные вещи (здесь нужно завести Гитхаб).
3. Пройти курсы по фронтенд-разработке (начиная с этого пункта можно искать работу).
4. Найти наставника.
5. Выучить популярный фреймворк и регулярно на нём писать.
6. Пройти стажировку и научиться работать в команде.
7. Уже точно найти работу и проработать там год.
8. Разбираться в новом, писать об этом и выступать на митапах.
9. Постоянно учиться.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.