BOOTSTRAP

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

4.8 / 49

О курсе



План курса


Free Level
Знакомство с Bootstrap. Установка
В этом уроке мы познакомимся с фреймворком Bootstrap, установим его и создадим структуру каталогов для нашего будущего проекта
00:11:20
Free Level
Классы container и container-fluid
В этом уроке вы научитесь работать с классами фреймворка Bootstrap, такими как .container и .container-fluid
00:05:44
Free Level
Задание 3: Тест
Пройдите тестирование
00:00:15
Free Level
Grid System
Интерактивное упражнение
00:02:00
Free Level
Grid System. Класс row
В этом уроке вы узнаете для чего нужен класс row
00:01:12
Free Level
Задание 6: Тест
Пройдите тестирование
00:00:15
Free Level
Grid Stystem. Класс .row
Интерактивное упражнение
00:02:00
Free Level
Grid System. Позиционирование блоков
В этом уроке мы рассмотрим классы для работы с позиционированием блоков в фреймворке Bootstrap
00:06:41
Free Level
Grid System. Классы .col-lg-*, .col-md-*, col-xs-*, col-sm-*
Интерактивное упражнение
00:02:00
Free Level
Задание 10: Тест
Пройдите тестирование
00:00:15
Free Level
Классы для позиционирования при разных размерах экрана
В этом уроке вы узнаете про еще несколько полезных классов фреймворка Bootstrap: hidden-*, show-*, push, pull
00:06:16
Free Level
Задание 12: Тест
Пройдите тестирование
00:00:15
Free Level
Класс hidden-*
Интерактивное упражнение
00:02:00
Free Level
Классы push и pull
Интерактивное упражнение
00:03:00
Free Level
Navbar
Начнем создавать верстку сайта Киномонстр. Изучим новые классы Bootstrap для создания меню сайта
00:07:58
Free Level
Navbar
Интерактивное упражнение
00:02:00
Premium Level
Navbar. Продолжение
В этом уроке изучим еще несколько классов Bootstrap для работы с навигацией сайта
00:04:57
Premium Level
Navbar toggle
Интерактивное упражнение
00:03:00
Premium Level
Navbar. Логотип и слоган
В этом уроке мы продолжим создавать верхний блок сайта и сверстаем логотип и слоган
00:07:40
Premium Level
Задание 20: Тест
Пройдите тестирование
00:00:20
Premium Level
Navbar. Стили для пунктов меню
В этом уроке мы продолжим работать над верхним блоком сайта и напишем CSS-стили для меню
00:07:12
Premium Level
Header. Логотип и слоган
Интерактивное упражнение
00:00:30
Premium Level
Navbar. Продолжение
В этом уроке мы улучшим внешний вид меню для мобильных устройств
00:03:09
Premium Level
Задание 24: Тест
Пройдите тестирование
00:00:15
Premium Level
Navbar. Улучшим внешний вид для мобильного устройства
Интерактивное упражнение
00:02:00
Premium Level
Header. Заключительная часть
В этом уроке мы закончим создавать header
00:09:16
Premium Level
Header. Заключительная часть
Интерактивное упражнение
00:05:00
Premium Level
Структура шаблона страниц
В этом уроке мы создадим Footer (нижнюю часть сайта) и структуру для всех страниц
00:11:45
Premium Level
Структура шаблона страниц
Интерактивное упражнение
00:02:00
Premium Level
Задание 30: Тест
Пройдите тестирование
00:00:10
Premium Level
Главная страница. Блок с фильмами
В этом уроке мы начнем создавать блоки с фильмами
00:10:44
Premium Level
Главная страница. Блок с фильмами. CSS-стили
В этом уроке мы напишем стили к блоку с фильмами
00:04:57
Premium Level
Главная страница. Блок с фильмами
Интерактивное упражнение
00:05:00
Premium Level
Главная страница. Записи блога.
В этом уроке мы изучим еще несколько полезных классов фреймворка Bootstrap и создадим блок с постами
00:05:58
Premium Level
Главная страница. Классы кнопок
Интерактивное упражнение
00:02:00
Premium Level
Задание 36: Тест
Пройдите тестирование
00:00:30
Premium Level
Главная страница. Левый блок
В этом уроке начнем создавать левый блок сайта и изучим компонент фреймворка Bootstrap - panel
00:15:11
Premium Level
Panel
Интерактивное упражнение
00:03:00
Premium Level
Главная страница. Левый блок. Часть 2
В этом уроке продолжим создавать левую часть сайта и создадим панель для формы входа, а также изучим класс input-groups
00:05:17
Premium Level
Главная страница. Левый блок. Часть 3
В этом уроке мы создадим еще одну панель в левом блоке сайта, отображающая рейтинг фильмов, а также изучим новый компоненты фреймворка Bootstrap: list-group, badges
00:07:50
Premium Level
Panel. Part3
Интерактивное упражнение
00:05:00
Premium Level
Главная страница. Левый блок. Часть 4
В этом уроке мы закончим создавать главную страницу сайта Киномонстр и изучим еще несколько полезных классов фреймворка Boostrap
00:07:11
Premium Level
Panel. Part 4
Интерактивное упражнение
00:02:00
Premium Level
Страница просмотра фильмов. Адаптивный видеоплеер
В этом уроке мы начнем создавать страницу просмотра фильмов и изучим еще один полезный класс Bootstrap, который позволяет встроенное видео на сайт с популярных видеохостингов таких как Youtube, Vimeo сделать адаптивным
00:04:47
Premium Level
Страница просмотра фильмов. Часть 2
В этом уроке мы создадим следующий блок страницы просмотра фильмов и познакомимся с компонентом well фреймворка Bootstrap
00:06:11
Premium Level
Страница просмотра фильмов. Часть 3
В этом уроке мы завершим создание страницы просмотра фильмов на фреймворке Bootstrap
00:08:55
Premium Level
Страница просмотра фильмов. Блок отзывы
Интерактивное упражнение
00:03:00
Premium Level
Страница Films. Часть 1
В этом уроке мы создадим еще одну страницу films.html и при создании изучим еще несколько полезных компонентов фреймворка Bootstrap
00:12:48
Premium Level
Страница Рейтинг фильмов
В этом уроке мы создадим страницу с рейтингом фильмов, а также изучим новые компоненты фреймворка Boostrap
00:16:07
Premium Level
Заключительная часть
В этом уроке мы рассмотрим остальные компоненты фреймворка Bootstrap, которые не затронули ранее в данном курсе
00:08:58
Посмотреть весь план обучения

