Найти тему
Frontend blog

Как стать junior frontend разработчиком?

Оглавление

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

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

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

Стек технологий

Для получения информации о навыках, необходимых начинающему разработчику стоит обратиться на платформу для поиска работы, например headhunter. Там вы найдете актуальные навыки.

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

  • HTML5, CSS3
  • JavaScript
  • Препроцессоры (Sass, Less)
  • Сборщики frontend (Gulp или Webpack)
  • Системы контроля версиями, в частности git
  • Актуальный JS фреймворк/библиотека построения интерфейсов (React, Vue, Angular)

1) HTML5 - самый базовый навык, необходимый любому веб разработчику. Не нужно заучивать все теги - это просто бессмысленно. Найдите самые применяемые (h1-6, div, p, a) и закрепляйте на практике.

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

Обязательно используйте семантические теги (header, footer и т.д.)!

2) CSS3 - необходимо знать типы селекторов и большинство свойств. Дам совет - учите CSS на практике, как и все остальное в этой статье :).

Обязательно знание flexbox и желательно CSS grid. Сюда же добавляется и адаптивная/отзывчивая верстка.

3) JavaScript - основной навык frontend разработчика. Без него - никуда.

Лучший источник для изучения JS в русскоязычном сегменте интернета - learn.javascript.ru (ни в коем случае не реклама). Лично я учился по статьям с этого сайта.

Пройдемся по необходимым разделам:

Часть 1:

  • Основы JavaScript
  • Объекты: основы
  • Типы данных
  • Продвинутая работа с функциями
  • Промисы, async/await

Часть 2:

  • Документ
  • Введение в события

Часть 3:

  • Сетевые запросы

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

4) Препроцессоры - позволяют ускорить процесс написания стилей и улучшают поддерживаемость кода. Также необходимо узнать о методологиях разработки, например БЭМ. Изучить можно прочитав документацию, ее вполне достаточно.

5) Сборщики - инструмент, который также позволяет ускорить процесс разработки и сборки проекта. Позволяет минифицировать css и js, оптимизировать изображения создавать спрайты и т.д.

Желательно владение хотя бы одним из них. Изучить можно в документации и по урокам на ютубе.

6) Системы контроля версиями - обязательный навык для командной разработки и не только. Очень удобный инструмент для хранения кода.

7) Актуальный JS фреймворк/библиотека построения интерфейсов .

Необходимо уверенное владение основами фреймворка/библиотеки. Выбор инструмента - это разговор для отдельной статьи. На данный момент лидирующими являются React и Vue.

Что нужно еще?

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

Перед составлением резюме, создайте свой собственный сайт портфолио, в котором будут показаны ваши навыки и проекты.

Для портфолио будет достаточно:

  • 5 сайтов, которые вы сверстали,
  • 5 примеров небольших проектов на чистом JS,
  • Несколько проектов на JS фреймворке/библиотеке.

Все ваши проекты желательно хранить в github репозиториях. Специалистам будет намного проще оценивать ваши навыки и качество вашего кода.

После того, как все готово - составляйте резюме. Статей в интернете по этой теме хватает.

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

Если данная статья вам понравилась и оказалась полезной, лучшей благодарностью для меня будет ваш лайк и подписка!