Frontend basics

eleks.com eleks.com

HTML/CSS: основи

Поговоримо про Фронт-енд: що це? HTML CSS Інструменти розробника

eleks.com

Фронт-енд

eleks.com

HTML

HTML: HyperText Markup Language наслідується від SGML описується тегами (елементи в кутових

дужках)

HTML != XML не чутлива до регістру змішані правила закривання

HTML: Document Object Model (DOM) ієрархія елементів також граф об’єктів

HTML документ• DOCTYPE – тип

документа• html – опис

документа• head – дані про

документ• title – назва

документа• body – візуальний

вміст• h1 - заголовок• p - параграф

HTML: теги <div></div> - контейнер <a href=“http://someurl”></a> - посилання <img src=“path/to/image/” alt=“text” /> -

картинка <ul><li></li>…<li></li></ul> -

невпорядкований список <ol><li></li>…<li></li></ol> -

впорядкований список <table><tr><td></td></tr></table> - таблиці

Теги Парні (<div></div>, <p></p>, <a></a>) Непарні (<img />, <br />, <hr />)

Теги Лінійні (<span></span>, <img />, <a></a>) Блокові (<div></div>, <p></p>)

HTML приклад сторінки (колись)

HTML приклад сторінки (тепер)

HTML5: теги header nav section footer article aside ...

HTML: форми

HTML форми: основні теги label input textarea button

HTML форми: приклад

eleks.com

CSS

CSS: підходи Властивість style

Тег style

Каскадні таблиці стилів (CSS) – окремий файл

CSS: підключення до сторінки

CSS: правила

CSS: id, class селектори

CSS: селектори за атрибутами[disabled] вибирає усі елементи з атрибутом "disabled"[type='button'] вибирає усі елементи з типом a "button".[class~=key] вибирає усі елементи з класом "key" (але не e.g. "keyed", "monkey", "buckeye"). Еквівалентно .key.[lang|=es] вибирає усі елементи з атрибутом lang, що починається з “es” (ціле слово). Включає "es-MX".[title*="example" i] вибирає усі елементи з атрибутом title, що містить "example", ігноруючи регістр. a[href^="https://"] вибирає усі посилання з атрибутом href, що починається з https:// (не ціле слово).img[src$=".png"] вибирає усі картинки з атрибутом src, що закінчуються на “.png”

CSS: селектори псевдо-класівselector:pseudo-class { property: value;}

• :link• :visited• :active• :hover• :focus• :first-child• :last-child• :nth-child• :nth-last-child• :nth-of-type• :first-of-type• :last-of-type• :empty• :target• :checked• :enabled• :disabled

CSS: селектори, що базуються на відношенняхСелектор Вибрані елементи

A E Усі Е елементи, що є нащадками елемента А (діти, діти дітей…)

A > E Усі Е елементи, що є прямими нащадками елемента А (тільки діти)

E:first-child Будь-який елемент Е, що є першою дитиною свого батька

B + E Будь-який елемент Е, що є наступним братом елемента В

CSS: box-model

CSS: position Static – значення по замовчуванню, елементи

відображаються послідовно один за одним Relative – відображається як static, але

зміщений зі своєї позиції Absolute – елемент відображається абсолютно

відносно першого нестатичного предка Fixed – відображається як absolute, та не

змінює позицію при скролі.

CSS: display Block Inline Inline-block …

CSS: float Left – елемент займає крайню можливу ліву

позицію на лінії в якій він мав би з’явитись Right - елемент займає крайню можливу праву

позицію на лінії в якій він мав би з’явитись Clear – змушує елементи з’являтись під

плаваючими (floated) елементами

CSS: горизонтальне центрування для inline та inline-*

для block

CSS: вертикальне центрування для block

CSS: flexbox

eleks.com

Інструменти розробника

Chrome Developer Tools: DOM

Chrome Developer Tools: Network

Chrome Developer Tools: Sources

Chrome Developer Tools: Console

eleks.com

Питання

eleks.com

Inspired by Technology.Driven by Value.

Useful https://habrahabr.ru/post/202408/ (Как

сверстать веб-страницу. Часть 1) https://developer.mozilla.org/en/

(mozila developer network) http://caniuse.com/ (feature detection) https://www.sublimetext.com/ (text

editor)