JavaScript. Архитектура клиентских приложений
Узнаем, как использовать JavaScript для разработки клиентских приложений.

Курс для тех, кто уже знает азы программирования на JavaScript и готов перейти к созданию сложных приложений.
Старт курса
Длительность
26 июля
2,5 месяца
Удобное клиентское приложение должно быть не только красивым, но еще и быстрым и структурированным. На этом курсе вы углубите знания по фронтенд-разработке и научитесь создавать жизнеспособные клиентские интерфейсы.
Как устроен курс
Живые лекции
Лекции проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись лекции доступна на следующий день.
Спикер не просто рассказывает сухую теорию, но постоянно общается с аудиторией и делится любопытными кейсами из личного опыта.

После каждой темы студенты выполняют задание на пару минут, чтобы сразу отработать знания и задать вопросы.
Практика
После лекции вы выполняете домашнее задание, в котором работаете над своим проектом. После каждого задания ваш личный наставник проверяет качество работы.
Студенты выполняют домашние задания на удаленном сервере, практикуются на тренажерах и работают в настоящем кластере. Если возникли вопросы, преподаватели ответят на них в чате в Slack.
Итоговый проект
После каждой лекции вы будете выполнять задания над одним из двух личных проектов на выбор. Над ними вы будете работать и самостоятельно, и в паре с наставником.
Наставник проверяет домашку за 2 дня: дает развернутую обратную связь и отвечает на вопросы.

Если нужно — даст дополнительное задание, чтобы точно во всем разобраться.
Чему вы научитесь
Создавать объекты в JavaScript с помощью классов
4
Работать с сетью
5
Писать полноценные
приложения без сервера
3
Применять объектно-ориентированный подход к программированию
2
Собирать модули ECMAScript
1
По результатам курса вы углубитесь в особенности JavaScript, научитесь работать
с ECMAScript, модулями и структурами данных
Программа курса

Модуль 1

Модуль 1

Знакомство c JavaScript
В модуль входит →
Рассмотрим схему работы на интенсиве, какие инструменты понадобятся. Разберём, что представляет собой язык JavaScript, причём здесь спецификация ECMAScript и браузер. Начнём разбирать основы JavaScript.

Как проходит курс. Организационные вопросы.
— Схема работы на курсе.
— Обзор проектов.

Язык JavaScript
— Спецификация ECMAScript.
— Что даёт JavaScript’у браузер.
— Строгий режим 'use strict'.
— Необязательные точки с запятой.

Основы JavaScript
— Базовый синтаксис: круглые и фигурные скобки, операторы, зарезервированные слова.
— Переменные.
— Функции.
— Типы данных: примитивы.
— Приведение типов.

Практика
— Создание репозитория, форк, клонирование.
— Создание ветки, коммита, синхронизация репозиториев.
— Создание пулреквеста в Гитхабе.
— Тренажеры.

Модуль 2

Модуль 2

Основные возможности JavaScript
В модуль входит →
Продолжим изучать основные конструкции JavaScript, особенно пристально — функции. Разберём нюансы объявления переменных. Немного затронем контекст выполнения this. Познакомимся с инструментами разработчика.

Условные операторы
— Тернарный оператор.
— Оператор множественного выбора switch.

Циклы

Функции
— Способы объявления: Function Declaration и Function Expression.
— Стрелочные функции.
— Параметры функций по умолчанию.

Встроенные в JavaScript функции

Контекст функций
— Ключевое слово this.

Знакомство с DevTools (инструментами разработчика).

Практика
— Работа с техзаданием: превращение требований в код.
— Написание утилитарных функций.

Модуль 3

Модуль 3

Структуры данных и встроенные API
В модуль входит →
Познакомимся со сложными типами данных: массивами и объектами. Научимся создавать их и управлять ими. Затронем тему структур данных, и как их использование может облегчить разработчику жизнь. Рассмотрим встроенные в JavaScript объекты. Запустим и отладим код в консоли инструментов разработчика.

Сложные типы данных

Объекты
— Создание объектов через new.
— Встроенный объект Object.

Массивы
— Встроенный объект Array.
— Методы массивов forEach, map, reduce, filter, sort.

Встроенные объекты и их методы
— String.
— Number.
— Boolean.
— Date.
— Math.

Деструктуризация

DevTools. Использование Console (консоли)

Практика
— Описание структуры данных проекта.

Модуль 4

Модуль 4

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

Области видимости
— Области видимости.
— Глобальная область видимости.
— Замыкания.
— Потеря окружения.

Подвешивание (hoisting) переменных и функций

