Подробный видео курс по Bootstrap 5 на русском языке, Как создать сайт на Bootstrap 5

В этом курсе вы узнаете как скачать Bootstrap 5 и подключить его в свой проект через CDN и локально. Мы начнем работу с Bootstrap 5. Я расскажу про отличия от Bootstrap 4, а если вы впервые знакомитесь с Bootstrap то вы узнаете для чего нужен этот CSS фреймворк. Создадим шапку сайта на Bootstrap 5. Сделаем градиентный фон с помощью генератора градиента, добавим ссылку на footer с плавной прокруткой, создадим кнопку play на чистом css с помощью генератора треугольников, а так же я покажу как сделать модальное окно на Bootstrap 5 и сделать любое видео адаптивным. Мы сразу все проверим на мобильных устройствах и убедимся, что адаптивная версия выполнена корректно. Я расскажу вам как работать с сеткой Bootstrap 5, как устроена сетка Bootstrap 5 и как делать адаптивные элементы с помощью сетки Bootstrap 5 легко и быстро. Мы создадим раздел с информацией о курсе, где будут использоваться иконки и сетка Bootstrap 5 размером 3 на 3 и размером 2 на 2. Покажу как сделать Аккордеон на Bootstrap 5 любой сложности. Аккордеон позволяет нам скрывать и показывать различные элементы на сайте. Особенность Аккордеона в том, что одновременно может быть открыт только один элемент, а все остальные скрываются. Сделать Аккордеон на Bootstrap 5 очень просто, вы узнаете как настроить и стилизовать аккордеон и добавить новые элементы в аккордеон на Bootstrap 5. После этого я покажу как на Bootstrap 5 добавить адаптивное изображение. Адаптивное изображение на Bootstrap 5 создается очень просто, необходимо использовать специальный класс на любом изображении и оно становится адаптивным. Далее мы создадим очередной раздел нашего сайта на Bootstrap 5. Так же в конце урока вы получите простое задание, которое сможете с легкостью выполнить самостоятельно и закрепить полученные ранее знания по работе с сеткой Bootstrap 5 и другими элементами фреймворка Bootstrap 5. После этого покажу как сделать форму для сбора средств Yoomoney. Форма сбора средств Yoomoney создается очень просто. Далее мы сделаем футера сайта и я расскажу про условия конкурса, в котором может поучаствовать каждый. В завершение курса мы пройдемся по документации Bootstrap 5 и я расскажу про самые основные разделы, покажу где и как найти интересующий вас код и вы с легкостью сможете найти информацию в документации Bootstrap 5 и сделать любые формы, настроить валидацию, создать карточки, слайдеры, сворачиваемые меню, пагинацию, всплывающие подсказки и многое другое. Только после того как вы научитесь искать информацию в документации вы сможете создавать сайты любой сложности без сторонней помощи. Файлы к уроку: https://drive.google.com/file/d/1g5BV... Сайт по которому мы верстаем: https://morphismail.github.io/video_c... Оффициальный сайт Bootstrap 5: https://getbootstrap.com/ Bootstrap 5 на русском языке: https://getbootstrap.su/ и https://bootstrap5.ru/ Документация Bootstrap 5: https://getbootstrap.com/docs/5.0/get... Документация Bootstrap 5 на русском: https://getbootstrap.su/docs/5.0/gett... Условия участия в конкурсе по Bootstrap 5: 1. Написать любой комментарий 2. Сделать репост этого видео в любую соц. сеть 3. Сделать сайт на Bootstrap 5 - https://morphismail.github.io/super_j... 4. Отправить код в zip архиве на почту [email protected] (указать ваше имя в письме) 5. Готовый код можно отправлять в течении месяца после выхода этого видео! (работы принимаются до 22 июля 2021 года) 6. Победитель получит Супер курс по Java Script 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 Подведение итогов 20:37 Шапка, модальное окно, градиент, треугольник, адаптивное видео 26:10 Документация: https://getbootstrap.com/docs/5.0/lay... 31:23 Плавная прокрутка до якоря на Bootstrap 5 35:15 Градиентный фон: https://www.colorzilla.com/gradient-e... 41:36 Генератор треугольников: https://morphismail.github.io/myInstr... 46:50 Адаптивное видео: http://embedresponsively.com/ 50:07 Сетка 3 на 3 и иконки 01:07:37 Сетка 2 на 2 01:15:28 Как сделать Аккордеон на Bootstrap 5 https://getbootstrap.com/docs/5.0/com... 01:38:49 Адаптивные изображения на Bootstrap 5 https://getbootstrap.com/docs/5.0/con... 01:49:42 Практика и задание по работе с Bootstrap 5 01:56:42 Форма сбора средств Yoomoney https://yoomoney.ru/get 02:04:16 Завершение футера и Конкурс по Bootstrap 5 02:12:26 Обзор Документация Bootstrap 5 на русском ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor 💡 Telegram канал - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/387773773/teach 💰 Донаты на ЮMoney - https://sobe.ru/na/itdoctor #bootstrap #bootstrap5 #itdoctor