Кіл-сть ак.год. 48

Час навчання: Ранок, день, вечір
Cрток навчання 2 місяця
Ціна 6000 грн за 1 міс.
По закінченню курсу Сертифікат

В рамках курсу проводиться робота над проектом «Створення веб-сайту. Наповнення сайту текстом, зображеннями та відео».

Ви вивчите основи мови розмітки HTML, способи застосування CSS та основи побудови сайтів. Ви зможете самі створювати сторінки, проектувати меню навігації та інші елементи сайту. Навчіться грамотно розміщувати зображення та текстові блоки на сторінці. Можете самостійно працювати зі стилями в CSS, використовувати фрейми та мета-інформацію. А також отримайте практичні поради, як вибрати хостинг та техпідтримку сайту.

Наші слухачі навчаться:

створювати web-сторінки, що містять усі необхідні компоненти: текстове наповнення, гіперпосилання, графічне наповнення;
самостійно створювати повноцінний сайт шляхом визначення ієрархії взаємодії веб-сторінок між собою;
грамотно розробляти інтерактивні форми взаємодії користувача з web-сервером;
ефективно використовувати можливості каскадних таблиць стилів CSS для підвищення функціональності та покращення оформлення web-сайту;
використовувати технологію кадрів;
дізнаються про нові можливості HTML та CSS.
В курсі багато практичної інформації, яку можна відразу використовувати на реальних проектах.

Програма курсу:

Тема 1. Введення та основні поняття. Основи розробки веб-ресурсів. Моделі інформаційної архітектури. Принципи "юзабіліті". Концепція веб-інтерфейсу. Основні елементи web-сторінки та способи їх компонування. Розробка структури сайту та системи навігації. Огляд форматів веб-графіки. Стандарти HTML5 та CSS3. Стандарти розробки HTML5 документів. Meta-теги, keywords (елементи пошукової оптимізації).
Методи верстки web-сторінок
HTML5 структура сторінки
Що таке WEB-сервер, web-сайт, web-сторінка і чим вони відрізняються
Структура HTML5 документа. Поняття елементів та атрибутів
Навіщо потрібна інструкція <!DOCTYPE>
Що таке тег? Типи тегів. Теги - header, nav, section, article, aside, footer та ін. Правила оформлення HTML5-документа
Використання коментарів.
Створення HTML5-документа у програмі Sublime Text 3
Можливості програми Sublime Text 3: Основи роботи. Управління веб-сайтом. Редагування html5-коду
Підбір ключових слів для свого сайту – за допомогою сервісів http://wordstat.yandex.ua/ https://adwords.google.ru/KeywordPlanner
Аналіз конкурентів
Створення нових файлів та папок.

Тема 2. Створення гіперпосилань, таблиць та списків. Купівля домену та хостингу. Використання програми FilleZilla.
Структурування інформації на WEB-сторінці за допомогою списків. Типи списків
Структурування інформації на сторінці за допомогою списків та таблиць
Механізми адресації ресурсів у Internet. Реалізація механізму у мові HTML5
Створення гіперпосилань за допомогою елемента A та його атрибутів. Типи посилань
Розміщення ілюстрації на веб-сторінці. Типи файлів ілюстрацій. Елемент IMG та його атрибути
Розподіл ілюстрацій на сторінках сайту: прийоми та поради
Додавання ілюстрацій та посилань на сайти

Тема 3. CSS3. Технологія CSS, її версії та підтримка браузерами.
Поняття, сфера застосування та принципи побудови каскадних таблиць стилів (CSS).
Використання CSS3 на веб-сторінках, способи завдання стилів та оформлення окремих елементів.
Огляд інструкцій CSS3 для оформлення веб-сайтів.
CSS-властивості: визначення, способи завдання, одиниці виміру, використання для оформлення HTML-елементів. Box model (модель коробки або боксова модель)
CSS - внутрішні стилі глобальні або вбудовані зовнішні або пов'язані
Визначення класів та ідентифікаторів
CSS-селектори. Блокова модель. Управління типами елементів – властивість display (block, inline, inline-block…)
Створення та керування таблицями стилів у програмі Sublime Text 3

Тема 4. Алгоритм створення CSS сайту Горизонтальні та вертикальні CSS меню
Верстка web-сторінок зі стандартними елементами - шапка, навігація, утримання та підвал.
Створення меню за допомогою маркованих списків.
Введення поняття псевдокласів.
Визначення float для розташування елементів меню.
Свідомість веб-сторінок і зв'язків між ними.
Хостинг. HTML-елементи: види, параметри...

Тема 5. Робота із текстом. Механізми подання текстової інформації: оформлення, вирівнювання, відступи та ін.
Використання CSS-властивостей: Особливості відображення тексту на веб-сторінці.
CSS-властивості, які використовуються для оформлення тексту.
Приклади роботи зі шрифтами, загальні способи та методи застосування шрифтів, їх характеристики та атрибути.

Тема 6. Float, background, position, z-index, flex-box
Визначення, основні властивості.
Створення шарів у Sublime Text 3. Елементи DIV та SPAN.
Особливості розробки елементів макетів для блокової верстки.
Використання якості float: вирівнювання зображень, реалізація ефекту таблиці.
Способи позиціонування елементів.
Абсолютне та відносне позиціонування.
Точне розміщення блокових елементів HTML-розмітки у вікні браузера: розмір блоку, абсолютні та відносні координати.
Накладення та вкладення шарів, властивість z-index.
Керування видимістю шару та видимістю вмісту шару.

