Онлайн‑курс JavaScript. Профессиональная разработка веб-интерфейсов

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

Запишитесь на консультацию

Мы поможем выбрать курс, ответим на все вопросы и расскажем о действующих скидках.


*Обязательное поле

Мудрец

Если не хотите ждать звонка — напишите нам в Telegram или WhatsApp

Telegram WhatsApp

Почему курс профессиональный

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.

Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»:

НаставникиПроверкой ваших проектов на соответствие критериям качества занимаются наставники, которые являются профессиональными разработчиками.

Критерии качестваПрофессиональные критерии качества мы разрабатываем совместно с компаниями и профессиональным сообществом.

Настоящие проектыВ течение обучения вы выполняете настоящие проекты.

Настоящие проекты

В течение обучения вы выполняете настоящие проекты.

В чём отличие от тренажёров?

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

Как проходит
обучение на курсе

Что вас ждёт на обучении

Подходит ли вам этот курс

Учим делать правильно

Ваш карьерный путь после этого курса

После курса вы можете выбрать любую из профессий и развиваться в ней:

* Информация о медианных зарплатах получена на основе исследования компании «Хабр Карьера» во втором полугодии 2023 года.

Появились вопросы?

Наставники — это опытные профессионалы, работающие в индустрии

Профессиональный наставник

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

Чтобы отбирать таких специалистов, мы построили уникальную систему привлечения и фильтрации.

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

Процесс отбора наставника

  1. Формальные требования

    Проверяем, кем и где кандидат в наставники работал, какой у него опыт, а также смотрим на его код.

  2. Собеседование

    Проводим часовое собеседование, на котором проверяем знание предметной области, а также умение понятно объяснять и другие человеческие качества.

  3. Регулярная обратная связь

    Прошедших собеседование кандидатов допускаем до учеников. На этом путь наставника только начинается. После каждого курса мы собираем обратную связь, которая помогает наставникам совершенствоваться.

Процесс работы с наставником

Во время курса вас будет сопровождать наставник. Он будет делать ревью кода, проверять практические задания, отвечать на вопросы и делиться секретами мастерства.

Привет. У меня последний блок с товарами почему-то выравнивается неправильно, всё перепробовала. Взглянешь?
Давай сегодня созвонимся и разберёмся вместе?
Голосовая консультация с наставником

Детальная обратная связь

Ревью кода — это привычная практика, используемая в крупных компаниях, когда более опытный разработчик проверяет код менее опытного. Львиную долю обратной связи вы получите от наставника в виде ревью кода.

Голосовые консультации

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

Учебный проект

На примере учебного проекта в курсе разбираются задачи, которые должен уметь решать разработчик. Похожие задачи вы решаете в личных проектах и закрепляете свои умения.

Все проекты уже свёрстаны. В течение курса вы будете только программировать.

Учебный проект «Код и Магия»

«Код и Магия»

Демо-страница игры-платформера «Код и Магия», на которой можно поиграть в игру, а в специальном окне настроить внешний вид игрового персонажа, купить для него артефакты, которые помогают в игре и посмотреть на похожих персонажей других игроков.

Личные проекты

На курсе вы будете работать над проектом «Кекстаграм». А на индивидуальном обучении вам будет доступен дополнительный проект «Кексобукинг».

Личный проект «Кекстаграм»

«Кекстаграм»

Сервис просмотра фотографий. Пользователи могут выкладывать свои фотографии, предварительно редактируя их и накладывая фильтры. Можно просматривать фотографии других пользователей, отмечать их как понравившиеся и комментировать.

Личный проект «Кексобукинг»

«Кексобукинг»

Сервис размещения объявлений об аренде недвижимости в Токио. Пользователи делятся информацией о своём объекте недвижимости, размещают фотографии, указывают адрес, перемещая метку по карте города. Кроме этого, можно посмотреть на объявления, размещённые другими пользователями.

Отзывы компаний

Мы давно зарекомендовали себя в профессиональном сообществе. Нас и наших выпускников знают не только разработчики, но и крупные компании. Вот несколько отзывов от компаний о наших курсах и выпускниках.

В целом программа обучения в Академии построена грамотно для старта. Она помогает подготовить универсального бойца, который сможет качественно заниматься разработкой и в студии, и в крупной продуктовой компании. Если человек защитился на 100%, то это показатель, что у него всё в порядке с обучаемостью, мотивированностью и личными качествами, которые понадобятся в будущем на работе. А дальше уже всё зависит от активности и способности доказать свои умения делом.

