За сколько можно стать frontend разработчиком

За какой срок можно выучиться на junior front-end dev.?

Доброго времени суток, я новичок, месяц назад начал интересоваться изучением основ- создания сайтов, так сказать и выделил для себя направление и цель, может даже мечту в жизни, где хотел бы развиваться. Уже изучил основы около 60% html и css, хочу углубиться и найти хорошую практику. Есть огромное желание, есть ресурсы, время, и прочие мотивирующие вещи. Но вопрос что учить после html, сss, java основ? И сколько занимает по времени становление джуном? год?
И где найти практику для всего этого +- интерактивную и понятную?
В общем помогите пожалуйста новичку, что учить потом? и как реализовать свой путь, чтобы потом не сидеть и не думать а что дальше? а каждый день изучать и практиковаться.

• Вопрос задан более трёх лет назад
• 20193 просмотра

3 комментария

Простой 3 комментария

alex @potapchino
spoiler

За какой срок можно выучиться на junior

— в среднем 1 год чтобы по опыту выйти на уровень junior при условии работы в студии.
Вам нужно поставить правильные цели. Учиться ради учёбы нет смысла. Нужно учиться под конкретные требования вакансий и ходить на собеседования с целью устройства в веб студию.
На фрилансе вы не стартанёте без опыта, либо срок старта будет в два-три раза дольше.

Зависит от базы, от эникея до верстальщика можно за месяц.
Решения вопроса 0
Ответы на вопрос 5

Creative frontend developer

60% html и css

А вы уверены? Рекомендую пройтись по списку know it all, чтобы точно понимать, что вы знаете, а что — нет. И это не издевка. Для разработчика очень полезно иметь представление о том, что существует в его языках, кроме того, что он «знает». Это помогает меньше тупить там, где есть стандартное решение, которое можно за секунду загуглить, но только если знаешь, что оно вообще существует в природе.

что учить после

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

где найти практику

Макеты для верстки — в гуглопоиске, интересные примеры и еженедельные челленджи — на CodePen, вопросы из бытовой фронтендерской практики и разные решения для них — тут, на тостере (отвечать тоже полезно, пока объясняешь что-то другому — сам лучше понимаешь).

Ответ написан более трёх лет назад
Нравится 2 1 комментарий

спасибо за табличку, приятная.
я уже наверно лет 10 собираюсь выучить наконец html+css хотя бы на 50% 🙂

Vaultboy84 @Vaultboy84

Каждый день читаю эти аутотренинг посты от нубов, про фронтенд девелоперов и про то как они уже почти почти выучили хтмл сиэсэс и джс. Что дальше? Энтерпрайз? Гугл? Васюки центр галактики? Я верстаю уже наверное лет 5-6 и время от времени натыкаюсь на новые сиэсэс свойства. К тому же верстка это не знание тегов и свойств, это представление о стандартах. Как правильно работать с изображениями, как писать валидный, семантический и максимально оптимальный код, с минимальным количеством запросов, работа по методологии, это знание современных форматов и костылей, это поддержка легаси, это верстка писем, это работа с фреймворками, движками, шаблонизаторами, сборщиками. Это постоянный бег за новыми технологиями, чтобы хотя бы остаться на месте, нихрена вы не знаете кароче. )

Ответ написан более трёх лет назад
Нравится 2 4 комментария

Ну да, так то логично, обычно задают вопросы, когда не знают чего-то
Vaultboy84 @Vaultboy84

Myasos, кому то нравится осваивать новое. Это от человека зависит. Хорошо, что люди разные, каждый может найти свое призвание.

За 2 — 3 года можно было бы стать Senior+ FullStack Developer, а ты 6 лет верстаешь?
Vaultboy84 @Vaultboy84

Web Programmer Web Programmer, а ты стал? Сколько я не встречал так называемых фулл стаков — это обычно везде по верхам и нигде нормально. А потом вопросы в стиле, как сделать что-либо при помощи фреймворка или библиотечки. Типичные костыльщики, способные только юзать фреймворки и библиотеки. Зачастую даже фронтенд нормально верстать не умеет. И я еще не встречал нормально верстающего бэка. Возможно такие и есть, но их редкость говорит о нетривиальности такого набора скиллов. Это без ограничения по времени от слова вообще. Ну а стать за 2-3 года сеньором фуллстаком — это детский лепет. Школу закончи, а потом уже свои фантазии рассказывай. Или ты там рекламы курсов обсмотрелся? лол))

