Pre Course materials / lectures

• Intro
• VCS (Git, Github, gh-pages, FTP)
• Network & HTTP, работа c IDE2.
• Обзор середовища розробки.
• Плагіни. Emmet.
• BrowserStack.
• Codepen, jsfiddle.

Lecture 1

• Поняття Front-End. Технології HTML, CSS, JS – як основні технології Front-End.
• Мова розмітки HTML.
• Основні теги HTML: h1-h6, p, br, hr, img, a.
• Способи відображення тегів (види тегів): блочні та рядкові елементи.
• Інструменти веб-розробки: Chrome devtools.6. MDN, W3C

Lecture #2

• Технологія CSS (Cascading Style Sheet);
• Способи дадавання CSS стилей до HTML документу;
• Робота з стилями в chrome devtools;
• Синтаксис CSS. Поняття селектора, властивості та значення;
• Класи та ідентифікатори;
• Пріорітет правил CSS;
• Одиниці виміру CSS;

Lecture #3

• Основи Adobe Photoshop/Avocode/Figma. Інші рішення нарізки макетів;
• Работа з шрифтами;
• Background;
• Работа з кольорами, прозорість;
• SVG/PNG/JPG/GIF зображення.

Lecture #4

• Блочна верстка. Елемент div;
• Позиціонування елементів. Absolute, fixed, relative и static;
• Обтікання елементів, властивість float. Створення колонок.

Lecture #5

• Робота з flexbox;
• Робота з grid.

Lecture #6

• Псевдокласи;
• Псевдоелементи;
• Списки. Нумерування, марковані списки;
• Таблиці;
• Інпути та форми.

Lecture #7

• Стандарт HTML5;
• Стандарт CSS3. Overview змін.
• Pixel perfect верстка;
• Патерни в regexp.

Lecture #8

• Responsive верстка;
• Chrome devtools для роботи з мобільною версткою;
• Підкоди до верстки: mobile-first, desktop-first;
• BrowserStack.

Lecture #9

• Модульна сітка для верстки;
• Фреймворки. Призначення, функції, можливості (MaterialUI & Bootstrap);
• Twitter Bootstrap.

Lecture #10

• Анімація в CSS3.

Lecture #11

• Препроцесори: html: pug(jade);
• Препроцесори CSS: less, SASS (мініфікація та map).

Lecture #12

• БЕМ

Lecture #13

• Валідація через Google Pages и W3C;
• TinyPNG;
• Спрайти;
• Кросбраузерність, робота з retina;
• canIUse.

Lecture #14

• Підключення бібліотек Javascript (jquery, слайдери, page smooth scroller);
• Робота з мікророзміткою;
• Graceful Degradation, progressive enhancement.

Lecture #15

Оптимізація Google Page Speed.

Lecture #16

What is "Advanced JS"

Lecture #17

• Рекрутингове заняття.
• "Що? Де? Коли?" про пошук першої роботи.