КУРС FRONTEND РОЗРОБНИК
З САМОГО ПОЧАТКУ

ПРОГРАМА КУРСУ

Модуль 1: Введення в Web-розробку

Урок 1: Вступне слово

1.1. Роль Front-end розробника

Урок 2: Як встановити VISUAL STUDIO CODE

2.1. Етапи встановлення VISUAL STUDIO CODE

Урок 3: Що таке HTML

3.1. Базові теги
3.2. Що таке ʼтегʼ
3.3. Списки, заголовки, абзаци й звичайні тексти

Урок 4: Базовий CSS

4.1. Інлайнові стилі
4.2. Стилі прописані в середині тегу <style></style>
4.3. Підключення зовнішнього файлу зі стилями

Урок 5: Шрифти

5.1. Що таке шрифти
5.2. Стандартні системні шрифти
5.3. Загальні імена сімейств
5.4. Специфічні імена сімейств
5.5. Властивості шрифтів
5.6. Зовнішні шрифти та @font-face

ПРОГРАМА КУРСУ

Модуль 2: Семантика та стилізація елементів

Урок 6: Базові властивості елементів

6.1 Атрибут class
6.2 Використання margin та padding
6.3 Використання devTools panel
6.4 Block та inline елементи, вирівнювання контенту
6.5 Вирівнювання по центру, box-sizing та margin collapse

Урок 7: Семантична структура HTML-сторінки

Урок 8: Базовий адаптив

Урок 9: Селектори CSS та їх пріоритетність

9.1. Селектори
9.2. Псевдокласи
9.3. Специфічність

ПРОГРАМА КУРСУ

Модуль 3: Взаємодія з посиланнями, картинками, створення форм

Урок 10. Використання URLs та стилізація посилань в HTML та CSS

Урок 11. Використання картинок на HTML сторінці та керування їх розмірами

Урок 12. Медіа запити, responsive image та responsive background

Урок 13. Форми

ПРОГРАМА КУРСУ

Модуль 4: Вирівнювання елементів та препроцесори

Урок 14. Позиціювання

Урок 15. FlexBox

Урок 16. BEM методологія

Урок 17. Препроцесор SASS

Урок 18. Трансформації та анімації

18.1. Transition
18.2. Transform
18.3. Animation
18.4. Cubic-bezier

Урок 19. Сітка (Grid)

ПРОГРАМА КУРСУ

Модуль 5:  Базовий JavaScript

Урок 20: Вступ ДО JavaScript

20.1. Короткий огляд JavaScript
20.2. Запуск першого скрипта
20.3. Створення файлу js
20.4. JavaScript код в HTML
20.5. Змінні в JavaScript
20.6. Створення та назви змінних: “let”, “const” і “var”
20.7. Правила надання назв змінним, ключові слова
20.8. Застосування змінних у JavaScript
20.9. Коментарі
20.10. Ключові слова
20.11. Літерали
20.12. Вирази

Урок 21: Типи даних та оператори в JavaScript

21.1. Типи даних
21.2. Оператори в JavaScript

Урок 22: Functions

22.1. Оголошення функції
22.2. Локальні змінні
22.3. Зовнішні змінні
22.4. Параметри
22.5. Значення за замовчуванням
22.6. Повернення значення
22.7. Вибір імені функції

Урок 23: Умовні оператори

23.1. Інструкція “if”
23.2. Перетворення до логічного типу
23.3. Блок “else”
23.4. Умовний оператор “?”

Урок 24: Loops

24.1. Цикл “for”
24.2. Вбудоване оголошення змінної
24.3. Пропуск частин “for”

ПРОГРАМА КУРСУ

Модуль 6: Типи даних

Урок 25: Робота з рядками

Урок 26: Робота з масивами

26.1 Оголошення
26.2 Отримання останніх елементів за допомогою “at”
26.3 Методи pop/push, shift/unshift
26.4 Багатовимірні масиви
26.5 toString

Урок 27: Робота з числами

27.1. Числові літерали (decimal, binary, octal, hexadecimal)
27.2. Пріоритети операторів в js
27.3. Які існують числа в js (Infinity, BigNumber, NaN)
27.4. Конвертація рядка в число (Number(), +string, 123 + string, parseInt(), parseFloat() )
27.5. Округлення чисел
27.6. Генерація випадкових чисел

Урок 28: Цикл “while”

28.1. Цикл “do…while”
28.2. Переривання циклу: “break”
28.3. Перехід до наступної ітерації: continue
28.4. Мітки для break/continue

Урок 29: Робота з рядками (поглиблено)

29.1. Кодування рядка
29.2. Порівняння рядків
29.3. Методи редагування рядків (.repeat(), .padStart(), padEnd())
29.4. Спецсимволи
29.5. Довжина рядка
29.6. Доступ до символів
29.7. Зміна регістру
29.8. Пошук підрядка

Урок 30: Функції (поглиблено)

30.1. Rest Arguments
30.2. Function Declaration, Expression and Arrow
30.3. Switch Case, Switch True

ПРОГРАМА КУРСУ

Модуль 7: Поглиблений JavaScript

Урок 31: Перетворення типів в js

31.1. Перетворення типів
31.2. Як порівнювати різні типи в js

Урок 32: Логічні оператори. Як логічні оператори працюють

32.1. || (АБО)
32.2. && (І)
32.3. ! (НЕ)
32.4. Оператор нульового злиття (??)

Урок 33: Обʼєкти

33.1. Навіщо потрібні об’єкти?
33.2. Створення, читання, редагування, видалення значень об’єкта
33.3. Перевірка значень об’єкта
33.4. Перебір по об’єкту
33.5. Як працюють об’єкти, const and Object
33.6. Порівняння об’єктів
33.7. null vs undefined
33.8. Об’єкти як аргументи
33.9. Клонування об’єктів
33.10. Деструктуризація об’єктів
33.11. Функція як об’єкт
33.12. Методи об’єктів
33.13. Computed properties

Урок 34: Методи масивів

34.1. Мутуючі та немутуючі методи масивів
34.2. Копіювання масивів
34.3. Деструктуризація масивів

Урок 35: Колбеки

35.1. Колбеки та колбеки у циклі
35.2. Таймери(таймаут, інтервал) та Event Handlers(‘click’, ‘contextmenu’…)
35.3. Обробники подій
35.4. Доступ до елемента через this

ПРОГРАМА КУРСУ

Модуль 8: Особливості JavaScipt

Урок 36: Замикання (Closures)

36.1. Область видимості та лексичне оточення
36.2. Замикання
36.3. Функція у циклі
36.4. Function яка повертає a function
36.5. Функція з декількома батьками

Урок 37: Наслідування

37.1. Прототипне наслідування
37.2. proto
37.3. Методи в прототипах

Урок 38: Конструктори

38.1. Що таке конструктори
38.2. Успадковування в прототипах
38.3. this в деталях

Урок 39: Класи

39.1. Синтаксис класів, статичні поля та методи
39.2. Вбудовані класи об’єктів (приклад – new Date())
39.3. Наслідування класів
39.4. instanceOf
39.5. JS модулі