Junior full stack веб-разработчик: полный план развития

Кто же такой full stack веб-разработчик, и с чем его едят? Понятные ответы на непонятные вопросы, обязательные к прочтению.
Маст хэв!
Независимо от вашего пути и карьерных целей, есть некоторые вещи, которые должен знать каждый разработчик.

 Изучите, как использовать Git (особенно в командной среде), клонировать репозитории, делать коммиты, создавать ветки и мержить код.

Отладка. Frontend или backend – везде могут быть ошибки. Ознакомьтесь с инструментами отладки для вашей IDE.
Существует много сред разработки, которые вы можете использовать, но выберите одну и досконально изучите ее (знание горячих клавиш и инструментов сделает вас лучшим разработчиком).
Методологии (Agile / SCRUM / Kanban) – при работе в команде, скорее всего, вы будете использовать какую-либо методологию разработки продукта, поэтому убедитесь, что вы знакомы с тем, как они работают.

Frontend

Чем занимается Full stack веб-разработчик? Этим:
реализация дизайна с использованием HTML / CSS;
взаимодействие с DOM с помощью JavaScript;
работа со сторонними API.
Разберем подробнее каждое из направлений.

HTML / CSS
Ожидается, что младший full stack веб-разработчик будет хорошо ориентироваться в таких темах:
использование HTML для создания веб-страницы;
стилизация элементов с использованием CSS;
способы применения CSS к HTML – встроенные стили, таблица стилей, etc.
После того, как у вас появятся базовые знания, рассмотрите более продвинутые вещи:
CSS Grid и Flexbox для разметки и более удобного позиционирования элементов.
SCSS сделает обычный CSS более управляемым с помощью переменных.
Фреймворки
Следующий этап – знакомство с CSS-фреймворками. В основном это элементы и стили «из коробки», которые вы могли уже использовать в проектах. Это сильно экономит время. Не распыляйтесь, весь мир не объять: выберите один фреймворк и хорошо его изучите. Как только овладеете одним – другие будет легче познать.

Bootstrap
Bootstrap популярен и используется во многих компаниях.
Ну и зачем изучать CSS / HTML с нуля, если можно использовать фреймворк?
Да, есть фреймворки, которые облегчают жизнь. Но часто приходится кастомизировать самописные проекты, а для этого нужно знать основы.
Отзывчивый дизайн
Важно учитывать множество мобильных устройств при создании проектов интерфейсов. К счастью, CSS-фреймворки делают создание «отзывчивости» простым.
Media Queries. Зная, как использовать CSS для создания адаптивных конструкций, нужно понять, как использовать media queries. Так вы определите, как элементы должны выглядеть на разных размерах экранов.
Избегайте использования пикселей для указания размеров. Изображение с шириной 100px, всегда будет иметь ширину 100 пикселей, независимо от размера экрана. Попытайтесь использовать rem, vh и vw для достижения отзывчивости.

JavaScript
Да, это прекрасный язык программирования JavaScript. Для успешного развития в среде front-end вам нужно знать язык JavaScript, и знать хорошо. По мере того, как фреймворки приходят и уходят, основные элементы ЯП остаются прежними.
Вот минимум знаний для Джуна:
объекты, функции, условия, циклы и операторы;
модули;
массивы (включая способы управления ими);
работа с данными с помощью Fetch API;
манипуляции с DOM и использование Events;
Async / Await (необязательная, но действительно полезная тема);
JSON;
ES6+;
тестирование (Jest, Enzyme, Chai и т. д.)
Повышения навыка программирования на JavaScript:
Создайте игру Super Mario (вы узнаете JavaScript, манипулируя DOM и используя события).
Создайте админку, показывающую статистику, которая извлекается из API. Например, панель мониторинга Twitter, GitHub и т. д. (вы научитесь работать с API и JSON).
Не беспокойтесь о внешнем виде. Сосредоточьтесь на изучении JavaScript, а не CSS/HTML. Вы всегда сможете сделать его красивым позже, если хотите.

