Овладейте версткой с Bootstrap и созданием тем для WordPress

Фреймворк Bootstrap 4

Руководство по адаптивной верстке

Действуйте сейчас и получите видеокурс со
скидкой 40%!

Успеть заказать

До старта продаж курса осталось:


Первых 36 часов курс будет продаваться с дополнительными бонусами и 40% скидкой!
Чтобы получить 40% скидку и бонусы запишитесь в предварительный список

Преимущества

  • Подойдет новичкам

    Подойдет полным новичкам

    В 7 отдельных бонусных видеокурсах (!) дается весь необходимый фундамент для старта с полного нуля – базовые знания HTML, СSS и азы РНР. Без воды и перегрузки. Этим обеспечена системность изучения и высокая скорость погружения в тему новичков

  • Адаптивная верстка

    Адаптивная верстка

    Главный плюс Bootstrap – сайты создаются уже адаптивными. Ваши сайты будут корректно отображаться на любых устройствах: от смартфонов и планшетов до гигантских мониторов настольных компьютеров

  • Верстайте быстро

    Верстайте быстро

    Используя готовые классы фреймворка, можно достаточно просто получать адаптивную верстку. Причем не нужно досконально разбираться во всех тонкостях верстки - фреймворк всю тяжелую работу сделает сам

  • Применимость в реальной жизни

    Применимость в реальной жизни

    Уже через 1-2 месяца при активном изучении уроков видеокурса и должном усердии вы сможете создать свою первую тему для WordPress, которая использует популярнейший CSS-фреймворк – Bootstrap 4.

  • Востребованная на рынке услуга

    Востребованная на рынке услуга

    За считанные недели вы можете приобрести необходимые знания и навыки по востребованной на рынке услуге – верстке шаблонов сайтов. В практической части видеокурса рассмотрена верстка Landing Page – очень популярную на сегодня структуру страниц

  • Создается сайт под ключ

    Создается сайт под ключ

    Этот видеокурс – два в одном! В курсе также показано, как полученную верстку установить на WordPress – движок №1 в мире по популярности. Вы узнаете, как из этой верстки далее создать тему для данного движка и получить готовый динамичный сайт

  • Зарабатывайте больше на комплексных заказах

    Зарабатывайте больше на комплексных заказах

    Изучив курс, вы получите не просто верстку шаблона, но готовый к использованию динамичный сайт. Если вы сможете не просто верстать макеты сайтов, но и быстро создавать уже готовые сайты, то и заработок ваш вырастет пропорционально

  • Все, что нужно для погружения в тему

    Все, что нужно
    для погружения в тему

    Приобретая данный курс, вы получаете целостный продукт, в котором есть все необходимое для изучения буквально с нуля и продуктивной работы с CSS-фреймворком Bootstrap 4, а также с движком WordPress последней 5-ой версии

  • Попрактикуйтесь и получите работу в портфолио

    Попрактикуйтесь и получите работу в портфолио

    В уроках курса показано создание готового работающего сайта. Увидите пошаговую инструкцию создания полноценной темы для WordPress из верстки. Повторив за автором курса, вы получите готовый динамичный современный сайт в ваше портфолио

Bootstrap — инструмент для верстки сайтов, проверенный временем

Bootstrap — самый популярный в мире на сегодняшний день HTML-, CSS- и JavaScript-фреймворк для верстки адаптивных, кроссбраузерных, веб-страниц и веб-проектов.
Bootstrap помогает при верстке страниц, упрощает и ускоряет ее.

Фреймворк состоит из множества различных компонентов, которые «собирают» веб-страницу: форм, кнопок, навигации, сетки блоков и так далее.

Преимущества Bootstrap

  • Экономия времени

    Экономия времени

    Как и любой фреймворк, Bootstrap призван упростить и ускорить процесс создания веб-страниц. Он содержит множество готовых решений, применяя которые, можно очень хорошо сократить время на веб-разработку. Фреймворк достаточно прост в изучении и освоить его сможет практически каждый

  • Адаптивная верстка

    Адаптивная верстка

    Верстка создается сразу адаптивной и хорошо смотрится на экранах различных устройств: от небольших смартфонов до огромных телевизоров. При этом не нужно самостоятельно писать медизапросы — фреймворк все делает сам

  • Экономия времени

    Единый код

    Благодаря тому, что используются одни и те же блоки и стили, написанный код получается более качественным и понятным. При одном взгляде на исходный код проекта сразу понятно, что в нем происходит. Это очень упрощает командную разработку и поддержку проекта, даже если подключиться к нему в середине процесса

  • Кроссбраузерность

    Кроссбраузерность

    Bootstrap создавался командой профессионалов. И поскольку при создании страниц используются готовые компоненты, верстка сразу одинаково хорошо отображается во всех браузерах

WEBFORMYSELF ПРЕДСТАВЛЯЕТ НОВЫЙ ВИДЕОКУРС

Фреймворк Bootstrap 4

Руководство по адаптивной верстке

Фреймворк Bootstrap 4

Уделите всего несколько минут обзору видеокурса!

Успеть заказать
  • 62

    видеоурока основной
    части

  • 14

    часов основной
    части

  • 7

    бонусных
    видеокурсов

  • 115

    видеоуроков бонусной
    части

  • 34

    часа бонусных
    видеоуроков

Для кого создавался курс

  • Вы начинающий верстальщик или веб-мастер с нулевыми знаниями в верстке
  • Вы хотите научиться верстать быстро и просто, создавая аккуратные и ровные странички, которые изначально являются адаптивными и отлично выглядят на различных экранах
  • У вас имеется уже некоторый опыт верстки макетов
  • Вы хотите верстать красивые сайты, которые не стыдно будет показать в своем портфолио
  • Вам надоело верстать страницы, тратя на это слишком много времени, а затем еще и адаптировать их для мобильных устройств
  • Вы хотите не только верстать макеты, но и создавать из них динамичные сайты на движке WordPress
  • НАЧИНАЮЩИЕ ВЕРСТАЛЬЩИКИ

    Знания из курса дают возможность даже начинающим верстальщикам не только верстать макеты, но и создавать полноценные динамические сайты. Новичкам Bootstrap предлагает удобную 12-колоночную сетку и множество готовых компонентов: формы, таблицы, кнопки, модальные окна, слайдеры, вкладки

  • ПРОФЕССИОНАЛЬНЫЕ ВЕБ-РАЗРАБОТЧИКИ

    Видеокурс также будет интересен профессиональным веб-разработчикам, поскольку позволяет резко повысить их эффективность, ускорить и сделать процесс верстки в разы проще. Сайты, которые Вы будете создавать на Bootstrap, уже изначально будут адаптивными и будут хорошо выглядеть на любых экранах

О видеокурсе

Увидите создание темы для Wordpress и готового динамичного сайта

Часто от верстальщика требуются навыки работы с популярными CMS и знание того, как посадить верстку на движок. Проще говоря, требуется умение создать работающий сайт.

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

Итоговый макет

Приобретая данный курс,
вы получите*

  1. Возможность изучить верстку с нуля, благодаря бонусной части курса.
  2. Возможность изучить современную верстку, которая позволяет создавать полностью адаптивные сайты.
  3. Вы изучите самый популярный на сегодняшний день CSS-фреймворк – Bootstrap 4. Знание Bootstrap сегодня является фактически необходимым требованием к современному веб-мастеру.
  4. Возможность изучить WordPress, если вы никогда не работали с данной CMS.
  5. Быструю разработку тем для WordPress, благодаря использованию стартовой темы Underscores.
  6. При должном усердии и ответственном подходе, вы научитесь создавать готовые сайты с нуля, начиная с верстки макета и заканчивая созданием на его основе темы для WordPress.
  7. Возможность изучить PHP и ООП PHP, если вы начинающий программист и хотите поднять свой уровень.

