Фреймворк Bootstrap. Практика адаптивной верстки от А до Я. Видеокурс (2016)

Часть 1. Теория фреймворка Bootstrap

1. Вводный урок
В первом уроке курса мы пройдемся по организационным моментам, рассмотрим структуру курса, узнаем основные источники документации, с которой будем работать на протяжении всего курса. Также обозначим необходимое программное обеспечение (редактор, версия фреймворка Bootstrap). Кроме всего прочего, мы поговорим о вопросе: «А нужны ли нам вообще CSS фреймворки»?

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

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

4. Сетка Bootstrap. Практика. Часть 1
В этом уроке мы продолжим изучение сетки Bootstrap’a и от теории перейдем к практике, на простых примерах изучая возможности сетки фреймворка.

5. Сетка Bootstrap. Практика. Часть 2
Еще один урок мы посвятим закреплению на практике работы с сеткой Bootstrap. Здесь мы уже будем придумывать и решать задачи посложнее.

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

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

8. Кастомизация Bootstrap. Часть 1
В этом уроке мы продолжим изучение всевозможных компонентов, которые предлагает нам Bootstrap из коробки.

9. Кастомизация Bootstrap. Часть 2
В этом уроке мы с вами научимся кастомизировать Bootstrap, т.е. изменять его под себя. Именно для этого и нужны исходники, которые Bootstrap предлагает нам скачать вместе с файлами самого фреймворка. Именно эти исходники мы и можем изменять, кастомизируя фреймворк. Сделать этом можно несколькими способами: внося правки в исходники less или sass и компилируя новый файл фреймворка или же воспользоваться онлайн-инструментом кастомизации от самого фреймворка. Об этих способах вы и узнаете из данного урока.


Часть 2. Практика. Верстка макета интернет-магазина

1. Анализ шаблона
Верстку любой страницы желательно начинать с ее анализа, что мы и сделаем в этом уроке. При анализе желательно разбить в уме страницу на кусочки (блоки) и продумать способ верстки каждого из кусочков. Касательно Bootstrap'a, здесь желательно продумать, какие классы использовать для верстки общей структуры (шапка, сайдбар, контент, футер...), продумать, как должен вести себя макет при изменении ширины экрана, как должны при этом перестраиваться элементы сайта и т.д.

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

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

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

5. Меняем эффект слайдера
По умолчанию в слайдере Bootstrap слайды меняются с эффектом именно карусели, т.е. текущий слайд уезжает влево, а его место занимает слайд, выезжающий справа. Мне кажется, такой эффект не очень современен и он на любителя. В этом уроке мы попробуем изменить эффект slide на эффект растворения — fade, который смотрится более привлекательно.

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

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

8. Верстка основного меню
Текущий урок будет посвящен верстке второго меню шаблона, которое находится в слайдере. Особенностью этого меню является то, что в нем находится логотип сайта, который по умолчанию не совсем вписывается в меню на мобильной версии сайта. Попробуем найти оригинальное решение для того, чтобы на мобильных устройствах все смотрелось достаточно удобно и хорошо.

9. Оформление основного меню
В этом уроке мы продолжим работу с основным меню сайта и добавив оформление для него в стиле нашего шаблона.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. Оформление футера
Последний урок будет посвящен оформлению футера и итоговому тестированию получившейся верстки в целом.


Часть 3. Практика. Верстка лендинг пейдж

1. Анализ макета
Начнем мы курс, как обычно, с урока по анализу макета. Здесь мы сформулируем не только некие общие правила, которые непосредственно касаются имеющегося макета, но и правил, которые относятся в целом к лендингам.

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

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

4. Оформление секции HEADER
В этом уроке мы оформим первую секцию сайта — шапку. Также мы рассмотрим несколько вариантов решения задачи, когда секция должна занимать 100% ширины и высоты экрана.

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

6. Оформление первой части секции Спикеры
В этом уроке мы оформим первую часть секции спискеров, сверстанную в предыдущем уроке.

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

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

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

10. Верстка первой части секции Event
Секция событий на макете является также достаточно объемной. При ее верстке мы вновь столкнемся с вкладками. Также мы поработаем с аккордеоном в Bootstrap, немного дописав работу с его событиями в jQuery. Также мы увидим, насколько просто Bootstrap позволяет вставлять на страницу адаптированные видео.

11. Оформление первой части секции Event
В этом уроке мы оформим сверстанную первую часть секции событий.

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

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

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

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

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

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

18. Секция спонсоров и карта
В этом уроке мы реализуем сразу две небольшие секции — это секция с логотипами спонсоров, а также секция с изображением карты.

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

20. Оформление футера
В данном уроке мы займемся оформлением футера.

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