Figma
Figma
HTML5 (HyperText Markup Language, version 5)
CSS3 (Cascading Style Sheets, version 3)
CSS Grid Layout
CSS SassУроки курса
Раздел 1. Веб-дизайн Блок 1. Figma от А до Я
Хронометраж: 1 час 1 минута 18 секунд
Урок 1. Скачивание программы 01:05
Урок 2. Обзор интерфейса 04:23
Урок 3. Frame 02:18
Урок 4. Move и Scale 02:43
Урок 5. Инструмент формы 06:30
Урок 6. Перо и карандаш 01:36
Урок 7. Инструмент текст 05:00
Урок 8. Комментарии 01:04
Урок 9. Экспорт 01:24
Урок 10. Смарт-выравнивание 03:23
Урок 11. Маска слоя 02:12
Урок 12. Share 01:57
Урок 13. Модульная сетка 01:27
Урок 14. Режим смешивания 03:33
Урок 15. Стили для текста 03:31
Урок 16. Стили для цвета 04:13
Урок 17. Компоненты 07:47
Урок 18. Адаптивные элементы 03:58
Урок 19. Прототипирование 03:14
Раздел 1. Веб-дизайн Блок 2. Дизайн. Десктоп версия
Хронометраж: 3 часа 25 минут 5 секунд
Урок 1. Frame и Grid 10:52
Урок 2. Перенос ТЗ 11:31
Урок 3. Основные элементы 19:27
Урок 4. Первый экран 10:30
Урок 5. Второй экран 13:30
Урок 6. Третий экран 20:23
Урок 7. Четвертый экран 11:33
Урок 8. Пятый экран 13:12
Урок 9. Шестой экран 13:41
Урок 10. Добавление цвета 15:27
Урок 11. Добавление графики 16:16
Урок 12. Всплывающие меню 15:41
Урок 13. Подготовка макета для верстки 15:38
Урок 14. Интерактивные элементы 17:24
Раздел 1. Веб-дизайн Дизайн. Мобильная версия
Хронометраж: 2 часа 5 минут 30 секунд
Урок 1. Теория о мобильной версии и бутсрап-сетка 17:04
Урок 2. Первый экран 17:29
Урок 3. Второй экран 12:33
Урок 4. Третий экран 17:47
Урок 5. Четвертый экран 11:48
Урок 6. Пятый экран 12:04
Урок 7. Шестой экран 19:39
Урок 8. Меню 17:06
Раздел 2. Верстка сайта
Хронометраж: 6 часов
Урок 1. Подготовка к верстке 12:00
Урок 2. Разметка фиксированного меню и первого экрана 09:48
Урок 3. Стилизация фиксированного блока 13:30
Урок 4. Адаптивность фиксированного блока 17:49
Урок 5. Стилизация первого экрана 19:40
Урок 6. Адаптивность первого экрана лендинга 20:52
Урок 7. Подключение библиотеки Fullpage 13:19
Урок 8. HTML-разметка для экрана с проектами 12:37
Урок 9. Стилизация второго экрана 29:01
Урок 10. Адаптивность второго экрана 23:02
Урок 11. Разметка экрана Details 03:28
Урок 12. Стилизация блока Details 09:38
Урок 13. Адаптивность блока Details 22:29
Урок 14. HTML-разметка блока List-of-works 05:10
Урок 15. Стилизация блока List-of-works 09:53
Урок 16. Адаптивность блока List-of-works 08:08
Урок 17. HTML-структура экрана с калькулятором 15:40
Урок 18. CSS-стили для калькулятора 16:23
Урок 19. Адаптивность калькулятора 23:17
Урок 20. HTML-разметка для экрана контактов 04:21
Урок 21. Стилизация контактов 12:46
Урок 22. Адаптивность контактов 05:14
Урок 23. Реализация точечной навигации 22:39
Урок 24. HTML-структура главного меню 05:58
Урок 25. Полная стилизация главного меню 22:58
ПРОГРАММА КУРСА
(наведите курсор мыши на урок, чтобы смотреть детально)
Блок 1.
Figma от А до Я
Количество уроков: 19
Продолжительность: более 1 часа
Будет разобран весь инструментарий Figma, значительно превосходящий по функциям и актуальности возможности Фотошопа, для быстрого создания веб-дизайна любой сложности. Рассмотрим все 19 инструментов, которые потребуются для создания современных дизайнов сайтов.
Урок 1. Скачивание программы
Урок 1. Скачивание программы
В этом уроке вы увидите, как сделать аккаунт и скачать программу Figma на компьютер.
Урок 2. Обзор интерфейса
Урок 2. Обзор интерфейса
В этом уроке будет разобран интерфейс Figma: что где находится и краткий обзор функциональности этого ультрасовременного продвинутого инструмента.
Урок 3. Frame
Урок 3. Frame
Frame – это тоже самое что и монтажная область в Фотошопе, только намного продуманнее и удобнее. В этом уроке будет рассмотрен весь ее функционал.
Урок 4. Move и Scale
Урок 4. Move и Scale
Move – это основной инструмент, которым будем взаимодействовать при работе. Также будет рассмотрен малоиспользуемый инструмент Scale.
Урок 5. Инструмент формы
Урок 5. Инструмент формы
В этом уроке будут разобраны все формы и то, как можно с ними взаимодействовать.
Урок 6. Перо и карандаш
Урок 6. Перо и карандаш
Большая часть этого урока посвящена инструменту Перо. Как использовать данный инструмент в веб-дизайне.
Урок 7. Инструмент текст
Урок 7. Инструмент текст
Узнаете параметры данного инструмента и то, как с ним работать.
Урок 8. Комментарии
Урок 8. Комментарии
Комментирование – это очень удобный инструмент для работы в команде. В этом уроке вы узнаете, как работать с этим инструментом.
Урок 9. Экспорт
Урок 9. Экспорт
В этом уроке вы узнаете, как экспортировать различные элементы в разных форматах.
Урок 10. Смарт-выравнивание
Урок 10. Смарт-выравнивание
Смарт-выравнивание есть только в Figma – это очень удобная функция, которую мы разберем.
Урок 11. Маска слоя
Урок 11. Маска слоя
Маска слоя также часто используется в работе. В этом уроке узнаете ее особенности и как, и где ее применять.
Урок 12. Share
Урок 12. Share
Так как Figma работает в онлайне, вам не требуется сохранять файл, загружать куда-то и только потом отправлять. В Figma достаточно нажать на две кнопки, чтобы поделиться вашей работой.
Урок 13. Модульная сетка
Урок 13. Модульная сетка
В этом уроке мы научимся добавлять модульные сетки на фреймы и изучим их функционал.
Урок 14. Режим смешивания
Урок 14. Режим смешивания
Режим смешивания нужен для форм. В этом уроке узнаете, как работает каждый из режимов.
Урок 15. Стили для текста
Урок 15. Стили для текста
В Figma вы можете создавать библиотеку из текстовых стилей и быстро их использовать. Этому и будет посвященный данный урок.
Урок 16. Стили для цвета
Урок 16. Стили для цвета
Помимо текстовых стилей вы можете еще сделать библиотеку из цветовых стилей.
Урок 17. Компоненты
Урок 17. Компоненты
Компоненты – это самая важная часть при создании дизайна. В этом уроке узнаете, что это такое и как ими пользоваться.
Урок 18. Адаптивные элементы
Урок 18. Адаптивные элементы
В Figma вы можете делать резиновые блоки. Как это делается, вы узнаете в этом уроке.
Урок 19. Прототипирование
Урок 19. Прототипирование
В Figma вы можете сделать прототип вашего сайта, чтобы все ссылки были кликабельные и можно было переключаться между страницами.
Блок 2.
Дизайн. Десктоп версия
Количество уроков: 14
Продолжительность: 3.5 часа
Из уроков блока вы узнаете, как создавать полноэкранные дизайны сайтов для настольных компьютеров и планшетов. Всего будет 6 экранов. Узнаете, как работать с фреймами, сетками и формами.
Урок 1. Frame и Grid
Урок 1. Frame и Grid
В этом уроке создается фрейм нужного размера для поэкранного дизайна и добавляется сетка.
Урок 2. Перенос ТЗ
Урок 2. Перенос ТЗ
В этом уроке переносится техническое задание из текстового файла в Figma.
Урок 3. Основные элементы
Урок 3. Основные элементы
В этом уроке создаются элементы, которые будут повторяться на каждом экране: меню и постраничная навигация. Элементы будут сделаны компонентами.
Урок 4. Первый экран
Урок 4. Первый экран
В этом уроке собирается черновой вариант первого экрана. Без цветов и графики. Задача: правильно расположить все элементы.
Урок 5. Второй экран
Урок 5. Второй экран
В этом уроке будет структурирована вся информация во втором экране. Вы узнаете, как создавать таблицы, списки и навигацию.
Урок 6. Третий экран
Урок 6. Третий экран
В этом уроке будет работа с формами и всплывающими элементы.
Урок 7. Четвертый экран
Урок 7. Четвертый экран
В этом уроке узнаете, как делать шаблонные блоки компонентами для быстрого взаимодействия с ними.
Урок 8. Пятый экран
Урок 8. Пятый экран
В этом уроке узнаете, как делать чек боксы, ползунки и кнопки. В итоге будет собран калькулятор на сайте.
Урок 9. Шестой экран
Урок 9. Шестой экран
В этом уроке будет сделан блок с контактами, к которым добавится текст и иконки.
Урок 10. Добавление цвета
Урок 10. Добавление цвета
В этом уроке будут добавлены цвета для всего макета, для кнопок, текста и других элементов.
Урок 11. Добавление графики
Урок 11. Добавление графики
В уроке будет добавлена вся необходимая графика, фоны, изображения и т.д.
Урок 12. Всплывающие меню
Урок 12. Всплывающие меню
В этом уроке вы увидите создание отдельного экрана с выпадающим меню.
Урок 13. Подготовка макета для верстки
Урок 13. Подготовка макета для верстки
В этом уроке увидите подготовку макета перед версткой. Будут структурированы все элементы, слои и папки.
Урок 14. Интерактивные элементы
Урок 14. Интерактивные элементы
В финале вы увидите, как делать интерактивные элементы, которые также нужны перед тем, как верстать макет.
Блок 3.
Дизайн. Мобильная версия
Количество уроков: 8
Продолжительность: более 2 часов
В этом модуле вы увидите, как адаптировать поэкранные дизайны сайтов под мобильную версию от А до Я.
Урок 1. Теория о мобильной версии и бутсрап-сетка
Урок 1. Теория о мобильной версии и бутсрап-сетка
В этом уроке увидите технологию адаптации десктоп версии под мобильную версию со всеми нюансами.
Урок 2. Первый экран
Урок 2. Первый экран
В этом уроке переносим первый экран так, чтобы он умещался на экране телефона.
Урок 3. Второй экран
Урок 3. Второй экран
В этом уроке увидите, как переносить галерею с навигацией.
Урок 4. Третий экран
Урок 4. Третий экран
В этом уроке увидите, как создавать отдельный вид, отличающийся от десктоп версии.
Урок 5. Четвертый экран
Урок 5. Четвертый экран
В этом уроке увидите, как быстро переносить шаблонные блоки.
Урок 6. Пятый экран
Урок 6. Пятый экран
В этом уроке будет адаптирован и сделан удобный калькулятор для мобильной версии.
Урок 7. Шестой экран
Урок 7. Шестой экран
В этом уроке увидите, как перенести форму контактов и карту.
Урок 8. Меню
Урок 8. Меню
В этом уроке увидите, как сделать свое меню под мобильную версию.
Раздел 2.
Верстка сайта
Количество уроков: 25
Продолжительность: 6 часов
В данном разделе курса показана верстка макета, который создавали в предыдущем разделе. Макет имеет нестандартную структуру – каждый логический раздел сайта занимает ровно один экран. При его верстке мы будем реализовывать различные интересные эффекты: появления дополнительного контента, калькулятор стоимости работ, галерею изображений, «поэкранную» навигацию с плавным скролом между разделами и т.д. И конечно, верстка данного макета будет адаптивной.
В данном разделе последовательно, шаг за шагом показывается создание верстки страницы из макета, созданного в Figma. Показано, как описать разметку для каждого блока сайта, как стилизовать блоки, чтобы они выглядели именно так, как были нарисованы на макете, и как адаптировать каждый блок под мобильные устройства.
Также показано, как подключить и использовать дополнительные библиотеки, которые необходимы для реализации эффектов, которые должны присутствовать на странице. При верстке данного макета показано использование самых последних техник и технологий верстки, такие как Flex и Grid.
В итоге вы увидите, как сверстать достаточно сложный, нестандартный макет, который был создан в предыдущей части курса.
Урок 1. Подготовка к верстке
Урок 1. Подготовка к верстке
В этом видеоуроке вы узнаете о подходе к верстке, который будет использован. Также склонируем шаблон из Github репозитория, который был подготовлен заранее. Узнаете, из чего состоит сам проект и как его запускать.
Урок 2. Разметка фиксированного меню и первого экрана
Урок 2. Разметка фиксированного меню и первого экрана
В этом видео увидите создание HTML-структуры для верхнего фиксированного меню, а также первого экрана страницы лендинга.
Урок 3. Стилизация фиксированного блока
Урок 3. Стилизация фиксированного блока
В данном видеоуроке увидите подключение используемых шрифты в макете, а также стилизацию фиксированного блока.
Урок 4. Адаптивность фиксированного блока
Урок 4. Адаптивность фиксированного блока
В этом видео продолжается работа над фиксированным блоком, добавляются недостающие элементы в структуру HTML и прописываются необходимые медиазапросы для адаптивности данного блока.
Урок 5. Стилизация первого экрана
Урок 5. Стилизация первого экрана
В этом видео увидите написание необходимого CSS-кода для первого экрана страницы лендинга.
Урок 6. Адаптивность первого экрана лендинга
Урок 6. Адаптивность первого экрана лендинга
В этом видео займемся адаптивностью первого экрана страницы лендинга и при помощи CSS увидите добавление всех необходимых медиазапросов, благодаря которым она будет отлично выглядеть на планшетах и десктопах.
Урок 7. Подключение библиотеки Fullpage
Урок 7. Подключение библиотеки Fullpage
В данном видеоуроке увидите подключение и настройку библиотеки Fullpage.js, которая является многофункциональной и позволяет удобно реализовывать полноэкранную прокрутку.
Урок 8. HTML-разметка для экрана с проектами
Урок 8. HTML-разметка для экрана с проектами
В этом видео увидите описание HTML-структуры для второго экрана лендинга.
Урок 9. Стилизация второго экрана
Урок 9. Стилизация второго экрана
В данном уроке увидите стилизацию блока с проектами.
Урок 10. Адаптивность второго экрана
Урок 10. Адаптивность второго экрана
В данном уроке увидите завершение экрана с проектами. Добавив медиазапросы под различные разрешения, дополнительно добавляются настройки в плагин Fullpage.js, а также реализуются функцию смены изображений для галереи.
Урок 11. Разметка экрана Details
Урок 11. Разметка экрана Details
В данном видео увидите описание HTML-структурs для экрана Details.
Урок 12. Стилизация блока Details
Урок 12. Стилизация блока Details
В этом видео увидите стилизацию блока Details под мобильные устройства.
Урок 13. Адаптивность блока Details
Урок 13. Адаптивность блока Details
В этом видео увидите адаптацию блока Details под различные разрешения экрана при помощи медиазапросов.
Урок 14. HTML-разметка блока List-of-works
Урок 14. HTML-разметка блока List-of-works
В этом уроке увидите описание HTML-структурa блока List-of-works.
Урок 15. Стилизация блока List-of-works
Урок 15. Стилизация блока List-of-works
В этом уроке увидите описание CSS-стилей для блока List-of-works.
Урок 16. Адаптивность блока List-of-works
Урок 16. Адаптивность блока List-of-works
В этом уроке увидите добавление медиазапросов и адаптацию данного блока.
Урок 17. HTML-структура экрана с калькулятором
Урок 17. HTML-структура экрана с калькулятором
В этом видеоуроке увидите создание HTML-разметки для калькулятора.
Урок 18. CSS-стили для калькулятора
Урок 18. CSS-стили для калькулятора
В данном уроке увидите описание CSS-стилей для калькулятора.
Урок 19. Адаптивность калькулятора
Урок 19. Адаптивность калькулятора
В данном уроке полностью сделается экран калькулятора, добавив ему адаптивность.
Урок 20. HTML-разметка для экрана контактов
Урок 20. HTML-разметка для экрана контактов
В данном уроке увидите написание HTML-структуры для блока контактов.
Урок 21. Стилизация контактов
Урок 21. Стилизация контактов
В данном уроке увидите написание CSS для экрана контактов.
Урок 22. Адаптивность контактов
Урок 22. Адаптивность контактов
В данном уроке доверстываются контакты, добавляется им адаптивность при помощи медиазапросов.
Урок 23. Реализация точечной навигации
Урок 23. Реализация точечной навигации
В данном видеоуроке увидите реализацию с нуля точечной навигации и кнопки скролла экрана.
Урок 24. HTML-структура главного меню
Урок 24. HTML-структура главного меню
В этом видео увидите написание HTML-структуры для главного меню.
Урок 25. Полная стилизация главного меню
Урок 25. Полная стилизация главного меню
В этом видеоуроке завершается работа над лендингом, доделывается главное меню.
