Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Рейтинг:

Издательство WebForMySelf Издательство: WebForMySelf

Страница автора - Андрей Кудлай - WebForMySelf Автор курса: Андрей Кудлай

Бесплатный видеокурс Тематика: Веб – разработка | Создание сайтов и блогов

Автор(ы): Андрей Кудлай

Представляем вам мини-курс «Bootstrap 4. Быстрый старт». Курс включает в себя 9 небольших уроков общей продолжительностью почти 2 часа. В курсе показана верстка макета из PSD с применением CSS-фреймворка Bootstrap 4. Bootstrap – это популярнейший на сегодняшний день CSS фреймворк, который позволяет быстро и просто верстать ровные и аккуратные макеты сайтов. Первая версия фреймворка увидела свет в 2011 году. С тех пор фреймворк развивался и сегодня актуальна уже четвертая версия Bootstrap. Посмотрев уроки предлагаемого курса, вы получите представление о Bootstrap и увидите, насколько данный фреймворк упрощает верстку сайта и позволяет сверстать полностью адаптивную страничку реального сайта в разы быстрее, по сравнению с версткой без использования CSS фреймворков. В уроках будут затронуты такие темы, как работа с сеткой Bootstrap и использование некоторых из компонентов фреймворка, например, Navbar и Carousel.

Смотреть видео:

Фреймворк Bootstrap 4. Быстрый старт. Урок №1. Стартовый шаблон Bootstrap. (Андрей Кудлай - Webformyself)

  • Урок №1. Стартовый шаблон Bootstrap

В этом видео вы увидите подготовку к верстке шаблона с использованием CSS фреймворка Bootstrap версии 4. В частности, в видео будет проанализирован шаблон PSD, будет взят стартовый шаблон Bootstrap, который предлагается в качестве заготовки для верстки в документации фреймворка, будут подключены шрифты с сервиса шрифтов Google Fonts. Также в уроке будет рассказано о вариантах подключения Bootstrap к шаблону и о преимуществах использования CSS фреймворков для верстки.

  • Урок №2. Компонент Navbar

Используемый в уроках шаблон предполагает наличие в шапке навигационной панели, в левой части которой находится логотип, а в правой части – меню сайта. Эту структуру можно очень быстро получить, если воспользоваться одним из готовых компонентов Bootstrap – это компонент Navbar. В уроке вы увидите, как использовать компонент Navbar, как выравнивать элементы в нем, как можно кастомизировать содержимое навигационной панели. Также в видео будет показан вариант симпатичного эффекта анимации для меню.

  • Урок №3. Компонент Carousel

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

  • Урок №4. Одиночный пост

В этом видеоуроке будет показана верстка и оформление секции с одиночным постом. Это довольно простая секция, в которой находится наименование статьи, краткое ее содержание и ссылка на полный текст статьи.

  • Урок №5. Сетка постов

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

  • Урок №6. Кнопка Load More

В макете, верстка которого показана в данных уроках, имеется кнопка Load More, смысл которой – получение записей при клике по кнопке. Делается это при помощи AJAX’a. Из этого видео вы узнаете, как можно решить эту задачу. Также в видео показано использование нового для Bootstrap компонента – это компонент Spinners. Используя его, можно добавить для кнопки эффект анимации, который даст понять пользователю, что происходит загрузка данных.

  • Урок №7. Секция с формой

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

  • Урок №8. Футер сайта

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

  • Урок №9. Адаптивность сайта

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


Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Создание интернет-магазина." (Андрей Бернацкий, Андрей Кудлай - Webformyself)


5 бесплатных видеоуроков покажут Вам процесс создания интернет-магазина с нуля: от дизайна до программирования...

Видеокурс
Видео урок


Видеокурс "Премиум — год в эфире. Сезон 2012" (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)


Без ложной скромности заявляем: наша с вами модель обучения оказалась очень востребованной. Даже более востребованной, чем мы ожидали вначале. На протяжении 2012 года тысячи людей оформили премиум-подписку...

Видеокурс
Видео урок


Видеокурс "Премиум уроки по созданию сайтов". (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)


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

Видеокурс
Видео урок


Видеокурс "Интернет-магазин под ключ". (Андрей Бернацкий, Андрея Кудлай - Webformyself)


Мощнейшее Практическое Руководство от Мастеров Сайтостроения — просто СМОТРИ и ДЕЛАЙ! Для тех, кто спит и видит себя высокооплачиваемым спецом по разработке интернет-магазинов и сайтов любой сложности в совершенстве...

Видеокурс
Видео урок


Видеокурс "Премиум — 2 год в эфире. Сезон 2013." (Андрей Бернацкий, Андрей Кудлай, Виктор Гавриленко, WebForMySelf)


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

