Roadmap - Как Стать Frontend Разработчиком В 2022 По Шагам

  • 1/7/2022
  • 6-minute read

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

Покажу как можно практиковаться и набивать скилл. Где искать инфу. Как оформлять свое резюме и профили для рекрутеров, как пройти собес и устроиться в крутую компанию.

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

Примерно наш путь будет складываться таким образом:

  1. Тулинг - установка всех необходимых для работы программ
  2. Базис - основы веба HTML, CSS
  3. Верстка - углубление в верстку и CSS
  4. JavaScript / DOM - разобраться с базовым JS и научиться манипулировать страничкой
  5. React - изучить фреймворк
  6. Устроиться на работу
  7. …продолжать учиться постоянно

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

И помните, дорогу осилит идущий. Поехали!

Тулинг

Ниже перечилю программы которыми пользуюсь лично я, вы конечно можете юзать то что нравится

  • VS Code - редактор кода
  • Figma - дизайн маеты
  • NodeJS + NPM - для запуска локального сервера и окружения разработки и пакетный менеджер JS
  • Focus To-Do - таск трекер
  • Brave Browser - браузер основанный на chromium который блокирует реклами и ослеживание

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

Понять основы HTML, CSS, JS и устройство интернета

  1. Что бы пронять как все работает читаем статью - Как раотает веб? там же есть и дополнительные стати по этой теме

  2. Дальше разбираемся с HTML читаем эту статейку - Основы HTML

  3. Читаем сделующую статейку по CSS - Основы CSS

  4. И немного практики. Интерактивный курс Основы HTML и CSS - проходим его и выполняем все задания

  5. Практика. Верстаем эти макеты: Макет 1, Макет 2, Макет 3, Макет 4

Кстати можно найти много интересного и попрактиковать на сайте codepen.io

Верстка

  1. Выучить все базовые CSS селекторы и правила. Селекторы которые вы должны запомнить, CSS правила и еще интересное по CSS
  2. Выучить БЕМ + Видос
  3. Изучить css Fex box - игруля + материал
  4. Изучить css Grid layout - игруля, материал статья + материал видео
  5. Адаптивная верстка, медиазапросы - норм статейка + статейка + видос
  6. Изучить Bootstrap - в первую очереть сетку и потом все остальное, дока на русском
  7. Заюзать самый простой сборщик проекта Parcel это даст вам +100 к скорости работы и +100 к скорости изучения. Инструкция
  8. Изучить препроцессор SASS - основы этого пока хватит
  9. Практирка. Макет 1, Макет 2, Макет 3, Макет 4, Макет 5, Макет 6, Макет 7, Макет 8, Макет 9, Макет 10, Макет 11 - на этом навык верстки думаю будет освноен. И помните что не адаптивная верстка - это не верстка!

CSSReference.io - Полезный ресурс где вы можете визуально посмотреть на любое свойство, топ вещь.

WebRef.ru/css - Справочник CSS где можно найти все что угодно по css и прочитать что оно делает

Front End Checklist - полезный чеклист для фтонтендера, рекомендую прочитать

JavaScript - база + манипуляция DOM

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

  1. Изучить основы JavaScript - топ ресурс просто прочитай все все что будет представленно и уже сможешь писать простые программы.
  2. Раобраться что такое DOM дерево и как оно работает - Статейка 1 и Статейка 2
  3. Все! Дальше нужно пилить пет проектики и много ПРАКТИКОВАТЬСЯ

Я в свое время делал все на оборот(( Учился 8 часов практиковался 1 час. Сейчас все наоборот. Делайте как я сейчас ;)

Пет проекты которые можно сделать

Просто береш и повторяешь.

Начиная с простых и к сложному, это бустанет твой скилл в поиске решений и кодинге на JS просто до небесного уровня на текущий момент. Дальше больше. TO THE MOON конечно же а потом и на марс.

Обазательно не забывай что в любой проект ты можешь и ДОЛЖЕН добавить что то свою, свою вишенку. Развивай фантазию.

Много туторчиков будет на английском - привыкай тут без этого никак если что


Даааа… я покаэ то собирал столько слюней пускал - сам бы все это сделал для себя и юзал.


Я привел лишь малую часть всего что нашел для практики, как видишь идеи есть всгда и их очень много, нужно просто искать. Учись гуглить.

Список источников вдохновения для проектов:

Фреймворки

Давайте начнем с React? Популярный, простой, много вакансий. Берем.

  1. Начинать любой путь в новом инструменте лучше всего с официальной документации - Дока en + Дока ru
  2. Трех часовое видео по React
  3. Хорошая статейка которая поможет понять React лучше - ДОЧИТАТЬ ДО КОНЦА

Все. Дальше только практика. Таков путь!

Норм ссылки с проектами

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

Устроиться на работу

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

А как это сделать? Где искать? Как подготовиться? Как себя презентовать? Я пожалуй напишу позже, это будет очень скоро.

Конечно об этом ты можешь узнать в нашем уютном телеграм канальчике и обсудить в чатике. Велком. Обнял.