Даже тупо для верстки надо знать: html, css, парочку препроцессоров типа sass, less. И да, знать это не просто выучить эти названия. Знать — это уметь верстать и легаси и рассылки и на таблицах и на флотах и на флексах и на гридах и понимать где, что и когда лучше использовать, это знать методологии и не только банальный БЭМ или SMACSS. Знать парочку фреймворков для быстрого прототипирования. Ну хотя бы материал, бутстрап, фандейшн. Уметь в семантику, знать спецификацию W3C, уметь работать с оптимизацией кода, для гугл спид теста и загона сайта в зеленую зону, понимать азы сео-оптимизации, уметь работать с оптимизацией изображений, знать анимации как на css кейфреймах, так и на js с помощью какого-нибудь GSAP. Уметь работать с таск менеджерами типо галпа и сборщиками типо вебпака, уметь в контроль версий на гите, свн или чем то подобном. Знать среды для командной разработки, типо гитлаба, ажур и т. п. И это я не касался jquery, js native в том числе и легаси, пары фреймворков для js, которые верстаку надо тоже знать хотя бы базово, чтобы понимать, как работают SPA . Ну а дальше идет фронтенд, глубокое погружение в джс, алгоритмы, тестирование так далее. И помимо этого еще язык для бэкенда, знание баз данных и пары фреймворков для бэка. Большего бреда я давно не слышал))

Ну и в подтверждение моих слов говорит то, что топикстартер якобы за месяц изучил 60% верстки более двух лет назад, но при этом задавал 8 месяцев назад элементарный вопрос по верстке.

За сколько можно стать frontend разработчиком

Я окончил МГУТУ им. К. Г. Разумовского по специальности «Юриспруденция», но юристом никогда не работал. Уже на втором курсе пришло осознание, что я ошибся с выбором профессии. Чтобы не расстраивать родителей, просто плыл по течению: ходил на пары, сдавал экзамены, получил диплом. Единственное, на что сгодилось мое образование, это бесплатные юридические консультации для близких родственников.

Как и многие студенты, после пар я подрабатывал. Сначала работал грузчиком-комплектовщиком на складе в «Комусе»: собирал заказы и складывал их в коробки. Полдня пары, полдня работа, и к вечеру ты уже не способен воспринимать реальность.

МГУТУ известен как первый казачий университет. У них много мероприятий, посвященных этой культуре, на которых студенты поют казачьи песни. Хорошо, что вуз дает не только образование, но и красочную студенческую жизнь. На втором курсе я практически жил на пятом этаже здания универа, там был весь движ, и меня позвали в местный рок-бенд басистом.

У них была казенная бас-гитара, но она совсем не годилась чтобы играть как Фли из Red Hot Chili Peppers. Чтобы заработать на новую, мне помогли устроиться в рекламный отдел университета, и я стал вести социальные сети МГУТУ.

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

Рассчитывать на премию и повышения не приходилось, выполнять KPI получалось так себе, да и работа была весьма стрессовая. Я мог бы начать с нуля и пойти помощником юриста, но это понижение в зарплате и очередная нелюбимая работа. Мне исполнилось 22 года. Настало время определяться, кем я хочу быть, когда вырасту, но я понятия не имел.

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

Первые шаги во Frontend

Для меня судьбоносным стал просмотр сериала «Кремниевая долина». Тогда я вообще ничего не знал про современную IT-индустрию, и после просмотра очередной серии решил погуглить, что к чему, и оценить свои шансы на «войти в айти». Моим опытом в разработке на тот момент был фан-сайт рок-группы Green Day, собранный на конструкторе, и скудные знания языка Pascal со школьных уроков информатики.

В интернетах есть много roadmap-ов, как стать разработчиком того или иного типа, что нужно выучить. Тогда я узнал, что есть Frontend, Backend, мобильная разработка, тестировщики, аналитики и еще много других специальностей.

