Уроки Bootstrap 4

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

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

При помощи Bootstrap можно быстро добавлять готовые стили к веб проектам. В курсе мы научимся работать с Бутстрап на практике и познакомимся с разработкой красивых веб сайтов на основе фреймворка. Мы создадим полноценный сайт с использованием как готовых стилей, так и с написанием своих стилей на CSS.

Видеоурок

Полезные ссылки:


Информация про Bootstrap

Bootstrap изначально разрабатывался для популярнейшей соцсети Twitter, но его роль выходит далеко за пределы одного сервиса. Сегодня является одним из самых используемых и эффективных модулей CSS. Данный фреймворк включает и другие широко известные языки – HTML и Javascript


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

Что такое Bootstrap 4?

Bootstrap 4 - это новая и наиболее актуальная версия фреймворка. Бутстрап часто обновляется и с каждой новой версией добавляются новые функции и возможности в фреймворк. 


В 4 версии была добавлена поддержка технологии FlexBox, а также поддержка системы CSS сеток.


Ознакомиться с технологией FlexBox можно из видео ниже:




План курса

В курсе мы на практике ознакомимся с разработкой веб сайтов на Bootstrap. Мы создадим веб сайт при помощи встроенных классов Bootstrap, а также добавим свои собственные стили, написанные на языке CSS.


По итогу мы реализуем современный веб сайт, который будет обладать красивым и адаптивным дизайном.


Перед началом курса вам стоит изучить такие технологии, как: HTML, CSS и Bootstrap. Если что-то из этого списка вы не знаете, то можете просмотреть соответсвующие курсы на нашем сайте.

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Ссылки в тег Head
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

Онлайн редактор кода

Загрузка...

Задание к уроку

Установка инструментов

Установите текстовый редактор Atom, а также выведите в браузере текст: «Все работает».

Посмотреть ответ

Скачать Atom можно с их официального веб сайта.


Откройте Atom и создайте внутри него файл index.html. Поместите в файл следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Страниац</title>
</head>
<body>
	<p>Все работает</p>
</body>
</html>

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Уроки Python Django / Создание сайта
12 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Современная вёрстка адаптивного веб-сайта
Создание блога на Ruby On Rails
8 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Комментарии для сайта Cackle