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

Онлайн-курс «Web Components с нуля»

Разрабатывать независимые переиспользуемые компоненты браузера. Обучение построено вокруг практики и завершается самостоятельной итоговой работой.

Автор и составитель программы

Дамир Шарифьянов

Full-stack разработчик и автор образовательных материалов

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

Опыт и проекты автора →

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

Визуальная карта курса «Web Components с нуля»Путь от изучения темы к практике и готовому проектуВЕБ-РАЗРАБОТКАWeb Components с нуляСтруктура → интерфейс → публикация1Разобратьсяс понятиями2Применитьна практике◫Создать проектдля портфолио
12 модулейот основ до проекта
33–45 часовв удобном темпе
Автопроверкаобратная связь сразу
Сертификатс проверкой подлинности
О программе

Кому подойдёт курс и чему вы научитесь

Курс подходит

  • Новичкам в создании сайтов
  • Дизайнерам и контент-специалистам, расширяющим навыки
  • Разработчикам, которым нужен законченный веб-проект

Практические навыки

  • Разбирать «Стандарты компонентов» на практическом примере
  • Проектировать «Custom Elements» на практическом примере
  • Применять «Lifecycle callbacks» на практическом примере
  • Проверять «Атрибуты и свойства» на практическом примере
  • Сравнивать решения для «Шаблоны» на практическом примере
  • Объяснять результат по теме «Shadow DOM» на практическом примере
Программа обучения

Что вы изучите и создадите

Каждый модуль объясняет отдельную тему простыми словами и закрепляет её практикой.

Модуль 1 · Основа

Стандарты компонентов

«Стандарты компонентов» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 2 · Основа

Custom Elements

«Custom Elements» простыми словами — это умение создать или проверить один компонент через его публичные свойства, события и Shadow DOM, не привязывая тест к внутренней разметке.

Модуль 3 · Основа

Lifecycle callbacks

«Lifecycle callbacks» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 4 · Сборка

Атрибуты и свойства

«Атрибуты и свойства» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 5 · Сборка

Шаблоны

«Шаблоны» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 6 · Сборка

Shadow DOM

«Shadow DOM» простыми словами — это умение создать или проверить один компонент через его публичные свойства, события и Shadow DOM, не привязывая тест к внутренней разметке.

Модуль 7 · Сборка

Стили и parts

«Стили и parts» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 8 · Сборка

События

«События» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 9 · Проверка и усиление

Формы

«Формы» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Модуль 10 · Проверка и усиление

Доступность

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

Модуль 11 · Проверка и усиление

Тестирование

«Тестирование» простыми словами — это умение задать наблюдаемое поведение, подготовить репрезентативные случаи и сравнить ожидаемый результат с фактическим.

Модуль 12 · Защита

Итоговая библиотека

«Итоговая библиотека» простыми словами — это умение связать смысл страницы с действием пользователя и проверить все состояния интерфейса. Мы превращаем смысл и действия пользователя в интерфейс, который остаётся понятным на любом устройстве.

Результат

доступная библиотека компонентов с документацией

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

Что нужно знать до начала

Уметь работать с файлами и браузером. Если курс посвящён отдельной веб-технологии, пригодятся основы HTML, CSS и JavaScript.

Инструменты курса

Custom Elements, Shadow DOM, JavaScript, CSS

Формат

Теория простыми словами, разобранный пример, практика, автопроверка и итоговый проект

Можно начать сразу

Перейдите от программы к практике

Доступ ко всем модулям, автопроверке и сертификату — 17 900 ₽.

Начать обучение →

Ответы на вопросы

Подойдёт ли курс новичку?

Да. Материал идёт от простых действий к самостоятельной работе, а новые термины объясняются по ходу курса.

Как проверяются задания?

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

Когда я получу сертификат?

Именной сертификат освоения основной части программы автоматически выпускается после зачёта 80% модулей. В нём указано, сколько модулей пройдено; обучение можно продолжить до 100%.

Купить за 17 900 ₽