Курс BOOTSTRAP

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

4.9 / 528
Начать обучение Регистрация

О курсе

Bootstrap - это css-фреймворк с готовыми css-классами и html/jquery компонентами, с помощью которых, вы очень быстро сможете создать интерфейс веб-сайта, способный адаптироваться под мобильных устройства.

С помощью Bootstrap, верстка сайтов становиться похожа на сборку конструктора из деталей. Вы сможете за несколько минут встроить верстку на ваш сайт следующих популярных компонентов: Адаптивное горизонтальное меню, красивые кнопки, html-формы с дополнительными элементами, прогресс бар, каталог товаров и многое другое!


Начать обучение

План курса

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


Free Level
В этом уроке мы познакомимся с фреймворком Bootstrap, установим его и создадим структуру каталогов для нашего будущего проекта
00:11:20
Free Level
В этом уроке вы научитесь работать с классами фреймворка Bootstrap, такими как .container и .container-fluid
00:05:44
Free Level
Пройдите тестирование
00:00:15
Free Level
Интерактивное упражнение
00:02:00
Free Level
В этом уроке вы узнаете для чего нужен класс row
00:01:12
Free Level
Пройдите тестирование
00:00:15
Free Level
Интерактивное упражнение
00:02:00
Free Level
В этом уроке мы рассмотрим классы для работы с позиционированием блоков в фреймворке Bootstrap
00:06:41
Free Level
Интерактивное упражнение
00:02:00
Free Level
Пройдите тестирование
00:00:15
Free Level
В этом уроке вы узнаете про еще несколько полезных классов фреймворка Bootstrap: hidden-*, show-*, push, pull
00:06:16
Free Level
Пройдите тестирование
00:00:15
Free Level
Интерактивное упражнение
00:02:00
Free Level
Интерактивное упражнение
00:03:00
Free Level
Начнем создавать верстку сайта Киномонстр. Изучим новые классы Bootstrap для создания меню сайта
00:07:58
Free Level
Интерактивное упражнение
00:02:00
Premium Level
17. Navbar. Продолжение
В этом уроке изучим еще несколько классов Bootstrap для работы с навигацией сайта
00:04:57
Premium Level
18. Navbar toggle
Интерактивное упражнение
00:03:00
Premium Level
19. Navbar. Логотип и слоган
В этом уроке мы продолжим создавать верхний блок сайта и сверстаем логотип и слоган
00:07:40
Premium Level
20. Тест
Пройдите тестирование
00:00:20
Premium Level
21. Navbar. Стили для пунктов меню
В этом уроке мы продолжим работать над верхним блоком сайта и напишем CSS-стили для меню
00:07:12
Premium Level
22. Header. Логотип и слоган
Интерактивное упражнение
00:00:30
Premium Level
23. Navbar. Продолжение
В этом уроке мы улучшим внешний вид меню для мобильных устройств
00:03:09
Premium Level
24. Тест
Пройдите тестирование
00:00:15
Premium Level
25. Navbar. Улучшим внешний вид для мобильного устройства
Интерактивное упражнение
00:02:00
Premium Level
26. Header. Заключительная часть
В этом уроке мы закончим создавать header
00:09:16
Premium Level
27. Header. Заключительная часть
Интерактивное упражнение
00:05:00
Premium Level
28. Структура шаблона страниц
В этом уроке мы создадим Footer (нижнюю часть сайта) и структуру для всех страниц
00:11:45
Premium Level
29. Структура шаблона страниц
Интерактивное упражнение
00:02:00
Premium Level
30. Тест
Пройдите тестирование
00:00:10
Premium Level
31. Главная страница. Блок с фильмами
В этом уроке мы начнем создавать блоки с фильмами
00:10:44
Premium Level
32. Главная страница. Блок с фильмами. CSS-стили
В этом уроке мы напишем стили к блоку с фильмами
00:04:57
Premium Level
33. Главная страница. Блок с фильмами
Интерактивное упражнение
00:05:00
Premium Level
34. Главная страница. Записи блога.
В этом уроке мы изучим еще несколько полезных классов фреймворка Bootstrap и создадим блок с постами
00:05:58
Premium Level
35. Главная страница. Классы кнопок
Интерактивное упражнение
00:02:00
Premium Level
36. Тест
Пройдите тестирование
00:00:30
Premium Level
37. Главная страница. Левый блок
В этом уроке начнем создавать левый блок сайта и изучим компонент фреймворка Bootstrap - panel
00:15:11
Premium Level
38. Panel
Интерактивное упражнение
00:03:00
Premium Level
39. Главная страница. Левый блок. Часть 2
В этом уроке продолжим создавать левую часть сайта и создадим панель для формы входа, а также изучим класс input-groups
00:05:17
Premium Level
40. Главная страница. Левый блок. Часть 3
В этом уроке мы создадим еще одну панель в левом блоке сайта, отображающая рейтинг фильмов, а также изучим новый компоненты фреймворка Bootstrap: list-group, badges
00:07:50
Premium Level
41. Panel. Part3
Интерактивное упражнение
00:05:00
Premium Level
42. Главная страница. Левый блок. Часть 4
В этом уроке мы закончим создавать главную страницу сайта Киномонстр и изучим еще несколько полезных классов фреймворка Boostrap
00:07:11
Premium Level
43. Panel. Part 4
Интерактивное упражнение
00:02:00
Premium Level
44. Страница просмотра фильмов. Адаптивный видеоплеер
В этом уроке мы начнем создавать страницу просмотра фильмов и изучим еще один полезный класс Bootstrap, который позволяет встроенное видео на сайт с популярных видеохостингов таких как Youtube, Vimeo сделать адаптивным
00:04:47
Premium Level
45. Страница просмотра фильмов. Часть 2
В этом уроке мы создадим следующий блок страницы просмотра фильмов и познакомимся с компонентом well фреймворка Bootstrap
00:06:11
Premium Level
46. Страница просмотра фильмов. Часть 3
В этом уроке мы завершим создание страницы просмотра фильмов на фреймворке Bootstrap
00:08:55
Premium Level
47. Страница просмотра фильмов. Блок отзывы
Интерактивное упражнение
00:03:00
Premium Level
48. Страница Films. Часть 1
В этом уроке мы создадим еще одну страницу films.html и при создании изучим еще несколько полезных компонентов фреймворка Bootstrap
00:12:48
Premium Level
49. Страница Рейтинг фильмов
В этом уроке мы создадим страницу с рейтингом фильмов, а также изучим новые компоненты фреймворка Boostrap
00:16:07
Premium Level
50. Заключительная часть
В этом уроке мы рассмотрим остальные компоненты фреймворка Bootstrap, которые не затронули ранее в данном курсе
00:08:58


