• Акцент робиться на найбільш важливих моментах 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 для створення контенту області