HTML, CSS, JavaScript: вводный модуль

Почувствуете себя в роли разработчика и поймёте, хотите ли развиваться в
этом направлении. Изучите базовый синтаксис HTML и CSS. Научитесь
размещать блоки на веб-странице, менять шрифт и цвета. Напишете простую
программу на JavaScript и сделаете страницу интерактивной.

Тема 1. Первый код 

Тема 2. Что такое HTML и CSS

Тема 3. Базовые CSS-свойства

Тема 4. Больше CSS 

Тема 5. JavaScript. Начало

Тема 6. JavaScript. Приземление в реальность

Тема 7. О том, что дальше

20 часов

Как устроено обучение
Вы узнаете, как устроены программа и обучение.

Ознакомитесь с организационными деталями.

Тема 1. Что будет дальше: процесс обучения

Тема 2. Модули, дедлайны и плагиат

Тема 3. Про переход в другую когорту

Тема 4. Проектная работа и дополнительные проекты

Тема 5. Кое-что о софт-скилах

Тема 6. Команда сопровождения

Тема 7. Коммуникация

Тема 8. Правила

Тема 9. Что получится в итоге

Тема 10. Знакомство позади. Убедимся, что правильно друг друга поняли

Примерно 2 часа
Модуль 2
HTML и CSS: лэйаут, доступность и интерактив
Научитесь работать со шрифтами в вебе. Разберётесь, как писать код,
корректный для браузеров и поисковых систем. Изучите все способы
организации каркаса вашей страницы. Научитесь настраивать страницы
для поисковых роботов. Поработаете с видео-, аудио- и другими
интерактивными элементами страниц. Поймёте, как и с какими событиями
на странице может работать CSS. Разберётесь, какие элементы на странице
может создавать язык стилей. Научитесь стилизовать элементы в разных
состояниях и в разных ситуациях (например, в зависимости от порядка их
появления). Разберётесь в основных принципах и инструментах создания
доступных веб-страниц.

Спринт 1: Верстка: семантика и лэйаут 

Тема 1. Повторение перед стартом

Тема 2. Вёрстка — продолжение дизайна

Тема 3. Готовимся писать код

Тема 4. Файлы в проекте

Тема 5. Bash и Git. Основы

Тема 6. Шрифты и типографика

Тема 7. Семантика 

Тема 8. Глобальные атрибуты

Тема 9. Флексбокс-вёрстка

Тема 10. Как сдавать проектные работы

Тема 11. Позиционирование элементов

Тема 12. Grid Layout, часть 1

Тема 13. Кодстайл

Тема 14. Компонентный подход 

Спринт 2: Верстка: доступность и подходы к организации стилей

Тема 1. Настройка страницы и мета

Тема 2. Внешний встраиваемый контент: видео, iframe, API

Тема 3. Дополнение блочной модели

Тема 4. Псевдоклассы и псевдоэлементы

Тема 5. Доступность

Тема 6. Разметка форм

Тема 7. Чудные селекторы 

Тема 8. Стилизация форм

Тема 9. Линтеры, форматтеры, автоматизация

Тема 10. БЭМ, Atomic

Тема 11. Продвинутый Git и Bash
6 недель,

+2 проекта в портфолио
Одностраничный сайт «Оно тебе
надо».

Создадите свой первый
одностраничный сайт.

Написание CSS-стилей для
приложения «Посмотри в окно». 

В этой проектной работе вам
предстоит написать CSS для
работающего приложения.

Модуль 3 Дизайн, адаптивная вёрстка, декорирование

Научитесь комплексу приёмов, которые позволят корректно отображать
страницы на разных устройствах и с разными настройками. Подготовите
графику для работы с разными экранами. Научитесь организовывать код
для создания цветовой темы сайта. Разберёте инструменты декорирования
ваших страниц. Градиенты, тени, фильтры, режимы смешивания — всё это
здесь. Научитесь использовать векторную графику на страницах и
пользоваться интерактивными инструментами, которые встроены в HTML.
Вишенка на торте спринта — анимации страниц.