Модульность
— Повторное использование кода, принцип DRY.
— Понятие модуля.
— Модули ECMAScript, import и export.
— Циклические зависимости.
— Инкапсуляция.

DevTools: отладка кода с помощью Sources (исходников).

Практика
— Разделение кода на модули.
— Соблюдение принципа DRY и выделение повторяющихся частей кода в функции.
— Перенос функций, повторяющихся в разных файлах в отдельные модули.

Модуль 5

Модуль 5

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

Управление DOM-деревом
— DOM-дерево: структура.
— Поиск элементов на странице.
— Управление атрибутами DOM-элементов.
— Перемещение элементов в DOM-дереве.

Подходы к созданию DOM-элементов
— Управление разметкой: append, prepend, insertAdjacentHTML, innerHTML, textContent.
— Создание DOM-объектов.

Шаблонизация
— Строковая шаблонизация (шаблонные строки).
— Специальный тег <template>.

События
— Обработчики событий.
— Объект Event, управление событиями.
— Фазы событий и делегирование.
— Клавиатурные события и доступность.

DevTools: возможности Elements (инспектора) для работы с DOM и событиями.

Практика
— Генерация DOM-элементов по шаблону и наполнение их данными.
— Обработка пользовательской реакции.
— Работа с доступностью.

Модуль 6

Модуль 6

Внешние API и сторонние библиотеки
В модуль входит →
Рассмотрим, как не «писать свой велосипед», а переиспользовать чужой опыт и код. Познакомимся с внешними API, которые предоставляет нам браузер, а также со сторонними JavaScript библиотеками и JavaScript API картографических сервисов.

Валидация форм

Валидация с помощью регулярных выражений

Обзор API браузера

Картографические сервисы и их JavaScript API
— OpenStreetMap.
— Leaflet.

Сторонние библиотеки
— Зачем нужны библиотеки.
— Как подключить в проект.

Практика
— Валидация форм.
— Использование в проекте API карт.
— Подключение в проект сторонних библиотек.

Модуль 7

Модуль 7

Асинхронность. Работа с сетью
В модуль входит →
Разберём понятие асинхронности и способы её достижения: колбэки и setTimeout, Promise. Взглянем на протокол HTTP и инструменты, которые позволяют делать запросы из браузера. Рассмотрим, как меняется взаимодействие пользователя с сайтом при начале работы с сетью, что может пойти не так, и что с этим делать.

Асинхронность

Колбэки
— setTimeout.

Event Loop

Promise

Протокол HTTP и форматы данных
— JSON.
— fetch для обращения к серверу.
— Обработка ошибок в запросах.

DevTools: работа с сетевыми запросами в Network (сети)

Практика
— Загрузка данных для шаблонов из интернета.
— Добавление реакции на ошибки загрузки.

Модуль 8

Модуль 8

Обратная связь и оптимизация
В модуль входит →
Оптимизируем работу с данными и событиями в приложении. Реализуем понятную и приятную пользователю обратную связь интерфейса.

Продвинутая работа с массивами
— Сортировка.
— Фильтрация.

Оптимизации производительности
— Пропуск кадров — тротлинг (throttle).
— Устранение дребезга — дебаунс (debounce).

FileReader

DevTools: обзор отладчиков Perfomance (производительности)

Практика
— Добавление поисковых фильтров на страницу.
— Создание функции «устранения дребезга».
— Реализация предпросмотра выбранного изображения в форме.

Модуль 9

Модуль 9

Сборщики JavaScript
В модуль входит →
Познакомимся с такими программами, как сборщики, и узнаем, как они могут облегчить жизнь фронтенд-разработчику.

Что такое сборщик

Задачи сборщика

Обзор популярных сборщиков
— Webpack
— Rollup.
— Parcel.

Сервер для разработки
— Browsersync.
— Webpack DevServer.

Транспайлеры и полифилы
— Babel.

Минификация кода

Легаси
— jQuery.

DevTools: отладка кода по source maps (картам исходников)

Практика
— Настройка Webpack в проекте.

Модуль 10

Модуль 10

