Frontend Roadmap

Менторство Telegram Канал

Блок 1: Введение в цифровой мир

Модуль 1.1: Как работает интернет

Что такое компьютерная сеть Протоколы: TCP/IP и HTTP Клиент-серверная архитектура DNS и доменные имена Как работает браузер Анатомия URL

Модуль 1.2: Настройка рабочего окружения

Выбор редактора кода Установка VS Code Интерфейс VS Code Полезные расширения VS Code Горячие клавиши VS Code

Модуль 1.3: Командная строка

Что такое терминал Навигация по файловой системе Работа с файлами и папками Полезные команды Терминал в VS Code

Модуль 1.4: Введение в программирование

Что такое программирование Переменные и типы данных Операторы Условия (if/else)Циклы Алгоритмическое мышление

Блок 2: Основы Frontend разработки

Модуль 2.1: HTML Основы

Что такое HTML Структура HTML-документа Текстовые элементы Ссылки и изображения Семантические теги Таблицы Формы Атрибуты форм и валидация

Модуль 2.2: CSS Основы

Что такое CSS Селекторы Цвета и фоны Шрифты и текст Блочная модель Display Специфичность и каскад Единицы измерения Псевдоклассы и псевдоэлементы CSS-переменные

Модуль 2.3: CSS Layout

Поток документа Position Flexbox: основы Flexbox: продвинутый Grid: основы Grid: продвинутый Когда Flex, когда Grid Практика: вёрстка макета

Модуль 2.4: Адаптивная вёрстка

Принципы адаптивности Media Queries Гибкие изображения Гибкая типографика Мобильная навигация Практика: адаптивный сайт

Модуль 2.5: JavaScript Основы

Введение в JavaScript Переменные Типы данных Операторы Условия Циклы Функции Массивы Объекты Строки Область видимости Отладка

Модуль 2.6: DOM и события

Что такое DOM Выборка элементов Изменение элементов Создание и удаление элементов События: основы События: продвинутые Работа с формами Практика: интерактивный UI

Модуль 2.7: Git и GitHub

Что такое Git Базовые команды Git Ветки GitHub: основы Pull Requests Рабочий процесс

Модуль 2.8: DevTools

Elements Console Network Sources и отладка

Блок 3: Advanced Frontend

Модуль 3.1: Продвинутый JavaScript

Замыкания Контекст (this)Прототипы ES6+ классы Модули Деструктуризация и spread Map, Set, WeakMap, WeakSet Symbol и итераторы Proxy и Reflect Чистые функции и иммутабельность

Модуль 3.2: Асинхронность

Синхронный vs асинхронный код Event Loop Callbacks Promises Цепочки промисов Promise API Async/Await Практика: работа с API

Модуль 3.3: TypeScript

Зачем TypeScript Установка и настройка Базовые типы Объектные типы Union и Intersection типы Литеральные типы Generics Utility Types Типизация функций Классы в TypeScript Декларации типов Практика: типизация проекта

Модуль 3.4: React

Введение в React Создание проекта JSX Компоненты useState useEffect Обработка событий Условный рендеринг Списки и ключи useRef и useContext Кастомные хуки React Router Управление состоянием Практика: полноценное приложение

Модуль 3.5: Vue.js

Введение в Vue Создание проекта Шаблоны и директивы Реактивность Composition API Компоненты Жизненный цикл и Watchers Provide / Inject Vue Router Pinia Формы и валидация Оптимизация производительности Анимации и переходы Практический проект: Task Manager

Модуль 3.6: Тестирование

Зачем тестировать код Unit-тесты с Vitest Mocks и Spies Тестирование компонентов Тестирование асинхронного кода TDD и Best Practices

Модуль 3.7: Сборщики и инструменты

Зачем нужны сборщики Vite Webpack (обзор)npm scripts ESLint и Prettier

Модуль 3.8: CSS препроцессоры

Введение в SASS Переменные и вложенность Миксины и функции Модульность

Модуль 3.9: ООП и паттерны

Принципы ООП SOLID: S и O SOLID: L, I, D Паттерн Singleton Паттерн Observer Паттерн Factory Паттерн Module Применение паттернов во фронтенде

Модуль 3.10: Алгоритмы и структуры данных

Зачем алгоритмы Массивы и строки Хэш-таблицы Стек и очередь Связанные списки Деревья Сортировки Бинарный поиск Рекурсия Практика LeetCode

Модуль 3.11: Git продвинутый

Git Rebase Cherry-pick и Stash Git Flow Code Review Git Hooks

Модуль 3.12: HTTP и API

REST API Fetch API Axios CORS Аутентификация WebSockets

Модуль 3.13: Docker

Что такое Docker Dockerfile Docker Compose Практика Docker

Модуль 3.14: AI-инструменты

AI в разработке Промпт-инженерия Генерация кода AI для отладки и рефакторинга

Модуль 3.15: Архитектура фронтенда

Принципы проектирования Архитектурные паттерны Архитектурные стили Структура проекта Feature-Sliced Design State Management архитектура Компонентная архитектура Микрофронтенды Масштабирование

Блок 4: Карьера

Модуль 4.1: Профориентация

Кто такой Frontend-разработчик Ожидания vs Реальность Рынок труда Путь новичка Альтернативные пути

Модуль 4.2: Резюме и портфолио

Структура резюме Что писать в опыте Навыки и технологии GitHub-профиль Портфолио-проекты Сопроводительное письмо

Модуль 4.3: Создание легенды

Что такое легенда Расскажите о себе Описание проектов Слабые стороны Почему ушли с прошлой работы

Модуль 4.4: Поиск работы

Площадки для поиска Как откликаться Нетворкинг Работа с рекрутерами Отслеживание откликов

Модуль 4.5: Собеседования

Этапы собеседований Подготовка к HR Вопросы работодателю Поведение на собесе После собеседования Анализ отказов

Модуль 4.6: Soft Skills

Коммуникация Работа в команде Тайм-менеджмент Ответственность (Ownership)Обучаемость Вопросы по Soft Skills

Модуль 4.7: Технические интервью

Форматы технических интервью Теоретические вопросы Live Coding Тестовые задания Whiteboard Interview Подготовка к техинтервью

Модуль 4.8: Зарплатные переговоры

Исследование рынка Когда говорить о деньгах Техники переговоров Контроффер

Модуль 4.9: Испытательный срок

Первый день Первые недели Первые 90 дней Распространённые ошибки Как пройти испытательный

Модуль 4.10: Развитие карьеры

Грейды и рост Как просить повышение Когда менять работу Выгорание Work-life balance Долгосрочное планирование

Главная/Блок 3: Advanced Frontend/Модуль 3.12: HTTP и API

🌐

Модуль 3.12: HTTP и API

01

REST API

🔒

02

Fetch API

🔒

03

Axios

🔒

04

CORS

🔒

05

Аутентификация

🔒

06

WebSockets

🔒