Из каких уроков состоит курс

Часть 1. Теория

Часть 1. Теория

Хронометраж:
3 часа 09 минут

01. Введение 12:03

02. Подключение Bootstrap 12:25

03. Теория сетки Bootstrap 13:54

04. Сетка Bootstrap. Часть 1 22:46

05. Сетка Bootstrap. Часть 2 17:22

06. Сетка Bootstrap. Часть 3 12:05

07. Сетка Bootstrap. Часть 4 21:58

08. Классы-помощники Bootstrap 16:29

09. Элементы контента. Изображения и таблицы 15:34

10. Компонент Alert 05:16

11. Компонент Modal 19:26

12. Кастомизация Bootstrap 19:35

Часть 2. Верстка шаблона сайта

Часть 2. Верстка шаблона сайта

Хронометраж:
5 часов 06 минут

01. Анализ макета 15:05

02. Browsersync 11:02

03. Общие стили макета 19:21

04. Разметка блока Header 17:07

05. Оформление блока Header 17:27

06. Адаптивность блока Header 18:35

07. Разметка секции Watch 09:33

08. Оформление секции Watch 10:51

09. Адаптивность секции Watch 06:03

10. Разметка секции Progress 05:05

11. Оформление секции Progress 07:35

12. Верстка и оформление секции Letsgrow 05:50

13. Верстка секции Design 08:31

14. Оформление секции Design 11:11

15. Верстка секции Work 11:41

16. Оформление секции Work 10:00

17. Верстка секции Reviews 10:51

18. Оформление секции Reviews 11:02

19. Адаптивность секции Reviews 06:55

20. Верстка секции Form 04:39

21. Оформление секции Form 08:33

22. Верстка футера 09:00

23. Оформление футера 15:53

24. Кнопка вверх 09:31

25. Прелоадер для сайта 11:11

26. Верстка страницы статей 12:45

27. Оформление страницы статей 19:27

28. Шаблон отдельной статьи 01:43

Часть 3. Создание темы для WordPress

Часть 3. Создание темы для WordPress

Хронометраж:
5 часов 59 минут

01. Установка WordPress 08:29

02. Стартовая тема Underscores 19:49

03. Перенос шаблона в структуру темы 25:34

04. Возможности плагина ACF 16:57

05. Логотип сайта 16:29

06. Меню в шапке 14:07

07. Вывод произвольных полей шапки 26:29

08. Шаблоны Header и Footer 06:50

09. Получение контента секции Watch 22:06

10. Вывод контента секции Watch 32:07

11. Реализация секции Progress 16:21

12. Реализация секции Lets 08:11

13. Реализация секции Design 16:55

14. Реализация секции галерей 11:42

15. Произвольные типы записей 14:33

16. Секция Отзывы клиентов 13:04

17. Плагин Contact Form 7. Часть 1 19:48

18. Плагин Contact Form 7. Часть 2 08:15

19. Виджеты. Кэширование 21:11

20. Шаблон рубрик 18:24

21. Постраничная навигация 13:15

22. Шаблоны страниц и записей 08:19

ПОДРОБНОЕ СОДЕРЖАНИЕ КУРСА

(наведите курсор мыши на урок, чтобы смотреть детально)

Часть 1. Теория

Хронометраж: 3 часа 09 минут

ЦЕЛИ И ЗАДАЧИ ДАННОГО РАЗДЕЛА

В первой части курса вы найдете знакомство с теорией CSS-фреймворка Bootstrap 4. Вполне очевидно, что перед использованием инструмента на практике, необходимо изучить теорию работы с ним.

Из уроков этой части курса вы узнаете о том, что такое CSS-фреймворки вообще и что такое Bootstrap в частности. Вы увидите варианты подключения Bootstrap к Вашему проекту и узнаете о том, что такое CDN и почему стоит использовать вариант подключения с CDN. Целых четыре урока отведено такой важной теме, как сетка Bootstrap. Именно благодаря сетке нам и интересны CSS-фреймворки в первую очередь.

Также вы найдете несколько уроков по использованию популярных компонентов, которые Boostrap предлагает в большом количестве. И, конечно же, вы узнаете о вариантах кастомизации Bootstrap, т.е. изменение оформления под себя, под потребности имеющегося дизайна.

01. Введение 12:03

Урок 1. Введение

В первом уроке курса рассмотрены организационные моменты, структура и содержание курса. Из урока вы узнаете об основных источниках документации, о преимуществах Bootstrap и о том, что такое CSS фреймворк.

02. Подключение Bootstrap 12:25

Урок 2. Подключение Bootstrap

Прежде чем использовать Bootstrap – его нужно подключить. И в данном уроке вы найдете различные варианты подключения фреймворка. Среди прочего Вы узнаете о том, что такое CDN и почему стоит обратить внимание на подключение ресурсов CDN.

03. Теория сетки Bootstrap 13:54

Урок 3. Теория сетки Bootstrap

В данном уроке на простых примерах рассмотрена теория сетки Bootstrap. Фактически любой макет сайта, любую конкретную страницу можно представить в виде сетки. Поэтому, понимание принципов работы сетки Bootstrap, понимание теории сетки – важный момент в изучении фреймворка.

04. Сетка Bootstrap. Часть 1 22:46

Уроки 4-7. Сетка Bootstrap. Часть 1-4

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта.

Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

05. Сетка Bootstrap. Часть 2 17:22

Уроки 4-7. Сетка Bootstrap. Часть 1-4

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта.

Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

06. Сетка Bootstrap. Часть 3 12:05

Уроки 4-7. Сетка Bootstrap. Часть 1-4

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта.

Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

07. Сетка Bootstrap. Часть 4 21:58

Уроки 4-7. Сетка Bootstrap. Часть 1-4

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта.

Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

08. Классы-помощники Bootstrap 16:29

Урок 8. Классы-помощники Bootstrap

Кроме своей знаменитой сетки, Bootstrap предлагает множество так называемых классов-помощников, позволяющих решать различные задачи. К таким классам можно отнести clearfix, который поможет сбросить обтекание элементов, классы цвета и вариантов отображения элементов, классы, позволяющие быстро добавить стандартные внутренние или внешние отступы, классы, управляющие тенью, границами, позиционированием элементов и т.д. Некоторые из предлагаемых классов рассмотрены в данном видео.

09. Элементы контента. Изображения и таблицы 15:34

Урок 9. Элементы контента. Изображения и таблицы

Одними из ключевых элементов раздела Элементы контента в документации Bootstrap можно считать изображения и таблицы. И действительно, на практике с этими элементами верстки Вы сталкиваетесь достаточно часто. Bootstrap 4 предлагает набор классов для красивого оформления таблиц и изображений. Например, добавив к таблице всего-навсего один класс, Вы получите симпатичную таблицу, которая будет отлично выглядеть на странице сайта.

10. Компонент Alert 05:16

Урок 10. Компонент Alert

В этом видео показана работа с одним из первых компонентов Bootstrap – это компонент Alert. Данный компонент отлично подходит для показа различных системных сообщений на веб-странице.

11. Компонент Modal 19:26

Урок 11. Компонент Modal

Компонент Modal, рассмотренный в данном видео, поможет Вам быстро создавать красивые модальные окна. При этом Вам не нужно будет подключать сторонние плагины типа Lightbox или FancyBox. Достаточно лишь скопировать код предлагаемого компонента из документации Bootstrap и настроить его. Все остальное сделает фреймворк.

12. Кастомизация Bootstrap 19:35

Урок 12. Кастомизация Bootstrap

