СДО ИДО
  • UX-WAI. F24. Верстка адаптивных интерфейсов
    0%
  • Пред.
  • Course data
    Общее
    Объявления
    Тема 1. Позиционирование. Модуль CSS Flexible Box Layout
    Структура папок курса
    Тема-1-Конспект
    Шпаргалка по свойствам flex-позиционирования.
    Практика 1.1. Основные свойства flex-позиционирования
    Практика 1.2. Колонки-карточки в отзывчивом макете
    Практика 1.3. Колонки-карточки с фиксированными значениями полей
    Практика 1.4. Flex-макет с шаблонными элементами
    Практика 1.5. Карточка Интернет-магазина
    Шпаргалка пошаговая по свойствам flex-элементов.
    Занятие 1
    Практика 1.5 Итог
    Тема 2. Позиционирование. Модуль CSS Grid Layout
    Тема-2-Конспект
    Ресурсы
    Практика 2.1. Основные свойства grid-позиционирования
    Практика 2.2. Свойства выравнивания grid-элементов
    Шпаргалка по свойствам grid-позиционирования
    Занятие 2
    Практика 2.3. Управление размером полосы grid-контейнера
    Практика 2.4. Свойства auto-fill и auto-fit
    Практика 2.5. Верстка карточек с помощью auto-fill
    Практика 2.6. Верстка макета на основе grid layout
    Занятие 3
    Практика 2.6. Итог
    Тема 3. Адаптивный дизайн
    Тема-3-Конспект
    Таблица конвертации px-em
    Ресурсы
    css-mq
    Практика 3.1. Адаптивная галерея на основе Grid Layout
    Практика 3.2. Адаптивная таблица
    Занятие 4
    Практика 3.3. Адаптивные карточки
    Практика 3.5. Адаптивная страница с мобильной навигацией
    Практика 3.6. Свойство clip-path
    Тема 4. Библиотеки ui-элементов
    Ресурсы
    Практика 4.1. Использование iconify
    Практика 4.2. Карточка с использованием иконочных шрифтов
    Практика 4.2. Итог
    Тема 5. SVG-изображения
    Тема-5-Конспект
    Практика 5.1. Применение SVG-изображений на веб-странице
    Vector.svg
    Тема 6.Интерактивные компоненты веб-страниц
    Тема-6-Конспект
    Практика 6.1. Слайдер карточек на основе Swiper
    Тема 7. Адаптивная верстка с использованием библиотек
    Тема-7-Конспект
    Ресурсы
    Базовые варианты настроек Swiper
    Стартовые файлы Swiper v11.0.5
    Стартовые файлы Swiper v11.2.6
    Практика 7.1. Адаптивный слайдер
    Практика 7.2. Внедрение слайдера на адаптивную страницу
    Практика 7.3. Внедрение второго слайдера на адаптивную страницу
    Практика 7.3. Итог
    Тема 8. Быстрое прототипирование. Аккордион, табы, модальные окна
    Ресурсы
    Практика 8.1. Аккордион
    Практика 8.2. Адаптируемый элемент "Аккордион-Табы"
    Практика 8.1. Итог
    Практика 8.2. Итог
    Тема 9. Экзамен
    Экзаменационное задание
    Консультация 1-25
    Ресурсы
    Пример адаптации страницы
    Практика 11.1. Анкорные ссылки
    Практика 11.2. Кнопка "Наверх"
    Консультация 2-25
    Практика 12.1. Модальное окно
    Практика 12.2. Внедрение модального окна на адаптивную страницу
    Практика 12.3 nature-page-max-width
    Консультация 1-23
    Консультация 2
    Доп
    Резерв
    Тема 6. CSS фреймворки
    Тема 9. Быстрое прототипирование. Figma для верстальщика
    ДОП Тема 6. Интерактивные компоненты веб-страниц
  • След.
СДО ИДО
  • Русский ‎(ru)‎
    Русский ‎(ru)‎ English ‎(en)‎
    • Вход
    UX-WAI. F24. Верстка адаптивных интерфейсов
    В начало
    Перейти к основному содержанию

    Информация о курсе

    1. В начало
    2. Курсы
    3. Высшая инженерная школа
    4. Программы профессиональной переподготовки
    5. UX-UI
    6. UX-WAI. F24. Верстка адаптивных интерфейсов
    7. Описание

    UX-WAI. F24. Верстка адаптивных интерфейсов

    • Преподаватель: Осипова Оксана Геннадьевна

    Портал дистанционных образовательных технологий СПБПУ Петра Великого
    Политика конфиденциальности
    Политика обработки cookie
    При использовании материалов портала активная ссылка на источник обязательна

    Санкт-Петербургский политехнический университет

    Контакты:

    195251, Санкт-Петербург, ул. Политехническая, дом 29, Научно-исследовательский корпус

    +7 (812) 906-15-19

    office.ido@spbstu.ru

    sdo@spbstu.ru (проблемы с порталом)

    Мы в социальных ресурсах

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