План развития Frontend

Основан на roadmap.sh/frontend
Справочный материал по основам программирования на русском: hexlet.ru/introduction_to_programming
Справочный материал по фронтенду и веб-разработке: doka.guide

TODO

Совет, как не забить на обучение

Если тебе будет интересно разбираться, делать задачки, то важно сделать так, чтобы этот интерес не пропадал.
Для этого стоит выработать какой-то режим или правило, когда ты останавливаешься в обучении на сегодняшний день и продолжишь в следующий раз.
Это поможет тебе сохранять интерес, как будто ты смотришь крутой сериал: не все серии сразу, а потом грусть от того, что сериал закончился. А постоянное желание прийти с работы и посмотреть еще одну серию или сделать еще одну задачку
Главное правило: не перенапрягайся и не пытайся сразу изучить всё, если чувствуешь, что что-то не получается попробуй отложить это хотя бы на полчаса. Если и потом не получится, то попроси помощи :)

Как пользоваться этим планом

Каждый шаг плана начинается с двух блоков:

Требования для блока

  • тут перечислены навыки и знания, которые нужны, чтобы понять происходящее на этом шаге

Навыки, которые получишь

  • тут перечислены навыки, которые у тебя должны появиться после изучения этого шага

Каждый шаг состоит из различных действий и инструкций, со ссылками на дополнительную информацию и ресурсы

Так же в каждом шаге есть задание для самопроверки, его следует выполнять всегда и полностью

Шаг 1: Окружение и оценка знаний

Навыки, которые получишь

  • установка npm-пакетов
  • использование сборщика vite

Прочитай Getting Started для Vite, следуй инструкциям и создай пустой проект для задачи “Календарь”
Разберись с инструкцией для публикации приложения на github-pages

Настрой prettier и stylelint, сохрани команды, которые выполнял, чтобы в будущем использовать их для всех новых проектов.

Найди инструкцию для своей IDE / редактора по использованию eslint и prettier, настрой редактор на подсвечивание ошибок и автоформатирование

Все последующие задачи и приложения разрабатывай при помощи Vite, и публикуй на gh-pages

Задания для самопроверки

Во время выполнения задания записывай какие места вызывают трудности, что приходится гуглить

Шаг 2: Подтягиваем проседающие места

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

HTML

CSS

JavaScript

Дополнительные материалы

30 небольших проектов на чистом JS с объяснениями и видео
Справочные материалы на русском
Справочные материалы на английском

Шаг 3: React, state-manager’ы

Прочитай короткое описание React
Пройди официальный туториал по реакту, выбирай вариант с разработкой локально, создавай react-проект при помощи Vite

Код отправляй в репозиторий на GitHub

Просмотри карту изучения React, отметь те части, которые не были затронуты гайдом

Познакомься с организацией потоков данных в приложениях

Познакомься со state-managent в реакт-приложениях:

Познакомься с Redux Toolkit (RTK):

Задание для самопроверки:

Записывай все, что вызывало трудности, а так же то, что приходилось гуглить

Дополнительные материалы

Процесс рендера react-компонентов
MUI tutorial for React

Шаг 4: Тестирование

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

Задание для самопроверки:

Шаг 4.5: Typescript

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

Задание для самопроверки:

Шаг 5: Наработка опыта и портфолио

Найди в открытом доступе несколько тестовых заданий, от компаний, которые тебе нравятся. Попробуй выполнить эти задания, опубликуй результаты на github

Познакомься с разделом github – good first issue, попробуй найти интересные тебе проекты и выбери несколько проблем, с которыми ты сможешь помочь этим проектам

Задание для самопроверки:

Шаг 6: Подготовка к собеседованиям

Прочитай гайд по составлению резюме и составь свое резюме на resume.io и hh.ru

Задание для самопроверки