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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список карточек и карточки товаров — очень распространённый интерфейсный паттерн. Он применяется в интернет-магазинах, лендингах и даже простых текстовых сайтах. Верстальщику при реализации таких элементов нужно учитывать неочевидные с первого взгляда вещи: переполнение контентом и замену графики при наполнении интерфейса из CMS, управление контролами карточек с клавиатуры, интеграцию с JavaScript. И именно эти умения вы получите при освоении навыка.

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

• Углублённая теория.
• 4 кейса.
• Эталонные решения кейсов.

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

Методология БЭМ (Блок, Элемент, Модификатор) — широко распространённый в веб-разработке компонентный подход к описанию структуры интерфейса. Такая структура позволяет быстро создавать предсказуемую и надёжную вёрстку интерфейсов любой сложности. БЭМ-компоненты можно легко расширять и переиспользовать без дублирования кода. Освоив этот навык, вы сможете на этапе анализа макета уверенно разделять интерфейс на независимые блоки и их элементы, определять взаимосвязи между ними, а затем воплощать полученную структуру в разметке.

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

• Углублённая теория.
• 9 кейсов: 3 лёгкого, 3 среднего и 3 сложного уровня.
• Эталонные решения кейсов.

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

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

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

• Углублённая теория.
• 4 кейса.
• Эталонные решения кейсов.

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

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

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

• Углублённая теория.
• 9 кейсов: 3 лёгкого, 3 среднего и 3 сложного уровня.
• Эталонные решения кейсов.