Курс Front-end розробник

Програма курсу

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

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

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

Урок 2. Як встановити Visual Studio Code

Етапи встановлення Visual Studio Code.

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

• Базові теги
• Що таке "тег"
• Списки, заголовки, абзаци й звичайні тексти

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

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

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

• Що таке шрифти
• Стандартні системні шрифти
• Загальні імена сімейств
• Специфічні імена сімейств
• Властивості шрифтів
• Зовнішні шрифти та @font-face

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

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

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

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

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

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

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

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

• Урок 10. Використання URLS та стилізація посилань в HTML та CSS
• Урок 11. Використання картинок на HTML сторінці та керування їх розмірами
• Урок 12. Медіа запити, responsive image та responsive background
• Урок 13. Форми

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

• Урок 14. Позиціонування
• Урок 15. FlexBox
• Урок 16. BEM методологія
• Урок 17. Препроцесор SASS
• Урок 18. Трансформації та анімації
  • Ransition
  • Transform
  • Animation
  • Cubic-bezier
• Урок 19. Сітка (Grid)

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

Урок 20. Вступ до JavaScript

• Короткий огляд JavaScript
• Запуск першого скрипта
• Створення файлу js
• JavaScript код в HTML
• Змінні в JavaScript
• Створення та назви змінних: "let", "const" і "var"
• Правила надання назв змінним, ключові слова
• Застосування змінних у JavaScript
• Коментарі
• Ключові слова
• Літерали
• Вирази

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

• Типи даних
• Оператори в JavaScript

Урок 22. Functions

• Оголошення функції
• Локальні змінні
• Зовнішні змінні
• Параметри
• Значення за замовчуванням
• Повернення значення
• Вибір імені функції

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

• Інструкція "if"
• Перетворення до логічного типу
• Блок "else"
• Умовний оператор "?"

Урок 24. Loops

• Цикл "for"
• Вбудоване оголошення змінної
• Пропуск частин "for"

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

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

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

• Оголошення
• Отримання останніх елементів за допомогою "at"
• Методи pop/push, shift/unshift
• Багатовимірні масиви
• toString

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

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

Урок 28. Цикл While

• Цикл "do…while"
• Переривання циклу: "break"
• Перехід до наступної ітерації: continue
• Мітки для break/continue

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

• Кодування рядка
• Порівняння рядків
• Методи редагування рядків (.repeat(), .padStart(), padEnd())
• Спецсимволи
• Довжина рядка
• Доступ до символів
• Зміна регістру
• Пошук підрядка

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

• Rest Arguments
• Function Declaration, Expression and Arrow
• Switch Case, Switch True

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

Урок 31. Перетворення типів в JS

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

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

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

Урок 33. Об'єкти

• Навіщо потрібні об'єкти?
• Створення, читання, редагування, видалення значень об'єкта
• Перевірка значень об'єкта
• Перебір по об'єкту
• Як працюють об'єкти, const and Object
• Порівняння об'єктів
• null vs undefined
• Об'єкти як аргументи
• Клонування об'єктів
• Деструктуризація об'єктів
• Функція як об'єкт
• Методи об'єктів
• Computed properties

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

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

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

• Колбеки та колбеки у циклі
• Таймери(таймаут, інтервал) та Event Handlers("click", "contextmenu"…)
• Обробники подій
• Доступ до елемента через this

Модуль 8. Особливості JavaScript

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

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

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

• Прототипне наслідування
• proto
• Методи в прототипах

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

• Що таке конструктори
• Успадковування в прототипах
• this в деталях

Урок 39. Класи

• Синтаксис класів, статичні поля та методи
• Вбудовані класи об'єктів (приклад - new Date())
• Наслідування класів
• instanceOf
• JS модулі

Особливості курсу

• Особистий кабінет та ком'юніті
• Прямі ефіри
• Практикуючі ментори
• Уроки з HR
• Практичний досвід на реальному проєкті
• Модуль із працевлаштування
• Підготовка до співбесіди
• Проєкт в портфоліо
• Сертифікат про проходження курсу
• 2 пакети навчання

Викладачі курсу

Юрій Лісовенко - Практикуючий Front-end Developer