• Кто такой Frontend-разработчик
• Знакомство с HTML и работа с IDE
• Работа с нейросетью. Создание промптов

Результат модуля:
1. Узнаете об основных задачах и инструментах Frontend разработчика
2. Узнаете о языке HTML и напишете первую разметку сайта в среде разработки
3. Узнаете как формулировать запросы ChatGPT для задач фронтенда, создадите с помощью ChatGPT разметку сайта

• HTML
• CSS
• Препроцессоры и постпроцессоры
• Figma
• Адаптивная верстка
• SEO Оптимизация

Результат модуля:
1. Узнаете как создавать структуру сайта через HTML
2. Научитесь оптимизировать написание разметки с помощью шаблонизаторов
3. Научитесь созданию гибких и адаптивных макетов веб-страниц
4. Освоите CSS для создания сложных макетов, ускорения и оптимизации
5. Научитесь использовать Figma для разработки визуального дизайна веб-сайтов
6. Научитесь создавать адаптивные макеты учитывая характеристики устройств
7. Изучите основы SEO
8. Освоите методики улучшения поисковой оптимизации сайта

Кейсы в портфолио:
1. Создание одностраничного сайта
2. Написание CSS для работающего приложения

• Установка и настройка Git
• Настройка аккаунта GitHub
• Основы командной строки Bash
• Основные команды для организации командной работы с Git

Результат модуля:
1. Настроите Git и GitHub
2. Научитесь генерировать SSH-ключи для безопасной аутентификации
3. Освоите основные команды Git
4. Освоите решения проблем и управление версиями в рамках командной работы

Кейсы в портфолио:
1. Создание адаптивного сайта, с SEO оптимизацией и цветовой темой

• Базовый JavaScript
• JavaScript и браузер
• Асинхронный JavaScript и клиент-серверное взаимодействие
• Javascript на сервере

Результат модуля:
1. Освоите особенности типов данных
2. Научитесь создавать и управлять свойствами объектов, массивами используя различные методы
3. Научитесь использовать различные типы циклов
4. Освоите добавление обработчиков событий к элементам и управление формами
5. Освоите клиент-серверное взаимодействие
Кейсы в портфолио:
1. Интерактивный сайт карты мест, которые посетили студенты.

• Конфигурация проекта
• Code-style, Eslint, Stylelint

Результат модуля:
1. Научитесь настраивать рабочее окружение для разработки
2. Освоите установку и настройку ESLint, Stylelint и их модификацию
3. Научитесь интегрировать Stylelint
4. Изучите применение Prettier и SCSS
5. Освоите настройку husky

• React
• Подходы написания стилей для приложений

Результат модуля:
1. Освоите ключевые принципы работы библиотеки React и научитесь применять различные паттерны проектирования
2. Освоите создание функциональных и классовых компонентов и научитесь их применять
3. Освоите использование стандартных хуков
4. Освоите написание стилей с использованием CSS, CSS Modules и CSS in JS для создания современных пользовательских интерфейсов
Кейсы в портфолио:
1. Интернет-магазин товаров

• Динамическая и статическая типизация
• Массивы и объекты
• Специальные типы
• Создание собственных типов

Результат модуля:
1. Освоите основные концепции типов в TypeScript, его настройки в проектах и расширенные возможности
2. Научитесь использовать JSDoc для создания структурированной документации кода
3. Научитесь создавать собственные типы, интерфейсы и обобщения для создания гибких и масштабируемых приложений.

Кейсы в портфолио:
1. Трекер криптовалюты

• React роутинг
• Разработка инфраструктуры React приложений
• Оптимизация React приложений

Результат модуля:
1. Научитесь создавать динамические маршруты
2. Научитесь реализовывать фильтрацию и сортировку данных
3. Освоите принципы настройки и использования систем непрерывной интеграции
4. Научитесь использовать инструменты и методики для анализа производительности React компонентов
5. Сможете идентифицировать и устранять узкие места в производительности, применяя практики по оптимизации
6. Освоите техники виртуализации для эффективной отрисовки больших списков и таблиц
7. Научитесь применять техники throttling и debouncing для оптимизации обработки часто повторяющихся событий

Кейсы в портфолио:
1. Приложение для публикации объявлений

• ReactHookForm
• Formik
• Zod
• Yup

Результат модуля:
1. Научитесь оптимизации рендеринга форм и управлению состоянием формы на клиентской стороне
2. Научитесь описывать схемы валидации для обеспечения точности данных, вводимых пользователями

• ReactHookForm
• Formik
• Zod
• Yup

Результат модуля:
1. Научитесь оптимизации рендеринга форм и управлению состоянием формы на клиентской стороне
2. Научитесь описывать схемы валидации для обеспечения точности данных, вводимых пользователями

• Что такое архитектура и для чего она нужна
• FSD
• Atomic Design
• Модульная архитектура

Результат модуля:
1. Освоите базовые понятия архитектуры в контексте фронтенд-разработки
2. Научитесь применять подходы Feature-Sliced Design и Atomic Design для организации компонентов и функций в приложениях
3. Научитесь разрабатывать модульную архитектуру, которая поддерживает высокий уровень переиспользования кода и упрощает тестирование
4. Сможете оценить преимущества и ограничения различных архитектурных подходов на практических примерах и проектах

Кейсы в портфолио:
1. Платформа управления проектами

• Тестирование
• СI/CD и pre-commit хуки
• Развертывание приложений

Результат модуля:
1. Научитесь систематизации тестовых сценариев
2. Освоите создание автоматизированных юнит-тестов и регрессионных тестов интерфейса
3. Научитесь настраивать автоматические сборки, тестирование и развертывание приложений