Из последнего видео теоретической части курса Вы узнаете о возможностях кастомизации Bootstrap. Если Вы подключите фреймворк и будете использовать лишь его стили и классы, то в итоге получите хоть и красивое, но стандартное оформление, которое сделает Ваш сайт похожим на тысячи других сайтов, использующих Bootstrap. Из этого урока Вы узнаете, как можно избежать этого и сделать уникальное оформление, которое будет соответствовать уникальному дизайну макета.

Часть 2. Верстка шаблона сайта

Хронометраж: 5 часов 06 минут

ЦЕЛИ И ЗАДАЧИ ДАННОГО РАЗДЕЛА

Во второй части видеокурса вы перейдете от теории к практике работы с Bootstrap 4. И здесь вы увидите верстку шаблона компании по веб-дизайну.

В качестве шаблона будет взят бесплатный макет PSD. Макет представляет собой лендинговую страницу, т.е. страницу, состоящую из нескольких секций, в каждой из которых выводятся свои данные.

Здесь есть все типовые элементы, которые часто можно встретить на практике: шапка, занимающая весь первый экран сайта, адаптивное меню, галерея, вкладки, слайдер, видео. Полученная в итоге верстка будет, конечно же, адаптивной.

01. Анализ макета 15:05

Урок 1. Анализ макета

Прежде чем приступать к верстке макета, необходимо с ним познакомиться и проанализировать: выделить основные используемые шрифты, размеры шрифтов, основные цвета, отступы и т.д. Это и будет сделано в видео. Также из видео Вы узнаете, как можно получить картинки из макета, чтобы их можно было использовать при верстке шаблона.

02. Browsersync 11:02

Урок 2. Browsersync

Из этого видео Вы узнаете, как можно немного ускорить процесс верстки и сделать этот процесс более удобным и приятным. Благодаря утилите Browsersync Вы сможете забыть о необходимости перезагружать браузер каждый раз после обновления кода, за Вас это сделает Browsersync. В видео показывается, как установить и запустить Browsersync.

03. Общие стили макета 19:21

Урок 3. Общие стили макета

Подготовительный процесс завершен в предыдущих двух уроках и можно приступать к непосредственной верстке шаблона. В видеоуроке будет показан процесс подключения Bootstrap к шаблону, а также написание общих стилей макета.

04. Разметка блока Header 17:07

Урок 4. Разметка блока Header

Посмотрев данное видео, Вы сможете приступить к верстке первой секции макета – шапке будущего сайта. В видеоуроке показано написание разметки секции Header. Здесь будут реализованы такие элементы, как: логотип сайта, основное меню и блок с текстовой информацией. Для реализации блока меню и логотипа можно использовать компонент Navbar фреймворка Bootstrap.

05. Оформление блока Header 17:27

Урок 5. Оформление блока Header

В предыдущем видео была показана разметка шапки сайта. Однако, мало набросать лишь HTML-код. Фреймворк не избавляет полностью от написания стилей, он лишь предоставляет типовое оформление. Если же необходимо получить уникальный дизайн и верстку, то необходимо писать собственные правила CSS. Но это будет совсем немного стилей, основу все же предоставляет Bootstrap. В этом видео показано оформление блока Header с помощью пользовательских стилей CSS.

06. Адаптивность блока Header 18:35

Урок 6. Адаптивность блока Header

В этом видео будет показано использование медиа-запросов для реализации адаптивности шапки сайта. Хотя Bootstrap и предполагает из коробки адаптивный сайт, но все же некоторые из элементов сайта иногда придется дополнительно изменять при помощи медиа-запросов: например, сделать меньше шрифт заголовка на определенной ширине экрана, скрыть тот или иной элемент сайта, изменить вариант отображения элемента и т.д. Из видео Вы узнаете, как это можно сделать на примере адаптивности секции Header.

07. Разметка секции Watch 09:33

Урок 7. Разметка секции Watch

В этом видео показана разметка в коде HTML следующей секции лендинга – секции с часами. В уроке используются возможности сетки Bootstrap, а также компонент вкладок – Tabs, благодаря которому можно компактно разместить на небольшом пространстве страницы достаточно большой объем данных.

08. Оформление секции Watch 10:51

Урок 8. Оформление секции Watch

В этом видео Вы увидите написание стилей CSS для оформления секции с часами, верстка которой была показана в предыдущем видео.

09. Адаптивность секции Watch 06:03

Урок 9. Адаптивность секции Watch

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

10. Разметка секции Progress 05:05

Урок 10. Разметка секции Progress

В данном видео будет показана разметка следующей секции сайта – секции Progress. Это одна из самых простых секций шаблона и из новых элементов здесь есть иконки, для вывода которых можно использовать иконочный шрифт Font Awesome.

11. Оформление секции Progress 07:35

Урок 11. Оформление секции Progress

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

12. Верстка и оформление секции Letsgrow 05:50

Урок 12. Верстка и оформление секции Let’s Grow

В этом видео Вы увидите верстку и оформление еще одной достаточно простой секции – Let’s Grow. Данная секция представляет из себя описание некоторой рубрики сайта с кнопкой перехода к ее статьям.

13. Верстка секции Design 08:31

Урок 13. Верстка секции Design

В этом видео Вы найдете верстку очередной секции – Design. Данная секция интересна нам тем, что в ней представлены градиентные иконки и видео. При этом для запуска видео предполагается нестандартная кнопка. В принципе, вполне нормальным решением было бы просто вставить видео с YouTube. Но в уроке показан вариант работы с API YouTube и работа с элементами управления плеером.

14. Оформление секции Design 11:11

Урок 14. Оформление секции Design

В этом видео реализуются стили оформления секции Design. В частности, из видео Вы узнаете, как можно наложить градиент на иконочный шрифт или текст.

15. Верстка секции Work 11:41

Урок 15. Верстка секции Work

Верстку очередной секции Вы сможете увидеть в данном видео. Здесь также имеются вкладки, для которых можно использовать компонент Bootstrap. Кроме этого, в данной секции имеются галереи работ. Работы представлены в виде сетки, верстка которой и показана в уроке. Для показа больших изображений можно будет использовать плагин типа Lightbox.

16. Оформление секции Work 10:00

Урок 16. Оформление секции Work

Данное видео показывает написание стилей оформления секции портфолио. Как обычно, много стилей писать не нужно, поскольку основные стили написаны уже во фреймворке Bootstrap.

17. Верстка секции Reviews 10:51

Урок 17. Верстка секции Reviews

Очередная секция и очередное видео, в котором показана верстка секции Отзывы клиентов. На макете здесь предполагается один отзыв. Однако, на практике отзывы принято делать в виде слайдера (карусели). И здесь Вам не нужно искать сторонний плагин слайдера, поскольку Bootstrap предлагает компонент карусели. В уроке Вы увидите, как добавить карусель Бутстрапа в новую секцию.

18. Оформление секции Reviews 11:02

Урок 18. Оформление секции Reviews

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

19. Адаптивность секции Reviews 06:55

Урок 19. Адаптивность секции Reviews

В этом видео показано написание нескольких медиа-запросов для того, чтобы секция отзывов клиентов нормально адаптировалась к различным экранам. В частности, на небольших экранах фото клиента будет скрываться и будет виден только текст отзыва.

20. Верстка секции Form 04:39

Урок 20. Верстка секции Form

Последняя секция макета, верстка которой показана в данном видео, - секция с формой. Bootstrap 4 предлагает различные варианты оформления форм, остается лишь выбрать наиболее подходящий и использовать его в верстке.

21. Оформление секции Form 08:33

Урок 21. Оформление секции Form

В этом видео показано оформление секции с формой с помощью кастомных стилей CSS.

22. Верстка футера 09:00

Урок 22. Верстка футера

Как и в случае с шапкой сайта, которая присутствует практически на каждом сайте, так и футер – он есть практически на любом макете. В этом видео показана верстка футера сайта.