Спринт 3: Верстка: адаптивность и графика

Тема 1. Подходы

Тема 2. Растровая графика

Тема 3. Кастомные переменные

Тема 4. Единицы измерения и функции

Тема 5. Grid Layout, часть 2

Тема 6. Разработка интерфейса для разных устройств

Тема 7. Автоматизация форматирования и линтинг

Тема 8. Постпроцессоры

Тема 9. Git для взрослых 

Спринт 4: Верстка: декорирование, подходы и инструменты

Тема 1. Использование SVG

Тема 2. 2D трансформации и transition

Тема 3. Анимации

Тема 4. Декорирование

Тема 5. 3D трансформации

6. Модальные окна

Тема 7. Шаблонизаторы

Тема 8. Препроцессоры

Тема 9. Основы дизайна
6 недель,

+2 проекта в портфолио
Адаптивный сайт с разными
цветовыми темами «Сложно
сосредоточиться».

Cделаете адаптивный сайт в
разными цветовыми темами,
где собраны всякие крутые
рабочие советы о том, как не
терять концентрацию. 

Мудборд настроения

Веб приложение «Мудборд»,
который вы собираете сами.
В итоге получается ваша личная
дорожная карта с состояниями,
в которых вы побывали, пока
проходили этот курс.

Модуль 4 Базовый JavaScript

Рассмотрите типы данных, научитесь работать с условиями, циклами
и функциями. Изучите DOM. Узнаете, как добавлять вёрстку в проект
с помощью JavaScript и добавлять на страницу интерактивность: создавать
интерактивные формы с проверкой данных и работать с пользовательскими
событиями.

Спринт 5: Основы JavaScript: типы, основы DOM

Тема 1. Вспомнить всё

Тема 2. Как находить решения проблем?

Тема 3. Примитивы. Начало 

Тема 4. Знакомство с DOM

Тема 5. Дебаггинг JavaScript
6 недель,

+1 проект в портфолио

Спринт 6: JavaScript: работа с данными, массивы, функции и объекты

Тема 1. Методы работы с данными, условия, циклы 

Тема 2. Создание, добавление и удаление элементов в DOM 

Тема 3. Массивы

Тема 4. Функции 

Тема 5. Объекты

Тема 6. Командная работа
1 учебный проект

(на завершение)

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

Узнаете, как писать модульный код и настраивать инфраструктуру
приложения с помощью инструмента Webpack. Освоите сложные

концепции языка JavaScript, асинхронность и обмен данными с сервером.
Научитесь работать с пользовательскими событиями, взаимодействовать

с сервером. Изучите асинхронные и синхронные операции, познакомитесь

с концепцией Promise.
Спринт 7: Погружение в JavaScript: сборка кода, обработка событий,
валидация форм и работа с API

Тема 1. Сборка проекта. Webpack

Тема 2. Модули в JS

Тема 3. Продвинутый JavaScript. Асинхронность

Тема 4. Обработка событий

Тема 5. Работа с формами

Тема 6. Валидация форм

Тема 7. Работа с API
3 недели,

+1 проект в портфолио
Mesto

Создадите свой веб сервис. Чем
то похоже на Instagram это
будет интерактивная страница
с фотографиями. Вы сделаете его
от начала и до конца: сначала всё
сверстаете, потом напишете
логику на JavaScript. Реализуете
валидацию форм, добавление,
удаление фотографий и лайки
к ним. Подключите проект
к серверу и разместите его
в интернете.

Модуль 6 TypeScript и ООП

Познакомитесь с ещё одной важной концепцией: объектно
ориентированным программированием (ООП). Изучите принципы
разработки ПО и работу с окружением. Примените методы ООП
в разработке веб интерфейсов. Узнаете о логическом продолжении
и расширении функционала JavaScript языке TypeScript. Научитесь
применять его в своих проектах.

Спринт 8: TypeScript и ООП

Тема 1. Введение в TypeScript

Тема 2. Объектно ориентированное программирование

Тема 3. Основы TypeScript

