Как стать JavaScript-разработчиком в 2023
- 7 июля 2022
Короткий ответ: читайте статьи и книги, смотрите обучающие видео на ютубе, проходите тренажёры и курсы, установите VS Code и попробуйте что-то написать — в общем, учитесь и практикуйтесь, без этого ничего не получится.
Есть и длинный ответ.
Уровень 1. Знакомство
Выучите основы HTML, CSS и JavaScript. HTML — каркас и основа всех сайтов, поэтому нужно знать, что такое теги, как их использовать, и потренироваться ставить <и>
. Проще всего изучить на тренажёре.
Важные навыки:
- Верстать текст и оформлять его.
- Ставить ссылки и изображения.
- Основы CSS — правила, селекторы, свойства и каскадирование.
- Хотя бы немного понимать, зачем нужен JavaScript.
Научитесь отличать фронтенд и бэкенд. Для начала запомните, что фронтенд — видимая часть сайта, а бэкенд — невидимая. Он нужен, чтобы доставать что-то из базы данных и вставлять на страницу.
Фронтенд — HTML, CSS, JavaScript
Бэкенд — PHP, MySQL, Python
Узнайте, зачем нужны макеты. Это важно хотя бы в общих чертах — дизайнеры будут приносить вам свои картиночки, а вы их превращать в код. Еще полезно найти себе макет для практики — например, в каком-нибудь канале. На таких макетах удобно практиковаться или даже положить в портфолио, главное, попросите разрешения у автора.
Практикуйтесь на макете. Для начала настройте всё на домашнем компьютере и экспериментируйте там. Можно и код покрутить, и вёрстку поломать, и написать пару скриптов на PHP.
Уровень 2. Погружение
Углубитесь в HTML и CSS. Смотрите на формы, таблицы, флексы, гриды, медиаэлементы. То есть весь обвес, который можно добавить к текстам, картинкам и ссылкам.
Изучите JavaScript. Узнайте, что такое переменные, типы, условия, циклы, массивы и объекты. Хотя бы со словарём и StackOverflow.
Заведите Гитхаб. На этом этапе лучше научиться пользоваться Гитхабом и завести себе репозиторий. Вы сможете показывать хорошие проекты работодателям, чтобы не делать все подряд тестовые задания при приёме на работу.
Где применять знания. Сделайте себе сайт, используя все полученные знания. Соберите страничку, расскажите о себе и своих навыках и оставьте ссылку на Гитхаб. Потому пригодится. Чтобы вдохновиться, зайдите на Behance и наберите в поиске free site web design или free portfolio site web design.
А ещё не бойтесь, что всё сломалось или не получается. Это же код, просто нажмите Ctrl+Z.
Уровень 3. Курсы
Курсы — короткий путь, чтобы не собирать информацию по кусочкам по всему интернету.
На хорошем курсе по вёрстке научат семантической разметке, сеткам, адаптивной вёрстке, анимациям, работе с графикой, доступности и автоматизации. Проверьте, что всё это есть в программе, потому что потом могут спросить на собеседовании.
В курсах по JavaScript должны объяснять базу — типы, операторы, алгоритмы, функции, циклы, объекты и структуры данных. Разберитесь с этим и научитесь применять, а не просто отличать одно от другого.
Сложное. Разберитесь с DOM, API JavaScript и другими сложными вещами, вроде ООП, асинхронности, валидации форм или Event Loop. Но не думайте об этом в самом начале, всё придёт с опытом. Да и на курсах это точно дают. Ещё профессиональному разработчику пригодится навык «гонять джейсончики». Для этого стоит изучить форматы передачи данных, например, XML
, JSON
, JSONP
и умело управляться с XMLHttpRequest.
Программы на каждый день. Разберитесь с препроцессорами (LESS или SASS), Webpack для сборки, Git для контроля версий, Figma для экспорта графики, DevTools для отладки. Ну и терминал, куда же без него.
После курсов попробуйте найти работу младшим JavaScript-разработчиком — или, по-другому, джуном.
Уровень 4. Фреймворки React, Vue или Angular
Самые популярные и прибыльные для фронтендеров — React, Angular и Vue.js. В разных компаниях нужны разные, но React встречается чаще всего. По нему тоже есть курсы, так что пробуйте — можно даже взять целую профессию, где всему научат с самого начала.
Важно — фреймворки быстро устаревают. Поэтому будьте готовы доучиваться, так как на очередном месте работы может понадобиться Vue.js вместо React, с которым вы уже знакомы.
На этом уровне можно зарабатывать больше 100 тысяч, если вы уже где-то поработали, хорошо знаете основы и не теряетесь в простых задачах. И чем дольше и лучше вы работаете, тем больше получаете.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Пришел «зелёным» junior и вырос до «жёлтого» middle. История выпускника
_Поговорили с фронтенд-разработчиком Александром Масленниковым и узнали, насколько сложно ему было пройти путь от новичка после курсов HTML Academy до полноценного мидла в компании «5 углов».
Александр рассказал, как выбирал будущие курсы, насколько сложно быть программистом-джуном, и как вкатиться в профессию, если тебе уже за 30._
— Ты пришёл в «5 углов» сразу после курсов?
— Да. Работаю тут уже три года. По сути, первое серьёзное собеседование я прошёл в компании «5 углов». Остальные работодатели не отвечали, как это часто бывает на hh.
Кстати, «5 углов» я нашёл не через hh, а через HTML Academy. У них есть своя небольшая площадка, где компании, с которыми они сотрудничают, оставляют вакансии, а затем выбирают сотрудников среди выпускников.
— Получается, можно просто закончить курсы HTML Academy и идти искать работу?
— Можно, но если у тебя кроме учебных проектов будет ещё что-то, шансов намного больше. Курсы дают начальные знания для входа в мир IT, а дальше нужно расти самому. В разработке нужно всегда учиться новому.
— На кого ты учился в университете?
— По образованию я бухгалтер-аудитор, но по специальности я так ни разу в жизни не поработал. В основном работал в продажах, продажах и ещё раз в продажах :)
У родителей был семейный бизнес — магазинчик, я им помогал, был администратором в магазине. Занимался всем подряд — если надо было, то подменял продавцов, выезжал за товаром и на выставки, проводил ревизию и аудиты. Магазин работал по франшизе, поэтому были обязательства с определёнными компаниями.
Основные поставки шли из Турции, какая-то часть из Европы, то есть всё было привязано к курсу доллара. И когда он поднялся до 70, стало очевидно, что для нашего городка такой магазин становится нерентабельным, и мы закрылись. После этого я взял небольшой перерыв и подался в раздумья, чем бы хотел заниматься.
— Рассматривал что-то, кроме программирования?
— Некоторые моменты жизни я посвящал онлайн-играм, этим занимались мои знакомые и друзья. Один из хороших знакомых запустил свой проект — магазин по предоставлению игровых услуг, ему были нужны надёжные исполнители, и на некоторое время я решил остановиться там. Собрал себе небольшую команду, и мы занимались различными заказами.
Но время шло, и всё чаще приходили мысли о том, что нужна стабильная и надёжная работа. Так как кроме продаж я ничего не умел, пошёл продавать квартиры. Через полгода работы риелтором я понял, что продажи просто ненавижу. Хотелось чего-то более спокойного, где будут какие-то рамки, ТЗ, и ты можешь спокойно работать, никто не будет напрягать.
Знакомый с большим опытом в разработке посоветовал попробовать программирование, порекомендовал начать с вёрстки сайтов и даже посоветовал курсы. У них в команде был выпускник HTML Academy, и они остались довольны.
— Хватило ли тебе навыков, которые ты получил на онлайн-курсах в HTML Academy, чтобы начать работать?
— Вполне, у них очень большое покрытие навыков, начиная от обычных HTML, CSS и JavaScript, и заканчивая React, Vue, PHP. Они сейчас очень много всего дают. По сути, это выглядит так: тебя учат алфавиту и базовым словам, а потом ты должен научиться составлять из них предложения. Чем красивее ты составляешь предложения, чем они лучше и больше, тем ты профессиональнее становишься.
Всё зависит от компании, в которую пытаешься попасть. Если там пишут в вакансии что нужен junior — не факт, что это так и есть. Некоторые обозначают требования, которые уже явно соответствуют разработчику с опытом в пару лет. Тут не стоит расстраиваться и опускать руки. Пока не пригласили на собеседование, стоит дальше учиться самостоятельно и пополнять портфолио.
Интересно оформленное портфолио — огромный плюс, оно показывает отношение сотрудника к работе.
— Есть популярное мнение, что junior-разработчиков никто не любит, и их не хотят брать на работу. Было ли три года назад так? Можешь ли ты назвать везением, что тебя взяли на работу так быстро?
— Это ошибочное мнение. Полагаю, что оно появляется на фоне того, что многие онлайн-школы сулят высокие зарплаты, но когда после прохождения курсов не берут на подобные зарплаты, случается небольшой шок. Надо понимать, что после прохождения курсов у вас 0 опыта. Учебные проекты не в счёт — они сделаны под присмотром наставника, и компания, куда вы направляете своё резюме, скорее всего это понимает. Я думаю, что компания всегда хочет себе опытного сотрудника, и не важно, какая это сфера.
Так было и три, и десять лет назад, это есть и сейчас, ничего удивительного. Если хотите повысить свои шансы на успех, после курсов стоит продолжать учиться и пополнять своё портфолио, например, различными интересными тестовыми заданиями.
То, что я нашёл работу буквально через три месяца после курсов, я считаю большим везением. Предполагал, что поиск работы займет минимум год. Уже был составлен план, как буду двигаться в течение года:
- Раз в неделю проходить по вакансиям и брать в работу тестовые задачи;
- Пытаться повторить какой-нибудь простенький сайт,
- Если пригласили на собеседование, то обязательно иду, ведь даже из неудачного собеседования можно получить много полезного опыта.
В общем, была цель набраться опыта и заполнить портфолио.
— Сейчас на Youtube очень много видео, в которых критикуют онлайн-курсы. Можешь сказать, действительно ли они работают?
— Онлайн-курсы — это такая же система обучения, как и вузы, только попроще и более точечная. Вообще, сама система онлайн-курсов — крутая вещь. Она позволяет, живя в какой-нибудь деревне, получить образование, которое сейчас востребовано, прокачать свои навыки, найти крутую работу, сделать головокружительную карьеру, быть востребованным на рынке труда. Но в это верят не все. Может быть, они не понимают, как это работает, или не тратят все силы.
Онлайн-курсы — это такая же система обучения, как и вузы, только попроще и более точечная.
Я рассматривал и очную систему обучения. Выбрал школу при МГТУ им. Н. Э. Баумана в Москве. Там огромный выбор курсов, в том числе по HTML и JS. Ездить мне было удобно — полтора часа, и я там. Но звёзды так сложились, что и цена в два раза дороже, и начался ковид. Было непонятно, что вообще происходит, поэтому решил отказаться от очного обучения.
В итоге, я взял в HTML Academy начальный курс «HTML и CSS. Профессиональная вёрстка сайтов», который просто объясняет, что такое HTML и CSS — можно сказать, азы. Были онлайн-лекции, в чате я мог задавать вопросы, и после каждой главы лектор отвечал на них. Также можно было выбрать себе одного наставника, который помогал в течение курса. Всё выглядело цивилизованно. По итогу первого курса мне всё понравилось, и я взял следующий курс. Позже добрался до курса по JS, потому что без него никуда.
Я смотрел курсы других онлайн-школ, некоторые из них очень хвалили в интернете. Если честно, эти расхваливания выглядели странно. По опыту работы с клиентами могу сказать, что люди охотнее пишут плохие отзывы, чем хорошие. У некоторых цена была аж в два раза дороже, а дороже не значит лучше. Сомнений было много.
— В целом, ты можешь порекомендовать HTML Academy?
— Да, я до сих пор у них периодически беру курсы. У нас на работе есть плюшки — оплата 50% стоимости курсов для роста квалификации. Как пример, я посчитал, что нашей команде нужен курс «Вёрстка email-рассылок». Люди, которые сейчас приходят, даже не знают про неё, ведь этим пользовались лет десять назад. Так как в компании кто-то должен уметь делать e-mail верстку быстро и качественно, я взял эту роль на себя. Обсудил это с руководителем отдела, и компания мне покрыла половину стоимости.
— Какие навыки пришлось приобретать, когда ты уже пришёл на работу?
— В начале очень нужны были soft skills для постоянного общения с коллегами. Так как сфера была для меня полностью новая, я вообще не знал, что делать в некоторых моментах. У меня постоянно были вопросы: «Как подключаться? Где что брать? Что произошло?».
Надо было всё это узнавать, и желательно каждый раз не доставать коллег вопросами. Приходилось самому искать решения, а если не находил, то шёл к старшему коллеге, предварительно собрав вопросы в охапку. Первое время нужны именно такие навыки.
В хорошей компании понимают, что junior-разработчика не нужно грузить какой-то тяжелой работой, от которой он сломается. Так ведь и психологическая травма может случиться: потратил кучу денег, времени на обучение, а тут пришёл и на первой же задаче споткнулся.
— Как ты себя чувствовал в первые дни работы? Может, были мысли все бросить?
— Мысли бросить бывали, наши проекты уникальные, поэтому довольно часто встречаются такие задачи, над которыми надо изрядно поломать голову.
Поначалу ещё не умеешь распределять грамотно время и, как большинство новичков, сидишь в нерабочее время и пытаешься что-то сделать. Есть груз ответственности, можно и подгореть. Большую роль играет коллектив и атмосфера. Очень круто, если есть возможность созвониться с коллегой или руководителем отдела и обсудить свою проблему. Взгляд со стороны мне не раз помогал.
Периодически бывает тяжело — растут конкуренты, рынок, спрос. Надо уметь делать то, что не умеют другие.
— Доволен ли ты свои выбором профессии?
— Если смотреть из тех вариантов, которые у меня были, я считаю, что пошел по самому лучшему. Я доволен.
Решающих вещей много: коллектив, начальство, зарплата, возможность работать удалённо. Нет проблем взять отпуск на пару дней, если случилось что-то срочное. Совокупность всех этих вещей сейчас меня устраивает.
— Можешь охарактеризовать или описать парой слов, каким ты был в начале пути, и то, какой ты сейчас?
— Вот это самое тяжелое, на самом деле, потому что мне кажется, что я не так далеко ушел от начала пути. Сфера очень большая, прошло всего три года, как-то хочется намного больше уметь.
Я считаю, что хороший опыт для программирования лет 8: всё можно попробовать, поменять направление, на котором ты вырос, войти во что-то новое. Можно зайти в новое направление одним из первых и рассказать, какой ты классный.
В начале пути я был «зеленым», а сейчас «желтый». «Красный» будет, когда я буду матёрым, и буду говорить, что справлюсь с любой задачей.
— Профессионалом ты назвать себя пока не можешь?
— Я считаю себя middle. Если ты самостоятельно можешь решить задачу, уверенно и полноценно использовать свои инструменты и библиотеки, при этом ты заранее заботишься о том, как с твоим кодом дальше будут работать коллеги, поздравляю, ты — middle-разработчик.
Senior уже имеет весомый опыт за спиной, заранее понимает, какие проблемы могут быть на проекте и как их избежать, какие решения могут пригодиться. Также он имеет хорошо развитые soft skills. Написание кода и многие решения уже отточены и понятны, их удобно поддерживать.
— Какие навыки у тебя были в начале и какие сейчас? Что ты приобрел нового?
— У меня просто вырос багаж знаний. Когда я пришел в начале, часто все делал сам, не использовал библиотеки. Сам колхозил. Было жестко, больно, неприятно, но это необходимый опыт.
Сейчас использую различные библиотеки. Я знаю, как что-то подключить, как настроить. Это же нельзя назвать навыком, просто понимание. Со временем прокачал soft skills и гибкость, которая позволяет применять полученные знания, начал думать о том, как будут пользоваться и поддерживать мой код другие разработчики.
— Сколько тебе было лет, когда ты поменял профессию? Согласен ли с тем, что свою специальность можно менять в любом возрасте?
— Мне было 34, когда я закончил курсы. Вопрос довольно популярный на самих курсах, часто спрашивали: «Мне 40 лет, нормально ли идти на курсы?». В интересах создателей курсов, конечно, соглашаться. Но на самом деле всё зависит от человека, насколько твой мозг готов впитывать полностью новую информацию. Новая информация в голове — это в принципе очень тяжело. Даже у детей, когда они что-то не понимают в школе, бывает стресс. Когда человек взрослый, мозги у него немного «подсыхают» и их надо постоянно тренировать. Если готов впитывать все новое, то ты сможешь.
— Нет ли у тебя зависти к шестнадцатилетним специалистам, которые вкатились по возрасту раньше тебя во фронтенд?
— Я слишком стар, чтобы кому-то там завидовать, вырос из этого уже. Тут важно понимать, что у каждого свой старт и свой путь. Если у вас есть время кому-то завидовать, то лучше потратить его на себя.
Это как в школе — кому-то дается физика и математика, а кому-то русский с литературой. Всё зависит от человека. Можно, конечно, зазубрить предмет, но ты должен просто задать вопрос «Насколько тебе комфортно в этой сфере?». Если тебе не нравится, но ты готов оставаться ради того, чтобы зарабатывать деньги, окей, это твой выбор. Но скорее всего сгоришь потом.
Поэтому я и брал курсы по чуть-чуть, чтобы попробовать кусочками и, если что, переключиться на что-то другое.
- 1 февраля 2024
10 правил онлайн-собеседований
В мире, полном удалённых работ и учёб, есть много нюансов, о которых легко забыть на онлайн-собеседовании. Делимся по своему опыту:
- 9 октября 2023
Портфолио разработчика. Все секреты
Портфолио — это важный инструмент для любого разработчика, особенно для начинающего. Оно показывает ваши навыки, опыт и квалификацию, привлекает внимание работодателей и повышает шансы на получение оффера мечты.
- 3 июля 2023
Как получать 200 тысяч за код в 2024 году
Сохраните в закладки сейчас, скажете спасибо через год. Сначала шаги, в конце каждого этапа — ссылки для внеклассного чтения.
- 12 июня 2023
Верстальщик. Гайд по профессии
В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.
Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css
на десять тысяч строк.
Сейчас же грань размылась — теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.
В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флексов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.
С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2023 году требуют от верстальщика работодатели.
Мы в HTML Academy работаем над тем, чтобы верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.
- 8 июня 2023
Веб-разработка. С чего начать
На старте бывает непонятно, какой язык программирования выбрать первым. На самом деле, нет идеального языка, который раз и навсегда определит вашу карьеру. Освоить новый язык программирования — всё равно что выучить ещё один иностранный. Сначала надо определиться, что вам больше подходит: фронтенд или бэкенд.
- 2 июня 2023
Как устроиться туда, где закрыты все вакансии
Если вы мечтаете работать в определённой компании, но не нашли вакансий на сайтах по поиску работы — ещё не всё потеряно. Проверьте объявления на других площадках. Если и там ничего нет, воспользуйтесь «обходными путями»: начните со стажировки или познакомьтесь с рекрутёром.
- 14 февраля 2023
Хочу работать в IT, но…
Изучать что-то новое всегда — волнительное и завораживающее событие. Но некоторые останавливаются, даже не начав. Почему так происходит? По разным причинам, но бывают случаи, что из-за мыслей «ещё рано», «уже поздно», «нет технического образования», «не знаю английский». Мы покажем на примерах, что возраст, наличие образования и знание английского — не проблема для смены профессии.
- 19 января 2023
Как стать фулстек-разработчиком
В отличие от фронтендеров и бэкендеров, фулстек-разработчик способен полностью самостоятельно создать сайт или приложение. Такой специалист отлично разбирается в технологиях, базах данных, серверах, умеет разрабатывать веб-приложения и сайты, знает как фронтенд, так и бэкенд. Давайте узнаем, в чём преимущества профессии, насколько она востребована на рынке и как стать топовым специалистом.
Фулстек-разработчик сочетает несколько направлений и может заменить собой пару более узких специалистов. Главная его особенность — это универсальность. Именно поэтому спрос на таких специалистов всегда есть и постоянно растёт. Многим компаниям выгоднее нанять одного универсального разработчика, чем содержать штат программистов.
Топовых фулстек-разработчиков очень мало, они востребованы и имеют возможность выбирать из ряда предложений то, что им интересно. Джуны с небольшим опытом в сфере фулстек-разработки могут рассчитывать на зарплату от 30 до 100 000 ₽ в месяц. Опытный разработчик получает в среднем вдвое больше — 120—200 000 ₽.
💡 Что должен уметь топовый фулстек-разработчик:
Понимать полный цикл процесса разработки.
Уверенно знать современный JavaScript (ECMAScript), применять TypeScript.
Строить архитектуру клиентских и серверных приложений.
Применять ООП и паттерны проектирования на практике.
Проектировать и разрабатывать REST API.
Проводить автоматизированное тестирование фронтенда и бэкенда.
Работать с базами данных.
Зарплаты фулстек-направления
Исследования компании Хабр Карьеры за 2022 год говорят, что средняя зарплата разработчиков в России составляет 140 000 ₽. Сумма немного различается по регионам. В Москве зарплата подросла за год и составляет 180 000 ₽, в Санкт-Петербурге осталась на уровне начала года — 150 000.
Зарплата фулстек-разработчика в среднем составляет 200 000 ₽ в Москве, 160 000 ₽ в Санкт-Петербурге и 130 000 ₽ в регионах.
Этот анализ зарплат составлен по вакансиям сайта hh.ru.
Также специальность фулстек ценится за границей, зарплаты в Европе и в Америке очень достойные. В Нью-Йорке опытный фулстек зарабатывает 3000—3500 $. В Германии работодатели указывают в вакансиях зарплату 2500—4000 $.
Изучив вакансии и уровень дохода, скорее хочется прокачать навыки и стать фулстек-разработчиком. Что же для этого нужно?
- 20 декабря 2022
Как написать хорошее сопроводительное письмо
Вот вы нашли подходящую вакансию и уже готовы откликнуться — осталось только написать сопроводительное письмо. Оно дополнит резюме и поможет вам выделиться среди остальных кандидатов.
- 14 декабря 2022