Основи Front-End
Курс верстки сайтів для новачків

Що таке веб-розробка?
Front-end і back-end - в чому різниця?
Статичні та динамічні веб-сайти
Процес веб-розробки
Що таке WWW?
Принцип роботи 'клієнт-сервер'
Браузери
Консоль розробника
Загальний огляд редакторів
Online редактори
Offline редактори
HTML/CSS валідатори
Взаємодія HTML & CSS & JS
Простий приклад HTML сторінки

Загальний огляд HTML та CSS Архітектура проекту
Базова структура HTML документа
Правила написання коду
Базові теги
Коментарі в HTML
Синтаксис CSS
Способи додавання CSS до HTML-сторінки
Детальне знайомство з панеллю розробника
Блочні та лінійні елементи

Основні елементи HTML + HTML5 Content categories
Div, span
Заголовки
Семантичні елементи
Використання тегів HTML5 для формування структури шаблону
Розгляд, призначення тегів HTML5 і їх переваги

Робота з посиланнями і якорями
Робота з зображеннями
Нумеровані та ненумеровані списки
HTML entities
Розробка сторінки резюме

Порядок застосування стилів
Селектори, важливість селекторів
Вкладеність, успадкування та групування властивостей
Нормалізація і скидання стилів. Reset CSS
Відносні і статичні одиниці вимірювання
Робота зі шрифтами (сімейства, стилі, розміри, насиченість). Іконочні та користувацькі шрифти
Зображення (jpg, png, gif, svg, webp). Спрайти. Font Awesome

Методології BEM, SMACSS, OSCSS. Правила іменування класів по BEM
Псевдо-елементи та псевдо-класи
Розробка навігаційного меню

Модель позиціонування CSS - Box model
Базові параметри блоку (width, height, padding...)
Спеціальні параметри блоку (overflow, background)
Відступи (margin, padding) та границі (border)
Block, inline, inline-block
Робота з фоном та градієнтом
Позиціонування елементів. Float. Static. Relative. Absolute. Fixed. Sticky. Z-index
Робота з властивостями float і clear. Поняття «сітки»

Нарізка макета
Основні інструменти
Поняття сітки
GIT:
Встановлення git
Налаштування git
Основні команди git

Робота з FlexBox
Застосування flex для створення сітки

Способи адаптивного дизайну
Поняття адаптивної і чуйною верстки, основні правила створення адаптивного сайту
Mobile/desktop first
Медіа-запити
Логічні оператори, що застосовуються в медіа-запитах
Медіа-функції
Pixel Perfect
Кросбраузерність

Таблиці в HTML
Основні проблеми табличної верстки

Хостингові і доменні панелі
Файловий менеджер (Filezilla)
Структура проекту. Валідність і семантика
Основи SEO
Публікація сайту. Check list розробника

Каркаси CSS (CSS Frameworks)
Встановлення фреймворка
Система сіток
Налаштування сітки
Огляд вбудованих компонентів
Основний контейнер - класси container та container-fluid
Підхід до позиціонування на основі рядків та колонок
Примусове позиціонування на сітці - push, pull. Offset
Адаптивність - xs, xl, …
Поняття навігаційного меню та вимоги до нього
navbar в bootstrap
Додавання логотипу в navbar
Додавання пунктів меню
Створення класичного “gamburger”-меню для мобільної версії

CSS анімація, ефекти
Ефекти анімації при наведенні
Анімації дочірніх елементів
Ефекти зображення
Transform, transition, animation, gradient

JS як мова програмування
Консоль JS в браузерах
Базове поняття про DOM
Змінні і вирази, ES5/ES6
Умовні інструкції, знайомство з jQuery та jQuery UI
Цикли
Об'єкти і масиви, ES5/ES6
Функції (scope), ES5/ES6
Функції (замикання, рекурсія)
Контекст виконання функцій, способи передачі контексту, ES5/ES6
Прототипи, ООП в прототипному стилі, розширення вбудованих методів прототипів
Історія, причини та мета створення формату JSON
JSON як більш складний варіант масиву об’єктів
Побудова front-end логіки на основі даних
Архітектура взаємодії web-сторінки з API
jquery як база для стандартних рішень задач front-end
Практика на jQuery, робота з DOM, стилі Bootstrap
Практика на jQuery, плагіни Bootstrap

Форми вводу даних. Стандартні елементи
Валідація (перевірка) даних на боці клієнта
Стилізація елементів форм на JavaScript і на CSS
Збереження даних на боці клієнта - localstorage, session storage
Побудова логіки сторінки, орієнтованої на роботу з даними
Отримання даних з серверу за допомогою AJAX
Надсилання команд та даних на сервер
Приклади взаємодії з серверами, що надають інформацію в публічний доступ (новини google або NY Times, котування валют, тендери prozorro, PrivatBank API)
Основи роботи з Node.js та фреймворком Express
Обробка даних на сервері

Налаштування проекту
Знайомство з препроцесорами SCSS та PUG
GULP task для SCSS
Функціонал і можливості GULP, SCSS, PUG

Огляд JavaScript фрейморків
Робота з Vue.js
Рендерінг, директиви і події
Components, Props і Slots
Vue-cli
Анімації