Видеокурс
Видео урок


Видеокурс "Фреймворк Bootstrap: практика адаптивной верстки от А до Я". (Андрей Кудлай - Webformyself)


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

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "WordPress – основы создания тем". (Андрей Кудлай - Webformyself)


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

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Фреймворк Bootstrap. Верстаем адаптивно, просто, быстро! ". (Андрей Кудлай - Webformyself)


Прямо сейчас забирайте БЕСПЛАТНО пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap от наиболее авторитетного в Рунете обучающего издательства для веб-мастеров WebForMyself....

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "CakePHP - мощь и гибкость современного PHP-фреймворка". (Андрей Кудлай - Webformyself)


Хотите брать самые дорогие заказы на фрилансе или продвигаться по карьерной лестнице в веб-студиях как программист и веб-мастер?...

Видеокурс
Видео урок


Видеокурс "WordPress - Профессионал". (Андрей Кудлай и команда WebForMySelf)


Представляем вам уникальную информацию по API WordPress, благодаря которой вы научитесь писать плагины и виджеты… и станете одним из самых востребованных и высокооплачиваемых специалистов по WordPress...

Видеокурс
Видео урок


Видеокурс "WordPress-Мастер: разработка тем для WordPress". (Андрей Кудлай - Webformyself)


Видеокурс «WordPress-Мастер: разработка тем для WordPress» состоит из трех частей: одной теоретической и двух практических. Приобретая данный курс, вы получаете целостный продукт, в котором есть все необходимое для изучения и работы с WordPress......

Видеокурс
Видео урок


Видеокурс "WordPress-Мастер: от Личного блога до Премиум шаблона." (Андрей Кудлай - WebForMySelf)


На сегодняшний день это единственная обучающая система в Рунете, которая гарантирует, что Вы сможете на профессиональном уровне создавать адаптивные сайты на WordPress — с Вашим уникальным дизайном и под любые Ваши цели!...

Видеокурс
Видео урок


Видеокурс "1С-Битрикс. Практика создания веб-проектов!". (Андрей Кудлай - Webformyself)


В курсе изучается одна из наиболее популярных CMS в Рунете-1С-Битрикс.Данный движок позволяет создавать сайты абсолютно любой направленности и абсолютно любого уровня сложности.Это может быть:интернет-магазин,корпоративный сайт компании,информационный....

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Фреймворк Yii2: теория и первая практика". (Андрей Кудлай - Webformyself)


В этом мини-курсе, состоящем из 6 уроков, мы познакомимся с вами с современным и одним из наиболее востребованных и популярнейших фреймворков в Рунете – это PHP фреймворк Yii2. Фреймворк Yii2 – это программный каркас для создания веб-приложений.....

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "CMS 1C-Битрикс: быстрый старт, первые результаты". (Андрей Кудлай - Webformyself)


Данный мини-курс призван познакомить вас с основами создания шаблонов для битрикса, а также дать общее представление об этой CMS и познакомить с основами работы в ней. Уже начиная с первого урока мы с вами перейдем к практике и установим Битрикс на......

Видеокурс
Видео урок


Видеокурс "Фреймворк CakePHP: с Нуля до Гуру на примере создания корпоративного сайта". (Андрей Кудлай - Webformyself)


Первый и единственный в Рунете исчерпывающий видеокурс на тему работы с фреймворком CakePHP… Уже в ближайшие 2 месяца вы из полного новичка веб-программирования превратитесь в профессионала....

Видеокурс
Видео урок


Видеокурс "Интернет-магазин на OpenCart. Создание магазина с уникальным шаблоном". (Андрей Кудлай - Webformyself)


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

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "OpenCart: быстрый старт, первые результаты". (Андрей Кудлай - Webformyself)


OpenCart — это бесплатная CMS с открытым исходным кодом для создания интернет-магазина. OpenCart обладает достаточно простой структурой и позволяет создавать интернет-магазины любой сложности.....

Видеокурс
Видео урок


Видеокурс "Фреймворк YII2 с Нуля до Профи. Быстрая разработка с современным фреймворком" (Андрей Кудлай - WebForMySelf)


Фреймворк Yii2 – это программный каркас для создания веб-приложений, написанный на PHP. Фреймворк Yii2 позволяет создавать сайты любого уровня сложности.....

Видеокурс
Видео урок


Видеокурс "PHP-Мастер. От теории до собственной CMS интернет-магазина". (Андрей Кудлай - Webformyself)


В видеокурсе показано не только создание движка для интернет-магазина, но еще и создается собственный фреймворк, на котором и пишется CMS. В курсе разрабатывается собственный РНР-фреймворк, который вы сможете в дальнейшем использовать многократно.......

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "PHP. Прием платежей на сайте". (Андрей Кудлай - Webformyself)


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