Посмотреть весь план обучения


Отзывы(140)

Отзывы о курсе по фреймворку Bootstap. Оставьте ваш отзыв после прохождения курса верстки на Bootstrap.

23.09.2018
MIJAIL NAAL GONZALEZ

Спасибо за курс!

18.09.2018
Елена Муляр

Понравился курс BOOTSTRAP

17.09.2018
Николай Волков

Огонь!!! Едем дальше!!!

17.09.2018
Андрей Тюрин

Хороший курс для начала

16.09.2018
Евгений Топорков

Отличный базовый курс! То что нужно начинающему! Как говорится: всё разложено по полочкам.

12.09.2018
Сергей Занько

Отличные уроки!

02.09.2018
Руслан Абильдин

Очень интересный и понятный курс!!!

02.09.2018
Джохар Хасаев

Чуть сложнее чем HTML/CSS но в целом, классный модуль, я доволен!

30.08.2018
Сергей Праводелов

Все очень понятно

27.08.2018
Vasilyev Dmitriy

Отлично! Особенно последний урок!

26.08.2018
Кирилл Забавский

Отличный курс.

25.08.2018
Александр Котовский

Прекрасный курс Бутстрап

25.08.2018
Анастасия Севко

Отличный курс, мне очень понравился этот фреймворк! Большое спасибо Сергею!

25.08.2018
Руслан Шамсутдинов

Супер сайт, все ясно и подробно показано!

22.08.2018
Александр Гринев

Отлично!

17.08.2018
Вадим Губанов

С каждым курсом становится более понятен принцип работы. Высший балл!

15.08.2018
student_OivV5_MJ

Мне нравится!

13.08.2018
Дмитрий Хворов

Достаточно просто, но жаль, что документация на английском. Для некоторых это не очень удобно!

10.08.2018
Yana

Отличный модуль! Все понятно! Прошла с большим интересом чем HTML/CSS.

09.08.2018
Захарченко Владимир

Интересно

06.08.2018
Денис Волков

Классный и понятный курс для новичка!

06.08.2018
Ольга Левицкая

Курс замечательный. Всё становится понятно.

05.08.2018
Георгий Ксинтарис

Отлично все было, и понятно и интересно! Спасибо за данный курс!

04.08.2018
Глафира Крюкова

Все понятно и доступно

30.07.2018
Самир Мамедов

Прохожу 2 курс, все устраивает. Стоит своих денег на все 100%!

30.07.2018
student_VV4hPsBV

Отличный курс!

20.07.2018
Юрий

Хороший курс, хотя объяснений можно чуть побольше, но наверное мне просто было лень самому смотреть инфу

19.07.2018
Виталий Лукашин

