Курс Bootstrap 3

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

Уроки верстки Bootstrap построены таким образом, что вы сможете уже через несколько уроков Bootstrap создать основу каркаса сайта!

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

О курсе

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

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

Создание сайтов на Bootstrap относится к Frontend(фронтенд) и специалисты со знанием Bootstrap ценятся на рынке труда.


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

План курса

Программа обучения состоит из видео уроков по фреймворку Bootstap, а также включает интерактивные тесты и уроки верстки Bootstrap, позволяющие закрепить полученные вами знания по 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

Получение сертификата об окончании курса



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


Отзывы(238)

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

14.02.2019
Vitali Brichkov

Просто понятно !!! Огромное спасибо !!!

13.02.2019
student_1xpQ30-X

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

13.02.2019
Alex

Отличный курс, все интересно и детально объясняется, нисколько не жалею потраченного времени на данный курс.

11.02.2019
Алексей Мясников

Хорошо

09.02.2019
Андрей Ермаков

Хороший модуль. всё очень доступно объяснено.

07.02.2019
Ульяна Бурмистрова

Очень удобно творить с помощью шаблонов Bootsrtap!

06.02.2019
Василий Никитков

Хороший курс. Интересные решения для быстрой верстки.

06.02.2019
Вадим

Хороший курс!

05.02.2019
Гуляев Мартинас

Очень все хорошо, объясняет понятно, даже проблем с ДЗ не было, теперь могу еще один сайт портировать под мобильные устройства и и прочие штучки))

04.02.2019
Даниил Жовтобрюх

2 курс также интересный!

03.02.2019
Ирфан Алимов

Неплохо, для новичка.

03.02.2019
student_yLK951-o

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

01.02.2019
Александр Ищенко

Очень понравился курс! Спасибо за полезную информацию и новые знания!

31.01.2019
Сергей Чураков

Очень интересно.

31.01.2019
Иван Конищев

Очень круто!

31.01.2019
andrew_fg

Замечательный курс! Хорошее вхождение в тему!

30.01.2019
Багатир Бахмудов

Все достаточно понятно и легко, но некоторые моменты не очень понятно объясняются.

30.01.2019
Albert Shtana

Спасибо за отличный курс!

29.01.2019
Андрей Федотов

Очень отличный курс

29.01.2019
Alexander Rozpadnyuk

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

27.01.2019
Виктор Ращектаев

Очень здорово!!!!!

27.01.2019
Герман Борисов

Данный курс, как и предыдущий, очень доступен для понимания и поможет при активной самостоятельной работе быстро научиться верстать собственные сайты в соответствии с современными канонами. Спасибо!

25.01.2019
Вячеслав Чермашенцев

Отлично! Спасибо!

25.01.2019
Валерий Иванович Каб...

Благодарю за курс! все доходчиво объяснено, в целом понимание осталось, осталось все укрепить практикой.

24.01.2019
student_AskzJA9j

Спасибо за курс! Очень нравится!

24.01.2019
Анатолий Соловьев

За не большую сумму денег я приобрел большое количество знаний. СПАСИБО!

23.01.2019
Александр Кузьмичёв

Спасибос, Сергей, очень благодарен за такой контент

22.01.2019
Roman Sobotovych

Хороший курс, мне понравился. Идём дальше на PhP:)

22.01.2019
Иван Медведев

Курс хороший, получил представление и навыки фреймворка Bootstrap 3, действительно облегчает вёрстку страниц сайта. Будем учиться дальше.

20.01.2019
Даниил Прусаков

Я получил представление о фреймворке Bootstrap. Спасибо.

19.01.2019
Виктор Семенов

Спасибо большое вам, со всеми праздниками вас.

19.01.2019
Леонид Филатов

Замечательный курс, наглядно показывающий преимущества использования BOOTSTRAP.

17.01.2019
Сергей Телепнёв

Всё изложено достаточно хорошо и доступно! Спасибо!

17.01.2019
Василий Кулев

Спасибо) Хороший курс.

17.01.2019
Игорь Прозоров

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

17.01.2019
Александр Бет

Курс очень понравился, все лаконично. Но в то же время понятно и наглядно.

16.01.2019
Alexander Pop

Спасибо, модуль интересный))

13.01.2019
Владимир Кислинский...

Доступно для понимания!

13.01.2019
Александр Касьяненко

Спасибо за информацию с каждым блоком все понятнее и интереснее заниматься

13.01.2019
Рихард Алиханов

Побольше бы работы с блоками, для полного понимания

11.01.2019
Anton Ivantsov

Супер!

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

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

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

Одна из миссий проекта 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 и мы постараемся ответить в ближайшее время.

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

Сергей Никонов. Автор курса программирования Bootstrap 3 | FructCode
Сергей Никонов

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

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

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

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

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

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

Тесты: 8


Продолжительность: ~4 часа
  • Дмитрий Прихожий
    1245 xp
    1
  • Влад Миронов
    1041 xp
    2
  • Alex Teperchuk
    923 xp
    3
  • Роман Кабаков
    918 xp
    4
  • Вадим
    649 xp
    5
  • У вас 0 XP за курс Bootstrap 3

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