Итоговый проект
В модуль входит →
Защита проекта проходит в четыре этапа (по неделе на каждый этап):
1. Готовитесь к итоговой защите.
2. Проверяющий преподаватель оценивает проект по критериям качества.
3. Улучшаете проект по замечаниям преподавателя и отправляете на повторную оценку.
4. Вносите финальные правки и получаете итоговую оценку.
Кому будет полезен курс
Курс рассчитан на разработчиков, которые хотят прокачать навыки и выйти на новый уровень.
Вы научитесь делать крутые проекты, станете более востребованным специалистом и сможете больше зарабатывать.
1 этап
Как мы отбираем наставников
Мы убеждены, что обратную связь ученику должен давать опытный специалист, который прямо сейчас работает на рынке, решает современные задачи, использует актуальные подходы и инструменты. Мы отбираем наставников в три этапа.
2 этап
3 этап
После каждого курса мы собираем обратную связь, которая помогает наставникам совершенствоваться.
Проверяем, кем и где кандидат в наставники работал, какой у него опыт, смотрим на его код
Проводим собеседование,
на котором проверяем знание предметной области и умение объяснять тему
Проверяем, кем и где кандидат в наставники работал, какой у него опыт, смотрим на его код.
Стоимость обучения
Цена со скидкой
26 900 ₽
24 210 ₽
5 часов работы с личным наставником
Стандартный курс
Цена со скидкой
38 900 ₽
35 010 ₽
9 часов работы с личным наставником
ПРЕМИУМ КУРС
Бесплатная консультация
Познакомимся, поможем понять, работает ли курс на ваши цели.
Расскажем, как проходит урок и как отвечают наставники.
Ответим на вопросы об оплате.
Оставляя заявку, вы принимаете
условия соглашения
Отзывы выпускников
После первого уровня шла на второй уверенно, но уверенности поубавилось как только прочитала критерии для сдачи проекта. Я не поняла в них ни слова дальше разметки. Но решила в панику сразу не впадать, а решать проблемы постепенно, по мере поступления.
Анна Почкина
Можно ли собрать все лучшие практики и максимально доступно донести их, так, чтобы всё то, что так и не понял из документаций в сети, стало понятно с первых же слов лектора? Оказывается, можно.
Андрей Ефимов
Проработав около двух лет JavaScript-разработчиком, я почувствовал острую нехватку знаний в HTML и CSS. Сначала пытался самостоятельно изучать, но информация была разрозненная, тяжело усваивалась и запоминалась. Вскоре наткнулся на курсы от HTML Academy — прошёл все бесплатные, потом оплатил один месяц и прошёл почти все остальные.
Тимур Гумеров
После первого уровня думал, что понял основы вёрстки, но оказалось, что второй уровень на 80% был полностью новым для меня. То есть это тоже, конечно, основы основ, но это уже отличный фундамент для того, чтобы построить свой путь в веб-сферу. Конкретно на этом курсе мне очень понравилась подача материала. В особенности видеоразбор «Git для чайников», потому что консоль меня пугала, но после этих видео я перестал бояться работать в терминале.
Михаил Леонов
Очень интересный курс. Я узнала много нового, научилась и полюбила работать с консолью, поняла, что такое препроцессоры, как делать сайты адаптивными и как автоматизировать процессы своей работы. Материала очень много. Его изучению в рамках пяти недель надо уделять всё свободное время. Особенно если ты не участник профессии и времени на защиту у тебя поменьше.
Наталья Макарова
Сложно, интенсивно, но очень интересно и увлекательно. Иногда забываешь есть, спать и выходить на улицу. Но когда получаешь заветный статус «принят» — мир начинает играть новыми краскам.
Sviatkana Kaitanava
Довольно сложный курс, по сравнению с первым нагрузка действительно пошла в гору. Вроде бы делаешь всё то же самое, что и раньше: верстаешь, стилизуешь и так далее, но то, как тебя учат это делать, тут уже совершенно другой подход. БЭМ, автоматизация, оптимизация, адаптив, препроцессоры — информации на освоение действительно очень много, особенно в столь сжатые сроки.
Николай Блинов
После первого уровня решила сразу идти на второй. Перед стартом прочла критерии и многие не поняла. Это, конечно, пугало, но зная уровень Академии, очень обрадовалась и не сомневалась, что за такой короткий срок нас научат многому. Препроцессоры, автоматизация, БЭМ, производительность и это неполный список новой и полезной информации, которую я получила за пять недель и это здорово!
Юлия Саенко
Второй уровень оказался ещё интереснее и сложнее первого. Взяла самый сложный (по мнению Академии) проект и весь месяц прокачивала внимательность, верстая для разных версий экрана. Больше же всего понравилось, как легко и ненавязчиво нас обучили основам автоматизации.
Марина Целищева
В отличие от первой ступени, вёрстке, как таковой, здесь не учат. Предполагается, что ты её уже знаешь. Если нужно научиться строить сетку, двигать правильными инструментами картинки, делать кнопки — кнопками, а ссылки — ссылками, то это на первый уровень. Здесь же учат хорошему тону: правильному подходу к коду, оптимизации и автоматизации.
Вита Лаптенок