Я выбрал Frontend, так как считал, что это самый безболезненный и быстрый путь. По сути, надо изучить HTML, CSS и JavaScript. Если владеешь первыми двумя, уже можешь верстать сайты. Стартовая зарплата не сильно больше, чем в кол-центре, но зато открываются перспективы дальше развиваться в IT.

Я начал с двух вводных видео на Youtube: «HTML за час» и «CSS за час», они дали общее представление и помогли сформировать представления о системе, которую нужно было наполнить знаниями.

• Очень важно найти видео или курс, в котором вам простым языком объяснят, как вообще работать: какие программы выбрать, как все настроить для комфортной разработки. Например, как сделать hot reload, чтобы страница обновлялась после каждой правки кода, где открывать файлы Photoshop, чтобы сразу видеть стили, которые нужно будет применить, и т. д. В идеале — чтобы там же рассказали, как вообще программировать 🙂
• Если вы решитесь обучаться бесплатно, то наткнетесь на большое количество курсов разной степени полезности. Отнеситесь к выбору ответственно. Почитайте отзывы или комментарии, ознакомьтесь с планом обучения, посмотрите первые уроки, понятно ли объясняют. На начальном этапе вы строите каркас для будущих знаний, и, если каркас будет хрупким, вам придется учиться заново и избавляться от мусора в голове.

Для меня виртуальным наставником стал Артем Исламов и его «Академия верстки». Это курсы для фрилансеров, которые я нашел в свободном доступе. Изначальный план был такой: HTML, CSS, JS, поиск первых заказчиков на фриланс-биржах (до этого шага я, кстати, так и не дошел).

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

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

Я работал по графику два через два, и на работе мое обучение продолжалось. На рабочем компьютере из инструментария разработчика мне был доступен обычный блокнот и браузер, в котором можно читать разметку. Между разговорами с клиентами банка и во время «гудков» я переписывал верстку нашей CRM-системы в блокнот, пытаясь понять, как она работает, затем менял формат txt на html, и у меня получался свой сайт.

За два месяца я научился неплохо верстать, кроссбраузерно и адаптивно, а вот Javascript давался с трудом. На курсах для фрилансеров сразу показывали jQuery. Это сбило меня с толку: я думал, что учу JS, а по сути учился работать с фреймворком. Другие уроки, что я нашел, выгружали на меня тонну информации и создавали кашу в голове. Оставалось надеяться, что заполнить пробелы в знаниях удастся уже на реальной работе.

100 отказов и три оффера

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

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

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

По иронии судьбы, первое собеседование у меня было в МТС. Уже с первых вопросов я понял, что не потяну: надо было писать на React, а я не знал даже Javascript. И хотя мне предложили сделать тестовое задание, я быстро понял, что до этой работы мне еще надо «дорасти».

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

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

Наконец, третьей компанией стал «Техпорт» — онлайн-магазин электроники. На собеседовании я писал верстку на бумаге, отвечал на вопросы по CSS-свойствам и рассказывал про семантические теги, в итоге я был принят на работу верстальщиком.

От теории к практике

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

Я очень благодарен коллегам из «Техпорта», которые поверили в меня несмотря на отсутствие опыта. Сначала я работал только с версткой, но постепенно мне стали подкидывать несрочные задачи с применением JavaScript.

Я даже писал миграции (часть верстки лежала в базе данных) и правил PHP-код. Самый главный скилл, которому меня обучили — читать код, как обычный текст, это очень полезный навык в IT, помогает быстрее ориентироваться в незнакомом проекте.

Обучение в «полевых условиях» не сравнится с чтением документации и просмотром роликов.

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

На следующем рабочем месте, в страховой компании «Согласие», я применил теоретические знания на практике: они как раз переписывали основной сайт с Bitrix на Vue + REST api. Чтобы быстрее освоить новый стек, я читал уже готовый код на Vue и имел возможность задавать вопросы его автору.

От разработки сайтов — к разработке биллинга в облачном провайдере

Шел 2020 год. Облачный бизнес МТС искал разработчика, чтобы начать писать CRM-систему для работы с клиентами. Собеседование проходило в два этапа, затем было тестовое задание. Нужно было сверстать интерфейс на Vue, который бы отрисовывал данные из api, и выложить его куда-нибудь, чтобы можно было покликать, в общем, типичная задача для фронтенда.

