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

Наборы кейсов с эталонными решениями для освоения типовых профессиональных задач.
Что такое навык?

Список профессиональных навыков

Создание семантической разметки по макету

Создание семантической разметки по макету

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория, общий объём 54 страницы.
  • 9 кейсов: 3 лёгкого, 3 среднего и 3 сложного уровня.
  • Эталонные решения кейсов, в том числе 4 интерактивных пошаговых демонстрации
12 кейсов
Экспорт параметров и графики из PSD‑макетов

Экспорт параметров и графики из PSD‑макетов

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория, общий объём 56 страниц. В том числе инструкция по работе с последней версией Adobe Photoshop 2020.
  • 8 кейсов: 3 лёгкого, 3 среднего и 2 сложного уровня. Включают макеты в формате PSD.
  • Эталонные решения кейсов, в том числе 2 детальных пошаговых разбора демонстрационных кейсов.
8 кейсов
Построение сеток на флексах по макету

Построение сеток на флексах по макету

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория, общий объём 60 страниц.
  • 10 кейсов: 4 лёгкого, 3 среднего и 3 сложного уровня.
  • Эталонные решения кейсов, в том числе детальные разборы демонстрационных кейсов.
10 кейсов
Экспорт параметров и графики из Figma

Экспорт параметров и графики из Figma

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория, ожидаемый объём 30-50 страниц.
    В том числе инструкция по работе с последней версией Figma.
  • 6 кейсов: 2 лёгкого, 2 среднего и 2 сложного уровня. Включают макеты в формате Figma.
  • Эталонные решения кейсов, в том числе 2 детальных пошаговых разбора демонстрационных кейсов.
6 кейсов
Вёрстка текстового содержимого страниц

Вёрстка текстового содержимого страниц

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
9 кейсов
Построение сеток на гридах по макету

Построение сеток на гридах по макету

Описание профессиональной задачи

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

Материалы комплекта

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

Вёрстка навигационных элементов интерфейса

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 8 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2020 году
8 кейсов
Вёрстка многослойных элементов интерфейса

Вёрстка многослойных элементов интерфейса

Описание профессиональной задачи

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

Материалы комплекта

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

Вёрстка карточных элементов интерфейса

Описание профессиональной задачи

Нужно сверстать различные карточные и плиточные элементы интерфейса (карточки товаров, преимуществ и так далее). При реализации таких элементов нужно учитывать: переполнение контентом, замену графики при наполнении интерфейса из CMS, взаимодействие с интерактивными элементами карточек с клавиатуры, интеграцию с JavaScript.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2020 году
10 кейсов
Разметка по БЭМ

Разметка по БЭМ

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 8 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
8 кейсов
Вёрстка и валидация HTML-форм

Вёрстка и валидация HTML-форм

Описание профессиональной задачи

Нужно семантично и доступно разметить и оформить HTML-формы по графическому макету.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование векторной графики в вёрстке

Использование векторной графики в вёрстке

Описание профессиональной задачи

Нужно грамотно применить векторную графику в формате SVG в вёрстке.

Материалы комплекта

  • Углублённая теория.
  • 6 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
6 кейсов
Построение сложных сеток на флексах и гридах

Построение сложных сеток на флексах и гридах

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 8 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
8 кейсов
Вёрстка сложных интерактивных элементов

Вёрстка сложных интерактивных элементов

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Адаптивные и резиновые сетки на флексбоксе

Адаптивные и резиновые сетки на флексбоксе

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 8 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
8 кейсов
Адаптивные и резиновые сетки на гридах

Адаптивные и резиновые сетки на гридах

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование адаптивной графики в вёрстке

Использование адаптивной графики в вёрстке

Описание профессиональной задачи

Нужно подготовить и применить в вёрстке графику для устройств с экранами разного размера и плотности пикселей.

Материалы комплекта

  • Углублённая теория.
  • 7 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
7 кейсов
Работа с DOM в JavaScript

Работа с DOM в JavaScript

Описание профессиональной задачи

Для «оживления» страницы нужно создавать, удалять, перемещать, управлять элементами HTML-страницы и отображать данные в шаблонах с помощью JavaScript.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Работа с интерактивными элементами в JavaScript

