Топ 20 курсов по Bootstrap

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

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

Платные курсы

Школа: Хекслет - школа программирования

Сайт: https://ru.hexlet.io/

Дата начала: В любое время

Длительность: 10 часов

Интенсивность: Обучение в свободном режиме

Формат обучения: Теория, тесты, практика.

Требования: Необходимы знания css.

Программа:

10 уроков (видео и/или текст), 8 упражнений в тренажере, 24 проверочных теста

1. Введение
2. Почему Bootstrap
3. Установка Bootstrap
4. Сетка
5. Адаптивность
6. Работа с текстом
7. Таблицы
8. Компоненты
9. Создание пользовательского компонента
10. Утилиты
11. Самостоятельная работа
12. Дополнительные материалы

Чему научитесь:

• Создавать свои собственные компоненты
• Использовать стандартные компоненты
• Работать с текстом и таблицами, используя возможности Bootstrap
• Применять встроенные утилиты при создании шаблона
• Использовать механизм 12-колоночной сетки

Особенности обучения:

• Самостоятельная работа
• Дополнительные материалы
• Помощь в «Обсуждениях»
• Доступ к остальным курсам платформы
• Тренажер с практикой
• Бессрочный доступ к теории
• Асинхронный формат обучения

[WebForMySelf] Bootstrap 5 + OpenCart 3

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

Сайт: https://webformyself.com

Автор курса: Андрей Кудлай

Дата начала: В любое время

Длительность: 1-2 месяца

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

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

Программа:

Изучение Bootstrap 5. Теория

• Знакомство с теорией CSS-фреймворка Bootstrap 5.

Верстка шаблона сайта

• Практика работы с Bootstrap 5.

Создание темы для OpenCart 3

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

Навыки после обучения:

• Верстать шаблоны как профи
• Изучите HTML5 и CSS3
• Создавать интернет-магазины
• Изучите азы PHP, MySQL и ООП

Особенности обучения:

• Итоговой работой вы сможете украсить ваше портфолио
• 100% безусловный возврат денежных средств по первому требованию в течение 90 дней с момента покупки
• Гарантия качества и актуальности
• Курс останется у вас навсегда
• Бонусные курсы

[Udemy] Bootstrap 5 для начинающих

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

Школа: Udemy - онлайн-курсы

Сайт: https://www.udemy.com/

Преподаватель: Исмаил Усеинов

Дата начала: В любое время

Длительность: 2,5 ч видео

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Кому подойдет: Для начинающих разработчиков желающих выучить свой первый фреймворк.

Программа:

2 раздела, 10 лекций, общая продолжительность 2 ч. 19 мин.

Чему научитесь:

• Фреймворк Bootstrap 5
• Создание адаптивного сайта с использованием Bootstrap
• Подключение формы оплаты Yoomoney на сайт
• Как правильно пользоваться документацией Bootstrap 5

Особенности обучения:

• Полный пожизненный доступ
• Доступ через мобильные устройства и телевизор
• Сертификат об окончании
• Гарантия возврата денег — 30 дней

[MyRusakov.ru] ФРЕЙМВОРК BOOTSTRAP: освойте адаптивную верстку от А до Я