Мне, как наставнику на курсах и бывшей студентке, известны стандарты качества Академии и то, как строится работа. Всё максимально приближено к реальным условиям — используется система контроля версий Git, есть разбивка проекта на этапы (своеобразные итерации), обязательное ревью кода наставниками и неумолимый дедлайн. Большое внимание уделяется доступности интерфейсов, а это полезно для всей отрасли.

В Авито нет верстальщиков, только фронтенд-разработчики разных уровней. Чтобы попасть к нам на работу младшим разработчиком, человек должен обладать определёнными навыками. Это уверенное владение базовыми технологиями: HTML, CSS и JavaScript, понимание того, как работает браузер, знание, как делать проекты кроссбраузерными, как работает API, DOM и другие важные основы. Кроме этого мы ценим ответственность, умение играть в команде, желание развиваться и инициативность.

Яна Крикливая разработчик клиентской части, Авито

Авито

Авито Интернет-сервис для размещения объявлений о товарах, услугах, вакансиях и резюме на рынке труда.

Что касается вёрстки и создания веб-страниц, мы в команде трепетно относимся к семантической разметке и её пониманию, умению писать на чистом CSS и системному мышлению у разработчика. Страницы должны быть не только красивыми для пользователя, но и быстро загружаться, быть структурированными и, конечно, удобными для работы в команде. При нашем объёме проектов уделять этому внимание очень важно.

Кроме этого, ценится понимание принципов доступности, так как думать о людях, которые будут пользоваться интерфейсом — это хороший тон. Человек, который присоединяется к нашей команде не должен бояться решать незнакомые задачи, искать нестандартные решения и брать ответственность.

В этом смысле, подход Академии к обучению кажется адекватным: кодревью от опытного разработчика хорошо подготавливает к работе. Особенно ценно, что вся работа над проектами сразу идёт через Git — у нас также вся работа в компании проходит через обязательные ревью.

Сейчас в команде работает выпускник Академии Павел и я им доволен. Необходимые базовые навыки, понимание семантики, работа с чистым CSS — всё это на хорошем уровне, а что касается JavaScript — он быстро ориентируется, если делал что-то похожее — вспоминает. Он был сразу готов взять и начать работать.

Иногда бывает, что при выходе нового джуниор-разработчика, менторить приходится до самых мелких моментов. В случае с Павлом вливание в команду прошло практически беззаботно.

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

Сергей Чикирев Wrike Website Team Lead

Wrike

Wrike Популярный сервис для управления проектами и совместной работы.

Мы в Ostrovok.ru постоянно ищем талантливых ребят: наш продукт быстро развивается и лишние фронтендерские руки (желательно «золотые») нужны всегда. Хорошего специалиста найти не так просто, поэтому мы уже несколько раз обращались к Академии, когда подбирали джуниоров.

Ребята приходили с хорошей базой и горящими глазами, быстро вливались в процессы и команду. Сейчас в Ostrovok.ru работают три выпускника Академии — все на позиции джунов и отлично справляются.

Спасибо Академии за хорошо подготовленных специалистов.

Ostrovok.ru

Ostrovok.ru Интернет-сервис по бронированию более 900 000 отелей.

Мы регулярно отправляем своих сотрудников на тренинги, семинары, интенсивы и всячески открыты к образовательным программам, так мы и познакомились с HTML Academy.

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

Для наших задач в компании, программа обучения включает в себя все необходимые железные основы и даже некоторые хитрости, поэтому мы отправляем на обучение в Академию как разработчиков с опытом, чтобы структурировать знания, так и новичков, чтобы подтянуть их на нужный уровень.

Валерия Шемякина Менеджер по обучению Ozon.

Ozon

Ozon Крупнейший российский интернет-магазин.

HTML Академия — лучшее, что происходило с ИТ-образованием в России.

Если вы боитесь, что не разберётесь или «программирование — это не для вас», то HTML Академия подойдёт вам идеально. Всегда будет у кого спросить и кто вас поддержит.

Они много работали с сообществом, чтобы понять какие именно знания нужны на работе. Круто насколько всё приближено к реальной разработке.

Андрей Ситник

Андрей Ситник Автор множества проектов с открытым исходным кодом. Создатель PostCSS, Autoprefixer и Logux_io.

