Курс Основы по созданию адаптивного сайта оптимально отображающегося на всех устройствах

Горячая линия 

(044) 486-17-05   /  (063) 288-49-86

(066) 069-28-72   /  (097) 889-12-22

 

Лицензия Министерства ОБРАЗОВАНИЯ И НАУКИ, МОЛОДЕЖИ И СПОРТА УКРАИНЫ Серия АД №073349 от 29.11.2015 г.
Адрес г.Киев, ул.Белорусская, 22, офис 318, график работы пн-пт 10.00-19.00, сб 10.00-14.00

Обратный звонок Наши менеджеры скоро свяжутся с вами
Неверное имя
Неверный телефон
Спасибо. Мы скоро вам перезвоним.
Курсы по созданию адаптивного сайта оптимально отображающегося на всех устройствах в учебном центре Успех Киев
Кол-во ак.ч. 32
Время Занятия в утреннее (9.30-12.20), дневное (12.30-15.20, 15.30-18.20) или вечернее (18.30-21.20) время
Срок обучения в группе 1 месяц
Цена 1500,00 грн за курс
По окончании курса выдается свидетельство
Скидки от 5% до 20%

• Акцент делается на наиболее важных моментах Отзывчивого 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 для создания контента области

 

Популярные курсы 

 

#fc3424 #5835a1 #1975f2 #2fc86b #f_syc9 #eef77 #020614063440