23. Оформление футера 15:53

Урок 23. Оформление футера

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

24. Кнопка вверх 09:31

Урок 24. Кнопка вверх

Полезным элементом любого лендинга является кнопка вверх. Особенно актуальна она для смартфонов, поскольку позволяет быстро переместится с любой позиции страницы на верх сайта, к его шапке. Это избавляет пользователя от длительного листания страницы вверх. В этом видео показан вариант реализации такой кнопки на сайте.

25. Прелоадер для сайта 11:11

Урок 25. Прелоадер для сайта

Интересным и полезным элементом на сайте может быть прелоадер. Вы не раз могли замечать картину, когда при загрузке сайта он может загружаться рывками и при загрузке скриптов или картинок контент будет перескакивать с одной позиции на другую. Визуально это смотрится не очень привлекательно. Чтобы сгладить этот негативный эффект, в частности, можно использовать прелоадер, который будет показываться до полной загрузки страницы, а затем плавно скрыт. В этом видео показана реализация такого прелоадера. В качестве самого прелоадера использован новый компонент последней версии Bootstrap – Spinner.

26. Верстка страницы статей 12:45

Урок 26. Верстка страницы статей

Макет PSD предполагает верстку лишь одной – главной страницы. Однако, зачастую требуется верстка не только главной страницы, но и как минимум одной внутренней страницы. В этом видео будет показана верстка страницы блога, где выводится лента статей. Для данной страницы, среди прочего, будет использован компонент Bootstrap Pagination для реализации постраничной навигации.

27. Оформление страницы статей 19:27

Урок 27. Оформление страницы статей

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

28. Шаблон отдельной статьи 01:43

Урок 28. Шаблон отдельной статьи

В этом видео показана верстка последнего шаблона сайта – это шаблон отдельной статьи. За основу данного шаблона можно взять страницу блога, сверстанную в предыдущих двух уроках.

Часть 3. Создание темы для WordPress

Хронометраж: 5 часов 59 минут

ЦЕЛИ И ЗАДАЧИ ДАННОГО РАЗДЕЛА

Еще лет 5 назад под версткой понималось прежде всего именно верстка шаблона. Дальше за дело уже брался программист, задачей которого была посадка шаблона на CMS.

Сегодня реалии изменились и часто от верстальщика требуются навыки работы с популярными CMS и знание того, как посадить верстку на движок. Проще говоря, требуется умение создать работающий сайт.

Последняя часть курса поможет восполнить этот пробел. Вы узнаете, как можно из шаблона, из верстки создать полноценную тему для WordPress, используя которую можно получить готовый работающий сайт.

01. Установка WordPress 08:29

Урок 1. Установка WordPress

В этом видео будет показана установка WordPress на локальный сервер Open Server. Из урока Вы узнаете, как установить WordPress, какой локальный сервер лучше использовать и т.д. По итогу урока будет получен стандартный сайт под управлением CMS WordPress для которого и будет создаваться новая тема.

02. Стартовая тема Underscores 19:49

Урок 2. Стартовая тема Underscores

Из этого урока Вы получите общее представление о структуре темы WordPress и о шаблонах, которые являются обязательными для любой темы. Также в уроке будет показано, как упростить процесс создания темы с помощью стартовой темы Underscores.

03. Перенос шаблона в структуру темы 25:34

Урок 3. Перенос шаблона в структуру темы

В этом уроке Вы узнаете, как перенести верстку в структуру темы, чтобы при обращении к главной странице сайта Вы увидели ту же картину, что и при просмотре сверстанной страницы. В уроке показано, как подключить скрипты, стили и шрифты к создаваемой теме. Также Вы познакомитесь с понятием хуков в WordPress и с первыми функциями этой CMS.

04. Возможности плагина ACF 16:57

Урок 4. Возможности плагина ACF

При разработке тем для WordPress так или иначе часто приходится обращаться к плагинам, которых для WordPress написано огромное количество. С помощью плагинов можно быстро решить какую-либо задачу и получить функционал, которого нет из коробки в WordPress. Одним из наиболее популярных плагинов при создании тем является плагин ACF – Advanced Custom Fields. Из этого видео Вы можете получить представление об этом плагине и о том, как его можно использовать.

05. Логотип сайта 16:29

Урок 5. Логотип сайта

Из этого видео Вы узнаете о том, как можно динамически управлять логотипом сайта: как добавить возможность управления в тему, как загрузить логотип и как вывести его в коде темы.

06. Меню в шапке 14:07

Урок 6. Меню в шапке

Одной из замечательных и удобных вещей в WordPress, среди прочего, является меню. WordPress позволяет регистрировать различные меню и выводить их в том или ином месте сайта. Управлять созданными меню в админке – очень просто и удобно. Администратор сайта может добавить в меню абсолютно любой материал: рубрику, страницу, статью или даже произвольную ссылку. Из видео Вы узнаете, как создать меню в WordPress.

07. Вывод произвольных полей шапки 26:29

Урок 7. Вывод произвольных полей шапки

В этом видео будет показана работа с плагином Advanced Custom Fields в коде. В частности, для текстовых данных шапки сайта будут созданы произвольные поля, значения которых будут получены и подставлены в соответствующие места шаблона.

08. Шаблоны Header и Footer 06:50

Урок 8. Шаблоны Header и Footer

Практически на любом многостраничном сайте так или иначе присутствуют повторяющиеся части шаблона. Зачастую это шапка, подвал сайта и сайдбар. Из этого видео Вы узнаете, как вынести повторяющиеся части темы в специальные шаблоны и какие функции можно использовать для подключения этих шаблонов.

09. Получение контента секции Watch 22:06

Урок 9. Получение контента секции Watch

В этом уроке объясняется работа с одной из ключевых функций WordPress – get_posts. Используя данную функцию можно получить из базы данных сайта нужные статьи. Большинство секций сайта – это информация той или иной рубрики: ее названием, описание и ее статьи. Поэтому функция get_posts будет весьма полезна для получения нужных данных. Нюансы работы данной функции разобраны в этом видео.

10. Вывод контента секции Watch 32:07

Урок 10. Вывод контента секции Watch

Из предлагаемого урока Вы узнаете, как можно вывести данные, полученные функцией get_posts. Для этого потребуются минимальные знания PHP. Используя конструкции циклов можно перебрать массив данных и вывести эти данные в нужном формате.

11. Реализация секции Progress 16:21

Урок 11. Реализация секции Progress

Данный урок посвящен реализации следующей секции, в которую будут выведены записи рубрики о достижениях компании. Поскольку для каждой секции фактически будет выполняться как минимум один дополнительный запрос к базе данных – логично, что это будет вызывать дополнительную нагрузку на сервер. Однако, в одном из следующих уроков будет показан вариант решения данной проблемы с помощью кэширования.

12. Реализация секции Lets 08:11

Урок 12. Реализация секции Lets

Из этого видео Вы узнаете, как в WordPress получить и вывести не только данные отдельной категории (наименование, описание, дополнительные произвольные поля), но и как получить ссылку на посты указанной рубрики.

13. Реализация секции Design 16:55

Урок 13. Реализация секции Design

Одна из наиболее интересных секций как в плане верстки, так и в плане ее реализации в коде темы – это секция рубрики Design. Здесь выводится видеоплеер и, соответственно, для секции должно быть установлено какое-то видео, которое будет выводиться на сайт. Из данного урока Вы узнаете, как можно реализовать эту задачу.

14. Реализация секции галерей 11:42

Урок 14. Реализация секции галерей

Еще одной интересной секцией создаваемой темы является секция портфолио, в которой последние работы представлены в виде сетки изображений – галереи. В этом видео Вы увидите, как можно реализовать данную секцию и выводить галереи, не используя при этом дополнительных плагинов.