Тема 7. Методи верстки RWD веб-сайтів за допомогою CSS.
Адаптивний дизайн та створення мобільних сайтів. Вивчаємо media-запити
Що таке адаптивний дизайн і наскільки важливо сьогодні адаптувати свої сайти під різні пристрої
Що таке медіа-запити, як їх коректно складати та використовувати для вибору різних CSS-стилів залежно від особливостей користувальницького дисплея або пристрою, таких як ширина області перегляду та роздільна здатність екрана.

Тема 8. Програмування JavaScript
Теоретичні знання та практичні навички для ефективного використання сучасних клієнтських Web-технологій на прикладі JavaScript.
Особливості синтаксису JavaScript, об'єктно-орієнтований підхід у програмуванні JavaScript та його основні вбудовані функції.
Створення динамічних меню, закладок, аккордіонів, галерей та інших сторінок.
Сценарії в HTML, мова JavaScript
Впровадження сценаріїв у HTML документ
Синтаксис
Змінні та типи даних
Написання першого сценарію – таблиці множення
Умовні оператори
Оператори циклів
Оператор обробки винятків використання циклів
Створення фотогалерей

Тема 9. Функції та об'єкти JavaScript
Опис та виклик функцій
Аргументи функцій
Повернення значень
Область видимості змінних
Рекурсивний виклик функцій
Використання функцій
Об'єкти JavaScript
Об'єкти типів даних
Масиви

Тема 10. Шаблони створення об'єктів та повторне використання коду
Шаблони зменшення кількості глобальних змінних: модуль, відкриття модуля, ізольований простір імен
Класичні шаблони наслідування
Сучасні шаблони наслідування

Тема 11. Шаблони проектування у JavaScript
Що таке шаблон проектування чи патерн? DHTML DOM
Різновиди шаблонів проектування Об'єкти DOM
Примітка про класи в JavaScript Властивості та методи об'єктів DOM
Типи даних JavaScript Маніпуляція властивостями елементів
Шаблони, що породжують
Будівельний шаблон
Прототипний шаблон (Prototype pattern)
Структурні шаблони

Тема 12. Шаблони роботи з DOM
Шаблони та антишаблони роботи з DOM
Як заміряти швидкість виконання ділянки JavaScript коду
Як правильно підключити сценарій до HTML-сторінки
Як оптимізувати сторінку та прискорити її завантаження

Тема 13. Початок роботи з bootstrap
Завантаження Bootstrap файлів
Bootstrap Grid System
Робота в Bootstrap Grid System
Створити макети з Bootstrap Grid System
видимість елемента в залежності від розміру екрана пристрою
Створення Фіксований макет з Bootstrap
Створення макету рідини з Bootstrap
Створення макет з Bootstrap
Невеликий пристрій (таблетка)
Додатковий невеликий пристрій (телефон)
параграфи
Створення простої таблиці з Twitter Bootstrap
Використовуйте контекстні класи в Bootstrap таблиці
Twitter Bootstrap Список
Створити Twitter Bootstrap Forms.
Створення Вертикальна форма Макет
Створення горизонтального макет форми
Статична форма управління
Створення Інлайн Форма Макет
Twitter Bootstrap Зображення
Twitter Bootstrap Мініатюри
Twitter Bootstrap медіа-об'єктів
Twitter Bootstrap Nav
Створення випадаючого меню з Twitter Bootstrap Рахунки та таблетки
Twitter Bootstrap NavBar
Створення фіксованих NavBar з Twitter Bootstrap

Тема 14. Розробка сайту на Twitter Bootstrap 3
встановити- HTML документ з необхідними файлами
Bootstrap заголовок та чуйний навігація
Додавання банера на ваш завантажувальний шаблон
Використання системи сітки Bootstrap для створення контенту область
Створення завантажувального чуйний колонтитул.

Тема 15. CSS пост/препроцесори SASS/LESS
змінні
математика
функції
вкладеність
імпортування
успадкування
міксини
директива функції

Тема 16. Система контролю версій GIT (SVN), наявність GitHub облікового запису з прикладами коду
1.Встановлюємо Git.
2. Створюємо репозиторій Git.
3. Встановлюємо SmartGit для роботи з репзитором.
4. Основи Робота з репозиторієм Git.
5. Створюємо проект для роботи з репозиторієм.
6. Додаємо перший файл у локальний репозиторій.
7. Вносимо зміну до локального репозиторію.
8. Додаємо рядки до файлу.
9. Змінюємо рядки у файлі.
10. Видаляємо рядки з файлу.
11. Скасуємо зміни до завантаження до локального репозиторію.
12. Додаємо нові файли до репозиторій.
13. Видаляємо файл із репозиторію.
14. Переглядаємо історію змін репозиторію.
15. Змінюємо коментар комміту.
16. Скасуємо останній коміт.
17. Створюємо нову гілку.
18. Нова гілка щодо останнього комміту.
19. Нова гілка щодо обраного комміту.
20. Видаляємо гілку.
21. Об'єднуємо гілки.
22. Конфлікти та їх вирішення.
23. Додаємо обраний коміт з однієї гілки до іншої.
24. Rebase чи як спростити історію коммітів.
25. Робота з віддаленим репозиторієм.
26. Налаштовуємо зв'язок між сервером та клієнтом по SSH.
27. Клонуємо репозиторій з ЕОМ-сервера на ЕОМ-клієнт.
28. Основи роботи з віддаленим репозиторієм.

Після закінчення курсу Фронтенд-розробник (фронт енд менеджер) слухач матиме проект готового сайту, виконаного з урахуванням використання передових технологій у WEB. Навчання проводитиметься досить інтенсивно, навчиться створювати веб-сайти не лише красивими, а й динамічними.