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

Навигация по странице:
Топ 20 курсов по Bootstrap

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

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

Данный курс посвящен основам Bootstrap 5 — одного из самых популярных css фреймворков. Его многогранность позволяет быстро создавать сложнейшие макеты. Адаптивность и доступность встроенных механизмов адаптации позволяют решать многие проблемы верстальщика за короткое время. Этот курс раскроет механизмы работы Bootstrap: сетка с адаптивностью, компоненты и утилиты. После окончания курсов вы сможете самостоятельно создать свой компонент, используя встроенные механизмы Bootstrap.

Bootstrap 5: Основы верстки
ШколаХекслет - школа программирования
Сайтhttps://ru.hexlet.io/
Дата началаВ любое время
Длительность10 часов
ИнтенсивностьОбучение в свободном режиме
Стоимость 3 900 ₽ в месяц за все курсы Хекслета
Формат обученияТеория, тесты, практика.
ТребованияНеобходимы знания css.

Программа:

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

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

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

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

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

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

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

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

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

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

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

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

Стоимость: 5970 руб.

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

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

Программа:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стоимость: 1 190 руб.

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

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

Программа:

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

Программа

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

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

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

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

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

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

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

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

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

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

Стоимость: 5970 рублей (Цифровая версия продукта)

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

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

Программа:

Теория

  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. Добавляем эффекты анимации

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

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

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

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

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

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

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

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

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

Стоимость: от 588 руб/мес.

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

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

Программа:

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

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

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

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

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

  • Сертификат

Уроки 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 скриптов
  • Сможете построить веб-сайт

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

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

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

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

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

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

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

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

Стоимость: Бесплатно

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

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

Плейлист:

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

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

Сайтhttps://itchief.ru/
Дата началаВ любое время
ДлительностьСрок обучения не ограничен
ИнтенсивностьОбучение в свободном режиме
СтоимостьБесплатно
Формат обученияМатериалы для чтения
Кому подойдетНеобходимы знания html/css

Содержание:

1.1. Подключение и настройка
  1. Что такое Bootstrap и зачем он нужен?
  2. Подключение фреймворка Bootstrap к сайту
  3. Сборка Bootstrap из исходных кодов
1.2. Верстка адаптивного макета
  1. Что такое адаптивный дизайн сайта?
  2. Элементы сетки и как их использовать для верстки макета
  3. Сетка Bootstrap 3
  4. Сетка Bootstrap 4
1.3. Стилизация контента и форм
  1. Работа с типографикой
  2. Оформление изображений
  3. Стилизация таблиц
  4. Стилизация figure и figcaption
  5. Стилизация форм
1.4. CSS-компоненты
  1. Alerts - сообщения
  2. Badges - бейджи
  3. Breadcrumb - хлебные крошки
  4. Buttons и button group – кнопки и группы кнопок
  5. Card - карточки
  6. List group - стилизованные списки
  7. Pagination - навигационный блок для пагинации
  8. Placeholders (в планах)
  9. Progress - индикаторы выполнения
  10. Spinners - спиннеры
  11. Устаревшие
1.5. JS-компоненты
  1. Accordion и collapse
  2. Carousel - карусель
  3. Dropdowns - выпадающие списки
  4. Modal - модальное окно
  5. Offcanvas (в планах)
  6. Popovers - всплывающий контент, информеры
  7. Scrollspy - выделение ссылок на основании положения прокрутки
  8. Navs - навигационные блоки
  9. Navbar - основное горизонтальное меню
  10. Tabs – вкладки
  11. Toast (в планах)
  12. Tooltips – всплывающие подсказки
  13. Устаревшие
1.6. Хелперы и утилитные классы
  1. Управление отображением элементов (Bootstrap 4)
  2. Управление границами и скруглениями углов элементов (Bootstrap 4)
  3. Вспомогательные классы
2. Создание различных решений и виджетов на Bootstrap
  1. Виджет для выбора даты и времени
  2. Создание выноски
  3. Галерея изображений
  4. Оформление карточки статьи или новости на сайте
  5. Оформление комментариев на сайте
  6. Таймлайн
  7. Форма обратной связи
3. Создание сайтов с использованием Bootstrap
  1. Верстка сайта визитки
4. Разное
  1. Оформление заголовков
  2. Offcanvas (изменение мобильного вида меню navbar)
  3. Сторонние компоненты для реализации основного меню
  4. Создание своих адаптивных контейнеров
  5. Инструкция по созданию дополнительных стилей к компонентам
  6. Шрифтовые иконки погоды
  7. Сайты, c которых можно бесплатно загрузить шаблоны и темы Bootstrap
  8. Справочник по CSS классам Bootstrap 3
  9. Инструменты для визуального проектирования макетов веб-страниц
  10. Оформление элементов Bootstrap в стиле Modern UI (Metro)
  11. Проверка HTML на соответствие структурам Bootstrap 3

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

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

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

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

