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

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
м (Завдання до курсу)
м (h1)
Рядок 19: Рядок 19:
  
 
[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc the-complete-css-flex-box-tutorial]
 
[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc the-complete-css-flex-box-tutorial]
 +
 +
[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2 flexbox-the-animated-tutorial]
  
 
[https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611 css-grid-tutorial]
 
[https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611 css-grid-tutorial]

Версія за 15:32, 5 вересня 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?