Frontend Full Stack разработчик [JavaRush]

Складчина: Frontend Full Stack разработчик [JavaRush]

3 причины, почему тебе стоит выбрать Frontend для обучения и старта карьеры разработчика:

• Самая востребованная профессия в IT
  Frontend-разработка — это идеальная отправная точка для карьеры в IT. Простота изучения основ HTML, CSS и JavaScript делает её доступной даже для новичков без технической базы. При этом, навыки фронтенда невероятно востребованы и позволят вам быстро находить работу и расти в профессии.
• Выход на глобальный IT‑рынок
  Спрос на фронтенд-разработчиков высок во всем мире, 75% вакансий предлагают удаленную работу, а 20% – возможность релокации. Это открывает перед вами двери к международной карьере и высоким зарплатам. Средняя зарплата фронтенд‑разработчика уровня Middle в США составляет $110 тысяч в год, а Senior-специалист зарабатывает от $140 тысяч и выше.
• Интересные проекты
  Frontend-разработка позволяет вам участвовать в создании самых разнообразных и интересных проектов. От разработки интерфейсов для веб-приложений и мобильных платформ до работы с интерактивной графикой и анимациями – каждый проект приносит новый опыт и удовлетворение от результатов. Вы будете создавать продукты, которыми пользуются миллионы людей, и видеть плоды своего труда в реальном времени.

Программа

Обучение на Фронтенд‑разработчика с нуля включает в себя 5 модулей с лекциями, практикой и итоговыми проектами (от новичка до уровня Middle‑разработчика), а также финальный групповой проект.

Модуль 1. Web Core

HTML и CSS

• ИТ-индустрия, основы веб-разработки и настройка окружения.
• Основы HTML: структура, теги, текст, списки и таблицы.
• Мультимедиа в HTML: изображения, аудио, видео и их оптимизация.
• HTML-формы: создание, элементы, валидация и типы ввода.
• Семантические теги HTML5, микроразметка и SEO-оптимизация.
• Основы CSS: подключение, синтаксис, базовые селекторы, цвета, переменные.
• Продвинутые CSS-селекторы: комбинированные, атрибутные, псевдоклассы и псевдоэлементы.
• Оформление текста и шрифты в CSS: свойства, подключение, выравнивание.
• Блочная модель CSS: отступы, размеры. Flexbox для создания макетов.
• Фон и декоративные элементы в CSS: цвета, изображения, градиенты, тени, рамки.
• Позиционирование элементов в CSS: типы (relative, absolute, fixed, sticky), плавающие элементы, центрирование.
• CSS Трансформации: 2D/3D. Переходы и анимации: основы, свойства, циклы.
• Отзывчивая верстка: медиа-запросы, адаптивные сетки, графика и шрифты, mobile-first.
• CSS Grid Layout: создание контейнеров, определение строк и столбцов, размещение и выравнивание элементов.
• CSS-функции: calc(), min(), max(), clamp(), препроцессоры.
• Работа с системой контроля версий Git и GitHub. Практическое освоение GUI в PyCharm: создание веток (Branch), фиксация изменений (Commit) и отправка на сервер (Push). Настройка файла .gitignore.

Итоговый проект

• Создание адаптивной главной страницы для сайта по бронированию билетов. Цель блока HTML/CSS — заложить прочный визуальный фундамент проекта.

Введение в JavaScript

• Введение в JavaScript: роль в веб-разработке и вывод информации (console.log).
• Переменные и основные типы данных: var, let, const, числа, строки, булевы, специальные значения (null, undefined, NaN) и преобразование типов.
• Операторы и условные конструкции: математические, сравнения, логические, if-else и тернарный оператор.
• Массивы и циклы: создание, методы, итерирование (for, while), управление циклами (break, continue).
• Функции: объявление, параметры, return, стрелочные функции и контекст this.
• Объекты: создание, свойства, методы, работа с данными.
• Основы DOM: структура, объект document, поиск элементов (querySelector, querySelectorAll).
• Работа с коллекциями элементов: HTMLCollection, NodeList, их особенности и перебор.
• Манипуляции с атрибутами: getAttribute, setAttribute, прямой доступ к свойствам элементов.
• Изменение стилей: element.style, управление CSS-классами через classList.
• Модификация содержимого: textContent, innerHTML и вопросы безопасности.
• События в JavaScript: основные типы, навешивание (addEventListener) и снятие обработчиков (removeEventListener), объект event (target, preventDefault).
• Таймеры: setTimeout и setInterval для задержек и повторений.
• Динамическое создание/удаление элементов и Fetch API.