Но в задании была проблема с бэкендом. Оказалось, что я был единственным, кто справился с запретом кросс-доменных запросов (CORS). Меня попросили рассказать, как я это сделал, чтобы помочь остальным соискателям. Так я понял, что меня, скорее всего, возьмут. На собеседовании рассказывал, как реализовать аутентификацию, отвечал на вопросы JS и Vue.

Юрий Трухин, директор центра разработки #CloudMTS

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

На вакансию откликнулось полсотни кандидатов, по соответствию скиллов осталось 20. Мы отправили тестовое задание, максимально приближенное к рабочим задачам. Его сделали 8 кандидатов. Женя отличился от всех тем, что не просто его сделал, а уделил внимание деталям — решение не просто работало, но и были продуманы многие вещи, существенно облегчающие пользовательский путь.

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

Сейчас я решаю задачи облачного биллинга. Моя команда занимается разработкой всего, что касается оплаты наших продуктов: пополнением счёта, слежением за расходами и потреблением ресурсов. Наши сервисы занимаются потоковой обработкой и анализом данных с высоким RPS.

Рабочий день начинается с daily-стендапа, на котором мы обсуждаем что сделали и что планируем делать. Большую часть моей команды составляют бэкендеры. Еще у нас два тестировщика, технический писатель, аналитик и product owner, без него никак. Задач много, иногда рук не хватает, поэтому сейчас мы активно расширяем команду.

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

Здесь важно уметь менять контекст, без потери качества и скорости, этому мне еще предстоит научиться.

За два года работы в компании я опробовал на практике обширный стек технологий: Vue 3, pinia, TypeScript, работал со Storybook, Vite и многое другое. Наша облачная платформа имеет микросервисную архитектуру, поэтому мы используем фреймворк singleSPA, отвечающий за монтирование нескольких микроприложений на одной странице.

Программирование плотно вошло в мою жизнь: помимо работы в облачном провайдере, я веду pet-проекты: бот для предсказания результатов матчей по Dota 2, и совместный с коллегой проект — робот для торговли на бирже.

Что помогло мне войти в ИТ

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

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

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

HTML и CSS

• HTML за час
• Css за час
• Книга HTML5
• Курсы HTML Academy. Я проходил курс, где на котиках объясняют, как верстать сайты.
• Онлайн-школа Glo Aacademy и Youtube-канал от создателей этого курса.

JavaScript

• Современный учебник JavaScript — использую как настольную книгу.
• Youtube Алексея Супруна. Канал о разных языках программирования, есть и верстка, и JS.
• Плейлист с материалами по JS.
• Code Wars. Задачки по JavaScript.

Фото на обложке: Shutterstock / Trismegist san

Подписывайтесь на наш Telegram-канал, чтобы быть в курсе последних новостей и событий!

Frontend-разработчик: кто это, чем занимается, что должен знать и сколько зарабатывает

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

Чем занимается Frontend-программист

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

Что должен знать Frontend-разработчик

Основные технические навыки, которые нужно знать: – HTML, CSS и JavaScript: эти три языка работают вместе, они определяют внешний вид и функциональность страницы сайта. Подробнее про JavaScript мы рассказывали здесь. – Фреймворки – это инструменты, понимание которых имеет решающее значение для создания структур страниц. Наиболее востребованы следующие фреймворки: React, Redux, Angular и Vue. – Различные инструменты, подбираются индивидуально под проект. Например, Git – система контроля версий, которая необходима каждому разработчику. Понимание того, как использовать множество инструментов, является основной успешной карьеры Frontend-разработчика. Помимо перечисленных выше технических требований, есть несколько основных гибких навыков, которые важно освоить, если вы хотите стать Frontend-разработчиком. К ним относятся: – Коммуникативные навыки. Как Frontend-разработчик, вы, скорее всего, будете работать в команде. Даже если будете внештатным разработчиком, вам придется общаться с клиентами и коллегами. Знание, как поддержать других разработчиков и, при необходимости, попросить совета, очень поможет вам при создании сайта или приложения. – Умение решать проблемы. Важно быть разработчиком, который не боится брать на себя ответственность и искать верное решение поставленной задачи. – Готовность самостоятельно учиться. Создание структур страниц, поддержание дизайна в актуальном состоянии требует постоянного обучения. Тенденции и технологии меняются, поэтому разработчику важно быть в курсе последних новостей и успевать осваивать новые инструменты. Если у вас есть все вышеперечисленные навыки, то не будет проблем с поиском работы на должность Frontend-разработчика. К счастью, большинство мягких и технических навыков можно развить. Чувствуете, что вам чего-то не хватает? Еще не поздно приобрести эти навыки.

