Курс Front End

1. Вступ у веб-технології

• Призначення технологій
• Стек розробки для сайту
• Принцип роботи клієнт-сервер
• Консоль розробника
• Текстовий редактор і IDE
• Що таке HTML & CSS & JS і їх взаємодія

2. HTML

• Базові принципи верстки
• Знайомство з поняттям тегу і атрибуту
• Обов’язкова структура будь-якої веб-сторінки
• Поняття малих і блокових елементів веб сторінки
• Поняття парних і непарних тегів
• Семантичні теги
• Спецсимволи
• Робота з тегами і атрибутами
• Робота з посиланнями і якорями
• Робота з текстом і коментарями
• Робота з різними системами кольорів в HTML
• Робота з зображеннями
• Нумеровані і марковані списки
• Робота з блоками (div)
• Таблиці
• Форми
• Елементи форм (інпут)
• Айфрейми
• Підключення різних модулів до документу HTML
• Форматування елементів HTML

3. CSS

• Що таке CSS?
• Базові принципи написання стилів
• 3 способи додавання CSS в HTML сторінку
• Зовнішні таблиці стилів
• Відносні і статичні одиниці вимірювання
• Робота зі шрифтами (сімейства, стилі, розміри, насиченість)
• Робота з межами елементів (бордер радіус, тіні)
• Робота з відступами і розмірами елементів
• Градієнти
• Робота з властивостями float і clear
• Flex box
• Робота з фоном (зображення і колір, розміри, прозорість)
• Селектори
• Селектори поглибленого рівня
• Пріоритети стилів
• Перезапис стилів
• Псевдокласи, псевдоелементи
• Робота з анімацією елементів
• Валідація
• Медіазапити

4. Робота з браузером

• Встановлення корисних розширень для верстки
• Відладник коду

5. Хостингові і доменні панелі

• Робота з Git і хостинг на Git

6. Різні види верстки

• Адаптивна верстка
• Гумова верстка
• Pixel perfect верстка
• Статична верстка
• Кросбраузерна верстка
• Змішана верстка

7. Figma для розробника

• Поняття растрової та векторної графіки
• Переваги й особливості Figma
• Огляд панелей та інструментів
• Сітки
• Шари і компоненти
• Експорт параметрів і графіки
• Редагування елементів

8. Grid layout

• Побудова мережі
• Робота з горизонтальним і вертикальним вирівнюванням
• Об’єднання елементів
• Методи роботи з комірками

9. Правила іменування класів по BEM

10. Бібліотека Bootstrap

11. SASS

• Підключення
• Правила і директиви
• Керуючі директиви і вирази
• Використання міксинів
• Застосування на практиці

12. Вступ до мови програмування JavaScript

• Загальна інформація про мову та її особливості
• Довідники, специфікації і посилання на них
• Консоль розробника
• Зовнішні скрипти і порядок їх підключення
• Змінні та правила їх іменування
• Типи даних та приведення типів

13. Основні оператори

• Оператори порівняння і логічні значення
• Умовні оператори
• Логічні оператори
• Конструкція switch

14. Цикли і функції

• Цикли ‘for’, ‘while’, ‘do … while’
• Рекурсія і поняття стека
• Поняття і синтаксис функції
• Функціональні вирази
• Області видимості
• Псевдомасив ‘arguments’
• Функції зворотного виклику (callback)

15. Масиви

• Перебираючі методи
• Внутрішнє представлення масивів

16. Об'єкти

• Передача за посиланням
• Перебір властивостей
• Стандартні вбудовані об’єкти

17. Робота з Git

• Робота з Git Bash
• Workflow від створення сховища до його відправки на віддалений сервер
• Робота з гілками
• Робота з конфігураційними файлами

18. Прототипне наслідування

• Прототип об’єкта
• Властивість prototype
• Вбудовані класи
• Функція - конструктор
• Успадкування класів
• Внутрішня структура методу 'extend' і поліфіл 'Object.create'
• Функціональне успадкування

19. ООП (об'єктно-орієнтоване програмування)

• Загальна інформація про ОВП
• Інкапсуляція
• Поліморфізм
• Успадкування
• Абстракція даних
• Поняття 'клас'

20. Контекст виклику та замикання

• Робота з 'this' (4 способи використання)
• ES6 стандарт (стрілочні функції)
• ES6 let / const + var + hoisting
• Використання 'call', 'apply'
• Дескриптори, гетери та сетери властивостей
• Шаблон проектування 'Singletone' через замикання
• Збиральник сміття

21. Робота із системою контролю версій

22. Глобальний об'єкт Window та робота з DOM

• Загальна інформація про 'window', 'navigator', 'document', 'location', 'history'
• Навігація по DOM елементам
• Властивості вузлів
• Додавання та видалення вузлів
• Робота зі стилями
• Робота з координатами

23. Події

• Вступ у браузерні події
• Порядок обробки подій (Event Loop)
• Асинхронні події
• Робота з SetTimeout / SetInterval
• Спливання і перехоплення
• Делегування подій
• Події з використанням миші, клавіатури та прокручування
• Завантаження документа

24. Формування сторінки у браузері

• Формування DOM покроково
• Формування Render Tree
• Порядок формування CSSOM
• Оптимізація, мініфікація, робота з HTTP Cache

25. HTTP

• Вступ у протокол HTTP
• Переваги та недоліки протоколу
• Робота з AJAX
• Загальна інформація про RESTful API
• JSON
• CORS
• Promise + async await

26. Способи зберігання даних у браузері

• Cookies
• LocalStorage, sessionStorage
• IndexedDB (import / require)
• Manifest
• ServiceWorker
• Progressive Web Application

27. Як скласти резюме і пройти співбесіду

• Структура резюме
• FAQ
• Як вести себе на співбесіді
• Основні помилки на співбесіді
• Бонусне заняття з англійської мови
• Урок пошуку роботи