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

Матеріал з Вікі ЦДПУ
Перейти до: навігація, пошук
м (Завдання до курсу)
м
Рядок 55: Рядок 55:
  
 
[https://codecraft.tv/courses/angular/ Learn Angular 5 For FREE]
 
[https://codecraft.tv/courses/angular/ Learn Angular 5 For FREE]
 +
 +
[https://coursehunters.net/course/udemy-react-angular-vue React, Angular, Vue - Сравнение и быстрый старт - Видеоуроки]
 +
 +
[https://coursehunters.net/course/udemy-vuejs-2 Vue JS 2: Полное руководство - Видеоуроки]
 +
 +
[https://coursehunters.net/course/udemy-angular-4-2-the-complete-guide Angular 6 (формально Angular 2) - Полное Руководство - Видеоуроки]
 +
 +
[https://coursehunters.net/course/kniga-ng-book-polnoe-rukovodstvo-po-angular-5-video Книга. Полное руководство по Angular 6 (+Видео) - Видеоуроки]
 +
 +
[https://coursehunters.net/course/angular-pro Angular Pro - Видеоуроки]
 +
 +
[https://www.udemy.com/the-complete-angular-master-class/ The Complete Angular Course: Beginner to Advanced] - платно

Версія за 14:22, 11 вересня 2018


Завдання до курсу

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

i1

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

Мал.1

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 - платно