Сколько зарабатывает Frontend-разработчик

По данным LinkedIn, спрос на разработчиков JavaScript становится больше с каждым годом. Потребность в квалифицированных Frontend-программистах неуклонно растет в течение многих лет, поскольку потребители все больше зависят от сайтов для взаимодействия с компаниями. Мы уже не можем представить свою жизнь без использования конкретных сайтов или приложений. Поэтому сегодня программисты, которые создают пользовательские интерфейсы, важнее чем когда-либо. По данным Glassdoor, средняя зарплата Frontend-разработчика в США составляет 88 558 долларов (в мае 2022 года). Средняя годовая зарплата такого разработчика в Германии – 69 тыс долларов. Что касается России, сейчас больше 4,5 тыс работодателей ищут Frontend-разработчиков (данные hh.ru). Средняя зарплата в этой позиции от 90 до 400 тыс рублей в месяц. Спрос и гибкость этой должности означают, что существует много возможностей карьерного роста в различных отраслях и местах. Позиция Frontend-разработчика позволяет работать по всей стране или даже по всему миру, не выходя из дома.

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

Некоторые разработчики начинают свое обучение с базовых знаний о программировании. Их получают в университетах, самостоятельно и на соответствующих онлайн-курсах. В среднем потребуется 9 месяцев, чтобы отучиться и устроиться Frontend-разработчиком. Важно выбрать темп, который вы сможете поддерживать в долгосрочной перспективе. Отметим, если у вас есть навыки, которые требуются работодателю, не имеет значения, где вы их получили: в университете, самостоятельно или на курсах. Вас в любом случае возьмут на работу, даже без диплома о высшем техническом образовании. Что нужно, чтобы трудоустроиться Frontend-разработчиком: – Изучить основные языки программирования для веб-разработки: HTML, CSS и JavaScript. – Практика в использовании языков программирования и инструментов, в идеале опыт работы в проекте. – Резюме разработчика. – Портфолио. – Быть частью сообщества разработчиков, чтобы оставаться в курсе событий. – Изучить дополнительные навыки или библиотеки, необходимые для желаемой работы. – Быть готовым к техническому собеседованию. Самое главное – иметь дисциплину и мотивацию, чтобы стать Frontend-разработчиком, тогда не так важно какой способ получения навыков вы выберете. Усердная работа и практика всегда окупаются, главное – действовать, и все получится!

Читать еще:

Релокация в Германию для IT-специалистов. Почему это проще, чем кажется?

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

Что такое программирование и зачем оно нужно

В чем заключается суть программирования и зачем им нужно заниматься. Отвечаем простыми словами в блоге Kata Academy.

Сейчас – лучшее время, чтобы стать разработчиком

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

Тенденции развития IT-индустрии в ближайшие годы

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

Как стать фронтенд-разработчиком — что нужно знать специалисту

Автор блога Checkroi. Три года работала в интернет-маркетинге. Интересуюсь IT, инвестициями и стартапами.

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

Содержание статьи скрыть

Кто такой frontend-разработчик и чем он занимается

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

Одно из предложений для фронтенд-разработчика на сайте вакансий

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

Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал
Подписаться

Что нужно знать, чтобы стать frontend- разработчиком

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

HTML

На HTML пишут каркас сайта, поэтому без его знания продвинуться дальше не получится. Вам нужно изучить атрибуты и теги и разобраться, какие теги где можно ставить. Важно также разобраться с основными понятиями seo: что такое title, description и зачем они нужны. После изучения HTML переходите к HTML 5 — это последняя версия языка разметки, улучшенная и немного изменённая.