Фреймворк Bootstrap - замечательный инструментарий с большим набором утилит, которые облегчают написание кода. Курс дает базовые знания по наборам HTML+CSS инструментов и шаблонов для верстки, предоставляя большое поле для самостоятельной работы...

13.07.2018
Александр Жаворонков

Курс ОТЛИЧНЫЙ! Подача информации последовательная, понятная.

10.07.2018
student_dLJJgNio

Как и предыдущий курс - на высоте!!!

09.07.2018
Сергей Луцик

Отличный курс! Автор все разложил по полочкам, за что ему отдельное спасибо! Приятно заниматься! Система домашних заданий и проверок также очень по душе. Особенно полезен курс для тех, у кого мало свободного времени для полноценного вебинара с двухчасовыми занятиями.

08.07.2018
Яков Колисниченко

Автор действительно показывает каким должен быть подход к работе чтобы стать специалистом. Не на одном бесплатном ресурсе и платном курсе такого не было у меня. Буду дальше учиться, Спасибо за курс!

04.07.2018
Максим Кузьмин

Отличный модуль! Изучая второй модуль, уже создал мини-сайт в дополнение к уже действующему интернет-магазину, который делал под заказ и вижу теперь планы по изменению основного сайта :)

29.06.2018
Фархат Затин

Хороший курс! Bootstrap гораздо упрощает верстку сайта!

28.06.2018
Светлана Ермакова

Отличный курс, не понимаю, как я раньше могла жить без бутстрапа!

27.06.2018
Ольга Тюркина

Курс понравился!

26.06.2018
Алёна Сахарова

Курс понравился, все просто и понятно. Много практики и примеров.

22.06.2018
Дамир Каримов

Хороший курс, можно было бы чуть по подробнее, а так норм

Начать обучение

Часто задаваемые вопросы

Почему такая низкая цена?

Одна из миссий проекта FructCode сделать дорогое ИТ-образование доступным для всех!

Когда начнется обучение? Нужно ли ждать когда наберется группа?

Сразу после оплаты, вы получите полный доступ к данному курсу без ожиданий.

Получу ли я после прохождения курса сертификат?

Да! За успешное прохождение каждого курса, вы получите сертификат на нескольких языках: Русский, Английский, Немецкий, Французский, Итальянский. Все сертификаты, полученные за курсы, вы можете найти в вашем профиле

Как проходит обучение?

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

Актуальны ли курсы?

Да! Курсы на платформе FructCode достаточно часто обновляются, в том числе исходные коды.

Какое оборудование нужно для прохождения курса?

Курсы FructCode вы можете проходить в любой операционной системе - Windows, Mac OS или Linux, а также в мобильных устройствах. Тем не менее, для комфортного прохождения курсов FructCode, мы рекомендуем иметь монитор с разрешением экрана 1920x1080.

При прохождении курса я не знаю как выполнить задание, что делать?

Если в процессе прохождения курса у вас возникла проблема с выполнением задания и вопрос по пройденной теме курса, вы можете задать его в комьюнити FructCode - https://fructcode.com/ru/qa/, где другие студенты, которые успешно решили задание, вам обязательно помогут.

Что такое XP? Что оно дает?

XP - это сокращение от английского слова experience и переводится как опыт. За успешное прохождение задания вы получаете определенное количество XP. Чем больше XP вы накапливаете, тем больше опыта в программировании у вас становится.

Как участвовать в рейтинге? Я набрал достаточно XP, но не показываюсь в рейтингах курса, почему?

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

Что если мне не подойдет или не понравится курс?

Если в процессе прохождения курса вы поймете, что вам не подходит данный курс - в течении 30 дней с даты покупки, вы можете вернуть деньги в полном объеме. Для возврата средств напишите в службу поддержки на почту info@fructcode.com

У меня не работает видео лекция или не открывается задание, что делать?

Наиболее частая причина, если что-то не работает - это установленные некоторые расширения для браузера, например Adblock. Если у вас возникает техническая проблема, напишите пожалуйста в нашу службу поддержки на почту info@fructcode.com и мы в кратчайшее время постараемся помочь

У меня остались вопросы о курсе, кому я могу их задать?

Если у вас остались дополнительные вопросы о курсах FructCode, пожалуйста напишите в нашу службу поддержки на почту info@fructcode.com и мы постараемся ответить в ближайшее время.

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

Author FructCode
Сергей Никонов

- Опыт в веб-разработке более 10 лет 

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

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

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

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

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

Тесты: 8


Продолжительность: ~4 часа
  • Артем Николаевич
    1245 xp
    1
  • Александр Буклаков
    1156 xp
    2
  • Ляззат Бисенбаева
    449 xp
    3
  • Alexandr
    296 xp
    4
  • Роман Востриков
    238 xp
    5
  • У вас 0 XP за курс BOOTSTRAP

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