Как стать Frontend-разработчиком с нуля?

Дисклеймер

Актуальный путь развития frontend-разработчика в 2024 году.

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

Это статья будет служить вектором развития, а не уроком.

Всю информацию по инструментам и их подразделами можно найти в открытом доступе в различных статьях, YouTube и ChatGPT.

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

Среда разработки

В нынешнее время самыми актуальными средами разработки для фронта являются VS Code и WebStorm.

Лично я долгое время пользовался VS Code. Это редактор кода. Он достаточно удобен, есть интересные плагины и также он бесплатный.

Я в данный момент работаю с WebStorm, так как это уже полноценная IDE. Мне лично на данном этапе развития удобнее работать в нем, т.к. он предоставляет более удобный поиск файлов в проекте, лучшее отслеживание за системой контроля версий и удобное подключение к серверу.

Но для старта и даже для будущей работы спокойно может справиться со всеми потребностями VScode.

HTML & CSS

Самое первое, с чем придется вам столкнуться на пути - HTML и CSS.

С помощью HTML вы будете создавать основную разметку вашей страницы.

Проще говоря, весь контент любой страницы в браузере (блоки текста, картинки, заголовки, видео, музыка и другое) добавляются через HTML.

HTML - язык разметки, а не язык программирования, как многие новички путают.

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

С помощью CSS вы будете красить кнопочки и текст, выставлять правильное расположение контента на экране, добавлять анимации и т.д.

Основное, что необходимо знать и уметь в HTML & CSS:

• Инструменты разработчика в браузере
• Основные теги, атрибуты, стили и их значения
• Семантические элементы
• Блочные и строчные элементы
• Селекторы
• Flexbox и Grid
• Media запросы
• Margin и Padding
• Свойство Position
• Анимации (keyframes, animation, transition)
• Единицы измерения
• Псевдоэлементы
• Псевдоклассы
• Способы подключения стилей
• Приоритеты стилей (Каскад)
• Адаптивная верстка
• Понимание работы различных препроцессоров для CSS (SCSS || SASS)
• БЭМ методология
• Подключение различных библиотек и фреймворков (Swiper, bootstrap)
• Локальное и удаленное подключение шрифтов
• Создание форм и передача данных на бэкенд
• Методы оптимизации
• Анализ макета

Если вы все эти пункты закроете для себя, можно уже будет сказать, что 1/4 пути уже позади.

Главное, помимо изучения теории, обязательно практиковаться.

JavaScript

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

Для начала изучите основные концепции языка….. а теперь давайте на русском, начните с самого простого, переменные, операторы, циклы и ветвление, для общего понимания можно пройтись по основам учебника learn javascript. Далее изучаем работу с DOM, и что такое DOM в общем, (Document object model).

У меня есть конспект, который я еще давно заполнял для себя и друзей по JavaScript в Notion, можете с ним тоже ознакомиться.

Основное, что необходимо знать и уметь в JavaScript:

• Переменные
• Типы данных
• Преобразование типов
• Базовые операторы, математика
• Операторы сравнения
• Условное ветвление: if, '?'
• Логические операторы
• Циклы while и for
• Конструкция "switch"
• Функции
• Function Expression
• Стрелочные функции
• Массивы
• Методы массивов
• Объекты
• Декораторы и переадресация вызова, call/apply
• Привязка контекста к функции
• setTimeout и setInterval
• Рекурсия и стек
• Геттеры и сеттеры
• Прототипы, наследование
• Классы
• Промисы, async/await
• Генераторы
• Модули
• Формат JSON, метод toJSON
• DOM-дерево
• Интерфейсные события
• Работа с API

Изучите теорию, пишите код, решайте задачи и пытайтесь реализовывать свои идеи в проектах.

Если уже HTML & CSS & JS в вашем багаже знаний имеются, то 2.5/4 от пути пройдено.

GIT

Git - система контроля версий, которая позволяет команде разработчиков совместно работать над одним проектом.

Основное, что необходимо знать и уметь в GIT:

1. Подключение своего профиля гита в среду разработки
2. Создание, клонирование и инициализация репозитория
3. Создание веток и переход по веткам
4. Определение статуса ветки
5. Обновление ветки в соответствии с последней версией
6. Слияние веток и решение конфликтов
7. Создание коммитов и пуш ветки
8. Создание пул реквестов

В качестве практики с git, создайте профиль в github (условный instagram для программистов) и заливайте там свои проекты. Делайте коммиты, создавайте различные ветки под каждую задачу и т.д.

Это будет в дальнейшем вашим неким портфолио при поиске работы.

Зная HTML & CSS & JS & GIT - 3/4 пути пройдено.

React Vue Angular

React, Vue и Angular — три популярных JavaScript-фреймворка и библиотеки для создания пользовательских интерфейсов и одностраничных приложений (SPA). У каждого из них есть свои особенности и преимущества, что делает их подходящими для разных типов проектов. Вот краткий обзор каждого:

React

Ключевые особенности:

• Компонентная архитектура: UI разбивается на многократно используемые компоненты.
• JSX: Позволяет смешивать HTML с JavaScript, что упрощает написание и понимание кода пользовательского интерфейса.
• Virtual DOM: Эффективно обновляет DOM, перерисовывая только те части UI, которые изменились.
• Гибкость: React часто используется в паре с другими библиотеками для маршрутизации (например, React Router) и управления состоянием (например, Redux).

Vue

Ключевые особенности:

• Простота использования: Легко учится и внедряется, особенно для новичков.
• Реактивность: Обеспечивает автоматическое обновление пользовательского интерфейса при изменении данных.
• Компонентная архитектура: Поддержка компонентов для создания сложных пользовательских интерфейсов.
• Интеграция: Легко интегрируется в существующие проекты.

Angular

Ключевые особенности:

• TypeScript: Angular написан на TypeScript, что добавляет поддержку статической типизации.
• Декларативные шаблоны: Использование HTML-шаблонов для описания структуры приложения.
• Инъекция зависимостей: Удобное управление зависимостями через встроенные механизмы.
• RxJS: Использует Reactive Extensions для асинхронного программирования, что позволяет эффективно обрабатывать потоки данных.

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

Резюме и поиск работы

Создайте резюме на платформе hh.ru

В поисковике найдите все вакансии связанные с frontend-разработкой или с конкретным JavaScript-фреймворком и начинайте откликаться

Важно, чтобы каждый ваш отклик содержал сопроводительное письмо

Часто еще в самой вакансии просят написать что-то конкретное в сопроводительном письме, так что тоже не упускайте из виду

После чего, некоторые из вакансий пришлют вам тестовое задание, при успешном выполнении которого, вас уже позовут на собеседование, где вы сможете продемонстрировать свои знания и навыки (вас будут спрашивать по тем разделам, которые я описал выше для HTML & CSS & JS & GIT и по вашему фреймворку.

При успешном прохождении собеседования следует ВАШ ПЕРВЫЙ ОФФЕР

Я также создал страницу с основной теорией для собеседований в Notion

Ссылка - https://www.notion.so/d3efcd278c8943ed8b10562601d80ea7

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