15. Произвольные типы записей 14:33

Урок 15. Произвольные типы записей

WordPress предлагает по умолчанию два основных типа записей: посты и страницы. Однако, для многих проектов их может быть недостаточно. Это не проблема, мы можем воспользоваться возможностью добавлять произвольные типы записей. Что это такое и как с ними работать – Вы и узнаете, посмотрев данное видео.

16. Секция Отзывы клиентов 13:04

Урок 16. Секция Отзывы клиентов

Из данного урока Вы узнаете один из возможных вариантов реализации секции отзывов клиентов. Для этого будут использованы возможности произвольных типов записей, которые были рассмотрены в предыдущем видео.

17. Плагин Contact Form 7. Часть 1 19:48

Уроки 17-18. Плагин Contact Form 7. Часть 1-2

Этот урок будет посвящен работе с еще одним популярнейшим плагином – Contact Form 7. Данный плагин позволяет легко создавать формы для страниц сайта и с помощью него можно реализовать форму в последней секции макета. В этих двух уроках Вы увидите нюансы работы с плагином Contact Form 7.

18. Плагин Contact Form 7. Часть 2 08:15

Уроки 17-18. Плагин Contact Form 7. Часть 1-2

Этот урок будет посвящен работе с еще одним популярнейшим плагином – Contact Form 7. Данный плагин позволяет легко создавать формы для страниц сайта и с помощью него можно реализовать форму в последней секции макета. В этих двух уроках Вы увидите нюансы работы с плагином Contact Form 7.

19. Виджеты. Кэширование 21:11

Урок 19. Виджеты. Кэширование

Посмотрев это видео, Вы узнаете о такой полезной возможности WordPress, как использование виджетов. Виджеты часто используются для вывода некоторых блоков в повторяющихся частях сайта: сайдбаре или футере. Для футера темы также можно использовать виджеты. Из урока Вы узнаете, как это можно сделать. Также в уроке показана работа с одним из плагинов кэширования, который позволит снизить нагрузку на сервер и ускорить работу сайта.

20. Шаблон рубрик 18:24

Урок 20. Шаблон рубрик

Из данного видеоурока Вы узнаете, как можно создать шаблон рубрик в теме и как вывести список статей запрошенной рубрики. Также Вы увидите использование стандартного цикла WordPress в этом шаблоне.

21. Постраничная навигация 13:15

Урок 21. Постраничная навигация

В этом видео показана работа с функцией постраничной навигации WordPress, а также будут написаны дополнительные стили оформления для полученной пагинации.

22. Шаблоны страниц и записей 08:19

Урок 22. Шаблоны страниц и записей

В данном видео будут созданы еще несколько шаблонов темы, в частности, это шаблоны постоянных страниц и одиночных записей. За основу можно взять шаблон рубрик, внеся в новые шаблоны необходимые правки.

Бонус 1
Премиум-курс «HTML для начинающих»

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

Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом объем материалов будет приемлемым для качественного усвоения и запоминания, не забивая и без того перегруженную голову новичка лишними деталями.

Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике.

В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

Количество уроков: 8
Продолжительность курса: 01:57:09
Автор: Андрей Бернацкий

Бонус 2
Премиум-курс «CSS для начинающих»

При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS.

Используя CSS-свойства и их значения, назначается шрифт, размер текста и его начертания, указываем фоновые цвета либо изображения для блоков, назначаем внешний вид границ элементов, их размеры и отступы, управляем видимостью блоков и их позиционированием, и многое-многое другое, что связано с оформлением внешнего вида страницы.

В учебнике по основам CSS для начинающих изучаются CSS-свойства и их значения.

СSS-свойств достаточно много и еще больше у них значений. Но особенностью данного курса является то, что в нем не рассматриваются детально все CSS-свойства. Автору за почти 10-летний опыт разработки некоторые из них приходилось использовать всего несколько раз, а некоторые в реальных проектах – вообще ни разу. Поэтому нет смысла подробно рассматривать все свойства со всеми значениями, некоторые из которых вы, возможно, никогда не примените.

Подробно изучаются необходимые для создания сайтов CSS-свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности. И при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что поможет закрепить знания из курса на практике.

Разделы CSS, которые изучаются в учебнике: способы подключения CSS к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.

Количество уроков: 10
Продолжительность курса: 01:31:17
Автор: Андрей Бернацкий

Бонус 3
Премиум-курс «HTML 5. Основы»

HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками.

HTML5 – это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, но об этом детально поговорится в самом курсе.

В данном премиум-курсе рассматриваются лишь основы HTML5, наиболее востребованные и актуальные в процессе верстки.

Рассматриваются важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

Появились новые теги, которые делают разметку страницы более структурированной и семантической: header, footer, article, nav, section...
Появилась новая удобная возможность проигрывать на веб-страницах аудио, видео и все это делать стандартными возможностями браузера, не прибегая к дополнительной установке браузерных плагинов.

Добавилось очень много полезных возможностей по работе с формами. Используя новые формы HTML5, можно избежать многих проверок вводимых данных на JavaScript. Также можно без использования JavaScript и подключения к сайту дополнительных библиотек вывести удобный календарь для выбора даты.

Теперь стало возможным рисование векторных фигур прямо в браузере. Делается это с помощью тега Canvas. Именно с помощью данного тега можно рисовать векторные фигуры, а с помощью JavaScript можно управлять нарисованными фигурами, тем самым создавая анимации, небольшие мультфильмы, и даже игры! Так же с приходом HTML5 стало возможно хранить некоторые данные на стороне клиента, используя LocalStorage (локальное хранилище).

Еще одна полезная возможность, которая стала доступна в HTML5 – это геолокация. То есть теперь возможно легко определять местоположение посетителя нашего сайтов.

Количество уроков: 13
Продолжительность курса: 02:23:17
Автор: Андрей Бернацкий

Бонус 4
Премиум-курс «CSS 3. Основы»

Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений.

Теперь не нужно нарезать картинки для градиентов, думать, как сделать закругленные углы и задать тень у элементов, установить прозрачность, подключить нестандартные шрифты и даже сделать небольшую анимацию.

Все возможности, которые были описаны выше, а также множество других уже доступны в CSS3.

Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов.

Данный видеокурс от команды WebForMySelf поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

Количество уроков: 20
Продолжительность курса: 04:58:57
Автор: Денис Булыга

Бонус 5
Премиум-курс «PHP+PHP7+MySQL»

В первую очередь курс будет полезен тем, кто вообще не знаком с PHP. Также курс будет представлять ценность для новичков, которые возможно уже изучили PHP, но у них нет практики работы с этим языком программирования. Здесь простым и понятным языком объясняется теория и практика работы с PHP.

В курсе рассматривается язык PHP с нуля, с самых-самых основ, с синтаксиса языка, понятия переменной, функции и прочее.

Уроки не представляют из себя «голую» теорию, они максимально разбавлены практическими рабочими примерами. Для того, чтобы закрепить изученный материал, в конце курса создается простейший динамичный сайт, использующий в своей работе базу данных и паттерн MVC. Логическим продолжением изучения теории и практики работы с PHP, будут уроки, посвященные нововведениям новой версии языка – PHP 7. Эта версия стала куда быстрее своих предшественниц и в ней появились некоторые полезные возможности, о которых вам, возможно, было бы интересно узнать.

В уроках по PHP 7 рассматриваются новые операторы и функции, новые возможности, двигающие PHP в сторону языков со строгой типизацией. Все это рассматривается в логическом продолжении основного курса по PHP – в уроках по новинкам PHP 7. Как и положено, начинается курс с простейших вещей. В частности, уже в первом уроке рассматривается, в чем отличие клиентских языков программирования от серверных языков, к которому и относится сам PHP. Также рассматривается, какое окружение необходимо для работы с PHP кодом, и устанавливается веб-сервер для дальнейшей работы.

