10 навыков для Frontend-разработчика

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

1) Уверенное знание HTML5 + CSS3

Все макеты уникальные и только с опытом, придет понимание, какие свойства применять к тому или иному элементу. Рецепт у меня один – скачивайте бесплатные макеты и верстайте. Не зависайте надолго в чтении статей и просмотра видео-уроков. Возьмите за правило: на одно учебное видео/статью – три сверстанных макетов.

2) Верстка по методологии БЭМ

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

3) Pixel perfect верстка

Означает максимальное соответствие дизайн-макету сайта. Рекомендуется установить браузерное расширение плагина Perfect Pixel, для проверки на соответствие верстки с макетом.

4) Адаптивная верстка

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

5) Работа с CSS фреймворком Bootstrap

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

6) Применять препроцессоры

Чаще всего работодатели требуют верстать с использованием sass препроцессора. На заметку новичкам – попробуйте писать CSS код с использованием синтаксиса scss или sass, подглядывая в документациюю.

7) Уверенное знание JavaScript

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

8) Знание JS фреймворков React / Vue

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

9) Использование сборщиков проекта

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

• расставлять префиксы
• оптимизировать изображения
• компилировать sass в css
• генерировать PNG / SVG-спрайты
• собирать стили и скрипты
• автоматически обновлять браузер

10) Git и GitHub

Обязательно уметь пользоваться системой контроля версий. Это используется во всех более-менее серьезных IT-компаниях.

Заключение

Все 10 навыков – это необходимый минимум для трудоустройства на вакансию Frontend-разработчика. Я могу предположить, что большинство новичков, уже знают HTML / CSS / Bootstrap – как самые простые технологии, делать адаптивную и Pixel Perfect верстку. А это – уже 4 навыка. Значит вы находитесь почти на середине пути.

Смею предположить, что из-за отсутствия мотивации изучать технологии, заточенные для работы в команде, скорее всего вы не используете БЭМ, Gulp, Sass и GitHub. Однако освоить их можно за весьма короткий промежуток времени. Здесь не нужно что-то учить, а просто разрабатывать сайт и одновременно смотреть видео, документацию.

Два последних навыка – JavaScript / React, мы оставили на сладкое. По общепринятому мнению – это самая сложная часть для изучения, поскольку мы имеем дело с настоящим языком программирования. Умение программировать на JavaScript – это входной билет в мир frontend-разработки, все остальные 9 навыков обнуляются, если нет JS навыка, React идет паровозиком за JS.

Без JS, можно работать HTML-верстальщиком в крупной веб-студии, но для этого нужно и жить в большом городе. Хитрые работодатели к вакансии HTML-верстальщик, приплетают языки программирования, навыки по рисованию дизайна (это касается вакансий на удаленную работу).

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