К нам на вакансию фронтенд-разработчика пришёл выпускник Академии. Знания, полученные на интенсивах по JavaScript и вёрстке помогают ему решать задачи с минимальными трудозатратами.

В целом, именно обучение на курсах Академии дало нашему сотруднику возможность развиваться как хорошему разработчику и профессионально подходить к решению проблем в работе.

ГиперМетод

ГиперМетод Ведущий разработчик решений для организации дистанционного обучения, управления знаниями и учебным процессом, развития и оценки персонала в компаниях и учебных заведениях.

Огромное спасибо HTML Academy за крутых выпускников! Три человека брали к себе на стажировку, в последующем два из них остались у нас на постоянной работе. Классные ребята с хорошим бэкграундом! Академия обучает сильных специалистов!

NORDMOUNT

NORDMOUNT Внедрение, кастомизация и интеграция Salesforce на рынках США и западной Европы.

Программа курса

Обучение

Раздел 1

Знакомство c JavaScript

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

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

  • Схема работы на курсе.
  • Обзор проектов.
  • Критерии качества.

Язык JavaScript

  • Спецификация ECMAScript.
  • Что даёт JavaScript'у браузер.

Основы JavaScript.

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

Рабочие инструменты.

  • Редакторы кода.
  • Линтеры.
  • Сервер для разработки.
Практика

Практика

  • Настройка рабочих инструментов.
  • Создание репозитория, форк, клонирование.
  • Создание ветки, коммита, синхронизация репозиториев.
  • Создание пулреквеста на Гитхабе.
  • Тренажёры.
Раздел 2

Основные возможности JavaScript

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

Переменные.

  • Области видимости.

Условные операторы.

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

Циклы.

Приведение типов.

Функции.

  • Стрелочные функции.
  • Параметры функций по умолчанию.

rest-параметры.

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

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

Практика

Практика

  • Работа с техзаданием: превращение требований в код.
  • Написание вспомогательных функций.
  • Тренажёры.
Раздел 3

Объекты и массивы

Вы познакомитесь со сложными типами данных: массивами и объектами. Научитесь создавать их и управлять ими.

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

Массивы.

  • Основные методы массивов.

Объекты.

Колбэки (функции обратного вызова).

Практика

Практика

  • Тренажёры.
Раздел 4

Встроенные объекты и функции

Рассмотрим существующие в самом языке JavaScript объекты и функции. Затронем контекст выполнения this. Запустим и отладим код в консоли инструментов разработчика.

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

spread-синтаксис.

Встроенные объекты и их методы.

  • String.
  • Number.
  • Boolean.
  • Date.
  • Math.

Оператор new.

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

Контекст функций.

  • Ключевое слово this.
  • Потеря окружения.

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

Практика

Практика

  • Разработка структур данных проекта.
  • Генерация временных данных для разработки проекта.
Раздел 5

Организация кода

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

Области видимости.

  • Глобальная область видимости window.
  • Замыкания.

Модульность.

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

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

Практика

Практика

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

DOM и события

Вы познакомитесь с объектной моделью документа (англ. Document Object Model или DOM). Рассмотрите, как описывать реакции на действия пользователя: ввод текста, нажатие на определённые элементы, прокрутку и прочее.

DOM-дерево.

  • document — корень всего.
  • Структура DOM-дерева.
  • Поиск элементов на странице.
  • Управление атрибутами элементов.

Шаблоны и данные.

События на странице.

  • Обработчики событий.
Практика

Практика

  • Тренажёры.
Раздел 7

Манипуляции с DOM

Попробуем создавать, удалять, перемещать и управлять DOM-элементами. С помощью шаблонов отрисуем данные, созданные ранее.

Управление DOM-деревом.

  • Управление атрибутами DOM-элементов.
  • Перемещение элементов в DOM-дереве.

Подходы к созданию DOM-элементов.

  • Создание DOM-объектов.
  • Управление разметкой: append, prepend, insertAdjacentHTML, innerHTML, textContent.

Шаблонизация.

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

Практика

  • Генерация DOM-элементов по шаблону и наполнение их данными.
  • Тренажёры.
Раздел 8

Работа с событиями

Обработаем взаимодействие с пользователем, чтобы страница реагировала на ввод текста в формы, нажатие на определённые элементы, прокрутку и прочее. Рассмотрим, как сделать это взаимодействие доступным.

События.

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

Event Loop.

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

  • Pristine — библиотека для валидации форм.

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

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

