Подробная программа видеокурса
Блок 1. Figma от А до ЯКоличество уроков: 19
Продолжительность: более 1 часа
Будет разобран весь инструментарий Figma, значительно превосходящий по функциям и актуальности возможности Фотошопа, для быстрого создания веб-дизайна любой сложности. Рассмотрим все 19 инструментов, которые потребуются для создания современных дизайнов сайтов.
Уроки
Урок 1. Скачивание программы
Урок 2. Обзор интерфейса
Урок 3. Frame
Урок 4. Move и Scale
Урок 5. Инструмент формы
Урок 6. Перо и карандаш
Урок 7. Инструмент текст
Урок 8. Комментарии
Урок 9. Экспорт
Урок 10. Смарт-выравнивание
Урок 11. Маска слоя
Урок 12. Share
Урок 13. Модульная сетка
Урок 14. Режим смешивания
Урок 15. Стили для текста
Урок 16. Стили для цвета
Урок 17. Компоненты
Урок 18. Адаптивные элементы
Урок 19. ПрототипированиеКоличество уроков: 14
Продолжительность: 3.5 часа
Из уроков блока вы узнаете, как создавать полноэкранные дизайны сайтов для настольных компьютеров и планшетов. Всего будет 6 экранов. Узнаете, как работать с фреймами, сетками и формами.
Уроки
Урок 1. Frame и Grid
Урок 2. Перенос ТЗ
Урок 3. Основные элементы
Урок 4. Первый экран
Урок 5. Второй экран
Урок 6. Третий экран
Урок 7. Четвертый экран
Урок 8. Пятый экран
Урок 9. Шестой экран
Урок 10. Добавление цвета
Урок 11. Добавление графики
Урок 12. Всплывающие меню
Урок 13. Подготовка макета для верстки
Урок 14. Интерактивные элементыКоличество уроков: 8
Продолжительность: более 2 часов
В этом модуле вы увидите, как адаптировать поэкранные дизайны сайтов под мобильную версию от А до Я.
Уроки
Урок 1. Теория о мобильной версии и бутсрап-сетка
Урок 2. Первый экран
Урок 3. Второй экран
Урок 4. Третий экран
Урок 5. Четвертый экран
Урок 6. Пятый экран
Урок 7. Шестой экран
Урок 8. МенюКоличество уроков: 25
Продолжительность: 6 часов
В данном разделе курса показана верстка макета, который создавали в предыдущем разделе. Макет имеет нестандартную структуру – каждый логический раздел сайта занимает ровно один экран. При его верстке мы будем реализовывать различные интересные эффекты: появления дополнительного контента, калькулятор стоимости работ, галерею изображений, «поэкранную» навигацию с плавным скролом между разделами и т.д. И конечно, верстка данного макета будет адаптивной.
В данном разделе последовательно, шаг за шагом показывается создание верстки страницы из макета, созданного в Figma. Показано, как описать разметку для каждого блока сайта, как стилизовать блоки, чтобы они выглядели именно так, как были нарисованы на макете, и как адаптировать каждый блок под мобильные устройства.
Также показано, как подключить и использовать дополнительные библиотеки, которые необходимы для реализации эффектов, которые должны присутствовать на странице. При верстке данного макета показано использование самых последних техник и технологий верстки, такие как Flex и Grid.
В итоге вы увидите, как сверстать достаточно сложный, нестандартный макет, который был создан в предыдущей части курса.
Уроки
Урок 1. Подготовка к верстке
Урок 2. Разметка фиксированного меню и первого экрана
Урок 3. Стилизация фиксированного блока
Урок 4. Адаптивность фиксированного блока
Урок 5. Стилизация первого экрана
Урок 6. Адаптивность первого экрана лендинга
Урок 7. Подключение библиотеки Fullpage
Урок 8. HTML-разметка для экрана с проектами
Урок 9. Стилизация второго экрана
Урок 10. Адаптивность второго экрана
Урок 11. Разметка экрана Details
Урок 12. Стилизация блока Details
Урок 13. Адаптивность блока Details
Урок 14. HTML-разметка блока List-of-works
Урок 15. Стилизация блока List-of-works
Урок 16. Адаптивность блока List-of-works
Урок 17. HTML-структура экрана с калькулятором
Урок 18. CSS-стили для калькулятора
Урок 19. Адаптивность калькулятора
Урок 20. HTML-разметка для экрана контактов
Урок 21. Стилизация контактов
Урок 22. Адаптивность контактов
Урок 23. Реализация точечной навигации
Урок 24. HTML-структура главного меню
Урок 25. Полная стилизация главного меню
