1. HTML
Перед погружением стоит сделать шаг назад, к самым основам. HTML может послужить подготовкой на пути начинающего веб-разработчика.
HTML - это язык разметки, используемый для создания веб-сайтов. Последняя 5 версия стала стандартом в 2012 году. Для изучения HTML не требуется ничего кроме понимания тегов, элементов, атрибутов и их корректного расположения. А с автодополнением, которое доступно в большинстве современных IDE, задача становится ещё проще.
2. CSS
Следующей остановкой путешествия в мир веб-разработки будет CSS. CSS (cascading style sheets) - это язык, который позволяет описывать внешний вид HTML элементов. Вместе с актуальной версией CSS 3, появились широкие возможности для создания разных макетов, стилизованных элементов, сайтов ориентированных для мобильных устройств, анимации и многого другого.
3. Основы программирования
Здесь стоит немного замедлиться, так как возможно это самый важный пункт статьи.
В отличие от HTML и CSS, JS это уже настоящее программирование. Начиная изучение необходимо понять что такое переменные, функции и классы. Но, должен вас успокоить, JS достаточно дружелюбен для новичков.. по крайней мере он таким кажется поначалу, но вместе с погружением будут раскрываться более сложные вещи. Но, как всегда, основы просты.
Итак, самое простое - это изучение синтаксиса. Немного сложнее изучение экосистемы, стандартной библиотеки, как все это работает вместе и их применение для решения реальных проблем и задач.
4. Выбор инструментария
По изучению написания кода вроде разобрались. Пробежимся по инструментам.
Наиболее важными вещами для веб-разработчика являются выбор операционной системы, редактор кода, браузер и дополнительные инструменты.
Начнём с операционной системы: Windows, Linux или MacOS. Конечно, это личный выбор каждого, но самым универсальным выбором будет Linux, MacOS будет также хорошим выбором, а в Windows могут возникать дополнительные сложности при решении тривиальных вопросов.
Касательно редактора код нужно выбрать что подойдет больше: полномасштабная IDE, простой текстовый редактор или что-то среднее. Среди бесплатных редакторов наиболее популярны VS Code и Atom, которые имеют хорошую систему дополнительных расширений. Среди платных есть Sublime Text и WebStorm (full IDE). Выбор за вами.
5. Node.js и NPM
Node.js это технология которая позволяет писать программы на JS для бекэнда и серверных задач. С момента релиза в 2009 году проектом был внесён огромный вклад в развитие JS-программирования.
Разработка бекэнда тянет за собой множество новых тем. Базы данных, микросервисы, API и многое другое. Работа со всем этим требует использования дополнительных библиотек. Для упрощения работы, загрузки и поиска библиотек Node.js имеет менеджер пакетов NPM (Node Package Manager).
С помощью NPM, всего в пару команд, вы имеете простой доступ к миллионам готовых библиотек и фреймворков.
6. JS фреймворки
И так, мы знаем JS, умеем ставить нужные NPM пакеты.. погружаемся глубже! Первым приятным шагом к пониманию фреймворков может быть изучение одного из JS фреймворков для разработки пользовательского интерфейса. Наиболее популярными являются React, Vue и Angular.
Если вас больше интересует бекэнд разработка, то здесь выбор так же широк. Чаще всего рекомендуются такие фреймворки как Express, Feathers и Koa. Используя их вы можете создавать различные веб-приложения и серверы API легко и быстро.
7. Паттерны и парадигмы программирования
Такие термины как объектно-ориентирование программирование (ООП), функциональное программирование (ФП), разработка через тестирование (test-driven development - TDD) обязательны к понимаю. Вы могли встречаться с ними когда изучали основы JS. Но просто знать об их существовании недостаточно. Лучшее что вы можете сделать это опробовать всё на реальных примерах.
Также в процессе изучения вы могли слышать о стилистике написания кода. Если ещё нет, то самое время почитать про чистый код. Сюда входят начальная архитектура, разделение кода и его форматирование. Очень важно чтобы ваш код был читабельным не только для вас, но и для других разработчиков.