Практика

Практика

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

Внешние API и сторонние библиотеки

Рассмотрим, как не «писать свой велосипед», а переиспользовать чужой опыт и код. Познакомимся с понятием программного интерфейса (англ. Application Programming Interface или API), рассмотрим API сторонних JavaScript-библиотек и JavaScript API картографических сервисов. Кратко рассмотрим API, которые предоставляет разработчикам браузер.

Понятие API.

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

  • OpenStreetMap.
  • Leaflet.

Сторонние библиотеки.

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

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

Практика

Практика

  • Использование в проекте API карт.
  • Подключение в проект сторонних библиотек.
Раздел 10

Сеть

Вы рассмотрите протокол HTTP, формат данных JSON. Рассмотрите, как меняется взаимодействие пользователя с сайтом при работе с сетью, что может пойти не так.

Протокол HTTP и форматы данных.

  • JSON.

Обработка исключений.

  • try...catch.

Инструменты для работы с сетевыми запросами.

Раздел 11

Асинхронность. Работа с сетью

Разберём понятие асинхронности и способы её достижения с помощью промисов (англ. Promise, обещание). Познакомимся с технологиями, которые позволяют делать запросы к серверу из браузера. Рассмотрим, как на практике обработать ошибки при работе с сетью, если что-то пошло не так.

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

  • setTimeout и setInterval.
  • Promise.

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

  • fetch для обращения к серверу.
  • Обработка ошибок в запросах.

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

Практика

Практика

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

Обратная связь и оптимизация

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

Продвинутая работа с массивами.

  • Сортировка.
  • Фильтрация.

Оптимизации производительности.

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

File API.

  • URL.createObjectURL().
  • FileReader.
Практика

Практика

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

Защита проекта Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.

Защита проекта

Проверка проекта проверяющим наставником по критериям качества, его улучшение и защита.

Рекомендованные для прохождения курса программы *

Операционная система
  • Windows 10 x64
  • Mac OS 11 Big Sur и новее
  • Ubuntu 20.04 и новее
Браузер
  • Браузер, основанный на Blink: Chrome, Яндекс.Браузер, Opera, Edge — последняя версия
  • Mozilla Firefox последняя версия
  • Apple Safari 15.2 и новее
Система контроля версий
  • Git
  • Git bash для Windows
Среда разработки
  • Node.js LTS
  • npm (версия, которая поставляется вместе с Node.js)

* Мы рекомендуем такое окружение, потому что проверили на нём все учебные задачи и убедились, что с таким набором программ всё работает без ошибок.

Появились вопросы?

Сертификат

После прохождения курса вы получите электронный сертификат

Образовательная деятельность осуществляется на основании государственной лицензии № 3026 от 6 июня 2017 года.

Сертификат онлайн-курса «JavaScript. Профессиональная разработка веб-интерфейсов»

Статистика Академии

  • 12лет на рынке обучения
  • 279онлайн-курсов проведено
  • 44 058выпускников защитили проекты

Отзывы выпускников

Форматы обучения

Индивидуальный формат

Обучение с персональным ментором в вашем ритме. Идеально подходит для требовательных и занятых учеников.

  • Час персональных консультаций с наставником каждую неделю
  • Бесплатная консультация-знакомство с будущим наставником
  • Помесячная оплата, без банковских рассрочек и кредитов
  • Курс проходится от 2 до 4 месяцев в зависимости от интенсивности
  • Доступ к платформе и всем материалам курса, который сохраняется и после завершения обучения

12 000 руб. в месяц

Консультация с наставником

Если вы планируете персональное обучение, то можете познакомиться с будущим наставником до старта.

  • Консультация бесплатна
  • Консультирует будущий наставник, а не менеджер
  • Чтобы подобрать время консультации напишите в телеграм @htmlacademy_sales

Лайт-формат

Обучение в своём темпе по качественным материалам и самой доступной цене.

  • Еженедельные групповые сессии вопросов и ответов с наставниками
  • Поддержка дежурных наставников в закрытом учебном чате
  • Глубокий разбор индивидуального проекта от наставника
  • Доступ к этому курсу и всем курсам профессии Фронтенд-разработчик
  • Доступ действует 2 года

89 400 руб. 29 000 руб.

Загружаем…

Запишитесь на консультацию

Мы поможем выбрать курс, ответим на все вопросы и расскажем о действующих скидках.


*Обязательное поле