Итоговый проект

• С помощью JavaScript — оживить статический интерфейс и сделать его интерактивным и функциональным. JavaScript будет выступать мозгом проекта, отвечая за динамическое поведение элементов, таких как открытие/закрытие меню, автодополнение полей ввода, управление календарём и обработка пользовательских действий.

Модуль 2. Fullstack

Работа с сетью

• Основы устройства сети: модель OSI, принципы работы подсетей, DNS, NAT и VPN.
• Изучение протокола HTTP: клиент-серверная архитектура, структура URL, HTTP-методы, коды ответов, заголовки и введение в REST.

Продвинутый JavaScript

• Расширенные функции и объекты: преобразование типов, специальные типы (null, undefined), функции (параметры, области видимости), объекты (методы, деструктуризация, rest/spread операторы), обработка исключений.
• Продвинутая работа с данными и отладка: форматирование дат (Date), шаблонные литералы, таймеры, функции высшего порядка, замыкания, основные и перебирающие методы массивов, отладка в IDE.
• Прототипы, Классы и ООП: основы ООП, прототипы и наследование через них, синтаксис классов (конструкторы, методы, наследование, статические методы), инкапсуляция, полиморфизм, миксины.
• DOM, События и Canvas: введение и навигация по DOM, создание/удаление элементов, работа с атрибутами и стилями, события (объект события, всплытие/перехват, пользовательские события, оптимизация), Canvas API.
• Асинхронность, Промисы и Бэкенд: концепции асинхронности, Promise (цепочки), async/await, Fetch API и Axios, CRUD-операции, обработка ошибок, методы call, bind, apply.
• Новые структуры данных и объекты браузера: итераторы и генераторы, Map, Set, веб-хранилища (localStorage, sessionStorage), работа с Cookies, введение в WebSocket и Web APIs.

Фундамент бэкенда: от Node.js до Express.js

• Введение в Node.js: философия, установка, запуск скриптов, package.json, управление зависимостями npm и модули (CommonJS, ES Modules).
• Асинхронное программирование: Event Loop, Callbacks и Promises (then, catch), async/await, обработка ошибок и аргументов (process.argv).
• Работа с файловой системой (fs, fs.promises) для чтения, записи, удаления файлов и директорий. Модуль path и JSON-файлы.
• Создание нативного HTTP-сервера: модуль http, объекты request/response, ручная маршрутизация, парсинг URL, отправка ответов и установка статусов.
• Основы Express.js: установка, создание первого приложения, роутинг (параметры, query), парсинг тела запроса, реализация CRUD-операций.
• Расширенный Express.js: Middleware (пользовательские, статика), обработка ошибок и структурирование проекта (маршруты, контроллеры, сервисы).

Основы TypeScript

• Введение в TypeScript: установка, настройка, сравнение с JavaScript и обзор типов данных.
• Основы типизации: примитивные типы, массивы, кортежи, объекты, интерфейсы, типизация функций (опциональные параметры, стрелочные), Union и Intersection, any, unknown, readonly, const.
• Интерфейсы и классы: введение в интерфейсы (расширение, для функций), основы классов (свойства, методы, модификаторы доступа), наследование, абстрактные классы, связь интерфейсов и классов.
• Продвинутые типы и функции: перечисления (Enums), дженерики (Generics) и их ограничения, оператор keyof, типы индексирования, утилитарные типы, тип guards, перегрузка функций.
• Работа с модулями и пространствами имен: введение, продвинутое использование модулей, пространства имен, отличия, системы сборки проектов, работа с внешними библиотеками, публикация модулей, отладка.

Итоговый проект

• Работа с бэкендом

Модуль 3. Reast

Мастерство фронтенда: React

