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

Что нужно для того, что бы стать полноценным фронтендером в 2020? Рассмотрим только необходимые знания и технологии.

Frontend developer

Если вы откроете любой сайт, то практически всё, что вы там увидите является работой frontend разработчика. Говоря совсем кратко, фронтендеры занимаются созданием пользовательских интерфейсов для сайтов, веб-приложений итп.

Ниже я попробую рассказать, что нужно обязательно знать frontend разработчику в 2020.

Основы

Под основами стоит понимать HTML5 и CSS3, но также сюда стоит добавить и Javascript. Ведь на сегодняшний день без этого языка невозможно представить ни одну задачу в веб-разработке.

HTML

Что обязательно нужно знать и уметь:

  • Знать все основные теги и семантические элементы(nav, header, aside итп), уметь их правильно использовать.
  • Уделить особое внимание accessibility(доступности) вашего сайта. В основном это понятие включает в себя возможность навигации с помощью клавиатуры и наличие читаемой структуры для скринридеров.
  • Также необходимо разобраться с meta-тегами: SEO-теги, карточки для соцсетей, правила для роботов.
  • Ещё есть БЭМ, если вы не используете scoped(изолированные css правила), то лучше с ним ознакомиться.

Само изучение HTML с нуля не должно занять больше пары недель, так что тут всё просто.

CSS

  • Основные свойства, блочная модель, медиа-запросы.
  • Flexbox, как основной инструмент построения элементов. Эта игра поможет вам с пониманием.
  • Grid Layout станет вашим дополнительным инструментом, совсем скоро именно он будет основным. Игра также имеется.
  • Знание одно из CSS-препроцессоров, умения пользоваться циклами, миксинами и переменными.
  • Использовать в своей работе необходимые постпроцессоры. Это могут быть линтеры, префиксеры итп.
  • Уметь создавать анимацию и переходы. Следить, чтобы используемые эффекты не влияли на производительность, избегать перерисовок.

В качестве CSS-препроцессора я настойчиво рекомендую использовать SCSS. Его синтаксис максимально схож с оригинальным CSS, что даёт отличную совместимость.

Sass logo

Javascript

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

Чему уделить особое внимание:

  • Новый синтаксис Ecmascript.
  • Объектно-ориентированное программирование и модульность в Javasctipt.
  • Массивы и их методы.
  • Асинхронность, промисы, async/await.

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

Наши рекомендации
К сожалению, тут пока ничего нет.