Пример кода на html. Источник: Яндекс.Практикум

Результат выполнения кода на html, написанного выше. Источник. Яндекс.Практикум

CSS

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

Часть кода на CSS. Источник: Яндекс.Практикум

Результат выполнения кода HTML+CSS. Источник: Яндекс.Практикум

JavaScript

JavaScript — это язык программирования, который оживляет страницу: можно нажимать кнопки, заполнять формы или менять слайды. Сначала освойте синтаксис и базовые конструкции, чтобы написать первый код. Дальше разберитесь, как привести в действие код, написанный на HTML и CSS.

Часть кода на JavaScript. Источник: Яндекс.Практикум

В результате работы кода при нажатии на кнопку «‎Ещё идея»‎ меняется фраза. Источник: Яндекс.Практикум

Фреймворки

Фреймворк — ПО, которое облегчает разработку и поддержку тяжёлых проектов. Наиболее популярные — React.js, Angular и Vue.js. Если у вас уже есть опыт в веб-разработке, освоить фреймворки будет просто. Но на начальном этапе они вам, скорее всего, не пригодятся. Изучайте фреймворк в зависимости от проекта, на котором работаете. Если хочется изучить заранее, посмотрите с каким набором инструментов работает компания, в которую вы хотите попасть, и изучайте именно эти фреймворки.

Какие фреймворки используют в 2021 году

Дополнительные инструменты

Кроме языков программирования, нужно будет разобраться в системах и средах разработки и освоить инструменты тестирования. Вот основные:

• Система контроля версий Git. Вы будете работать в команде, и нужно будет отслеживать, когда и кто вносил изменения, и вносить их самостоятельно, а если понадобится — откатывать версию назад.
• Редактор кода или IDE. IDE — среда разработки с дополнительными функциями, которые нужны для написания и отладки кода. Попробуйте Atom, Notepad++, Brackets и Visual Studio Code — и выберите одну наиболее удобную для вас.
• Линтеры. Это инструменты для проверки программных и стилистических ошибок. Наиболее популярный — JSLint.
• Инструменты тестирования. Нужны, чтобы проверить, как работает ваш код. Популярные — Jest и Jasmine.

Личностные качества

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

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

С чего начать

Рассказываем, как стать frontend-разработчиком с нуля бесплатно и платно, офлайн и онлайн.

• Смотрите обучающие видео на ютубе. Если хотите получить знания бесплатно, идите на ютуб. В первую очередь изучите HTML, CSS, а потом переходите к JavaScript. Ищите видео, в которых не только рассказывают, что писать, но и показывают на экране результат. И главное, чтобы вам было понятно, что рассказывают.
• Зарегистрируйтесь на тематических форумах . Если не можете найти ответ на свой вопрос, задавайте на тематических форумах и в сообществах: stackoverflow, Q&A от Хабра и др.
• Попробуйте интерактивные курсы . Если видеоформат не устраивает, учитесь на бесплатных интерактивных курсах в HTML Academy — там вы получите базовые знания для фронтенд-разработки, а для начала пути этого достаточно. Вы поймёте, нравится ли вам профессия, и в какие темы дальше углубляться. Когда изучите вёрстку на HTML и CSS, сверстайте несколько страниц. Шаблоны сайтов для вёрстки можете брать в гугле.
• Учитесь у профессионалов. На онлайн-курсах вы будете учиться у практикующих специалистов — там часто обучают программисты из Яндекса, Тинькофф и Альфа.Банка. В большинстве онлайн-школ есть ещё и менторы — они направляют в обучении, помогают найти ошибки и исправить их в практических заданиях. Специалисты подготовят все нужные материалы для обучения: видео, статьи, формулы и задачи. После обучения у вас сложится полная картина о профессии.

Чтобы скорее получить знания, рекомендуем начать вам с коротких, но интенсивных курсов. На курсе « ‎Веб-разработка» от Nordic IT вы за 4 месяца вы возьмете базу, чтобы стать frontend-разработчиком с нуля, научитесь создавать сайты, адаптировать их под разные устройства, настраивать хостинг и сервер