• Основы React с TypeScript: введение, настройка проекта, JSX, компоненты, пропсы, состояние (useState, useEffect) и его типизация.
• Продвинутое управление состоянием: useReducer и useContext для сложного и глобального состояния, их типизация.
• Оптимизация компонентов: React.memo, useCallback, useMemo для мемоизации и предотвращения ререндеров. Профилирование с React DevTools.
• Компоненты высшего порядка (HOC) и рендер-пропсы: добавление логики, аутентификации, типизация и сравнение подходов.
• Работа с формами и валидация: Formik для форм, Yup для валидации данных, асинхронная валидация, многошаговые формы.
• Глобальное состояние с Redux и Redux Toolkit: основы Redux, Store, slices, типизация, useSelector, useDispatch, createAsyncThunk для асинхронных действий.
• Redux Middleware: Redux Thunk и Redux Saga для асинхронных операций, их типизация и применение.
• Кэширование данных с React Query: установка, запросы, мутации, типизация, управление кэшем, оптимизация.
• Маршрутизация с react-router-dom: базовые, динамические и защищённые маршруты, навигация, параметры.
• Оптимизация производительности React: профилирование, React.lazy/Suspense (lazy loading), React.memo.
• Интеграция с REST API: fetch и Axios для запросов (GET/POST/PUT/DELETE), типизация, обработка ошибок, хуки.
• Введение в GraphQL: концепции, Apollo Client для запросов/мутаций, типизация, кэширование, аутентификация.
• Аутентификация с JWT: основы, хранение в localStorage, AuthService, логин/регистрация, защищённые маршруты.
• Продвинутая аутентификация: MFA, защита маршрутов с AuthGuard, уровни доступа, OAuth/SSO.
• Тестирование компонентов: Jest и React Testing Library для рендеринга, событий, пропсов, состояния, мокирование API.
• Интеграционное тестирование: Cypress для тестирования маршрутов, форм, API-запросов и асинхронных операций.

Итоговый проект

• Создание современного веб-сервиса для бронирования билетов, разработанный с использованием React, TypeScript и React Router.
• Проект акцентируется на проработке клиентской части, работа с React-компонентами, управлением состоянием (Context или Redux) и маршрутизацией. Пользовательский опыт, динамическое формирование форм и автоматический пересчет стоимости заказа станут ключевыми элементами реализации.

Модуль 4. Node.js & React Native

Full-stack-приложения: Next.js 15, маршрутизация, API и аутентификаци

• Введение в Next.js 15: цели, возможности, Page Router vs App Router, структура проекта (app/), layout.tsx, page.tsx, template.tsx, Server Components и Client Components.
• Маршрутизация в App Router: File-based routing, статические и динамические сегменты ([id], [...slug]), группы и параллельные маршруты, вложенность, Layout-система (layout.tsx vs template.tsx), навигация.
• Загрузка данных и кеширование в Server Components: fetch() с кешированием (cache, revalidate), обработка состояний загрузки (loading.tsx), ошибок (error.tsx), ISR с revalidate, tags, Metadata API для SEO.
• Server Actions: основы, создание async функций с use server, формы в Next.js, передача данных, useFormState для управления статусом, useOptimistic для оптимистичного UI.
• Аутентификация с next-auth: установка, настройка провайдеров (GitHub, Google), управление сессиями (auth(), getServerSession()), middleware.ts для защиты маршрутов и редиректов.
• Route Handlers (API): структура app/api/route.ts, поддержка HTTP-методов (GET, POST, PUT, DELETE), работа с Request/Response, NextResponse.json(), валидация данных (zod), обработка ошибок, связь с Server Actions.

Проект

• Интернет-магазин на Next.js

Полный цикл разработки на Angular 19