Стоимость: Бесплатно

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

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

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

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

#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

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

Показать список
  1. Обзор, загрузка и подключение
  2. Шапка, модальное окно, градиент, треугольник, адаптивное видео
  3. Сетка 3 на 3 и иконки
  4. Сетка 2 на 2
  5. Как сделать Аккордеон на Bootstrap 5
  6. Адаптивные изображения на Bootstrap 5
  7. Практика и задание по работе с Bootstrap 5
  8. Форма сбора средств Yoomoney
  9. Завершение футера и Конкурс по Bootstrap 5
  10. Обзор Документация Bootstrap 5 на русском
  11. Подробный видео курс по Bootstrap 5 на русском языке
  12. Бесплатные иконки! Как использовать Bootstrap Icons v1.5.0 | Bootstrap 5 (2021)
  13. Конкурс по Bootstrap 5, Результаты и обзор кода победителя

Уроки 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. Видеоконтент адаптивно

Как сверстать шапку сайта на 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 (Футер)

Урок 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. Футер сайта

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. Сортировка таблицы и скидка на товар

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

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

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

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

Стоимость: Бесплатно

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

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

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

Открыть
  1. Как сделать модальное окно, всплывающее окно на сайте
  2. Как подключить Bootstrap фреймворк к сайту
  3. Как располагать элементы с помощью контейнеров фреймворка bootstrap
  4. Как сделать галерею картинок используя bootstrap
  5. Как сделать масштабируемую картинку с помощью bootstrap
  6. Как располагать элементы в контейнерах с помощью bootstrap
  7. Как использовать иконки в ваших кнопках, добавляем иконки на сайт
  8. Как быстро сделать сайт mobile friendly
  9. Разбираемся как сделать формы для сайта, отображаем их горизонтально и вертикально
  10. Вводный урок изучаем Bootstrap за 1 час, знакомство с элементами для начинающих
  11. Как сделать сайт на Бутстрап фреймворке 1/5
  12. Добавляем меню сайту на Бутстрап фреймворке 2/5
  13. Как расположить контент в контейнере Бутстрап фреймворка 3-5
  14. Как располагать контент по строкам Бутстрап фреймворка 4/5
  15. Как располагать контент по ячейкам Бутстрап фреймворка 5/5
  16. Уроки Bulma / Кнопки
  17. Как установить и использовать Sublime Text 3
  18. Как установить и использовать Sublime Text 3
  19. Программирование более 500 уроков
  20. Как я изучаю новый язык программирования / Только для спонсоров ))

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

Канал: ITDoctor

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

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

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

Стоимость: Бесплатно

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

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

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

Открыть список
  1. Верстка по макету PSD на Bootstrap4 + BEM
  2. Верстка меню по макету PSD на Bootstrap4 + BEM
  3. Шапка и О нас по макету PSD на Bootstrap4 + BEM
  4. Наши услуги по макету PSD на Bootstrap4 + BEM
  5. Пишем скрипт Портфолио на jQuery самостоятельно
  6. Оптимизируем и улучшаем Портфолио с фильтрацией на jQuery
  7. Верстаем блок Тарифные планы по макету на BS4+BEM
  8. Slick Слайдер настройка и верстка блока Наша Команда по макету на BS4+BEM
  9. Верстаем раздел Блог по макету PSD на Bootstrap4 + BEM
  10. Верстаем форму обратной связи и футер по макету PSD на Bootstrap4 + BEM
  11. Адаптивная версия для Планшетов по макету PSD на Bootstrap4 + BEM
  12. Адаптивная версия для Смартфонов по макету PSD на Bootstrap4 + BEM
  13. Адаптивная верстка по макету PSD от А до Я

Канал: 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

Верстка сайта 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


Bootstrap в примерах

Bootstrap в примерах

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

Автор: Сильвио Морето

Bootstrap и CSS-препроцессор Sass. Самое необходимое

Bootstrap и CSS-препроцессор Sass. Самое необходимое

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

Автор: Прохоренок Н.А.

Динамические сайты на HTML, CSS, JavaScript и Bootstrap. Практика, практика и только практика

Динамические сайты на HTML, CSS, JavaScript и Bootstrap. Практика, практика и только практика

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

Автор: Кириченко А.В., Дубовик Е.В.

НайтиКурс.Ру
Добавить комментарий