Видеокурс "Верстка - Мастер. От теории до верстки популярных шаблонов"
7970
933
0
933

Видеокурс "Верстка - Мастер. От теории до верстки популярных шаблонов"

  • Цена:
    7970

    ПОДРОБНОЕ ОПИСАНИЕ

    Автор(ы): Денис Булыга - Webformyself

    Курс включает в себя 52 урока общей продолжительностью 12 часов 12 минут без учета бонусов, в которых содержится все необходимая и исчерпывающая теоретическая база для старта в обучении по материалам курса! Что же вы получите, приобретая данный курс? Два практических блока в которых мы полностью с нуля будем производить верстку PSD-макетов. Курс предназначен как для новичков, так и для людей, которые хотят повысить навыки верстки и научиться пользоваться такими инструментами как препроцессоры, а также максимально автоматизировать процесс своей работы, что в разы повысит вашу производительность, а также увеличит ваш доход. Если вы уже изучили HTML и CSS, но на практике не знаете, как применить полученные знания или затрудняетесь с реализацией сложных элементов – тогда данный курс именно для вас, а если Вы начинаете с нуля и у Вас нет никаких знаний, то данный курс также для Вас, просто Вам необходимо начать изучение курса с бонусного блока! Благодаря знаниям, полученным из уроков курса, вы сможете начать верстать макеты различной сложности, начать зарабатывать на этом или устроиться на работу. 


    Верстка-Мастер. От теории до верстки популярных шаблонов. (Денис Булыга - Webformyself)
    • БЛОК 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. Верстка и адаптация блока со ссылками

    В данном видеоуроке мы полностью сверстаем блок со ссылками и адаптируем его под различные разрешения.

    • Урок 22. Верстка подвала

    В данном уроке мы сверстаем последний блок футера.

    • Урок 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. Верстка блока с предложением

    В этом уроке будет полностью выполнена верстка блока с предложением.

    • Урок 28. Верстка подвала

    В данном видео мы закончим верстку Landing Page, реализовав и адаптировав футер.

    • Урок 29. Доработка мелочей и заключение

    В этом видео мы завершаем работу над версткой Landing Page, доработаем оставшиеся мелкие детали и подведем итог.


  • Верстка-Мастер. От теории до верстки популярных шаблонов. (Денис Булыга - Webformyself)

ПОХОЖИЕ ТОВАРЫ