Далее проходит знакомство с немного скучными, но очень необходимыми знаниями, без которых дальнейшее изучение любого языка теряет смысл. Речь идет о синтаксисе языка PHP. Рассматривается, как встроить скрипт на PHP в код файла HTML, в каких файлах может работать код на PHP, для чего нужны комментарии и как их использовать в PHP. Также пишется простейшая программа на PHP, которая будет выводить на экран заданное сообщение.

Само собой, начало изучения любого языка программирования не обходится без понятия переменной. Рассматривается, что такое переменные и константы в PHP, как объявить переменную, какие правила приняты для именования переменных, чем переменные отличаются от констант, как объявить константу, в каких случаях принято использовать константы и т.д.

Следующим важным этапом изучения теории PHP будет понятие типов данных. Рассматриваются такие типы данных, как целое число, число с плавающей точкой, строка, булев тип, массив и другие. Несколько уроков курса отведены под понимание работы с массивами. Что такое массив, различные виды циклов для работы с массивами и ряд других вопросов рассмотрены в цикле из пяти уроков.

Также много внимания уделяется еще одной ключевой теме языка PHP – функциям. PHP предлагает огромное количество различных функций для работы с разными данными: строками, массивами, датой и временем и прочее. Кроме этого, в PHP есть возможность создавать собственные, пользовательские функции, благодаря которым можно избежать повторения кода и группировать ключевые участки кода.

Четыре больших урока отведены такой важной практической теме, как работа с базой данных. Здесь изучаются основы работы с СУБД MySQL, пишутся SQL-запросы, благодаря которым станет возможным простое оперирование массивами данных. Как итог, знания, полученные на протяжении курса, закрепляются на практике. В качестве практики создается простейший вариант гостевой книги с использованием базы данных.

Количество уроков: 39
Продолжительность курса: 15:45:20
Автор: Андрей Кудлай

Бонус 6
Премиум-курс «Объектно-ориентированное программирование на PHP»

Разработка веб-приложений с помощью объектно-ориентированного подхода на языке PHP поначалу может сбить с толку тех разработчиков, которые привыкли использовать процедурный подход, но на самом деле ничего сложного в ООП нет. В данном курсе рассматриваются основы ООП, которые закрепляются на практике.

Курс состоит из 17 уроков, в которых шаг за шагом рассматриваются базовые понятия ООП, которых должно быть достаточно для написания приложений в объектном стиле.

В курсе рассматривается наследование классов для создания удобной и гибкой логики веб-приложения, рассматривается, как создавать разветвленные иерархии классов. Показано, как переопределять методы и тем самым расширять их функционал, создавать абстрактные классы.

Разбирается смысл использования интерфейсов и использование их там, где это действительно может требоваться, а не использование интерфейсов ради интерфейсов. Особое внимание в курсе отведено теме автозагрузки классов, что позволит исключить длинные списки подключаемых файлов. Здесь рассматривается, как функции автозагрузки, так и использование для этой цели пакетный менеджер Composer.

Все это и многое другое рассматривается в уроках предлагаемого курса по ООП в PHP.

Количество уроков: 17
Продолжительность курса: 05:49:22
Автор: Андрей Кудлай

Бонус 7
Видеокурс «WordPress для самых “маленьких”»

Этот новый видеокурс был создан специально для того, чтобы дать необходимую базу полным новичкам, которые никогда не работали с движком Вордпресс.

Курс включает в себя 8 уроков, которые объединены условным названием «WordPress для самых “маленьких”».

Это действительно уроки по WordPress для тех, кто только-только начинает свое знакомство или даже вовсе не знаком с этой CMS.

Здесь собраны все основные моменты, в которых будет показана работа с системой администратора сайта на WordPress.

Это и установка движка, и работа с категориями, страницами и записями, и настройка сайта, и работа с виджетами и плагинами, и многие другие моменты.

Количество уроков: 8
Продолжительность курса: 1,5 часа
Автор: Андрей Кудлай

Автор видеокурса

Андрей Кудлай

Андрей
Кудлай

Автор и технический директор издательства Webformyself.com

Профессионал веб-разработки с 11-летним опытом

В совершенстве владеет знаниями в области HTML, CSS, PHP, JavaScript, AJAX, WordPress, OpenCart, CakePHP, Yii2 и Bootstrap.

Педагог в прошлом, благодаря чему умеет объяснять так, что становится понятно даже новичку

Работает с CSS-фреймворком Bootstrap уже не один год. Несколькими годами ранее автор представлял курс по предыдущей версии фреймворка – Bootstrap 3. Курс понравился аудитории и был востребован

С CMS WordPress автор работает также не первый год, что предполагает достаточно уверенное знание CMS и навыки работы с ней. Кроме создания тем для WordPress автор также на достаточно углубленном уровне работает с API WordPress, разрабатывая плагины для этой CMS.

Автор видеокурсов:

  • Фреймворк Bootstrap: практика адаптивной верстки от А до Я
  • WordPress-Мастер. От Личного блога до Премиум-шаблона
  • WordPress-Мастер. Разработка тем для WordPress
  • WordPress-Профессионал
  • Интернет-магазин на OpenCart. Создание магазина с уникальным шаблоном
  • Интернет-магазин под ключ
  • Фреймворк YII2 с Нуля до Профи. Быстрая разработка с современным фреймворком
  • Фреймворк CakePHP: с Нуля до Гуру на примере создания корпоративного сайта
  • PHP-Мастер. От теории до собственной CMS интернет-магазина

Сколько стоит курс?

Действуйте сейчас и получите видеокурс со
скидкой 40%!

Внимание! Акция, приуроченная к старту продаж
долгожданного курса, продлится всего 36 часов!

Bootstrap 4

Мгновенное скачивание

Сразу после успешной оплаты на указанный вами email придет ссылка для мгновенного скачивания курса на ваш жесткий диск

5970 руб. 3582 руб.

100% возврат средств в случае неудачи

До старта продаж курса осталось:


Первых 36 часов курс будет продаваться с дополнительными бонусами и 40% скидкой!
Чтобы получить 40% скидку и бонусы запишитесь в предварительный список

Сколько зарабатывают
верстальщики на Bootstrap?

Bootstrap является самым популярным фреймворком для верстки. Вот почему многие компании и веб-студии требуют обязательное знание Bootstrap для своих верстальщиков.

Знания из курса позволяют не только верстать макеты, но и создавать из них полноценные динамичные сайты с привлечением движков, в частности – CMS WordPress. Bootstrap — это только верстка. Поэтому если еще в дополнение к этому есть навыки установки верстки на какую-либо популярную CMS, например, WordPress, то это, конечно, будет весомым преимуществом.

Зарплата

Источник: hh.ru

Мы гарантируем высокое
качество наших видеокурсов

Команда WebForMyself вот уже 11 лет известна высочайшим качеством своих видеокурсов и профессиональным уровнем команды авторов. За все это время мы выпустили более 30 видеокурсов на самые разные темы сайтостроения.

Также мы одни из первых в отрасли разработали и запустили онлайн-платформу предоставления постоянно обновляемых качественных материалов для веб-разработчиков с доступом по ежемесячной подписке – Премиум-Клуб. Благодаря ей, вебмастера не только значительно экономят на стоимости десятков курсов, но и имеют под рукой постоянно обновляемую видеотеку – только наиболее актуальные, концентрированные и востребованные на рынке знания, и технологии.

За это время более 115 тысяч веб-мастеров по всему миру успело оценить качество наших видеокурсов. В Рунете все еще мало кто может похвастаться подобными достижениями.

