Фреймворк Bootstrap 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Урок 2. Browsersync

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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