Відмінності між версіями «Сучасні web-технології»
м |
м |
||
| Рядок 17: | Рядок 17: | ||
====Теоретичний матеріал==== | ====Теоретичний матеріал==== | ||
| + | [[CSS Grid Layout]] | ||
| + | |||
| + | [[CSS Flexbox Layout]] | ||
| + | |||
| + | [[Методологія БЕМ]] | ||
| + | |||
| + | [[Accelerated Mobile Pages (AMP)]] | ||
| + | |||
| + | [[Progressive Web Apps (PWA)]] | ||
| + | |||
| + | [[ООП в JS]] | ||
| + | |||
| + | [[HTML препроцесори]] | ||
| + | |||
| + | [[React]] | ||
| + | |||
| + | [[Angular]] | ||
| + | |||
| + | [[Vue]] | ||
== Завдання до лабораторних робіт == | == Завдання до лабораторних робіт == | ||
Версія за 09:05, 3 жовтня 2018
Галузь знань: 12 Інформаційні технології
Спеціальність: 122 Комп'ютерні науки та інформаційні технології
Освітньо-кваліфікаційний рівень: магістр
Мета та завдання навчального курсу
Автор курсу
Зміст курсу
Змістовий модуль 1.
Теоретичний матеріал
Accelerated Mobile Pages (AMP)
Завдання до лабораторних робіт
Завдання h можна виконувати в codepen.io або подібних "пісочницях"
i1
Зробити опис всіх семантичних тегів що з'явились в HTML5
i2
Що таке Progressive Web Apps (PWA) і як використовується
* розробити приклад
i3
Що таке Accelerated Mobile Pages (AMP) і як використовується
* розробити приклад
h1
Написати трьохколоночну структуру використовуючи HTML5 та BEM (Block Element Modifier)
Зробити два варіанти: flexbox та CSS Grid
the-complete-css-flex-box-tutorial
h2
Порівняння трьох CSS препроцесорів.
Розробити приклад з використанням BEM та обраного препроцесора.
h3
Розробити структуру зображену на малюнку 1.
Використовуємо flexbox або CSS Grid
h4
Порівняння HTML препроцесорів: Slim, Pug, HAML.
Розробити приклад (семантичний) сторінки новин з використанням обраного препроцесора.
s0
Що використати: JSON-pure API, RESTful API чи REST API + JSON?
проект
Групи 2-3 чоловіка
Ресурси
Рекомендована література
Базова
Допоміжна
Інформаційні ресурси
React, Angular, Vue - Сравнение и быстрый старт - Видеоуроки
Vue JS 2: Полное руководство - Видеоуроки
Angular 6 (формально Angular 2) - Полное Руководство - Видеоуроки
Книга. Полное руководство по Angular 6 (+Видео) - Видеоуроки
