Шаблоны Joomla здесь
Видео урок

Страница автора - Денис Булыга - Webformyself
Страница автора
0.0/5 оценка (0 голосов)
Видео урок "Верстка-Мастер. От теории до верстки популярных шаблонов". (Денис Булыга - Webformyself)

Автор(ы): Денис Булыга - 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)
Рейтинг@Mail.ru   Яндекс.Метрика
2671093515531984