[WEBFORMYSELF] Веб-дизайн + верстка [2019]

Название: Веб-дизайн + верстка

Автор: WebForMyself, Даниил Волосатов, Денис Булыга

Год: 2019

Жанр: Видеокурс

Язык: Русский

Продолжительность: 12:48:03



Описание: Основная часть видеокурса разделена на 2 фундаментальных блока и включает в себя 66 уроков общей продолжительностью порядка 13 часов. Вы получите блок по веб-дизайну и блок по верстке. А 11 бонусных видеокурсов, общей продолжительностью 20 часов, дадут новичкам всю необходимую теоретическую и практическую базу для старта с нуля в изучении материалов курса.



В видеокурсе будет разобран весь инструментарий Figma, значительно превосходящий по функциям и актуальности возможности Фотошопа, для быстрого создания веб-дизайна любой сложности. Рассмотрены все 19 инструментов, которые потребуются для создания современных дизайнов сайтов. Независимо от вашего начального уровня, по итогам прохождения курса и после практического закрепления материалов сможете прокачать с полного нуля основы дизайна, создавать быстро и качественно дизайн-макеты сайтов. Рассмотрены композицию, отступы, сетки, работу с цветом, типографику и многое другое. Весь процесс будет показан на примере современного функционального блочного лендинга – одного из наиболее востребованных типов сайтов в 2019 году.



Показано, как создавать полноэкранные дизайны сайтов для настольных компьютеров из созданного на предыдущем этапе дизайн-макета, как работать с фреймами, сетками и формами, как адаптировать полноэкранные дизайны сайтов под мобильную версию – от А до Я. По итогу изучения курса и после небольшого периода практики сможете уверенно разбираться в современных принципах верстки и верстать сайты практически любой сложности. Увидите, как верстать HTML-шаблоны по наиболее прогрессивным и востребованным на рынке технологиям: HTML5, CSS3, CSS Grid Layout, CSS Flexbox Layout, CSS Sass.



Содержание

Блок 1. Figma от А до Я

Урок 1. Скачивание программы

Урок 2. Обзор интерфейса

Урок 3. Frame

Урок 4. Move и Scale

Урок 5. Инструмент формы

Урок 6. Перо и карандаш

Урок 7. Инструмент текст

Урок 8. Комментарии

Урок 9. Экспорт

Урок 10. Смарт выравнивание

Урок 11. Маска слоя

Урок 12. Share

Урок 13. Модульная сетка

Урок 14. Режим смешивания

Урок 15. Стили для текста

Урок 16. Стили для цвета

Урок 17. Компоненты

Урок 18. Адаптивные элементы

Урок 19. Прототипирование



Блок 2. Дизайн. Десктоп версия

Урок 1. Frame и Grid

Урок 2. Перенос ТЗ

Урок 3. Основные элементы

Урок 4. Первый экран

Урок 5. Второй экран

Урок 6. Третий экран

Урок 7. Четвертый экран

Урок 8. Пятый экран

Урок 9. Шестой экран

Урок 10. Добавление цвета

Урок 11. Добавление графики

Урок 12. Всплывающие меню

Урок 13. Подготовка макета для верстки

Урок 14. Интерактивные элементы



Блок 3. Дизайн. Мобильная версия

Урок 1. Теория о мобильной версии и бутсрап-сетка

Урок 2. Первый экран

Урок 3. Второй экран

Урок 4. Третий экран

Урок 5. Четвертый экран

Урок 6. Пятый экран

Урок 7. Шестой экран

Урок 8. Меню



Блок 4. Верстка

Урок 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. Полная стилизация главного меню



Блок 1. Интерактивный прототип

Блок 2. 7 лайфхаков по работе в Figma

Блок 3. Премиум-курс «Учебник по основам HTML для начинающих»

Блок 4. Премиум-курс «Учебник по основам CSS для начинающих»

Блок 5. Премиум-курс «Верстка сайта для начинающих»

Блок 6. Премиум-курс «HTML5. Основы»

Блок 7. Премиум-курс «CSS3. Основы»

Блок 8. Премиум-курс «Теория и практика адаптивной верстки»

Блок 9. Премиум-курс «CSS Grid Layout»

Блок 10. Премиум-курс «Flexbox»

Блок 11. Премиум-курс «Препроцессор Sass»

Скриншоты





Формат видео: MP4

Видео: AVC/H.264, 1280x720, ~254-754 Kbps

Аудио: AAC, 2 ch, 125 Kbps