Веб-разработчик

1. HTML, CSS и адаптивный дизайн

Научитесь верстать и стилизовать сайты с помощью HTML и CSS, адаптировать их под различные устройства. Освоите технологии Grid Layout и Flexbox для позиционирования элементов на странице, а также узнаете, как подключить к своему проекту препроцессоры.

Вы создадите:

• сайт интернет-магазина, адаптированный под разные устройства;
• 4 лендинга — продающих одностраничных сайта

Проектный результат:

1. Введение в веб-разработку
2. Основы HTML
3. Основы CSS
4. Строчные и блочные элементы
5. Знакомство с графическими редакторами
6. Позиционирование элементов. Flexbox
7. Позиционирование элементов. Grid Layout
8. Препроцессоры CSS
9. Введение в адаптивный дизайн
10. Практика создания адаптивного дизайна
11. Методология БЭМ и анимация для сайта
12. Финальная проверка сайта

2. Основы JavaScript

Получите плавный вход в программирование: освоите базовый синтаксис языка JavaScript. Узнаете, как работать с переменными, функциями, объектами и массивами. Научитесь решать задачи на этом языке самостоятельно и в командах.

Закрепите навык верстки без подсказок и инструкций, а также подключите JavaScript к проекту.

По итогу курса сделаете стильный лендинг с играми на JavaScript.

Проектный результат:

1. Знакомство с JavaScript
2. Условное ветвление и основы функций
3. Циклы, массивы. Работа с функциями
4. Методы работы с массивами. Продвинутая работа с циклами
5. Работа с объектами
6. Финальный мастер-класс

3. JavaScript в браузере

С помощью JavaScript научитесь добавлять динамичность интерфейсу, осуществлять интерактивное взаимодействие с пользователем, работать с интерфейсом, обработчиками событий, браузерными API: Browser Object Model и Document Object Model — а также внешними API.

Сделаете виджет погоды, интерфейс создания и ввода ПИН-кода, форму отправки отзыва с рейтингом заведения.

В конце курса создадите многопользовательскую браузерную игру «Камень, ножницы, бумага».

Проектный результат:

1. Введение в Document Object Model
2. Browser Object Model
3. Document Object Model. Часть 1
4. Document Object Model. Часть 2
5. Шаблонизация
6. Шаблонизация. Практика
7. События. Часть 1
8. События. Часть 2
9. Работа с формами и элементами на странице. Часть 1
10. Работа с формами и элементами на странице. Часть 2
11. Типовые виджеты. Часть 1
12. Типовые виджеты. Часть 2
13. AJAX и работа с данными. Часть 1
14. AJAX и работа с данными. Часть 2
15. Работа с API. Часть 1
16. Работа с API. Часть 2
17. Работа со сторонними модулями и организация кода. Часть 1
18. Работа со сторонними модулями и организация кода. Часть 2
19. Курсовая работа

4. Инструменты разработки

В этом курсе вы узнаете об основных инструментах разработчика, которые важны для удобства работы с проектом и скорости внесения изменений. Вас ждет знакомство и работа с Git, GitHub, линтерами, форматтерами, пакетными менеджерами и инструментом для сборки Webpack. Во второй половине курса вы научитесь тестировать свой проект, проводить рефакторинг и ревью кода.

Запрограммируете приложение для карточной игры, подключите свой проект к Git, настроите форматтеры и линтеры.

После тестирования проведете дебаг и рефакторинг своего проекта.

Проектный результат:

1. Жизненный цикл frontend-проекта и основы Git
2. Code review
3. Пакетные менеджеры. Code Linting
4. Инструменты для сборки проектов
5. TypeScript
6. Основы тестирования (автоматические тесты, unit-тесты)
7. Отладка, дебагинг и профилирование приложения
8. Рефакторинг
9. Курсовая работа (сквозная)

5. Фреймворк React

Фреймворк React — это набор готовых решений и функций на JavaScript. React — самый популярный фреймворк во frontend-разработке, большинство крупных компаний используют именно его. В рамках этого курса освоите React-компоненты, React Hooks, а также научитесь работать с библиотекой Rеdux.

В рамках этого курса с нуля создадите SPA-приложение — портал с продажей билетов и интерфейсом билетного контролера, который с телефона может проверить QR-код на билете.

Проектный результат:

1. Введение в React
2. JSX
3. Компонент
4. Жизненный цикл компонента
5. Коллекции, обработка событий
6. Hooks
7. React Router
8. Функциональные компоненты
9. Состояние
10. Props
11. Контекст (Context API)
12. Тестирование. Фреймворк Jest
13. Производительность
14. Refs
15. Redux
16. Асинхронность
17. Styled components

6. Знакомство с бэкенд-разработкой

Понимание серверной части является ключом к созданию полноценных web-сервисов. В рамках курса вы научитесь принимать, обрабатывать и собирать данные в формате json, работать с API и понимать работы бэкенда: запуск сервера, роутинг, обработка запросов. Познакомитесь с библиотекой для разработки серверных приложений Express_JS, средой выполнения Node. js, базами данных.

Подключите собственный бэкенд к проекту из курса по React.

Проектный результат:

1. Основы работы бэкенда
2. Express.js
3. REST API
4. WebSocket

7. Процессы командной разработки

К этому моменту вы пройдете основные блоки веб-разработки, кроме настоящей практики работы в команде. Перед стартом проекта вы подробнее разберете тему Deployment и CI/CD. Далее вас ждёт освоение навыков по декомпозиции задач, разделению зон ответственности, проводению код-ревью и тестированию решений. Помимо хард скиллов, вы прокачаете навыки работы в команде: научитесь принимать и давать обратную связь, соблюдать сроки, договариваться, приходить к компромиссу, мотивировать друг друга и презентовать работу целой команды.

Вас ожидает командная разработка приложения для онлайн-школы. Внутри команды предстоит распределять задачи, чтобы успеть в срок, оценивать код друг друга и работать по отрезкам времени (спринтам). Наставники на это время превратятся в технических руководителей и будут прикреплены к каждой команде.

8. Финальный индивидуальный проект

Финальный проект — это возможность собрать все знания, навыки и опыт за время обучения. У вас будет 2 недели, чтобы справиться с последней задачей для портфолио — разработкой frontend-части для сервиса покупки авиабилетов с функциями выбора рейса, места и оплаты.

Разработка frontend-части для сервиса покупки авиабилетов. Функции на сайте: выбор рейса, места в самолете, страница с оплатой.