Видеокурс
Бесплатный видеокурс


Бесплатный видеокурс "Фреймворк Laravel. Быстрый старт". (Андрей Кудлай - Webformyself)


Представляем вам мини-курс «Фреймворк Laravel. Быстрый старт». Курс включает в себя 7 небольших уроков и здесь вы познакомитесь с наиболее популярным современным фреймворком для создания сайтов – Laravel.

Видеокурс
Видео урок


Видеокурс "Фреймворк Bootstrap 4 + WordPress 5. Руководство по адаптивной верстке". (Андрей Кудлай - Webformyself)


Уникальность курса состоит в том, что здесь вы найдете не только уроки по CSS-фреймворку Bootstrap 4, но и по CMS WordPress. Созданная в курсе верстка на Bootstrap устанавливается на CMS №1 в мире – WordPress. Таким образом, в одном месте показан весь....

Видеокурс
Видеокурс


Видеокурс "Laravel. Полное руководство". (Андрей Кудлай - Webformyself)


Видеокурс состоит из 2 больших разделов и включает в себя 58 уроков общей продолжительностью около 21 часа.

Видеокурс
Видеокурс


Видеокурс "Фреймворк Yii2. Быстрая разработка с современным фреймворком". (Андрей Кудлай - Webformyself)


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

Видеокурс
Видео урок


Видеокурс "Python. Полное руководство". (Андрей Кудлай - Webformyself)


Видеокурс состоит из 2 больших разделов и включает в себя 72 урока общей продолжительностью более 23 часов. Первый раздел является квинтэссенцией тщательно отобранной. Второй большой раздел видеокурса полностью посвящен изучению библиотеки Tkinter.

Видеокурс
Бесплатный видеокурс


Бесплатный видеокурс "Фреймворк Yii2. Быстрый старт". (Андрей Кудлай - Webformyself)


В этом мини-курсе, состоящем из 6 уроков, вы познакомитесь с фреймворком Yii2. Фреймворк Yii2 – это программный каркас для создания веб-приложений, написанный на PHP. Данный фреймворк позволяет создавать сайты любого уровня сложности визитка, блог....

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Фреймворк Bootstrap 4. Быстрый старт". (Андрей Кудлай - Webformyself)


Представляем вам мини-курс «Bootstrap 4. Быстрый старт». Курс включает в себя 9 небольших уроков общей продолжительностью почти 2 часа. В курсе показана верстка макета из PSD с применением CSS-фреймворка Bootstrap 4. Bootstrap – это популярнейший......

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Python. Быстрый старт". (Андрей Кудлай - Webformyself)


Посмотрев уроки предлагаемого курса, вы получите представление о Python, узнаете о сферах его применения, о том, какие программы и приложения позволяет создавать этот замечательный язык программирования. Из предлагаемых уроков вы узнаете, как установить..

Это видеокурс
Видеокурс


Видеокурс "Django. Полное руководство". (Андрей Кудлай - webformyself)


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

Это видеокурс
Бесплатный видеокурс


Бесплатный видеокурс "Django. Быстрый старт". (Андрей Кудлай - webformyself)


Django – это веб-фреймворк на языке программирования Python, использующий архитектурный паттерн MVC. Первая версия фреймворка увидела свет в 2005 году. С тех пор фреймворк активно развивается и сегодня актуальна уже третья версия Django, которая и будет.
КОЛЛЕКЦИЯ БЕСПЛАТНОГО ВИДЕО

Если Вы не нашли видео на сайте то воспользуйтесь наши каналом с большим количеством разнообразных видео курсов на различные темы

Смотреть видео Смотреть видео

ПОПУЛЯРНЫЕ КНИГИ, КУРСЫ И ТРЕНИНГИ

Видеокурс Бесплатный видео урок
Видеокурс Бесплатный видео урок
Видеокурс Видео урок
Видеокурс Видео урок
Видеокурс Видеокурс
Видеокурс Бесплатный видео урок

БЕСПЛАТНОЕ ВИДЕО, МИНИ - КУРСЫ

Промо ролики видеокурса WordPress – основы создания тем. (Андрей Кудлай - Webformyself)
Промо ролики видеокурса Мини-курс. Фреймворк Bootstrap 4. Быстрый старт. (Андрей Кудлай - Webformyself)
Промо ролики видеокурса Фреймворк Bootstrap. Верстаем адаптивно. (Андрей Кудлай - Webformyself)
Промо ролики видеокурса OpenCart: быстрый старт. (Андрей Кудлай - Webformyself)
Видеокурс Бесплатный видео урок
Промо ролики видеокурса CMS 1C-Битрикс быстрый старт, первые результаты. (Андрей Кудлай - Webformyself)