Стать Frontend разработчиком – это такая же длинная цель, как и множество других, поэтому для начала нам необходимо продумать то, каким способом мы будем к ней идти.
2. Планирование
Я сторонник того, что необходимым инструментом для любой долгосрочной цели является планирование: как можно двигаться к конечной точке, если ты не знаешь, как туда прийти?
В программировании найти план (road map) для той или иной специализации – не проблема. На youtube, различных сайтах и форумах опытные люди уже давно делают это для нас. Но стоит убедиться, что наша дорожная карта актуальна на текущий год. Ведь высокоуровневые языки программирования, например, такие как JS иди Python имеют особенность быстро развиваться и менять стек технологий, который будет отвечать спросу рынка.
Сейчас я не буду углубляться в особенности рынка Frontend разработки и скажу лишь то, что выбирать первый стек стоит исходя не только из языка программирования – в нашем случае JS, но также нужно выбрать и Фреймворк. Из основных представленных на РФ рынке их три, но оптимальным для новичка будет выбор между “React” и “Vue”.
Рассмотрим план обучения фундаментальным вещам, которые будут важны всем фронтендерам, на изучение которых в среднем, уйдёт от 3 месяцев.
1. Основы HTML и CSS:
Начать необходимо с понимания основ разметки - HTML и языка стилизации - CSS. Узнайте, как структурировать веб-страницы, использовать теги, создавать формы и применять к ним стили. Попрактикуйтесь в создании простых макетов.
2. Отзывчивый веб-дизайн:
Изучите медиазапросы. Это позволит вам создавать сайты удобными для просмотра с различных устройств. Десктоп, планшеты и смартфоны. Попрактикуйтесь в этом и создайте несколько работ для закрепления знаний.
3. Препроцессоры CSS:
Приобретение знаний о препроцессорах CSS, таких как SASS или CSCC, используя такие возможности, как переменные, миксины и вложенность. Это повысит производительность и удобство ведения проектов.
4. JavaScript:
Переходим к JavaScript, фундаментальному языку программирования для разработки фронтенда.
Синтаксис и основы языка:
- Переменные, типы данных и операторы
- Условные выражения и циклы
- Функции
- Массивы
- Объекты
- Работа с DOM
Имея эти навыки, вы будете способны сделать 2 следующих проекта, закрепить знания на которых я вам и рекомендую:
#1 Проект - ToDo List:
Этот проект позволит попрактиковаться в большинстве концепций JavaScript. Основные возможности приложения:
- Добавление новых задач в список
- Отметка задач как выполненных
- Удаление задач из списка
#2 Проект - Калькулятор:
Это простой, но полезный проект, включающий основные принципы JavaScript.
Основные возможности приложения:
- Выполнение основных математических операций (сложение, вычитание, умножение, деление)
- Возможность очистить весь ввод / последний ввод
5. Система контроля версий GIT
Git — это система управления версиями, которая позволяет отслеживать и управлять изменениями кода, облегчает совместную работу в команде, способствует организованной работе с кодом через ветвление и слияние, обеспечивает резервное копирование и восстановление данных, помогает демонстрировать навыки потенциальным работодателям, упрощает процедуру развертывания и обучает лучшим практикам управления кодом.
Для начинающего Frontend разработчика минимальным набором команд Git будут следующие:
- git init:
- git clone <URL>:
- git add
- git commit -m "<сообщение>":
- git push
- git pull
- git branch
Именно таков базовый план-минимум, которого необходимо придерживаться.
С этими навыками вы уже начнёте чувствовать себя разработчиком, который будет способен решить несложные задачи и создавать небольшие проекты.