ГАРАНТИИ

  • Возврат денег

    Возврат денег

    Мы гарантируем вам полный безусловный возврат стоимости курса, если вы по каким-либо причинам посчитаете, что знания и навыки из курса оказались вам бесполезными.

    Для этого просто напишите в нашу службу поддержки и кратко опишите проблемы, с которыми вы столкнулись, предпринятые действия.

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

    Срок действия гарантии возврата средств – 90 дней с момента получения вами видео курса.

  • Высокое качество

    Высокое качество

    Все уроки — эксклюзивные, актуальные и подробные, тщательно подготовлены лично автором видеокурса Андреем Кудлаем.

    Мы гарантируем, что при покупке этого видеокурса сегодня вы получаете лишь самые актуальные и востребованные на момент выхода знания – в формате видеоуроков.

    В курсе нет ничего лишнего, только те знания, которые действительно нужны для практической верстки в 2019 году (из эмпирического многолетнего опыта автора).

    Увидите верстку шаблона на примере компании по веб-дизайну. Здесь есть все типовые элементы, которые часто можно встретить на практике: шапка, занимающая весь первый экран сайта, адаптивное меню, галерея, вкладки, слайдер, видео. Полученная в итоге верстка будет адаптивной.

    Также вы узнаете, как из сверстанного шаблона создать полноценную тему для WordPress, используя которую можно получить готовый современный динамический сайт.

  • Получение курса

    Получение курса

    Этот видеокурс предоставляется только в электронном виде – это значит, что ссылка на скачивание на ваш жесткий диск будет доступна сразу же после оплаты.

    Объем видеокурса составляет порядка 8 Гбайт – скачивание займет от нескольких минут до нескольких десятков минут (в зависимости от скорости вашего Интернет-провайдера).

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

    Если вдруг (всякое бывает!) ссылка не работает — просто напишите в службу поддержки. Мы сразу устраним проблему, и вы в кратчайшие сроки начнете работать с курсом.

Успеть заказать

Отзывы покупателей других курсов от команды Webformyself.com

  • Крупянский Вячеслав

    Крупянский Вячеслав

  • Дударев Сергей

    Дударев Сергей

  • Жаров Роман

    Жаров Роман

  • Субботин Андрей

    Субботин Андрей

Купленные курсы:

  • Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Благодаря Вашему курсу я вышел на гораздо более высокий уровень владения технологиями HTML5 и CSS. Помимо этого, мне удалось понять суть фреймворка Bootstrap – благодаря этому процесс верстки существенно сократился по времени и, что немаловажно, по психофизическим затратам.

До того, как приступить к изучению курса, я прошел другой курс команды WebForMySelf – «WordPress-Мастер: от личного блога до премиум-шаблона», благодаря которому получил ясное представление о HTML (HTML5) и CSS (CSS3) и практические навыки. Собственно, именно после этого курса я не просто заинтересовался, а, можно сказать, вдохновился созданием сайтов. У меня появились идеи и уверенность в том, что их реально реализовать на практике – в первую очередь благодаря Вашим курсам.

До того, как я узнал о существовании курсов WebForMySelf, я действительно испытывал проблемы. Самое главное – не было ясного представления, где «добывать» знания. Книги, которые попадались мне в руки, не устраивали. В одних излагались одни азы, дающие лишь общее представление о сайтостроение. В других действительно нужная информация излагалась (видимо для увеличения числа страниц и, соответственно, авторского гонорара) с массой ненужных подробностей, каких-то исторических экскурсов.

Продираться сквозь эти дебри – значит, тратить бесценное время и нервы. На просторах интернета информации много, но большая ее часть весьма сомнительного свойства. Порой «клюнешь» на чей-то с виду полезный ресурс, а в итоге оказываешься у разбитого корыта, понимая, что опять напрасно потерял время, не получив взамен сколько-нибудь полезных знаний.

Ощущения при этом я испытывал, мягко говоря, дискомфортные. С одной стороны, есть большое желание заниматься делом и понимание, что это именно то, что тебе нужно, а с другой – растущая апатия от невозможности получить нужную информацию в одном месте, а не добывать ее по крупицам из разных источников, да еще и не быть уверенным в их надежности.

Купив и изучив предыдущие курсы от WebForMySelf, я узнал о существовании фреймворка Bootstrap и его большой популярности благодаря тому, что он предоставляет большие возможности для веб-разработчиков. А так как WebForMySelf стало для меня неким знаком качества, у меня не было сомнений в том, что мне рекомендуют получить действительно нужные знания. Да и огромный опыт автора курса Андрея Кудлая в области сайтостроения располагает к стопроцентному доверию.

Изучив курс, я научился пользоваться фреймворком Bootstrap и оценил несомненные преимущества, которые он дает. Это действительно здорово – иметь возможность упростить решение задачи и получить за счет возможность сделать больший объем работы за единицу времени. Помимо этого, я получил дополнительные знания по о HTML (HTML5), CSS (CSS3) и JS – и все это всего за 1 месяц!

В первую очередь запомнились ощущения, которые я испытывал при изучении курса – по сути, увлекательного, нескучного и познавательного путешествия, как бы высокопарно это ни звучало. Порой я просто физически ощущал, что границы моего познания расширяются – это очень приятное чувство.

Через полгода я надеюсь начать зарабатывать путем создания сайтов на фрилансе. Кроме того, благодаря уже пройденным курсам мне удалось запустить в январе этого года новостной сайт нашего города (poronaysktimes.ru) – думаю, что через полгода мне удастся сделать его намного более функциональным и интересным с точки зрения дизайна.

Я выражаю без преувеличения огромную благодарность команде WebForMySelf за то, что она есть. Когда я думаю, что вот собрались умные молодые ребята и создали с нуля такой грамотный, полезный и честный продукт, то ничего, кроме восхищения это у меня не вызывает. Учитывая, что я живу в маленьком дальневосточном российском городе, можно себе представить, насколько малы мои возможности в получении действительно нужных знаний – то есть таких, которые станут определяющими в выборе жизненного пути после окончания школы. Благодаря Вам я могу себе позволить быть уверенным в осуществлении своих бизнес-проектов – а раньше я мог об этом только мечтать.

Купленные курсы:

  • Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Главный результат — перспектива работы и дальнейшего совершенствования для начинающего WEB программиста! Возможность верстать достаточно сложные макеты и создавать сайты без углубленного понимания и знания CSS и JavaScript в современных стандартах HTML5 и CSS3.

До настоящего курса с фреймворком не работал. Писал программы в классическом виде в HTML и CSS.

Какие проблемы я испытывал до приобретения курса? Как я отмечал, полное незнание фреймворка Bootstrap — возможность изучать только по документации прилагаемой к пакету. Да, достаточно хорошей и удобной — но в английской версии, русский перевод ужасен и не точен, даже код кое-где не соответствует оригиналу.

Прослушав вводные уроки бесплатного курса Bootstrap 3, оценив качество материала, способ представления, да и просто лексику автора (Андрей Кудлай) и сравнив с тем материалом, который присутствует в интернете, без сомнений решил приобрести курс «Фреймворк Bootstrap: практика адаптивной верстки от А до Я»

Чему я научился, изучив курс? Уверенно ориентироваться в основных разделах фреймворка. Понять, что верстку практически любого макета можно достаточно быстро осуществить средствами Bootstrap.

Что мне запомнилось больше всего из курса? Умение автора разделить материал: о чём необходимо рассказать, возможно даже «разжевать».

Каких результатов планирую добиться через полгода? Вероятно, освоить и другие распространенные Фреймворки, кастомизацию данного приложения в большем объеме для «заточки» под конкретный проект.

