Что нужно для того, чтобы стать полноценным фронтендером в 2020? Рассмотрим основные знания и технологии.
Если вы откроете любой сайт, то практически всё, что вы там увидите является работой frontend разработчика. Говоря совсем кратко, фронтендеры занимаются созданием пользовательских интерфейсов для сайтов, веб-приложений итп.
Ниже я попробую рассказать, что нужно обязательно знать frontend разработчику в 2020.
Основы
Под основами стоит понимать HTML5 и CSS3, но также сюда стоит добавить и Javascript. Ведь на сегодняшний день без этого языка невозможно представить ни одну задачу в веб-разработке.
HTML
Что обязательно нужно знать и уметь:
- Знать все основные теги и семантические элементы(<nav />, <header />, <aside /> итп), уметь их правильно использовать.
- Уделить особое внимание accessibility(доступности) вашего сайта. В основном это понятие включает в себя возможность навигации с помощью клавиатуры и наличие читаемой структуры для скринридеров.
- Также необходимо разобраться с meta-тегами: SEO-теги, карточки для соцсетей, правила для роботов.
- Ещё есть БЭМ, если вы не используете scoped(изолированные css правила), то лучше с ним ознакомиться.
Само изучение HTML с нуля не должно занять больше пары недель, так что тут всё просто.
CSS
- Основные свойства, блочная модель, медиа-запросы.
- Grid Layout станет вашим дополнительным инструментом, совсем скоро именно он будет основным. Игра также имеется.
- Знание одно из CSS-препроцессоров, умения пользоваться циклами, миксинами и переменными.
- Использовать в своей работе необходимые постпроцессоры. Это могут быть линтеры, префиксеры итп.
- Уметь создавать анимацию и переходы. Следить, чтобы используемые эффекты не влияли на производительность, избегать перерисовок.
В качестве CSS-препроцессора я настойчиво рекомендую использовать SCSS. Его синтаксис максимально схож с оригинальным CSS, что даёт отличную совместимость.
Javascript
Есть хороший русскоязычный учебник. Читаем первые две части, разбираемся, пробуем делать простые примеры.
Чему уделить особое внимание:
- Новый синтаксис Ecmascript.
- Объектно-ориентированное программирование и модульность в Javasctipt.
- Массивы и их методы.
- Асинхронность, промисы, async/await.
Это были лишь основы, но уже благодаря им, вы сможете создавать и поддерживать многие веб-проекты. В следующий раз мы рассмотрим дополнительные инструменты и продвинутые технологии необходимые frontend разработчику.
Больше статей на Frontext.