Курс Frontend
Після завершення навчання зможете претендувати на посаду Junior Frontend Developer.
СТАРТ
18.04.2023
ЧАС
90 год.
по 2-3 рази на тиждень
з 19:00 до 22:00
ЦІНА
28500
17100 грн
Для юр. осіб ціна вказана без ПДВ
Оплата частинами:
10900грн x3
Про курс
Frontend-розробник відповідає за зовнішній вигляд продукту: за всі кольори та шрифти, паралакси та скролінги, анімацію й інші мультимедіа на сайті. Звичайно, структуру сторінок зазвичай продумує дизайнер, але саме програміст має реалізувати ідею та простежити, аби готовий проєкт відповідав макету.
JavaScript — головна мова frontend-розробників у web, якою вони програмують інтерфейси користувача. Їм часто доводиться займатися версткою сайтів: написанням HTML-коду та CSS-стилів для надання потрібної інформації. Саме тому для якісного фронтенду важливим є добре знання мов програмування, чистота коду та творчий підхід до завдань.
Протягом курсу ви опануєте структуру сторінки та наявні стилі, навчитеся працювати з HTML та CSS, дізнаєтеся, як надати сторінці того чи іншого вигляду. Після цього ви будете готові до вивчення більш складних речей, як-от мови JavaScript, її синтаксису та можливостей, фреймворків та інших додаткових інструментів, способів виконання різних завдань. А після завершення навчання можете сміливо претендувати на посаду Junior frontend developer.
Для кого даний курс
Ви — новачок
і хочете опанувати професію з невисоким порогом входження
Ви хочете отримати творчу професію
та залишити свою нудну роботу
Ви вже працюєте в IT,
але бажаєте змінити профіль або розширити знання
Ви займаєтеся самостійно,
але вам потрібно впорядкувати знання
Чому ви навчитеся?
Надавати продуктам ефектного зовнішнього вигляду, застосовуючи HTML & CSS та JavaScript
Розбиратися в основних інструментах та особливостях JavaScript
Працювати з консоллю розробника та перевіряти код на предмет помилок
Створювати анімації, інші інтерактивні елементи та додавати їх до продукту
Впливати на процес оптимізації завантаження сторінки та робити код більш читабельним
Вигідно презентувати себе роботодавцеві
Чого не буде
- Теорії без практики
- Застарілих механік роботи
- Переказу чужих лекцій і книг
- Питань без відповіді
В рамках курсу ви будете працювати в групах над реальними проектами.
Це буде захоплююче та ефективно!
Записатись на курс
Це буде захоплююче та ефективно!
Що включає курс?
30 занять — від лекцій до проєктів
2 заняття з англійської, на яких перевірите знання мови та поповните словниковий запас
Урок з пошуку роботи у сфері IT та «просування» себе
Контроль засвоєних навичок — практичні завдання та тести
Сертифікат про проходження програми
Досвід роботи в команді
Повні матеріали занять в особистому кабінеті на навчальній платформі
Програма навчання
Даний курс є частиною програми Frontend Development
, JavaScript Development
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
- Як вести себе на співбесіді
- Основні помилки на співбесіді
- Урок англійської мови №1
- Урок англійської мови №2
- Урок пошуку роботи
Працевлаштування
Ми надаємо нашим студентам можливість працевлаштуватися в компаніях-партнерах за їхнім запитом. ITEA також активно співпрацює з платформою Jungo, яка допомагає Junior-фахівцям знайти роботу. Завдяки цьому Ви отримуєте:
Кар'єрну консультацію
Допомогу у створенні перспективного резюме
Перший досвід роботи на стажуванні/фрілансі/аутстафінгу, в тому числі і на зарубіжних ринках
Встигни забронювати своє місце в групі
Ціна:
28500 грн
17100 грн
Що включає онлайн формат?
- Навчання в форматі перегляду стріму або запису занять
- Особистий кабінет з доступом до матеріалів курсу
- Допомога ментора курсу
- Актуальну програму навчання
Що кажуть наші випускники
Відгуки з ресурсу dou.ua
Дина Катеренюк
Всім привіт! Хочу поділитись своїм досвідом навчання в ITEA та розкажу трішки про працевлаштування (можливо комусь буде корисно, особливо, тим хто починає свій шлях в Frontend Development).
В ITEA я вивчала JavaScript, пройшла курс JS basic та JS advanced (витратила 3 місяці). В цілому, в ITEA дуже хороша програма курсу, але щоб її освоїти потрібно багато навчатись (в середньому витрачала 2-3 години на день). Домашні завдання перевіряє ментор і дає свій фідбек, якщо виникають складності у виконанні дз — ментор теж може допомогти в онлайн режимі.
Після успішного завершення курсів по JS в ITEA, я приступила до вивчення Angular (витратила 2 місяці), після чого написала проект і залила на gitlab.
До речі, для студентів, які закінчили курси з відзнакою, ITEA допомагає в працевлаштуванні — відправляє ваше резюме в компанії, з якими співпрацюють! ITEA дає дуже хороший старт!
І власне, після 5 місячного навчання я розпочала шукати роботу. Як і всі, в резюме я указала стек технологій, які вивчила та лінк на gitlab профіль.
На пошуки роботи я витратила 1 місяць, за який провалила 3 інтерв’ю (дякуючи яким покращила свої знання) та було 2 успішних інтерв’ю, після яких отримала офер.
....
Mariana Svirzhevska
Проходила курси JavaScript Base (05.2019 ), JavaScript Advanced (06.2019) і React JS (10.2019). Вибирала курс по програмі, яку в ньому будуть проходити (шукала, щоб окремо js базовий без хтмл, працюю верстальщиком і тратити час на це не хотілось).
JS Advanced i React викладав Андрій Доценко. Кожне заняття це близько 2х годин лекція (або lifecode з поясненням та посиланнями на відповідну документацію) і година практичне заняття (однак бувало й навпаки — година лекція, дві — практика). Загалом об’єм інформації величезний і не завжди просто (суб’єктивно мені react-redux, react hooks). Домашні завдання об’ємні та потребують поворошити мізками і все ж розібратись з матеріалом. Але це реально дуже допомагає вникнути в суть(!)
Звідси, для тих, хто шукає ’чарівну пілюлю’, де він просидить на курсах півтора місяці і стане відразу розробником — так не працює. Потрібно буде працювати і на занятті і в дома, вчитись самому докопатись до потрібного методу в документації, а не задавати 100 питань ментору (знову ж таки суб’єктивно, на роботі так само потрібно буде ритись в гуглі і вирішувати ту чи іншу задачку).
Для себе — отримала масу нових знань і навиків на цих курсах, а головне дійсно розібралась, як це працює ’під капотом’. Окремо величезне спасибі Андрієві Доценко, всі приклади і задачки він готував реальні, які найчастіше бувають на проектах, часто залишався після заняття, щоб відповісти на запитання по домашкам.
Всіх благ і пул реквестів без конфліктів.