• Введение в Angular 19: структура проекта, Standalone Components, шаблоны (интерполяция, Property Binding, Event Binding, Two-way Data Binding [(ngModel)]).
• Встроенные директивы: структурные (*ngIf, *ngFor), атрибутивные (ngClass, ngStyle). Вложенные компоненты: @Input() для передачи данных вниз, @Output() и EventEmitter для передачи событий вверх, хуки жизненного цикла (ngOnInit, ngOnChanges).
• Сервисы и Внедрение Зависимостей (DI): зачем нужны сервисы, @Injectable(), создание и внедрение сервисов, providedIn: root, иерархия инжекторов, управление состоянием через сервис. Введение в Signals.
• Работа с формами: отличие Template-driven и Reactive Forms. Подключение FormsModule (для Template-driven) и ReactiveFormsModule. FormGroup, FormControl, FormArray. Встроенная и пользовательская валидация. Отображение ошибок.
• HTTP-клиент и Observables (RxJS): концепция RxJS и Observables, подключение HttpClientModule, выполнение HTTP-запросов (GET, POST, PUT, DELETE), подписка на Observable (subscribe()), обработка ошибок (catchError), async pipe, операторы RxJS (map, filter, tap), HTTP Interceptors.
• Маршрутизация (Routing): настройка маршрутов (RouterModule.forRoot, forChild), определение маршрутов (path, component), , декларативная навигация (routerLink), динамические параметры (ActivatedRoute), Query-параметры, Guard-ы (CanActivate), ленивая загрузка модулей.

Проект

• Интернет-магазин на Angular

Введение в React Native

• Введение в React Native: основы, отличия от React Web, установка окружения (Node.js, Android Studio, Xcode), создание и структура проекта.
• Основные компоненты и стилизация: View, Text, Image, ScrollView, типизация компонентов с TypeScript, работа с StyleSheet и Flexbox для адаптивного интерфейса.
• Навигация с React Navigation: Stack, Bottom Tab и Drawer Navigation, типизация параметров и экранов, передача данных между экранами.
• Управление состоянием с Redux: установка Redux и Redux Toolkit, создание Store и slices, типизация состояния и действий, useSelector, useDispatch, createAsyncThunk для асинхронных операций, Redux Persist.
• Подключение к API и локальное хранение: работа с fetch и Axios для HTTP-запросов, типизация запросов/ответов, обработка ошибок, использование AsyncStorage для локальных данных.
• Оптимизация и тестирование: принципы оптимизации производительности (React.memo, useCallback, useMemo), профилирование (React DevTools), оптимизация изображений и списков (FlatList), тестирование с Jest и React Native Testing Library.

Проект:

• Приложение на React Native

Модуль 5. Angular

Паттерны проектирования

• Порождающие паттерны
• Структурные паттерны
• Поведенческие паттерны
• Антипаттерны

Основы SQL и PostgreSQL

• Изучение реляционной модели данных и синтаксиса SELECT. Фильтрация данных с помощью WHERE, сортировка с ORDER BY, ограничение вывода через LIMIT и OFFSET для пагинации, а также извлечение уникальных значений с DISTINCT.
• Агрегирование и группировка данных. Применение агрегатных функций (COUNT, SUM, AVG, MIN, MAX), группировка результатов с GROUP BY и фильтрация групп с HAVING. Обзор основных числовых и временных типов данных.
• Понимание и обработка NULL значений с помощью IS NULL, COALESCE и CASE WHEN. Использование подзапросов для сложной фильтрации данных с операторами IN и EXISTS.
• Объединение таблиц: освоение INNER JOIN и LEFT JOIN для связывания данных из нескольких таблиц. Изучение концепции внешних ключей и моделирование связей ONE-TO-MANY и MANY-TO-MANY.
• Создание и изменение таблиц с помощью CREATE и ALTER TABLE с использованием ограничений. Вставка, обновление и удаление данных командами INSERT, UPDATE, DELETE.

Docker

• Основы Linux. Изучение командной строки, навигация по файловой системе, работа с файлами и директориями.
• Администрирование Linux. Управление пользователями и группами, настройка прав доступа к файлам, мониторинг и управление системными процессами.
• Введение в Docker. Сравнение контейнеров и виртуальных машин. Установка, основные команды и знакомство с Docker Hub.
• Основы работы с Docker. Создание и управление контейнерами, работа с логами, перенаправление портов и монтирование томов для постоянного хранения данных.
• Работа с Docker-образами. Создание образов с помощью Dockerfile, изучение основных инструкций, управление образами, их оптимизация и публикация в Docker Hub.
• Docker Compose. Введение в оркестровку контейнеров. Создание docker-compose.yml для управления многоконтейнерными приложениями, настройка сетей, томов и масштабирование сервисов.

Итоговый проект

• Настройка Environment для разработки

Цена 88800 руб.
Скрытая ссылка