BOOTSTRAP

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

4.9 / 40

Поделитесь страницей с друзьями:

План курса


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
показать все задания

Отзывы

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 часа
  • Ban Max
    923 xp
    1
  • Sergey Gonhar
    658 xp
    2
  • student_0512
    373 xp
    3
  • kainskii
    373 xp
    4
  • Виктор Макаров
    327 xp
    5
  • У вас 0 XP за курс BOOTSTRAP

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