Top.Mail.Ru
Программа обучения FrontEnd middle
1 Этап: Введение в веб-разработку и основы HTML
Время прохождения : 1 месяц
Содержание:
Результат:
1. Узнаете о базовых концепциях веб-разработки, научитесь создавать простейшие веб-страницы с использованием HTML
Введение в веб-разработку. Основные понятия
Основы HTML: структура документа, теги и элементы, создание таблиц и форм
Обратная связь
Содержание:
Время прохождения : 1 месяц
Инструменты front-end разработчика: devtools, Emmet, редакторы кода
Инструменты разработчика в браузере для работы с CSS и JS
2 Этап: Основы CSS и введение в JavaScript
Основы CSS: селекторы, стили, форматирование текста, блочная модель
Введение в JavaScript: переменные, типы данных, операторы, функции
Практика:
1. Проект: Доработка сайта-визитки с использованием CSS и базового JS.
+ набор домашних заданий по темам блока
Результат:
1. Получите навык создания собственных типов данных
2. Приобретете опыт в проектировании приложений с большим содержанием кода
Практика:
1. Проект: Персональный сайт-визитка с навигацией
+ набор домашних заданий по темам блока
Этап 3. Продвинутая верстка и работа с DOM
Содержание:
Время прохождения: 1 месяц
Продвинутая верстка: Flexbox, Grid, адаптивный дизайн
1. Освоите продвинутую верстку и научитесь взаимодействовать с DOM с помощью JavaScript
Результат:
Основы асинхронности в JavaScript (введение в промисы)
Введение в работу с DOM: выбор элементов, изменение структуры документа, обработка событий
Практика:
1. Проект: Сайт для управления библиотекой книг с интерактивными элементами.
+ набор домашних заданий по темам блока
Этап 4. Инструменты разработки и основы TypeScript
Содержание:
Время прохождения: 1 месяц
Работа с терминалом и системами контроля версий (Git)
1. Получите навыки работы с терминалом, Git, сборщиками и познакомитесь с TypeScript
Результат:
Инструменты разработки: npm, Webpack и тд
Введение в TypeScript: типизация, интерфейсы, классы
Практика:
1. Проект: Адаптивный веб-сайт с возможностью смены цветовой темы.
+ набор домашних заданий по темам блока
Этап 5. Библиотеки и менеджеры состояния для React
Содержание:
Время прохождения: 1 месяц
Основы React: компоненты, состояние, жизненный цикл
1. Изучите React и научитесь работать с менеджерами состояния, такими как Redux и Effector
Результат:
Работа с менеджерами состояния: Redux и Effector
Адаптивные и неадаптивные компоненты
Практика:
1. Проект: Улучшенный многостраничный сайт-портфолио с использованием React.
+ набор домашних заданий по темам блока
Этап 6. Тестирование и работа с Vue.js
Содержание:
Время прохождения: 1 месяц
1. Познакомитесь с тестированием, изучите актуальный фреймворк Vue.js и его экосистему, научитесь оптимизировать свои проекты
Результат:
Тестирование: Ручное, автоматизированное и интегрированное тестирование, знакомство с Mocha, Chai и Cypress
Основы Vue.js: структура проекта, компоненты, директивы
Маршрутизация и хранилища в Vue.js
Практика:
1. Проект: Полнофункциональное многостраничное приложение с использованием экосистемы Vue.
+ набор домашних заданий по темам блока
Оптимизация приложений
Этап 7. Next.js и углубление в JavaScript и TypeScript
Содержание:
Время прохождения: 1 месяц
1. Изучите основы Next.js, углубитесь в особенности JavaScript и TypeScript для разработки крупных приложений
Результат:
Введение в Next.js: основные принципы и структура проекта
SSR (Server-Side Rendering) и динамическая генерация страниц
Углубление в JavaScript: асинхронность, замыкания, прототипное наследование
Практика:
1. Проект: Многостраничный сайт с серверным рендерингом и динамическими маршрутами на Next.js.
+ набор домашних заданий по темам блока
Углубление в TypeScript: интерфейсы, типы, generics
Этап 8. Современные библиотеки и фреймворки, работа с CSS-процессорами и стилями
Содержание:
Время прохождения: 1 месяц
1. Научитесь применять современные библиотеки и фреймворки для фронтенд-разработки, а также стилизовать проекты с помощью пред- и постпроцессоров CSS
Результат:
Введение в Next.js: основные принципы и структура проекта
SSR (Server-Side Rendering) и динамическая генерация страниц
Углубление в JavaScript: асинхронность, замыкания, прототипное наследование
Практика:
1. Проект: Создание стилизованного веб-приложения с использованием библиотеки Styled-components и CSS-процессоров.
+ набор домашних заданий по темам блока
Углубление в TypeScript: интерфейсы, типы, generics
Этап 9. Инструменты сборки и автоматизации, работа с API и управление состоянием
Содержание:
Время прохождения: 1 месяц
1. Овладеете инструментами для автоматизации процесса разработки, научитесь работать с API и управлять состоянием приложения
Результат:
Инструменты сборки: Webpack, Gulp, Parcel
Работа с API: Fetch API, Axios, работа с REST и GraphQL
Управление состоянием: Redux, MobX, Context API
Практика:
1. Проект: Разработка приложения с интеграцией API и управлением состоянием через Redux или MobX.
+ набор домашних заданий по темам блока
Этап 10. Работа с сервером и CI/CD
Содержание:
Время прохождения: 1 месяц
1. Получите навыки работы с серверами, развертывания проектов и настройки CI/CD
Результат:
Продвинутая работа в CI/CD: Jenkins, GitLab CI, GitHub Actions
Работа с сервером: Nginx, настройка и деплой
Docker: создание контейнеров, работа с Docker Compose
Практика:
1. Проект: Настройка CI/CD и развертывание проекта на сервере с использованием Docker и Nginx.
+ набор домашних заданий по темам блока
Этап 11. React Native и современные подходы к архитектуре
Содержание:
Время прохождения: 1 месяц
1. Освоите создание мобильных приложений с помощью React Native и научитесь применять современные архитектурные подходы для масштабируемых приложений
Результат:
Введение в React Native: создание и настройка приложения
Работа с платформенными компонентами
Современные архитектуры: MVC, MVVM, FLUX
Практика:
1. Проект: Создание кроссплатформенного мобильного приложения на React Native.
+ набор домашних заданий по темам блока
Этап 12. Метрики, Angular и продвинутые темы
Содержание:
Время прохождения: 1 месяц
1. Изучите Angular и инструменты для мониторинга и анализа производительности приложений, а также познакомитесь с актуальными трендами в веб-разработке
Результат:
Метрики и мониторинг: Web Vitals, Lighthouse, Sentry
Основы Angular: компоненты, директивы, модули
Актуальные тренды и продвинутые темы: PWA, Serverless, Jamstack
Практика:
1. Проект: Многостраничное приложение на Angular с интеграцией метрик производительности.
+ набор домашних заданий по темам блока
После успешного завершения обучения:
Сертификат
Персональный сертификат о прохождении специализации. По запросу на английском языке.
Развитие карьеры и бизнеса:
У вас будет:
Консультации с ментором в течение обучения.
У вас будет:
Подборки вакансий, инсайты рынка труда.
У вас будет:
Проекты в ваше портфолио.
У вас будет:
Реальный опыт на крауд-платформах.