JavaScript фреймворки
Самые популярные на данный момент: Angular.js, React.js и Vue.js.
Если вы уже изучили JavaScript основы и имеете крепкую базу, изучение фреймворков будет большим плюсом к вашему скиллу Джуна.
React
Он имеет постоянную поддержку от Facebook, массу тематических онлайн-сообществ и является самым популярным в отрасли на данный момент.
Если вы выполнили описанные выше шаги и немного познали язык JavaScript, изучение React не должно составить труда. Младший full stack веб-разработчик должен :
о React-компонентах и том, как они работают;
как использовать State и Props в компонентах;
JSX и как использовать его для отображения HTML элементов на веб-странице;
как и когда компоненты повторно визуализируются;
React hooks;
NPM, Webpack и Babel.
Оттачивание скилов:
Переделайте любой из ваших предыдущих проектов JavaScript под React.
Создайте калькулятор (хороший способ потренировать state management и React Hooks).
Создайте собственный Twitter, GitHub или ленту новостей. Используйте общедоступные API для получения данных и отображения их в приложении.
Не беспокойтесь об идеальном внешнем виде, а сосредоточьтесь на том, чтобы заставить его работать, а также на изучении концепций React.
Redux
Redux – это стейт менеджмент фреймворк, полезно дополняющий React. Если грубо, то это front-end БД, хранящая состояние веб-приложения.
В Redux много подводных камней, поэтому не волнуйтесь, если вы не сразу все «схватываете». Сосредоточьтесь на понимании основ и управлении состоянием с React.
Есть ряд доступных инструментов, способных помочь вам с отладкой React / Redux:
React Dev Tools
Redux Dev Tools
Браузеры
Full stack веб-разработчик должен знать все о браузерах: Chrome, Firefox и Edge являются основными. Разберитесь с такими направлениями:
отладка (например, Chrome Developer Tools);
работа с хранилищем (локальное хранилище, сессионное хранилище, куки);
особенности браузера – самая большая проблема веб-разработки.

Развертывание и хостинг
Вы должны знать, как развернуть и где захостить веб-приложение. Это благотворно отразится на вашем портфолио, знаниях, и получении работы. Используйте управляемый сервис – пусть трудную работу за вас выполнит кто-то еще:
GitHub Pages
Heruko
Netlify
Digital Ocean
AWS
Firebase

Back-end
Full stack веб-разработчик обычно делает это:
создает API, использующее какой-то интерфейс (часто возвращая JSON); написанием бизнес-логики и валидации;
интегрирует сторонние API;
реализует сохранение и чтение данных из БД.
Языки программирования
Основные языки программирования:
Java
C#
Python
js
Go
PHP
Какой бы язык вы ни выбрали, убедитесь, что вы знаете следующее:
процесс создания API
основы языка
как подключиться к БД
как сделать запрос
управление пакетами
написание тестов
REST API и JSON
Создание хорошего REST API является одной из основных задач бекенд-разработчика. Вам придется знать:
как создать хороший ответ;
как обрабатывать запросы;
запрос аутентификации;
документирование API.
REST API – мост между бекендом и фронтендом, поэтому убедитесь, что вы понимаете, как это работает.
JSON нужен для передачи данных через REST API. Данные в нем представлены в виде объектов и массивов.
БД, DevOps и full stack веб-разработчик
Junior full stack веб-разработчик: полный план развития
Это сложная отрасль, необходимая, если вы захотите углубиться в DevOps. Будет большим плюсом знать:
управление БД;
платформы для хостинга (AWS, Azure, Google и т. д);
CI / CD (Jenkins, GitLab и т. д.);
журналирование и мониторинг.
Продвинутые темы
Ниже приведены дополнительные темы, рекомендуемые к рассмотрению только после того, как осилите все базовые.
Аутентификация на JWT / OAuth
Это основной метод проверки подлинности, разрешающий пользователям войти в систему.
Шаблоны проектирования
Изучение шаблонов проектирования облегчит решение распространенных проблем и поможет стать лучшим разработчиком.
Прогрессивные веб-приложения и мобильная разработка
Прогрессивные веб-приложения – это приложения, работающие как нативные на телефоне пользователя. Изучите этот вопрос, если появится дополнительное время.
React Native – позволяет писать код на React, компилируемый в Android / IOS.
Flutter – инструмент похож на React Native, только использует Dart.
Командная строка
Вам нужно знать:
как подключиться к серверу по SSH;
как перемещаться по файловой системе (cd, ls и т. д.);
редактирование файлов с помощью Vim или аналогичного.
Источник: proglib.io