Работа с интерактивными элементами в JavaScript

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
10 кейсов
Работа с многослойными элементами в JavaScript

Работа с многослойными элементами в JavaScript

Описание профессиональной задачи

Нужно запрограммировать и «оживить» типовые многослойные элементы: слайдеры, «всплывающие» попапы, модальные окна, тултипы-подсказки, прокручивающиеся вместе со всем сайтом «липкие» меню, выпадающие элементы интерфеса, «прелоадеры» и подобные элементы с помощью нативного JavaScript и популярных JS-библиотек.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
10 кейсов
Валидация и работа с формами в JavaScript

Валидация и работа с формами в JavaScript

Описание профессиональной задачи

Нужно запрограммировать работу HTML-форм, управлять состоянием, валидацией и отправкой форм с помощью нативного JavaScript и популярных JS-библиотек.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
10 кейсов
Оптимизация и перфоманс вёрстки

Оптимизация и перфоманс вёрстки

Описание профессиональной задачи

Нужно оптимально подключить и использовать ресурсы в HTML и CSS, а также улучшить производительность вёрстки.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Компонентная вёрстка по БЭМ

Компонентная вёрстка по БЭМ

Описание профессиональной задачи

По спроектированной БЭМ-структуре макета нужно сверстать отдельные компоненты и собрать из них интерфейс целиком.

Материалы комплекта

  • Углублённая теория.
  • 7 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
7 кейсов
Работа с сетью в JavaScript

Работа с сетью в JavaScript

Описание профессиональной задачи

Нужно получить и отправить данные на сервер с помощью нативного JavaScript и популярных JS-библиотек.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Отладка и устранение ошибок в коде на JavaScript

Отладка и устранение ошибок в коде на JavaScript

Описание профессиональной задачи

Нужно уметь эффективно отлаживать Javascript-код и устранять найденные в нём ошибки.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Автоматизация вёрстки

Автоматизация вёрстки

Описание профессиональной задачи

Нужно настроить, запустить и использовать инструменты автоматизации вёрстки.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование HTML-препроцессоров и шаблонизаторов

Использование HTML-препроцессоров и шаблонизаторов

Описание профессиональной задачи

Нужно использовать в работе инструменты для препроцессинга и шаблонизации HTML.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование CSS-препроцессоров

Использование CSS-препроцессоров

Описание профессиональной задачи

Нужно использовать в работе инструменты для препроцессинга CSS.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Построение компонентных систем в JavaScript

Построение компонентных систем в JavaScript

Описание профессиональной задачи

Нужно организовать JS-код в систему взаимосвязанных модулей.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
10 кейсов
Автоматизация фронтенда

Автоматизация фронтенда

Описание профессиональной задачи

Нужно детально настроить, запустить и использовать инструменты автоматизации фронтенда.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
10 кейсов
Оптимизация и перфоманс в JavaScript

Оптимизация и перфоманс в JavaScript

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование паттернов проектирования в JavaScript

Использование паттернов проектирования в JavaScript

Описание профессиональной задачи

Нужно применять подходящие паттерны проектирования при создании JS-программ.

Материалы комплекта

  • Углублённая теория.
  • 12 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
12 кейсов
Безопасность во фронтенде

Безопасность во фронтенде

Описание профессиональной задачи

Нужно писать безопасный и защищённый от атак код на HTML, CSS и JavaScript.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование алгоритмов и структур данных в JavaScript

Использование алгоритмов и структур данных в JavaScript

Описание профессиональной задачи

Нужно применять подходящие алгоритмы и структуры данных при создании JS-программ.

Материалы комплекта

  • Углублённая теория.
  • 9 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
9 кейсов
Использование анимации в интерфейсе

Использование анимации в интерфейсе

Описание профессиональной задачи

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

Материалы комплекта

  • Углублённая теория.
  • 12 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
12 кейсов
Создание доступных интерфейсов

Создание доступных интерфейсов

Описание профессиональной задачи

С помощью HTML, CSS, SVG и JavaScript нужно сделать сайт универсально доступным для взаимодействия с ним людей и роботов.

Материалы комплекта

  • Углублённая теория.
  • 10 кейсов разного уровня сложности.
  • Эталонные решения кейсов, пошаговые разборы демонстрационных кейсов.
Релиз в 2021 году
10 кейсов