Уровень сложности:
Длительность курса: 40 ак.ч.
График обучения: 40 ак. часов, 10 занятий по 4 ак. часа
Аннотация
Образовательный модуль охватывает современные технологии вёрстки, включая Flexbox и Grid для позиционирования элементов, а также основы адаптивного дизайна с медиазапросами. Рассматриваются UI-библиотеки, дизайн-системы и CSS-фреймворки, такие как Bootstrap, для ускорения разработки. Изучаются интерактивные компоненты (слайдеры, карусели) и их кастомизация. Особое внимание уделяется адаптивной вёрстке с использованием фреймворков и подходу Mobile First. Дополнительно разбирается работа с Figma для создания макетов и экспорта ассетов.
Знания и умения, полученные в результате обучения
В результате освоения программы обучающийся должен уметь:
• создавать структуру веб-страниц «гибкого» дизайна;
• формировать набор медиазапросов для реализации адаптации;
• формировать свои и использовать готовые дизайн-системы для верстки блоков веб-страниц;
• применять компоненты библиотек интерактивных элементов;
• тестировать и отлаживать веб-страницы адаптируемого дизайна.
В результате освоения программы, обучающийся должен знать:
• позиционирование элементов flex layout;
• построение макета с помощью grid layout;
• основные возможности css-фреймворков и ui-библиотек;
• состав и способы применения дизайн-систем.
В результате освоения программы обучающийся должен приобрести практический опыт:
• настройки адаптивной сетки;
• разработки элементов дизайн-систем для верстки;
• верстки макета адаптируемого дизайна с помощью комбинированного подхода, включающего разные способы позиционирования;
• создания разных типов мобильного меню навигации;
• кастомизации компонентов библиотек интерактивных элементов для создания галерей, слайдеров, каруселей;
• быстрого прототипирования веб-страниц с использованием css-фреймворков, библиотек интерактивных компонентов.
Курсы связанных направлений
Программы профессиональной переподготовки
Сегодня занятий по этому курсу нет.
29 800 ₽
Расчёт стоимости с учётом возможных скидок
29 800 ₽
Скидки предоставляются в зависимости от количества слушателей, суммы договора и других условий, оговариваемых с Заказчиком.
Расчёт стоимости с учётом возможных скидок представлен как справочная информация.
Фактический размер скидки может несколько отличаться из-за округления значения суммы.
Внимательно ознакомьтесь с условиями действующих
акций и скидок...
Курсы, обеспечивающие достаточный начальный уровень знаний
Тема 1. Позиционирование. Свойство flex
Свойства flex layout.
Верстка блоков макета (навигация, галереи, колонки) на основе flex layout.
Тема 2. Позиционирование. Свойство grid
Свойства grid layout.
Верстка макета на основе grid layout
Тема 3. Адаптивный дизайн
Медиазапросы.
Общие принципы адаптации элементов макета.
Адаптивные изображения.
Адаптивная навигация
Верстка адаптивной веб-страницы
Тема 4. Библиотеки ui-элементов, дизайн-системы для верстки
Библиотеки ui-элементов (ui-kit).
Дизайн-системы.
Состав, системы css-классов.
Применение дизайн-систем, ui-kit
Верстка веб-страницы на основе библиотек элементов
Тема 5. CSS фреймворки
Возможности CSS-фреймворков.
Версии.
Начало работы.
Необходимые файлы для проекта.
Сниппеты кода.
CSS-препроцессоры
Верстка страницы с использованием сниппетов Bootstrap
Тема 6. Интерактивные компоненты веб-страниц
Библиотеки интерактивных компонентов.
Рассмотрение примеров наиболее типичных элементов библиотек интерактивных компонентов.
Кастомизация элементов библиотек
Верстка страницы с использованием интерактивных элементов (слайдер, карусель, галерея)
Тема 7. Адаптивная верстка с использованием css-фреймворков
Система сеток.
Контрольные точки.
Mobile first
Свойства контейнеров для размещения основных блоков адаптивного макета.
Подходы в кастомизации
Верстка адаптивных карточек на основе сетки и типографики Bootstrap
Тема 8. Быстрое прототипирование
Основные подходы в использовании CSS-фреймворков.
Выбор способа реализации интерактивных компонетов с учетом требований адаптивного дизайна и юзабилити.
Полезные сервисы и ресурсы для верстки.
Создание слайдера изображений
Тема 9. Figma для верстальщика
Требования к макетам в Figma с учетом адаптивной верстки.
Особенности создания макетов в Figma c учетом использования для верстки css-фреймворков и библиотек элементов.
Экспорт ассетов
Верстка адаптивных страниц на основе прототипов в Figma
Тема 10. Экзамен