Курс Frontend
Після завершення навчання зможете претендувати на посаду Junior Frontend Developer.
Frontend-розробник відповідає за зовнішній вигляд продукту: за всі кольори та шрифти, паралакси та скролінги, анімацію й інші мультимедіа на сайті. Звичайно, структуру сторінок зазвичай продумує дизайнер, але саме програміст має реалізувати ідею та простежити, аби готовий проєкт відповідав макету.
JavaScript — головна мова frontend-розробників у web, якою вони програмують інтерфейси користувача. Їм часто доводиться займатися версткою сайтів: написанням HTML-коду та CSS-стилів для надання потрібної інформації. Саме тому для якісного фронтенду важливим є добре знання мов програмування, чистота коду та творчий підхід до завдань.
Протягом курсу ви опануєте структуру сторінки та наявні стилі, навчитеся працювати з HTML та CSS, дізнаєтеся, як надати сторінці того чи іншого вигляду. Після цього ви будете готові до вивчення більш складних речей, як-от мови JavaScript, її синтаксису та можливостей, фреймворків та інших додаткових інструментів, способів виконання різних завдань. А після завершення навчання можете сміливо претендувати на посаду Junior frontend developer.
- Теорії без практики
- Застарілих механік роботи
- Переказу чужих лекцій і книг
- Питань без відповіді
Це буде захоплююче та ефективно!
- Призначення технологій
- Стек розробки для сайту
- Принцип роботи клієнт-сервер
- Консоль розробника
- Текстовий редактор і IDE
- Що таке HTML & CSS & JS і їх взаємодія
- Базові принципи верстки
- Знайомство з поняттям тегу і атрибуту
- Обов’язкова структура будь-якої веб-сторінки
- Поняття малих і блокових елементів веб сторінки
- Поняття парних і непарних тегів
- Семантичні теги
- Спецсимволи
- Робота з тегами і атрибутами
- Робота з посиланнями і якорями
- Робота з текстом і коментарями
- Робота з різними системами кольорів в HTML
- Робота з зображеннями
- Нумеровані і марковані списки
- Робота з блоками (div)
- Таблиці
- Форми
- Елементи форм (інпут)
- Айфрейми
- Підключення різних модулів до документу HTML
- Форматування елементів HTML
- Що таке CSS?
- Базові принципи написання стилів
- 3 способи додавання CSS в HTML сторінку
- Зовнішні таблиці стилів
- Відносні і статичні одиниці вимірювання
- Робота зі шрифтами (сімейства, стилі, розміри, насиченість)
- Робота з межами елементів (бордер радіус, тіні)
- Робота з відступами і розмірами елементів
- Градієнти
- Робота з властивостями float і clear
- Flex box
- Робота з фоном (зображення і колір, розміри, прозорість)
- Селектори
- Селектори поглибленого рівня
- Пріоритети стилів
- Перезапис стилів
- Псевдокласи, псевдоелементи
- Робота з анімацією елементів
- Валідація
- Медіазапити
- Встановлення корисних розширень для верстки
- Відладник коду
- Робота з Git і хостинг на Git
- Адаптивна верстка
- Гумова верстка
- Pixel perfect верстка
- Статична верстка
- Кросбраузерна верстка
- Змішана верстка
- Поняття растрової та векторної графіки
- Переваги й особливості Figma
- Огляд панелей та інструментів
- Сітки
- Шари і компоненти
- Експорт параметрів і графіки
- Редагування елементів
- Побудова мережі
- Робота з горизонтальним і вертикальним вирівнюванням
- Об’єднання елементів
- Методи роботи з комірками
- Підключення
- Правила і директиви
- Керуючі директиви і вирази
- Використання міксинів
- Застосування на практиці
- Загальна інформація про мову та її особливості
- Довідники, специфікації і посилання на них
- Консоль розробника
- Зовнішні скрипти і порядок їх підключення
- Змінні та правила їх іменування
- Типи даних та приведення типів
- Оператори порівняння і логічні значення
- Умовні оператори
- Логічні оператори
- Конструкція switch
- Цикли ‘for’, ‘while’, ‘do … while’
- Рекурсія і поняття стека
- Поняття і синтаксис функції
- Функціональні вирази
- Області видимості
- Псевдомасив ‘arguments’
- Функції зворотного виклику (callback)
- Перебираючі методи
- Внутрішнє представлення масивів
- Передача за посиланням
- Перебір властивостей
- Стандартні вбудовані об’єкти
- Робота з Git Bash
- Workflow від створення сховища до його відправки на віддалений сервер
- Робота з гілками
- Робота з конфігураційними файлами
- Прототип об’єкта
- Властивість prototype
- Вбудовані класи
- Функція – конструктор
- Успадкування класів
- Внутрішня структура методу ‘extend’ і поліфіл ‘Object.create’
- Функціональне успадкування
- Загальна інформація про ОВП
- Інкапсуляція
- Поліморфізм
- Успадкування
- Абстракція даних
- Поняття ‘клас’
- Робота з ‘this’ (4 способи використання)
- ES6 стандарт (стрілочні функції)
- ES6 let / const + var + hoisting
- Використання ‘call’, ‘apply’
- Дескриптори, гетери та сетери властивостей
- Шаблон проектування ‘Singletone’ через замикання
- Збиральник сміття
- Загальна інформація про ‘window’, ‘navigator’, ‘document’, ‘location’, ‘history’
- Навігація по DOM елементам
- Властивості вузлів
- Додавання та видалення вузлів
- Робота зі стилями
- Робота з координатами
- Вступ у браузерні події
- Порядок обробки подій (Event Loop)
- Асинхронні події
- Робота з SetTimeout / SetInterval
- Спливання і перехоплення
- Делегування подій
- Події з використанням миші, клавіатури та прокручування
- Завантаження документа
- Формування DOM покроково
- Формування Render Tree
- Порядок формування CSSOM
- Оптимізація, мініфікація, робота з HTTP Cache
- Вступ у протокол HTTP
- Переваги та недоліки протоколу
- Робота з AJAX
- Загальна інформація про RESTful API
- JSON
- CORS
- Promise + async await
- Cookies
- LocalStorage, sessionStorage
- IndexedDB (import / require)
- Manifest
- ServiceWorker
- Progressive Web Application
- Навчання в форматі перегляду стріму або запису занять
- Особистий кабінет з доступом до матеріалів курсу
- Допомога ментора курсу
- Актуальну програму навчання