За сколько можно стать frontend-разработчиком

Время, за которое вы можете освоить всё, что нужно знать фронтенд-разработчику , зависит от ваших способностей, мотивации и свободного времени. Также сроки зависят от способа обучения. Если вы учитесь самостоятельно, может уйти больше времени, так как вы будете тестировать на себе обучающие материалы и самостоятельно разбирать задачи. Если обучаетесь на курсах, время обучения зависит от длительности курса. Вы можете взять интенсив — его стоимость будет выше, но знания вы получите быстрее. В среднем интенсивы длятся 6-8 месяцев и стоят 30 000 — 70 000 руб.

Короткие курсы

Есть курсы, на которых вы можете освоить один из навыков — язык программирования JavaScript или вёрстку. Такие курсы недорогие и короткие — в среднем длятся от 1 до 3 месяцев, стоят от 10 000 до 30 000 руб. Если вы самостоятельно освоили языки разметки, а программирование даётся тяжело, учитесь на коротком курсе по программированию, где преподаватели помогут справиться с трудными задачами.

На курсе «‎Основы JavaScript» от OTUS вы всего за месяц с нуля научитесь программировать: поймёте, когда использовать объекты и массивы и освоите встроенные инструменты javascript для упрощения и ускорения программирования

Длительное обучение

Если хотите обучаться с нуля до устройства на работу, выбирайте длительный курс — от 9 до 12 месяцев. Это полноценное обучение с кураторами, чатом студентов, домашними заданиями и возможностью попасть на работу в компанию-партнёру. Стоимость обучения — от 50 000 до 120 000 руб. В некоторых школах можно платить в рассрочку.

На курсе «‎ Frontend-разработчик с нуля» от Нетологии вы за 18 месяцев станете программистом с портфолио. Вы освоите вёрстку и программирование, научитесь адаптировать сайты под разные устройства, работать с системой контроля версий и подключать элементы через API-браузера. Обучение адаптировано для тех, кто вообще никогда не программировал

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

Вот история одного фронтенд-разработчика — до программирования он работал журналистом, а потом за полгода переобучился на разработчика, разослал 100 резюме и получил первую работу.

Александр, frontend-разработчик на фрилансе

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

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

Основы вёрстки изучал на сайте HTML Аcademy и Hexlet. Если было что-то непонятно — гуглил. Также использовал в обучении HTMLBook — там есть вся информация для верстальщика. За 2 месяца я сверстал 3 сайта

Потом пошёл искать на биржах фриланса задачи для верстальщика, а параллельно учился программировать на JavaScript. Было очень тяжело. Я смотрел много видео, пытался понять, как всё работает. Задавал вопросы знакомым программистам, читал форумы. Ушло около четырёх месяцев на изучение программирования.

И я решил искать работу. Добавил в резюме небольшое портфолио, которое скопилось за время обучения, и за всё время поиска работы отправил его не меньше, чем в 100 компаний. Большинство отказывало. Спустя несколько недель поисков меня позвали на собеседование – там сказали, что посмотрели портфолио и считают, что у меня есть потенциал. Особенно интересовались моими способностями к обучению и мотивацией

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

Коротко о главном

• Чтобы стать фронтенд- разработчиком , вам понадобится от 4 до 12 месяцев и много терпения.
• У начинающего разработчика три основных инструмента: языки HTML, CSS для вёрстки и JavaScript для программирования.
• Обучаться можно бесплатно самостоятельно и на курсах: на самостоятельное обучение уйдёт больше времени.
• Обучайтесь у людей с реальным опытом, а не у теоретиков. Если обучаетесь самостоятельно, спросите у знакомых программистов или на профессиональных форумах, какие материалы изучить, чтобы не блуждать в огромном количестве информации.
• Когда получите базовые знания, сверстаете несколько сайтов, добавьте их в своё портфолио. Когда в портфолио наберётся хотя бы три проекта, можете искать работу или стажировку.
• Если кажется, что ничего не получается, решайте задачи, которые получаются, больше читайте и обращайтесь за помощью к опытным разработчикам.

Поделитесь материалом в соцсетях — обсудите его с друзьями и коллегами!

Не знаете с чего начать?

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