И теперь Самое Главное. Курс приобретался в первую очередь для сына. Он аутист с проблемой общения и социальной адаптации. Инвалид 3 группы. Но тем ни менее он заканчивает политехнический техникум по специальности программирование. Сейчас проходит преддипломную практику в компании занимающейся разработкой медицинского программного обеспечения. Имеется возможность продолжить работу в ней, но отличное знание Bootstrapa — непременное условие! Поэтому данный курс позволил полностью освоится в возможностях данного фреймворка. Большое спасибо авторам!

Купленные курсы:

  • WordPress-Профессионал
  • Премиум-курс по PHP+PHP 7 и MySQL
  • Премиум-курс по ООП PHP
  • Создание интернет-магазина на WooCommerce
  • PHP-МАСТЕР. От теории до собственной CMS интернет-магазина

В начале пути были сомнения — а есть ли деньги в интернете, на фрилансе. Честно говоря, стартовать было непросто — с небольшим опытом и «не толстым» портфолио долго приходилось искать заказчиков. Вообще для себя вывел некую формулу — сначала все всегда кажется страшным, непонятным, невыполнимым, но достаточно разбить большую задачу на этапы и начать делать — как все начинает получаться, складываться. Нужно только не бояться и делать — решение найдется всегда.

Сейчас мой основной профиль — это создание тем для WordPress с нуля. На фриланс биржи не заглядываю, есть заказчики и поток постоянной интересной работы. Точно знаю, что заработать в вебе можно. Есть желание расширить свои знания в области PHP, поэтому купил курс «PHP-Мастер» от команды WFM от Андрея Кудлая. Его курсы и уроки мне очень нравятся — у него получается прекрасно объяснять материал. Помимо этого, его курсы/уроки мне очень интересно смотреть, они для меня не скучные, что ли. Не знаю, как это объяснить корректно, но на своем пути я встречал много уроков, при просмотре которых хотелось засыпать).

Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе). Стоит отметить его прекрасный навык в объяснении сложной информации.

Из ваших курсов я получил очень много знаний, которые мне очень помогли в моем развитии.

Нашел работу, которая мне очень нравится. Нашел много интересных людей вокруг себя. Получил знания и навыки, которые я могу сейчас свободно продавать. Есть уверенность в завтрашнем дне. Фриланс для меня — это свобода и возможность развиваться, строить себя.

Деньги в веб-разработке имеются, при правильном подходе можно зарабатывать, и довольно неплохо.

Удаленная работа дает мне чувство свободы. В планах попробовать себя на западных биржах фриланса. Сейчас активно изучаю английский язык. Также в планах дальнейшее развитие. Только вперед!

Удалось освоить новое направление для себя со всеми вытекающими. Направление веб-разработки для меня оказалось очень интересным, а это я считаю самым главным — если есть сильный интерес к какой-то деятельности, значит рано или поздно успех придет.

Купленные курсы:

  • Фреймворк Bootstrap: практика адаптивной верстки от А до Я
  • Интернет-магазин под ключ

С помощью курса «Интернет магазин под ключ» я смог создать полноценный интернет-магазин по продаже и обслуживанию холодильного оборудования для своего друга.

Я поверил в ребят, и я не ошибся! Через полгода я защитился на 4. Я был единственный в нашей группе, кто делал проект самостоятельно (в смысле, не покупал) и вторым человеком в группе у которого оценка была выше тройки (недолюбливал нас декан). Так, что с ребятами из команды WebForMySelf я знаком уже очень давно, где-то порядка 5 лет.

Тут уже надо отдать должное Андрею Кудлаю. Просто и доходчиво говорить о вещах порой весьма умозрительных, может не каждый. Тут нужен талант.

Благодаря ребятам из команды WebForMySelf я смог успешно защитить дипломный проект и по большому счёту, именно они пробудили у меня интерес к сайтостроению.

Изучив несколько платных и бесплатных курсов, я могу теперь самостоятельно сделать полноценный интернет-магазин. Причём как на системе управления с открытым кодом (например, ВордПресс), так и на собственной CMS, что конечно, же на порядок повышает безопасность сайта.

Помимо, грамотного и последовательного изложения материала курса, запомнилась внимательность авторов к вроде незначительным на первый взгляд мелочам, что не раз потом выручало в других проектах.

Думаю, развиваться дальше в плане создания сайтов на заказ и соответственно, получения новых знаний. Хочу, наконец то привести в порядок свой первый сайт, который создал на заре своей профессиональной деятельности, за который теперь стыдно и до которого всё не доходят руки. Хотя у клиентов доходят, почему-то их он не пугает, периодически с него приходят заказы :)

Мне очень повезло, что в своё время я нашёл сайт WebForMySelf. И это честно, безо всякого пафоса. Более качественного продукта, причём за более, чем умеренные деньги, в Рунете я нигде не встречал. Отдельное спасибо за подачу материалов. Специалистов сейчас много, педагогов мало. Ребята, Вы высококлассные специалисты. Будьте здоровы и оставайтесь с нами! Ура!

Ответы на частые вопросы

  • Какие минимальные знания требуются для изучения курса?

    Для успешного изучения курса вам потребуются знания верстки (HTML и CSS). Фактически, данные знания являются стандартом и подразумеваются как само собой разумеющееся, если вы планируете заниматься веб-разработкой.

    Также для изучения курса вам потребуются знания основ PHP и ООП PHP. Данные знания можно будет при необходимости получить из бонусной части курса.

  • На какой период рассчитано изучение материалов?*

    При должном усердии, уделяя 2-3 часа в день теории и практике в свободном темпе, всего за 2-3 месяца можно полностью освоить курс с полного нуля.

    Если же у вас есть хотя бы базовые знания по HTML, CSS и программированию, то освоение видео курса будет более быстрым – около 1 месяца или даже меньше.

  • А если у меня не получится освоить верстку на Bootstrap?

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

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

  • Какие виды оплаты вы принимаете?

    JustClick — возможность оплаты следующими способами: Visa, MasterCard, электронные деньги (Вебмани, Киви, Яндекс-деньги), интернет-банкинг, терминалы и салоны связи (Евросеть, Связной, Яндекс-деньги), платежные системы (RBKMoney), денежные переводы (Банковский перевод, Альфа-клик, Промсвязьбанк, Контакт, Лидер).

    PayPal — международная система оплаты PayPal.

  • Могу ли я приобрести ваш курс из дальнего зарубежья?

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

  • Куда можно обратиться, если возникнут вопросы?

    По всем техническим, организационным и финансовым вопросам вы можете обращаться в нашу службу поддержки: http://support.webformyself.com

  • Какие требования к ПК для прохождения видеокурса?

    Требования самые минимальные: процессор 800 MHz, оперативная память 512 МБ, звуковая карта (можно встроенную в материнскую плату), видеокарта (можно встроенную в материнскую плату), DVD-дисковод (для физической версии) и операционная система Windows 2000/XP/Vista/7/8.1/10.

  • Вы принимаете оплату на ваш банковский счет?

    Нет, к сожалению, пока что оплату на наш банковский счет мы не принимаем.

  • Нужна ли доплата за бонусы?

    Нет, все бонусы входят в комплект курса, доплачивать за них не нужно.

  • Отправляете ли вы видеокурс по почте?

    Нет. Этот видеокурс продается только в электронной версии и доступен для скачивания мгновенно после оплаты. Это очень удобно, намного быстрее (мгновенно) и дешевле, если сравнивать с отправкой дисков по почте.

  • Можно ли смотреть курс на Mac?

    Да, можно. Меню курса сверстано в html-формате, таким образом Вы сможете смотреть курс через любой браузер

  • Требуется ли знание английского для изучения вашего курса?

    Нет, знание английского языка не требуется.