Основная часть курса состоит из 49 объемных уроков. Средняя продолжительность урока составляет 20 минут. Помимо непосредственного знания Bootstrap`а, курс охватывает все базовые знания по верстке. Также он будет полезен начинающим пользователям, которые только начали изучать HTML и CSS, так как курс содержит множество техник современной верстки с использованием HTML5 и CSS3.

Сайт: https://srs.myrusakov.ru

Автор курса: Андрей Кудлай

Дата начала: Начать изучать можно сразу после приобретения

Длительность: 30 дней

Интенсивность: 2-3 часа в день

Формат обучения: Видеокурс

Кому подойдет: Для новичков

Программа:

Теория

1. Вводный урок
2. Установка Bootstrap
3. Сетка Bootstrap. Теория
4. Сетка Bootstrap. Практика. Часть 1
5. Сетка Bootstrap. Практика. Часть 2
6. Сетка Bootstrap. Верстка простого макета
7. Компоненты Bootstrap
8. Кастомизация Bootstrap. Часть 1
9. Кастомизация Bootstrap. Часть 2

Практика - верстка макета интернет-магазина

1. Анализ шаблона
2. Верстка верхнего меню
3. Оформление верхнего меню
4. Установка слайдера
5. Меняем эффект слайдера
6. Добавление контента слайдера
7. Индикаторы слайдера
8. Верстка основного меню
9. Оформление основного меню
10. Дополнительные варианты меню
11. Структура контентной части
12. Виджеты сайдбара
13. Завершаем разметку сайдбара
14. Оформление слайдера сайдбара
15. Завершаем оформление сайдбара
16. Верстка карточки товара
17. Оформление карточки товара. Вариант 1
18. Оформление карточки товара. Вариант 2
19. Завершаем верстку контента
20. Разметка формы подписки
21. Оформление формы подписки
22. Слайдер в футере
23. Разметка футера
24. Оформление футера

Практика - верстка макета лендинга

1. Анализ макета
2. Верстка секции шапки
3. Задаем общие стилевые правила
4. Оформление секции HEADER
5. Верстка первой части секции Спикеры
6. Оформление первой части секции Спикеры
7. Верстка второй части секции Спикеры
8. Оформление второй части секции Спикеры
9. Модальные окна в Bootstrap
10. Верстка первой части секции Event
11. Оформление первой части секции Event
12. Состояние переключения аккордеона
13. Вторая часть секции Event
14. Третья часть секции Event
15. Верстка секции Form
16. Валидация формы
17. Выпадающий список формы
18. Секция спонсоров и карта
19. Верстка футера
20. Оформление футера
21. Добавляем эффекты анимации

Особенности обучения:

• Возврат денежных средств по первому требованию
• Бунусные уроки

[beONmax] Курс BOOTSTRAP

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

Школа: beONmax - онлайн курсы программирования

Сайт: https://beonmax.com/

Преподаватель: Сергей Никонов

Дата начала: В любое время

Длительность: 4 часа

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеоуроки и тесты

Кому подойдет: Необходимы знания html/css

Программа:

Всего заданий: 50. Видеоуроки: 25. Интерактивные задания: 17. Тесты: 8.

1. Знакомство и установка
2. Работа с Bootstrap. Позиционирование блоков (Grid System)
3. Верстка сайта. Главная страница - Верхняя часть сайта
4. Верстка сайта. Главная страница - Шаблон страницы
5. Верстка сайта. Главная страница - Фильмы, Сериалы, Блог
6. Верстка сайта. Главная страница - Левый блок сайта
7. Верстка сайта. Страница просмотра фильмов и сериалов
8. Верстка сайта. Страницы Фильмы и Рейтинг фильмов
9. Заключительная часть

Навыки после обучения:

• Основные классы и компоненты Bootstrap
• “Умное” адаптивное меню для сайта
• Одностраничные сайты за 1-3 дня
• Красивые формы для ввода логина и пароля
• Адаптивность изображений под любой экран
• Быстрая адаптивная верстка сайта

Особенности обучения:

• Сертификат

Бесплатные курсы

[itProger] Уроки Bootstrap

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

Школа: itProger - онлайн-школа IT профессий

Сайт: https://itproger.com/

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Формат обучения: Видеокурс

Требования: Необходимы знания css

Программа:

16 уроков, 39 заданий

1. Основы и установка
2. Grid система (система сеток)
3. Вёрстка при помощи системы Grid сеток
4. Стили для текста
5. Работа с таблицами в Bootstrap
6. Кнопки и группы кнопок
7. Создание форм и полей
8. Иконочный шрифт и изображения
9. Текстовые панели
10. Выпадающее меню и списки
11. Плагин JS Collapse
12. Создание модальных окон (modal.js)
13. Создание вкладок, табов (tabs.js)
14. Всплывающие подсказки (tooltip.js)
15. Создание сайта на Bootstrap
16. Заключительная часть

Чему научитесь:

• Ознакомитесь с фреймворком
• Изучите все основные классы
• Изучите использование подготовленных JavaScript скриптов
• Сможете построить веб-сайт

Особенности обучения:

• Справочник
• Редактор кода

[YouTube] Bootstrap 4 верстка сайта / #1 - Создание адаптивного веб сайта

Канал: Гоша Дударь

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

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Требования: Необходимы знания html/css

Плейлист:

1. Создание адаптивного веб сайта
2. Шапка веб сайта
3. Слайдер изображений
4. Основной блок сайта
5. Раздельные секции сайта
6. Футер и завершение работы
7. Профессия Front-end разработчик | Презентация онлайн курса
8. Видеокурс по современной вёрстке сайта | Презентация курса

[ИТ Шеф] Учебник по Bootstrap

Уроки для состоятельного изучения адаптивной вёрстки сайтов с использованием 3 и 4 версии фреймворка Bootstrap.

Сайт: https://itchief.ru

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Обучение в свободном режиме

Формат обучения: Материалы для чтения

Кому подойдет: Необходимы знания html/css

Содержание:

[YouTube] Уроки Bootstrap верстки / #1 - Основы и установка

Канал: Гоша Дударь

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

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Кому подойдет: Необходимы знания html/css

Все уроки курса:

[YouTube] #1 Уроки по Bootstrap 5 - Обзор, загрузка и подключение

Канал: ITDoctor

В этом руководстве вы узнаете, как загрузить Bootstrap 5 и подключить его в свой проект через CDN и локально. Будет рассказано об отличиях от Bootstrap 4, и если вы новичок в Bootstrap, вы узнаете, для чего предназначена эта библиотека.

Структура урока:
00:00 Введение
04:00 Подключение Bootstrap 5 через CDN
05:55 Начало работы с Bootstrap 5
08:02 Знакомство с сеткой Bootstrap 5
09:39 Скачать Bootstrap 5 локально
11:04 Структура файлов Bootstrap 5
15:16 Подключение Bootstrap 5 локально
16:14 Сниппеты для Bootstrap 5 в VS Code
19:02 Подведение итогов

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Требования: Необходимы знания html/css

Другие уроки автора:

[YouTube] Уроки Bootstrap 4 - Установка и введение. Что такое Bootstrap

Канал: Web Developer Blog

Рассмотрим, что такое бутстрап и как с ним работать. В этом курсе уроков мы рассмотрим верстку сайта и сами создадим сайт.

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Свободный график

Формат обучения: Видеокурс

Требования: Необходимы знания html/css

Плейлист:

1. Установка и введение. Что такое Bootstrap
2. Начинаем проект. Делаем адаптивное меню
3. Делаем слайдер
4. Система сетки бутстрап
5. Делаем модальные окна
6. Делаем форму регистрации
7. Классы отступов my-2, mx-sm-2
8. Работаем с Flexbox
9. Компоненты адаптивные карты.
10. Видеоконтент адаптивно

[YouTube] Как сверстать шапку сайта на Bootstrap 4

Канал: Иван Медведев

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

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Требования: Необходимы знания html/css

Другие уроки автора:

1. Как сверстать шапку сайта на Bootstrap 4
2. Верстка горизонтального меню сайта на примере лендинга для студии маникюра
3. Как сверстать слайдер в главном блоке для одностраничного сайта
4. Заголовок в HTML / CSS для одностраничного сайта
5. Как верстать вкладки своими руками на Bootstrap 4
6. Как сделать бесшовный фон для сайта | фиксированный фон
7. Как сделать блок с услугами и ценами на сайте
8. Как сделать фото карусель для сайта HTML/CSS
9. Как создать галерею для сайта на чистом HTML+CSS с использованием Bootstrap
10. Как сделать всплывающую форму для сайта HTML
11. Как сделать подвал для сайта html (Футер)

[YouTube] Урок 1. Bootstrap5. Быстрый старт. Подключение Bootstrap5

Канал: WebForMySelf

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

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Свободный график

Формат обучения: Видеокурс

Кому подойдет: Необходимы знания html/css

Все уроки курса:

1. Подключение Bootstrap5
2. Компонент Navbar в Bootstrap5
3. Компонент Modal в Bootstrap5
4. Компонент Carousel в Bootstrap5
5. Карточка товара
6. Футер сайта

[YouTube] JavaScript и Bootstrap 5

Канал: ITDoctor

На видео: Введение в курс — Магазин на чистом JavaScript и Bootstrap 5

В этом курсе мы поработаем на JavaScript и создадим графический интерфейс тестового магазина с товарами на Bootstrap 5. Мы сосредоточимся на работе с localStorage на JavaScript и научимся добавлять товары в систему. Мы также будем работать с библиотекой List.js и SweetAlert2.js.

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Вы сами устанавливаете темп обучения

Формат обучения: Видеокурс

Требования: Необходимы знания JavaScript, html/css

Все уроки курса:

8 уроков продолжительностью до 20 минут

1. Введение в курс
2. Подготовка проекта
3. Создание интерфейса
4. Добавление товара
5. Обновление графического интерфейса
6. Удаление товара и поиск
7. Добавление товара в корзину и удаление
8. Сортировка таблицы и скидка на товар

[YouTube] Уроки Bootstrap / Как сделать модальное окно, всплывающее окно на сайте

Канал: Изучаем мир ИТ / Олег Шпагин / Программирование

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

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Кому подойдет: Необходимы минимальные знания в веб-разработке

Все уроки курса:

[YouTube] Верстка по макету PSD на Bootstrap4 + BEM

Канал: ITDoctor

Это видеокурс, в котором вы будете делать верстку по макету psd с использованием Bootstrap 4, методологии BEM (БЭМ), а также работать с GitHub и Photoshop. Для начала мы создадим все файлы и расскажем о планах на этот видео курс.

Дата начала: В любое время

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Требования: Необходимы знания html/css, jQuery, фотошоп

Все уроки курса:

[YouTube] #1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки

Канал: CodeQuest

В этом видео будет рассмотрен принцип использования колоночной сетки для верстки сайтов на примере Bootstrap.

Структура урока:
0:00 — CSS фреймворки
0:43 — Принцип колоночной сетки
1:34 — Рабочее окружение (Gulp, Sass)
2:39 — Базовые свойства
3:02 — Подключение Bootstrap 5 (CDN, NPM)
3:54 — Компоненты сетки, контейнер
4:13 — Ряды сетки
4:33 — Колонки сетки
5:32 — Элементы макеты и желоба сетки
6:55 — Гибкие колонки с классом «.col»
7:24 — Фиксированные колонки
8:20 — Реализация сетки макета
8:28 — Шапка сайта
9:20 — Совмещение фиксированных и гибких колонок
9:50 — Ряд с 2 элементами по 6 колонок
10:37 — Ряд из 6 колонок по 2 колонки
11:22 — Ряд из 3 элементов по 4 колонки
12:20 — Ряд из 4 элементов по 3 колонки
13:08 — Подвал сайта
13:53 — Подведение итогов
14:15 — Про продолжение серии
14:41 — Ссылки на социальные сети

Дата начала: В любое время

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Другие уроки:

1. Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
2. Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
3. Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
4. Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
5. Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
6. Пишем свой Bootstrap с нуля | Классы колонок на Sass
7. Пишем свой Bootstrap с нуля | Адаптивная сетка на Sass

[YouTube] Верстка сайта Bootstrap 5 / HTML / CSS на практике для новичков

Автор: Анна Блок

Структура урока:
00:00 Вступление
01:11 Хостинг TimeWeb
02:36 Шаг 1 Создание аккаунта на хостинге
04:03 Шаг 2 Подготовка файлов к верстке
05:24 Шаг 3 Подключение Bootstrap
07:17 Шаг 4 Верстка сайта с Bootstrap
29:14 Шаг 5 Перенос файлов на хостинг
30:56 Итоги

Дата начала: В любое время

Длительность: Срок обучения не ограничен

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Кому подойдет: Необходимы знания html/css