Тема 4. Продвинутый TypeScript и ООП

6 недель,

+2 проекта в портфолио
Спринт 9: ООП в интерфейсах: простые и не только концепции

Тема 1. Принципы разработки ПО

Тема 2. Работа с окружением

Тема 3. ООП в интерфейсах

Тема 4. ООП в интерфейсах: продолжение
1 учебный проект (на
завершение)

Одностраничное
приложение интернетмагазина на TypeScript в
ООП-стиле: Разработаете
фронтенд интернет-магазина
“Web-ларек” с каталогом
товаров, корзиной и
функцией оформления
заказа. Реализуете все это
в лучших практиках ООП
с использованием TypeScript.

Проектный месяц
Вы сверстаете и напишите базовую функциональность одного проекта
от заказчика и одного учебного проекта.
1 месяц

Модуль 7 Интерфейсы с использованием React

Изучите библиотеку React и её экосистему. Научитесь создавать
и структурировать проекты на React, создавать компоненты и управлять
потоками данных. Освоите функциональный подход к разработке на React
и научитесь писать эффективный производительный код с помощью хуков.
Спринт 10: Основы React

Тема 1. Концепция SPA и фреймворки

Тема 2. CRA. Настройка и сборка проекта

Тема 3. Синтаксис JSX

Тема 4. Компоненты и их жизненный цикл

Тема 5. useState и useEffect

Тема 6. React DevTools

Тема 7. Импорт модулей, CSS-модули

Тема 8. Библиотеки компонент. Работа в изоляции. Storybook
3 недели,

+1 проект в портфолио
1 учебный проект (на
завершение)

Модуль 8 Роутинг и авторизация

Научитесь работать с глобальным состоянием и API с помощью Redux.
Создадите отдельные экраны в приложении и настроите маршрутизацию
с помощью react-router-dom, включая динамически генерируемые
маршруты. Реализуете авторизацию с токенами и защищённые маршруты.

Спринт 11: Роутинг и авторизация

Тема 1. Глобальное состояние

Тема 2. Библиотека Redux

Тема 3. React Router

Тема 4. Авторизация
3 недели,

+1 проект в портфолио

Stellar Burger: 

Напишете приложения «Stellar
Burger» для заказа еды с главной
страницей и личным кабинетом,
создадите Redux-хранилище,
а также реализуете роутинг
и авторизацию.
Модуль 9
Тестирование React-приложений
Научитесь ускорять работу React-приложений, проводить их тестирование,
выводить их в продакшен и релизить на собственном удалённом сервере.

Спринт 12: Тестирование React-приложений 

Тема 1. Оптимизация (ускорение работы приложения)

Тема 2. Тестирование React приложений: Jest, Cypress

Тема 3. Подготовка проекта к продакшену
3 недели,

+2 проекта в портфолио
1 учебный проект (перевёрнутая
задача)

Stellar Burger:

А теперь покроете своё
приложение юнит-тестами,
а также интеграционными
тестами с помощью библиотек
Jest и Cypress.
Параллельный модуль
Помощь в трудоустройстве
Карьерный трек состоит из двух этапов: программы трудоустройства и
программы акселерации.

Программа трудоустройства

Здесь мы поможем вам собрать все необходимые для трудоустройства
артефакты и приобрести нужные навыки. Вы составите резюме, соберёте
портфолио, напишете мотивационное письмо. С нашей поддержкой
разработаете стратегию поиска и подготовитесь к интервью.

Программа акселерации

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

Тема 1. Рынок труда

Тема 2. Работа в продуктовой команде

Тема 3. Возможности развития в веб-разработке

Тема 4. Целеполагание и резюме

Тема 5. Мотивационное письмо и портфолио

Тема 6. Стратегии поиска работы

Тема 7. Адаптация артефактов

Тема 8. Реалии рынка труда, поиск работы в столице и в регионах

Тема 9. Собеседования

Тема 10. Подготовка к интервью

Тема 11. Программа активной акселерации. От отклика до приглашения на
работу