Мы предлагаем также и другие курсы web разработки:
Курсы СЕО
Курс "Создание Web-приложений в социальных сетях"
Курс "Разработка Web-приложений с применением технологии AJAX"

• Акцент в данном делается на наиболее важных моментах Отзывчивого WEB-дизайна (responsive web design) используя Bootstrap v3.2.0 Twitter Bootstrap.
• Курс посвящен адаптивной верстке.

Что такое адаптивный сайт?

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

Цель курса: Разработка адаптивного сайта

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

Преимущества Bootstrap - основы:
• сетка из 12 столбцов для расположения элементов на странице
• предназначен как для начинающих верстальщиков, так и профессионалов
• написан на less, что дает большой фронт работы (например, изменять кол-во столбцов, ширину и расстояние между ними)
• Responsive design.(Адаптивный дизайн) Меняется ширина макета, в зависимости от ширины окна браузера. Например, на 17'' мониторе сайт будет отображен по ширине во весь экран. А также на 19'' мониторе - сайт по ширине тоже будет отображен во весь экран. Это достигается за счет разной ширины столбцов сетки.
• кроссплатформленность ( все браузеры, мобильные устройства, планшеты, смартфоны). Есть также возможность скрывать элемент для определенного устройства.

ПЛАН КУРСА:

Занятие 1. Введение в Sublime Text 3. Изучение интерфейса и рабочего пространства Sublime Text 3. Стандарты HTML5 и CSS3

Установка плагинов для Sublime Text 3
Package Control: http://goo.gl/rava0k
SideBarEnhancements: http://goo.gl/feP6Zr
AdvancedNewFile: http://goo.gl/bhgmcw
Emmet: http://goo.gl/QTSldQ
Bootstrap 3 snippets: http://goo.gl/kfnx5g
AutoFileName: http://goo.gl/V2ZfpM
Tag: http://goo.gl/NtoZcp
ColorPicker: http://goo.gl/Z7Bz4H
FakeImg.pl: http://goo.gl/T6l6Sb
WebFont: http://goo.gl/WhLT8V
Стандарты HTML5 и CSS3
Обзор элементов в HTML5

Занятие 2. Как создать адаптивный дизайн сайта на CSS3

• Единицы измерения для адаптивного дизайна
• Работа с типографикой при адаптивном дизайне.
• Работа с изображениями при адаптивном дизайне.

Занятие 3. Трансформация. Техники адаптивного дизайна

• Трансформация меню, каталогов и контентной части в компьютере-планшете (для адаптивной версии сайта).
• Трансформация элементов и медиа на страницах:

• Отзывчивая типографика
• Гибкие макеты
• Создание Web-приложений по принципу «сначала мобильное»

Занятие 4. Адаптивный дизайн и создание мобильных сайтов. Изучаем Media-запросы

• Что что такое адаптивный дизайн и насколько важно сегодня адаптировать свои сайты под различные устройства
• Что такое медиа-запросы, как их корректно составлять и использовать для выбора разных CSS-стилей в зависимости от особенностей пользовательского дисплея или устройства, таких как ширина области просмотра и разрешение экрана.
• Медиа-типы и медиа-выражения
• Медиа-типы и параметры медиа-выражений
• Синтаксис медиа запросов
• Простые медиа-выражения

• Логический оператор not 
• Логический оператор only 
• Объединение медиа-выражений (and)
• Объединение медиа-запросов 

• Использование медиа-запросов
• Отдельный файл со ст илями

• Директива @import 
• Медиа-запросы непосредственно в CSS-файле

Занятие 5. Начало работы с bootstrap R

• Загрузка Bootstrap файлов
• Bootstrap Grid System
• Работа в Bootstrap Grid System
• Создание макетов в Bootstrap Grid System
• Видимость элемента в зависимости от размеров экрана устройства
• Создание Фиксированного макета с Bootstrap
• Создание макета жидкости с Bootstrap
• Создание Отзывчивого макета с Bootstrap
• Небольшое устройство (таблетка)
• Дополнительное небольшое устройство (телефон)

Занятие 6. Дизайн и форматирование текста содержания, таблицы, формы, списка изображения и иконки в Bootstrap

• Заголовки
• Параграфы
• Создание простой таблицы с Twitter Bootstrap
• Использование контекстных классов в Bootstrap таблице
• Twitter Bootstrap Список
• Создание Twitter Bootstrap Forms.
• Создание вертикальной формы макета
• Создание горизонтального макета формы
• Статическая форма управления
• Создание инлайн формы макета
• Twitter Bootstrap изображения
• Twitter Bootstrap миниатюры
• Twitter Bootstrap медиа-объекты

Занятие 7. Bootstrap NAV, NavBar, панели, Breadcrumbs, нумерация страниц, пейджер и прогресс баров

• Twitter Bootstrap Nav
• Создание выпадающего меню с Twitter Bootstrap Счета и таблетки
• Twitter Bootstrap NavBar
• Создание фиксированных NavBar с Twitter Bootstrap

Занятие 8. Разработка сайта на TWITTER BOOTSTRAP 3

• Установка HTML документа с необходимыми файлами
• BOOTSTRAP заголовок и отзывчивая навигация
• Добавление баннера на ваш загрузочный шаблон
• Использование системы сети BOOTSTRAP для создания контента области