- БЛОК 1. Верстка макета главной страницы интернет-магазина
ЦЕЛИ И ЗАДАЧИ БЛОКА
В первой части курса мы познакомимся с макетом главной страницы интернет-магазина. В результате мы разобьем макет на необходимые блоки, нарежем изображения из Photoshop, настроим собственную сборку при помощи менеджера Gulp и полностью сверстаем данный макет.
- Урок 1. Обзор макета главной страницы интернет-магазина
В данном уроке мы произведем обзор макета и рассмотрим все его составляющие.
- Урок 2. Нарезка изображений из PSD-макета
В этом уроке мы рассмотрим несколько способов нарезки картинок из PSD-макета.
- Урок 3. Сборка проекта при помощи Gulp
В данном видеоуроке мы полностью реализуем сборку проекта при помощи Gulp, которая является универсальной, и ее можно будет снова использовать в различных проектах.
- Урок 4. Реализация HTML-структуры для верхнего блока
В этом видео мы начинаем верстку макета и создадим HTML-структуру для верхнего блока.
- Урок 5. Написание CSS-стилей для верхнего блока
В данном видео мы пропишем необходимые CSS-стили для верхнего блока.
- Уроки 6. Адаптация верхнего блока под различные разрешения
В этом видеоуроке мы реализуем адаптацию верхнего блока под различные разрешения.
- Уроки 7. Написание HTML-структуры для блока со слайдером
В данном уроке мы напишем необходимую HTML-структуру для блока со слайдером.
- Урок 8. Полная стилизация слайдера
В данном уроке мы полностью стилизуем слайдер.
- Уроки 9. Медиа-запросы для блока со слайдером
В этом уроке мы добавим необходимые медиазапросы, для того чтобы блок слайдера был адаптивным.
- Урок 10. Настройка и подключения плагина Owlcarousel 2 для слайдера
В этом уроке мы подключим и настроим плагин Owlcarousel 2, который будем использовать для слайдера.
- Урок 11. Полная верстка блока категорий
В этом видео мы полностью сверстаем блок категорий, начиная от HTML-структуры и заканчивая медиазапросами.
- Урок 12. Написание HTML-структуры для блока с предложениями
В этом уроке будет создана HTML-структура для блока с предложениями.
- Урок 13. Стилизация блока с предложениями
В данном видео мы добавим CSS-свойства для блока с предложениями.
- Урок 14. Адаптация блока с предложениями под различные разрешения
В этом уроке мы завершим верстку блока с предложениями, написав необходимые медиа запросы.
- Урок 15. Полная верстка блока с баннером
В данном видеоуроке мы полностью сверстаем блок с баннером.
- Урок 16. Полная верстка блока с продуктами
В данном видеоуроке мы реализуем верстку блока с продуктами.
- Урок 17. Реализация HTML-структуры и написание стилей для блока с рекомендуемыми товарами
В этом видеоуроке мы сверстаем блок с рекомендуемыми товарами.
- Урок 18. Подключение и настройка карусели для блока рекомендуемых товаров
В данном уроке к блоку с рекомендуемыми товарами будет подключена и настроена карусель.
- Урок 19. Полная реализация блока с баннером
В этом уроке мы полностью реализуем верстку второго баннера, который внешне похож на предыдущий и для его стилизации будем использовать класс модификатор.
- Урок 20. Верстка и адаптация блока с новостями
В этом уроке мы сверстаем блок с новостями и адаптируем его под различные разрешения.
- Урок 21. Верстка и адаптация блока со ссылками
В данном видеоуроке мы полностью сверстаем блок со ссылками и адаптируем его под различные разрешения.
В данном уроке мы сверстаем последний блок футера.
- Урок 23. Модернизация блока с поиском при помощи JavaScript
В этом уроке будет модернизирован блок с поиском, при клике на иконку которого будет появляться форма поиска.
- БЛОК 2. Верстка макета Landing Page
ЦЕЛИ И ЗАДАЧИ БЛОКА
Во второй части курса мы сверстаем макет Landing Page. В результате, используя сборку Gulp из предыдущего блока, мы полностью сверстаем страницу Landing Page.
- Урок 1. Обзор макета и подготовка к верстке
В этом видео мы познакомимся с макетом и структурой проекта, подготовимся к верстке, установив необходимые зависимости при помощи пакетного менеджера NPM.
- Урок 2. Написание HTML-структуры для верхнего блока
В этом видео мы реализуем необходимую HTML-структуру для создания верхнего блока.
- Урок 3. Стилизация меню и блока с информацией
В уроке мы начнем стилизовать элементы верхнего блока, а именно полностью сверстаем меню и часть блока с информацией.
- Урок 4. Завершение стилизации верхнего блока и написание миксина
В этом видеоуроке продолжим стилизовать верхний блок, напишем миксин для кнопок, разделителя, а также зададим стили для нижней иконки.
- Урок 5. Адаптация верхнего блока под различные разрешения
В данном видео нам остается задать необходимые медиа запросы, чтобы верхний блок и все находящиеся в нем элементы стали корректно адаптироваться под различные разрешения.
- Урок 6. Полная верстка блока с преимуществами
В этом уроке мы полностью сверстаем и адаптируем блок с преимуществами под различные разрешения.
- Урок 7. Полная реализация блока с историей
В данном уроке мы реализуем верстку блока с историей, напишем HTML-структуру, добавим CSS-стили и адаптируем блок при помощи медиа запросов.
- Урок 8. HTML-структура для блока с услугами
В данном уроке мы напишем HTML-структуру для блока с услугами.
- Урок 9. Написание стилей и адаптация блока с услугами
В этом уроке мы продолжим работу с блоком услуг и полностью стилизуем, а также адаптируем его под различные разрешения.
- Урок 10. HTML-структура для блока портфолио
В данном уроке мы напишем HTML-структуру для блока портфолио.
- Урок 11. Стилизация блока портфолио
В данном уроке мы займемся стилизацией блока портфолио и добавим CSS-код для заголовка, текста, разделителя, а также категорий работ.
- Урок 12. Завершение стилизации блока портфолио и его адаптация
В этом уроке мы завершим стилизацию блока портфолио, а также полностью адаптируем его под различные разрешения.
- Урок 13. HTML-структура для блока Case Study
В данном видео мы напишем HTML-структуру для блока Case Study.
- Урок 14. Написание стилей и адаптация блока Case Study
В этом уроке мы продолжим работу с блоком Case Study, полностью стилизуем и адаптируем его под различные разрешения.
- Урок 15. Верстка блока со статистикой
Мы выполним верстку блока со статистикой, а именно реализуем структуру блока, а также зададим необходимые CSS-стили.
- Урок 16. Написание HTML-структуры для блока с ценами
В данном видео мы приступаем к блоку с ценами и напишем его HTML-структуру.
- Урок 17. Стилизация и адаптация блока с ценами
В этом уроке мы продолжаем работу над блоком цен, в нем будет выполнена стилизация и адаптация блока.
- Урок 18. HTML-структура для блока с командой
В уроке мы начнем верстать блок с командой и первично создадим его структуру.
- Урок 19. CSS-стили для блока с командой
В данном видео будет продолжена работа над блоком команды, для которого мы напишем все необходимые стили.
- Урок 20. Адаптация блока с командой при помощи медиазапросов
В этом завершающем видеоуроке мы реализуем адаптацию блока с командой под различные разрешения.
- Урок 21. Верстка блока Great Integrations
В данном видеоуроке мы полностью сверстаем блок Great Integrations.
- Урок 22. HTML-структура для блока новостей
В этом уроке будет создана структура для блока новостей.
- Урок 23. CSS-стили для блока новостей
В данном видео мы продолжим реализацию блока новостей и напишем необходимые CSS-стили.
- Урок 24. Адаптация блока новостей под различные разрешения
В этом видео мы завершим верстку блога, адаптировав его под различные разрешения.
- Урок 25. HTML-структура для блока с формой
Мы начнем верстку блока с формой и первоначально напишем структуру HTML для него.
- Урок 26. Стилизация и адаптация блока с формой
В данном видеоуроке будет продолжена работа над блоком с формой, в результате мы напишем все стили и адаптируем блок под различные разрешения.
- Урок 27. Верстка блока с предложением
В этом уроке будет полностью выполнена верстка блока с предложением.
В данном видео мы закончим верстку Landing Page, реализовав и адаптировав футер.
- Урок 29. Доработка мелочей и заключение
В этом видео мы завершаем работу над версткой Landing Page, доработаем оставшиеся мелкие детали и подведем итог.