Отзывы

21.10.2017
Константин Лавровски...

Коротко и чётко, спасибо.

02.10.2017
Дмитрий Квачук

Основы и примеры - это колоссальный задел для дальнейшего обучения BOOTSTRAP. Хороший курс. Так держать.

28.09.2017
Александр Шустенков

Курс понравился, много узнал интересного. Теперь главное больше практиковаться.....

19.09.2017
Владимир Соловьев

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

10.09.2017
Никита Толмач

Хороший курс, намного меньше кода)

31.07.2017
Александр

Хороший старт! Всем советую, после прохождения курса никаких сложностей с bootstrap-ом не возникает. Автору спасибо =)

27.07.2017
Nadezhda Kudasheva

Курс очень простой и для новичка очень подойдет.

29.06.2017
student_B1eOljF6

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

14.06.2017
Сергей Сафронов

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

11.06.2017
Александр Кулужин

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

08.06.2017
Татьяна Леонова

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

Преподаватель

Sergey Nikonov
Сергей Никонов
- Опыт в веб-разработке более 10 лет

- Работал над высоконагруженными веб-проектами в крупных компаниях США и ЕВРОПЫ

- Провел несколько десятков оффлайн и онлайн семинаров на тему веб-разработки

Всего заданий: 50

Интерактивные задания: 17

Видеоуроки: 25

Тесты: 8


Продолжительность: ~4 часа
  • Константин Лавровски...
    1245 xp
    1
  • Илья Зайцев
    1156 xp
    2
  • Dmitry
    923 xp
    3
  • Maxim Cherednichenko
    743 xp
    4
  • Иван Литовченко
    469 xp
    5
  • У вас 0 XP за курс BOOTSTRAP

    Бросить вызов?