Веб-дизайн

Навчальна дисципліна орієнтована на студентів, яких цікавлять сучасні методи і засоби створення веб-ресурсів та їх розміщення в мережі Інтернет. Розглянемо принципи UI\UX дизайну, складові дизайну: композиція, типографіка, сполучення кольорів, вертикальний ритм, графіка; особливості проектування сайту, структуру типової веб-сторінки, мови HTML та CSS, типи контенту: тригери, картки товарів, галереї, інфо-блоки, форми зворотного зв'язку

Метою навчальної дисципліни є формування системи знань з основ веб-дизайну, технологій для створення клієнтських компонентів веб-сайтів та веб-додатків.

Завданнями вивчення навчальної дисципліни є:

• сформувати понятійний апарат і розуміння взаємозв'язку між технологіями веб-розробки;
• отримати базові знання щодо основних засобів розробки веб-сайтів та веб-додатків;
• сформувати практичні навички щодо розробки та розмітки веб-сторінок;
• сформувати практичні навички щодо розміщення веб-сайтів та веб-додатків в мережі WEB.
   

За результатами вивчення дисципліни студент отримає такі знання та навички:

Знання:

• підходи щодо розробки HTML-документів, синтаксис мови HTML, структуру HTML-документу, основні теги елементів та їх призначення
• функції каскадних таблиць стилів, основні властивості CSS;
• CSS-селектори: прості і складені. Специфічність селекторів, наслідування і каскадування стилів;
• блочну модель документа;
• схему побудови модульних сіток;
• підходи щодо реалізації адаптивності;

Вміння:

• розробити структуру сайту;
• використовувати синтаксис Emmet;
• стилізувати типові елементи веб-сторінки з використанням CSS;
• аналізувати структуру складних сторінок;
• побудувати з нуля 12-стовпчикову адаптивну схему розмітки сторінки;
• використання систем для створення прототипів сторінок (Figma)

Модуль 1. Мова розмітки гіпертексту HTML.
Тема 1. Основні визначення.
Вступ. Загальна характеристика дисципліни. Основні визначення. Хостінг та його види. Адресація в локальних та глобальних мережах. Інтернет-організації та основні служби Інтернету.
Тема 2. Мова розмітки гіпертексту HTML. Основні визначення. Стандарти мови HTML. Різниця між HTML та ХHTML. Найпростіший HTML-документ. Типи HTML-документів. Заголовок документу (head). Теги форматування тексту. Представлення кольору в HTML. Гіперпосилання. Зображення. Таблиці. Списки. Карти зображень. Рухомий рядок. Форми та елементи форм.
Тема 3. Особливості стандарту HTML5. Основні визначення. Чистка та спрощення стандарту. Зміна семантики тегів. Нові теги семантичної розмітки. Нові елементи форм, нові параметри, валідація форм. Програвання аудіо та відео завдяки можливостям HTML5.

Модуль 2. Каскадні таблиці стилів CSS
Тема 4. Знайомство з CSS. Основні визначення. Загальні відомості про CSS. Стандарти CSS. Способи сумісного використання CSS і HTML. Типи носіїв у CSS. Одиниці вимірювання розмірів у CSS. Типи селекторів: універсальний селектор,
селектори тегів, класів, ідентифікаторів, параметрів, контекстні селектори. Псевдокласи.
Тема 5. Основні властивості CSS. CSS-властивості шрифту. CSS-властивості тексту. CSS-властивості фону. CSS-властивості форматування. CSS-властивості списків. CSS-властивості таблиць. CSS-властивості позиціювання. CSS-властивості блоків.
Тема 6. Можливості CSS. Каскадування та наслідування. Способи верстки багатоколоночних макетів. Приклади верстки багатоколоночних макетів. 
Тема 7. Знайомство з CSS3. Основні визначення. Нові одиниці вимірювання розмірів. Нові форми представлення кольору. Нові псевдокласи. Псевдоелементи. Нові CSS-властивості. Анімації (animation, transition).
Тема 8. Верстка макетів з використанням HTML5 та CSS3. Flexbox у CSS3. Огляд CSS-фреймворків. Використання Bootstrap для верстки макетів.
Тема 9. CSS-препроцесори. Поняття CSS-препроцесора. Огляд препроцесорів LESS, SASS та Stylus. Робота з селекторами. Змінні та домішки. Операції з властивостями та вбудовані функції. Оператори.

- 80 балів за виконання практичних завдань протягом курсу;

- 10 балів - розробка проекту;

- 10 балів - тестування;

- 10 балів (додаткових) - відвідування та активність;