Відмінності між версіями «Сучасні web-технології»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
м
м
Рядок 1: Рядок 1:
  
 +
Галузь знань: 12 Інформаційні технології
  
== Завдання до курсу ==
+
Спеціальність: 122 Комп'ютерні науки та інформаційні технології
 +
 
 +
Освітньо-кваліфікаційний рівень: магістр
 +
 
 +
==Мета та завдання навчального курсу==
 +
 
 +
==Автор курсу==
 +
 
 +
[[Користувач:V_kotyak |Котяк Віталій Володимирович]]
 +
 
 +
 
 +
=Зміст курсу=
 +
==Змістовий модуль 1.==
 +
====Теоретичний матеріал====
 +
 
 +
 
 +
== Завдання до лабораторних робіт ==
  
 
Завдання h можна виконувати в codepen.io або подібних "пісочницях"
 
Завдання h можна виконувати в codepen.io або подібних "пісочницях"
Рядок 58: Рядок 75:
 
Групи 2-3 чоловіка
 
Групи 2-3 чоловіка
  
Корисні матеріали:
+
=Ресурси=
 +
 
 +
==Рекомендована література==
 +
===Базова===
 +
 
 +
===Допоміжна===
 +
 
 +
==Інформаційні ресурси==
  
 
[https://mdbootstrap.com/angular/ Material Design UI KIT]
 
[https://mdbootstrap.com/angular/ Material Design UI KIT]

Версія за 08:50, 3 жовтня 2018

Галузь знань: 12 Інформаційні технології

Спеціальність: 122 Комп'ютерні науки та інформаційні технології

Освітньо-кваліфікаційний рівень: магістр

Мета та завдання навчального курсу

Автор курсу

Котяк Віталій Володимирович


Зміст курсу

Змістовий модуль 1.

Теоретичний матеріал

Завдання до лабораторних робіт

Завдання h можна виконувати в codepen.io або подібних "пісочницях"

i1

Зробити опис всіх семантичних тегів що з'явились в HTML5

Мал.1

i2

Що таке Progressive Web Apps (PWA) і як використовується

* розробити приклад

i3

Що таке Accelerated Mobile Pages (AMP) і як використовується

* розробити приклад

h1

Написати трьохколоночну структуру використовуючи HTML5 та BEM (Block Element Modifier)

Зробити два варіанти: flexbox та CSS Grid

flexboxfroggy

cssgridgarden

the-complete-css-flex-box-tutorial

flexbox-the-animated-tutorial

css-grid-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 чоловіка

Ресурси

Рекомендована література

Базова

Допоміжна

Інформаційні ресурси

Material Design UI KIT

angular.io

angular-tutorial

Learn Angular 5 For FREE

React, Angular, Vue - Сравнение и быстрый старт - Видеоуроки

Vue JS 2: Полное руководство - Видеоуроки

Angular 6 (формально Angular 2) - Полное Руководство - Видеоуроки

Книга. Полное руководство по Angular 6 (+Видео) - Видеоуроки

Angular Pro - Видеоуроки

The Complete Angular Course: Beginner to Advanced - платно