Подробная программа видеокурса
Блок 1. Верстка макета Landing Page:Количество уроков: 27
Продолжительность: 6 часов 36 минут
В первой части курса вы познакомитесь с макетом Landing Page.
Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов.
Вы начнете с обзора того, что предстоит сверстать и увидите все составляющие макета. Далее будет показано несколько способов, как из макета Photoshop возможно экспортировать изображения для верстки.
Вы увидите возможности автоматизации, пошаговую установку и настройку необходимых плагинов и, конечно же, настройку сборки при помощи Gulp 4, которую вы в дальнейшем сможете использовать для своей работы. Увидите описание HTML-разметки каждого из блоков, стилизацию и адаптацию их под различные разрешения экранов, чтобы верстка выглядела одинаково на различных устройствах.
В итоге Вы увидите полноценную верстку Landing Page.
Уроки
Урок 1. Обзор PSD-макета и готовой верстки Landing Page
Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018
Урок 3. Установка Node Js, Gulp CLI и инициализация проекта
Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4
Урок 5. Создание дополнительных задач по автоматизации
Урок 6. Подготовка к верстке и детальный обзор проекта
Урок 7. Создание HTML-разметки для шапки сайта
Урок 8. Полная стилизация шапки сайта
Урок 9. Создание разметки для блока баннера
Урок 10. Стилизация баннера и написание собственного миксина
Урок 11. HTML-структура блока с преимуществами
Урок 12. Полная стилизация преимуществ
Урок 13. HTML-разметка блока с работами
Урок 14. Написание стилей для блока работ
Урок 15. Доступность интерактивных элементов и адаптация блока работ
Урок 16. Написание структуры для информационного блока
Урок 17. Полная стилизация информационного блока
Урок 18. Создание разметки для блока скиллов
Урок 19. Стилизация блока со скиллами
Урок 20. Анимация линий блока прогресса
Урок 21. HTML-структура блока новостей
Урок 22. Полная стилизация блока с новостями
Урок 23. HTML-разметка блока карусели
Урок 24. Стилизация карусели и подключение плагина OwlCarousel
Урок 25. HTML-разметка блока контактов
Урок 26. Полная стилизация блока контактов
Урок 27. Полная реализация подвалаКоличество уроков: 25
Продолжительность: 6 часов 25 минут
Во второй части курса показана верстка главной страницы сайта студии.
Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов.
Этот блок является более сложным по сравнению с предыдущим, т.к. его реализация будет полностью «резиновой», используя при этом адаптивную типографику, SVG-спрайты, ретинизацию изображений и многие другие возможности, о которых вы узнаете в данном блоке.
Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков.
В результате, используя уже готовую сборку проекта при помощи Gulp 4 из предыдущего блока курса, вы полностью увидите процесс верстки главной страницы сайта студии.
Уроки
Урок 1. Обзор макета
Урок 2. Экспорт SVG из Adobe Illustrator
Урок 3. Подготовка к верстке
Урок 4. HTML-разметка шапки сайта
Урок 5. Стилизация шапки сайта
Урок 6. Адаптив шапки сайта
Урок 7. Улучшение типографики
Урок 8. Создание разметки для блока меню
Урок 9. Стилизация блока меню
Урок 10. Доработка меню
Урок 11. HTML-разметка блока проектов
Урок 12. Стилизация блока проектов. Часть 1
Урок 13. Стилизация блока проектов. Часть 2
Урок 14. Стилизация блока проектов. Часть 3
Урок 15. Адаптация блока проектов
Урок 16. HTML-разметка блока студио
Урок 17. Стилизация блока студио. Часть 1
Урок 18. Стилизация блока студио. Часть 2
Урок 19. Адаптация блока студио
Урок 20. HTML-разметка блока с новостями
Урок 21. Стилизация блока новостей
Урок 22. Адаптация блока новостей
Урок 23. Разметка подвала
Урок 24. Полная стилизация подвала сайта
Урок 25. Подключение Google maps
