Старт курсу: 18 січня

Старт курсу: 18 січня

Frontend розробка

Frontend розробка

Розпочніть свій шлях в IT всього за 4 місяці інтенсивного навчання з senior frontend developer компанії N-iX Світланою Сікорою, яка брала участь у розробці застосунків для компаній Honda, Toyota і Ryanair.

Навчіться frontend розробці на практиці разом із лекторкою з досвідом викладання понад 7 років: створіть свій перший повноцінний вебсайт — від макета до завантаження на хостинг!

Реєстрацію завершено. Якщо хочете приєднатись до наступного запуску курсу, залиште свої дані і ми зв’яжемось із вами, коли реєстрація відкриється.

До завершення реєстрації на курс залишилося:

До старту курсу залишилося:

До закінчення ранніх цін залишилося:

  • 00днів
  • 00годин
  • 00хвилин

Що ви вивчите?

Впродовж курсу ви зможете здобути практичні навички, необхідні для першої роботи за спеціальністю, а саме:

• сформуєте глибоке розуміння трьох головних технологій для frontend розробників: HTML, CSS та JavaScript;

• розберетеся в особливостях роботи браузерів;

• заглибитесь у нюанси анімації, адаптивної верстки для будь-яких пристроїв та різноманітних ефектів;

• навчитеся застосовувати JavaScript для динамічності та інтерактивності вебсторінок;

• навчитеся налагоджувати комунікацію між frontend та backend частинами проєкту;

• розберетесь із системою контролю версій Git для зручної спільної розробки в команді;

• познайомитеся з найпопулярнішою на сьогоднішній день JavaScript-бібліотекою React.js;

• пройдете шлях створення повноцінного вебсайту — від макета до завантаження на хостинг.

Формат курсу

• Відеолекції
• Практичні завдання
• Вебінари
• Чат-підтримка в Slack
• Курсовий проєкт (опційно)
• Презентації до відеолекцій
• Тестові завдання
• Матеріали для самостійного опрацювання
• Необмежений доступ до курсу
• Сертифікат

Тривалість

• 14 тижнів
• 30+ годин відеолекцій
• 50+ практичних завдань
• Курсовий проєкт (опційно)

Хто такі frontend розробники?

Це програмісти, які відповідають за зовнішній вигляд сайтів, вебсервісів та мобільних застосунків: верстку шаблонів, оформлення тексту, клієнтську логіку програмного продукту та взаємодію користувача з інтерфейсом. Без них неможливо створити зручний та ефективний цифровий продукт.
Приєднуйтеся до числа слухачів курсу, щоб опанувати затребувану професію та розпочати свій шлях в IT.

Чому цей курс?

Це оптимальний старт для кар’єри в IT

Пройшовши курс та здобувши всі необхідні навички, ви підготуєте себе до вдалого старту в кар'єрі!

Перший досвід

Під час навчання ви зможете виконати курсовий проєкт, який буде цінним доповненням до вашого портфоліо: це підвищить шанс на працевлаштування.

Незгасний попит

За даними DOU, frontend розробники вже більш як рік у п’ятірці найзатребуваніших IT-спеціалістів на ринку праці — тобто, зі знаннями ви здобудете ще й попит на вас на ринку праці.

Мобільність

Як робота, що не потребує офісу, frontend розробка має свої переваги — що б не сталося, для творчості потрібні лише комп’ютер та інтернет.

Сфера, що розвивається

Frontend розробники потрібні кожному бізнесу, що має свій сайт — а кількість таких бізнесів з року в рік лише збільшується.

Найкраще співвідношення ціна/якість

Ми уважно стежимо за якістю наших продуктів і завжди намагаємося дати найвигіднішу цінову пропозицію на ринку за співвідношенням ціна/якість!

Для кого цей курс?

Початківці

які тільки розпочинають шлях у сфері IT

ІТ-спеціалісти

які бажають додати до своїх компетенцій frontend розробку

Інші спеціалісти

які хочуть змін на користь прибутковішої та перспективнішої роботи

Після проходження курсу ви зможете:​

створювати верстку вебсайтів та застосунків для будь-яких пристроїв

створювати сайти, які будуть коректно відображатися в усіх браузерах

анімувати елементи вебсторінок

застосовувати JavaScript для динамічності та інтерактивності

писати асинхронний код на JavaScript

здійснювати запити на сервер, отримувати та опрацьовувати відповідь від нього

працювати з пакетними менеджерами та використовувати їх для підключення сторонніх модулів

працювати з Git

Навчайся в найкращих

Світлана Сікора

• Senior frontend розробниця в компанії N-iX

• Досвід роботи у сфері frontend розробки — понад 8 років

• Працювала над створенням вебпродуктів та гібридних мобільних застосунків для компаній Honda, Toyota, J&J, Ryanair 

• Понад 11 000 слухачів успішно завершили її курс «Основи Web UI розробки» тільки на платформі Prometheus

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

1. Вступний блок

  • Про курс
  • Чи достатньо цього курсу, щоб повністю освоїти FrontEnd?
  • Я влаштуюсь на роботу? Як отримати максимум від цього курсу.
  • Що таке веброзробка, Frontend та  Backend.
  • Статичні та динамічні вебсайти.
  • Історія всесвітньої павутини та поточна ситуація
  • Процес розробки вебзастосунку
  • Обов’язки та завдання Frontend розробника

2. Як працює WWW та браузери (загальний огляд)

  • Що таке WWW?
  • Браузери, в чому між ними різниця, як влаштований браузер?
  • Що відбувається, коли користувач вводить адресу в адресний рядок браузера та тисне “ентер”?

3. Середовище розробки

  • Огляд редакторів коду
  • Online редактори коду
  • Offline редактори коду 
  • HTML/CSS валідатори

4. HTML

  • HTML: загальні поняття, терміни, базова структура документа
  • HTML: як правильно коментувати код
  • HTML: робота з текстом
  • HTML: списки 
  • HTML: гіперпосилання
  • HTML: зображення
  • HTML: таблиця
  • HTML: форма 
  • HTML: блочні та лінійні елементи
  • HTML: мультимедіа
  • HTML: загальний огляд семантики

5. CSS – вступ

  • CSS: вступ
  • CSS величезний, але без паніки!
  • CSS: загальні поняття, синтаксис
  • CSS: підключення
  • CSS: прості селектори
  • Групування селекторів
  • Прості та комплексні селектори
  • Псевдоселектори
  • Як порахувати важливість селектора
  • Скорочений запис CSS стилів
  • Відносні величини

6. CSS властивості, що застосовуються найчастіше

  • Властивості, які застосовуються найчастіше: Color (rgb, hsl, keyword, HEX)
  • Властивості, які застосовуються найчастіше: Background
  • Властивості, які застосовуються найчастіше: Text
  • Властивості, які застосовуються найчастіше: Font-family
  • Як підключити сторонні шрифти
  • Box-model
  • Властивості, які застосовуються найчастіше: float
  • Властивості, які застосовуються найчастіше: display
  • Властивості, які застосовуються найчастіше: position
  • Вендорні префікси
  • Наслідування
  • Спеціальні символи
  • Практика

7. CSS-ефекти

  • Text-shadow
  • Box-shadow
  • Filters
  • Transition
  • Transform
  • Animation
  • Практика

8. CSS — Flexbox та Grid

  • Що таке Flexbox та Grid?
  • Flexbox: вступ
  • Flexbox: container
  • Flexbox: items
  • Grid
  • В чому принципова різниця та як змусити їх взаємодіяти
  • Практика

9. CSS — гнучка верстка

  • Адаптивна та респонсивна верстка
  • Media Queries: вступ
  • Media Queries
  • Практика

10. CSS — Bootstrap

  • Для чого потрібен Bootstrap
  • Огляд Bootstrap
  • Підключення Bootstrap
  • Компоненти Bootstrap
  • Layout та Grid system
  • Респонсивний Grid
  • Чи дійсно мені потрібен Bootstrap?

11. CSS – Препроцесори

  • Що таке препроцесори?
  • Переваги використання препроцесорів?
  • Пакетні менеджери – огляд, встановлення npm
  • Практичне заняття: встановлюємо та налаштовуємо SCSS

12. HTML5 – розширені можливості

  • Кістяк HTML сторінки
  • Елемент <head>: Вступ
  • Елемент <head> => <base>
  • Елемент <head> =>  <meta>
  • Що означає HTML5? Для чого потрібен !DOCTYPE?
  • Семантика в HTML5
  • Практика

13. JavaScript – основи

  • Що таке JavaScript? Область застосування
  • Коротка історія JavaScript
  • Підключення JavaScript
  • Важливі нюанси роботи з JavaScript
  • Змінні в JavaScript
  • Типи даних (примітиви)
  • Об”єкти
  • Масиви
  • Методи та властивості масивів
  • Арифметика та присвоєння
  • Взаємодія з користувачем
  • Умови
  • Конструкція SWITCH
  • Цикли

14. JavaScript – основи II

  • Функції в JavaScript
  • Області видимості в JavaScript
  • DOM: Document Object Model
  • DOM методи
  • Огляд подій у JavaScript

15. Ефективний процес розробки

  • Ефективний процес розробки: Вступ
  • Ефективний процес розробки: Налаштування середовища розробки
  • Ефективний процес розробки: Як шукати інформацію
  • Ефективний процес розробки: Робота з помилками

16. Як працює веб

  • Як працює Інтернет?
  • Як працює веб?

17. Рендеринг

  • Рендеринг: процес відображення вебсторінки
  • Що блокує рендеринг?

18. JS – під капотом

  • Розширене визначення JS
  • Як виконується JS?
  • Динамічна та слаботипізована мова програмування
  • Середовище виконання JS має значення!
  • Підсумок
  • Еволюція JS
  • Директива “Use strict”
  • Як аналізується JS
  • Що відбувається всередині JS engine
  • Мова JavaScript vs Browser API
  • Збирач сміття та робота з пам’яттю

19. JS – типи даних та операції з даними

  • Типи даних. Примітиви
  • Типи даних. Number
  • Типи даних. String
  • Типи даних. String. Властивість length
  • Типи даних. String. Прості методи
  • Типи даних. String. Методи з аргументами
  • Типи даних. Null, undefined
  • Типи даних. Boolean. Правдиві та хибні значення
  • Типи даних. Symbol
  • Типи даних. BigInt
  • Primitive vs Reference value
  • Арифметика та присвоєння. Об’єкт Math

20. JS – Array

  • Що таке Array
  • Методи-ітератори. Вступ
  • Callback
  • Методи-ітератори: forEach()
  • Методи-ітератори: map()
  • Методи-ітератори: filter(), find(), findIndex()
  • Методи-ітератори: reduce()
  • Chaining
  • Інші методи масивів
  • Вкладені масиви

21. JS — Object

  • Що таке Object
  • Більше про об’єкти
  • Допустимі назви полів об’єкта
  • Ланцюжок властивостей (chaining)
  • Перевірка існування властивості об’єкта
  • Spread operator (…)
  • Object.assign()
  • Деструктуризація

22. JS — Функції

  • Що таке Function
  • Параметри функції
  • Функція як метод об’єкта
  • Функція – це об’єкт!

23. JS — контекст виклику функції/методу

  • Контекст виклику функції (this)
  • Метод bind()
  • Методи call() та apply()
  • Що браузер робить із this
  • Функція-стрілка та this
  • Getters, setters

24. JS – робота з помилками (error handling)

  • Для чого існує error handling (обробка помилок)
  • Конструкція try/catch
  • Власні помилки (custom errors)
  • try/catch/finally

25. JS — DOM

  • Що таке DOM
  • Document vs Window
  • Як утворюється DOM
  • Nodes vs Elements
  • Attribute vs Property

26. JS — пошук DOM-елементів

  • Огляд методів запиту (query methods)

27. JS — обхід DOM

  • Обхід DOM: знайомство з термінами
  • Обхід дочірніх елементів
  • Обхід батьківських елементів
  • Обхід сусідніх елементів
  • Обхід DOM: підсумок

28. JS – робота з DOM

  • Створення DOM елементів: огляд
  • .innerHTML
  • .insertAdjacentHTML()
  • .createElement()
  • .createDocumentFragment()
  • Методи вставки елементів
  • Клонування елементів
  • Видалення елементів
  • Робота з DOM: підсумок

29. JS — стилізація DOM-елементів

  • .style
  • .className
  • .classList

30. JS – DOM – Кінозал

  • Кінозал: фрагменти
  • Кінозал: рядковий шаблон

31. JS – DOM події

  • Вступ до подій
  • Способи “слухання” подій
  • .addEventListener() та .removeEventListener()
  • Об’єкт “Event”
  • .preventDefault()
  • Фази: “спливання” та “занурення”
  • .stopPropagation()
  • Делегування події
  • Події та ключове слово “this”
  • Типи подій
  • Подія “scroll”

32. JS — ООП

  • Вступ до блоку занять
  • Прототипне наслідування
  • Функція-фабрика
  • Функція-конструктор
  • Класи в JavaScript
  • Поле та властивість (field vs property)
  • Об’єкти та класи
  • Принципи ООП
  • Інкапсуляція
  • Наслідування
  • Поліморфізм
  • Статичні методи/поля/властивості
  • Ключове слово instanceOf
  • Вбудовані класи
  • Об’єкт Date
  • Кінозал
  • ООП: підсумок

33. JS — розширені концепції функцій

  • Розширені концепції функцій
  • Чисті функції
  • Замикання: вступ
  • Лексичне оточення
  • Функція, що повертає функцію
  • Замикання
  • Замикання та пам’ять
  • Рекурсія і стек
  • Рекурсія та пам’ять
  • Знайомство з регулярними виразами

34. JS — Browser API

  • Вступ до Browser Object Model
  • BOM vs DOM
  • Browser API
  • Дані користувача, які не приховати
  • Локальні сховища браузера
  • Web Storage: LocalStorage vs SessionStorage
  • Web Storage: Cookies
  • Локальний сервер
  • Web Storage: Cookies (продовження)
  • Web Storage: IndexedDB
  • Робота з IndexedDB
  • Web Storage – підсумок
  • Кінозал

35. JS — асинхронність

  • Вступ до блоку занять
  • Синхронність та асинхронність
  • Таймери: setTimeout, setInterval
  • Цикл подій (event loop)
  • Порядок виконання (execution order)
  • setTimeout(0)

36. JS — Promises

  • Що таке об’єкт Promise
  • Ланцюжок промісів
  • Promise: робота з помилками
  • Promise: .then().catch().finally()
  • Async/await
  • Async/await: робота з помилками
  • Async/await vs Promises
  • Promise.race(), Promise.all(), Promise.allSettled()
  • Підсумок

37. JS – комунікація з сервером: XmlHTTPRequest

  • Комунікація з сервером: вступ
  • Як відбувається Frontend <=> Backend комунікація
  • HTTP: загальне уявлення
  • Початкові налаштування. Фіктивний сервер
  • Знайомство з XmlHTTPRequest об’єктом та GET запит
  • JSON
  • JSON в деталях
  • Промісифікація HTTP запитів
  • POST запит
  • DELETE запит
  • Статуси відповіді на запит (Response status codes)
  • Робота з помилками

38. JS – комунікація з сервером: Fetch API

  • Знайомство з Fetch API
  • POST запит
  • HTTP Headers
  • Робота з помилками
  • XmlHTTPRequest vs fetch
  • Кінозал

39. JS — ES6 Modules

  • Як розділити код на модулі
  • Перші кроки до JS Modules
  • Фіктивний сервер
  • export/import

40. Git

  • Система контролю версій (version-control system)
  • Git: вступ
  • Встановлення та робота з Git
  • package.json

41. Deployment (web hosting)

  • Deployment (web hosting): вступ
  • Deployment (web hosting): розгортання проєкту на сервері

42. Code style

  • Поради щодо стилю коду: Назви змінних та зарезервовані слова
  • Поради щодо стилю коду: Оптимізація коду

43. Огляд вебфреймвоків

  • Фреймворки: загальна картина
  • Огляд веб фреймворків

44. Огляд мобільних фреймвоків

  • Види мобільних застосунків
  • Огляд мобільних фреймворків

45. NodeJS

  • Огляд NodeJS

46. Знайомство з бібліотекою React.js

  • Що таке Реакт
  • Навіщо використовувати Реакт (React vs VanillaJS)”
  • Що таке компоненти?
  • React CLI
  • Аналіз проєкту, згенерованого за допомогою  React CLI
  • Що таке JSX?
  • Як працює Реакт

47. Основи React.js

  • Знайомство з навчальним проєктом
  • Аналіз навчального проєкту
  • Перша власна компонента
  • Робота зі складнішими компонентами
  • Більше компонент
  • Робота з виразами в JSX
  • “props”
  • Списки та ключі

48. React state (useState hook) + події

  • Як Реакт НЕ працює
  • Концепція “React state”. useState хук
  • Робота з подіями
  • Підйом стану
  • Більше практики

49. Робота з сервером + useEffect hook

  • Підготовка проєкту до роботи з сервером. Перший запит до сервера
  • Як НЕ можна надсилати запит до сервера
  • Знайомство з useEffect hook
  • Що можна і що не можна використовувати як useEffect залежності
  • useEffect cleanup function
  • useEffect – підсумок

50. React routing

  • Односторінкові та багатосторінкові веб сайти та застосунки
  • Інсталюємо та використовуємо React Router для навігації

51. Основи Redux

  • Що таке Redux
  • Як працює Redux
  • Створюємо Redux Store
  • Використовуємо дані з Redux Store у React компоненті
  • Що таке Redux Action
  • Більше про Redux Actions
  • Підсумок

52. Додатково про React

  • Віртуальний DOM
  • React DevTools

53. Що далі?

  • Що далі?

Мінікурс «Як знайти першу роботу в ІТ»

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

Мінікурс «Англійська для початківців у сфері ІТ»

  • Найпоширеніша лексика та граматика для роботи в ІТ
  • Як презентувати себе роботодавцю, щоб отримати першу роботу в ІТ
  • Як грамотно говорити на щоденних зустрічах
  • Як листуватися з клієнтами
  • Як спілкуватися з командою

*Матеріали будуть доступні після отримання сертифікатів

Соціальна місія Prometheus

Творимо майбутнє, де найкраща освіта доступна кожному!

Платні курси Prometheus+ дають нам можливість створювати власні безплатні освітні продукти та перекладати українською всесвітньо відомі програми найпрестижніших університетів світу, а також довготривало підтримувати їхнє існування – покривати витрати на серверні потужності, надавати технічну підтримку слухачам та оновлювати зміст програм, коли він втрачає актуальність. 

Від початку повномасштабного вторгнення доходи від продажу курсів Prometheus+ дозволили нам:

запустити низку закритих та відкритих курсів для ЗСУ, на яких вже 150 000 слухачів навчаються життєво необхідним на фронті навичкам;

профінансувати функціонування та розвиток платформи Prometheus, на безплатних курсах якої з початку повномасштабного вторгнення зареєструвалося  2 100 000 слухачів.

За 8 років існування Prometheus ми запустили близько 50 платних курсів та понад 300 безплатних. 

Чому варто обрати курс від Prometheus+?

Унікальна програма

Кожен курс – це результат роботи цілої команди фахівців. Ми залучаємо найкращих експертів-практиків та витрачаємо кілька місяців на підготовку курсу, щоб дати вам саме те, що насправді необхідне та дійсно працює.

Максимум практики

На курсі подається лише необхідна теорія, а більшість часу приділяється практичним завданням, воркшопам, спринтам та QA-сесіям з лектором. Навчання за принципом Learning by doing гарантує найкращі результати.

Постійна менторська підтримка

У навчанні ви не залишаєтеся на самоті. З вами на зв’язку автор курсу – під час живих вебінарів, Q&A-сесій і в Slack, де ви можете ставити та обговорювати будь-які питання й отримувати зворотний зв’язок.

Допомога в кар’єрі

На вас чекають бонусний мінікурс «Як знайти першу роботу в ІТ», корисні кар’єрні поради, симуляція технічних інтерв’ю, перший кейс у портфоліо – усе, що дозволить швидше розпочати кар’єру.

Необмежений доступ до курсу

Будь-якої миті ви можете повторити складну для вас тему або додатково систематизувати отримані знання – доступ до всіх матеріалів курсу відкривається назавжди.

Вартість курсу

Рання реєстрація до 12 червня

10% прибутків від продажів буде перераховано на потреби ЗСУ.

Standard
  • 14 тижнів
  • 200+ відеороликів
  • 20+ годин відео
  • 5 вебінарів з лектором
  • чат-підтримка з лектором
  • курсова робота для портфоліо (опційно)
  • додаткові матеріали
  • презентації, тестові завдання
  • необмежений доступ до курсу
  • іменний сертифікат
Нагадати про старт
Premium
  • 14 тижнів
  • 200+ відеороликів
  • 20+ годин відео
  • 5 вебінарів з лектором
  • чат-підтримка з лектором
  • курсова робота для портфоліо (опційно)
  • додаткові матеріали
  • презентації, тестові завдання
  • необмежений доступ до курсу
  • іменний сертифікат
  • перевірка та відгук на курсову роботу
  • вебінар на тему «Безпека у веб-розробці»
  • вебінар на тему «Огляд IDE (WebStorm / Visual Studio) та їхні переваги над редакторами коду»
  • вебінар на тему «Ефективний пошук роботи frontend розробника»
Нагадати про старт

Вартість пакету для команд

Для придбання курсу за спеціальними умовами надішліть реквізити та інформацію про кількість осіб на пошту [email protected] або у Facebook — ми підготуємо для вас персональну пропозицію.

3-10 осіб
-10%
11-20 осіб
-20%
20+ осіб
-30%

Відгуки

Немає. Головне, щоб у студента було бажання пройти курс до кінця і застосувати набуті знання на практиці.

Так, у курсі зібрана вся необхідна інформація, яка знадобиться новачкам для старту кар’єри в ІТ. Пошук роботи може стати коротшим й успішнішим з курсовим проєктом, який ви створите для свого портфоліо.

Так. Всі вебінари будуть доступні в матеріалах курсу у записі наступного дня після проведення. Ви зможете переглянути їх у зручний час.

Матеріали будуть доступні для слухачів після завершення курсу без обмежень по часу.

Курс викладається українською мовою.

Повернення коштів за всі курси, придбані на Prometheus+, можливе протягом 14 днів. Запит на повернення направляється на пошту [email protected]; у ньому вказуються email, на який зареєстровано акаунт, ПІБ та курс, за який ви хочете повернути кошти. Процедура повернення коштів займає 30 календарних днів з моменту схвалення заявки. Щоб уникнути зловживань з боку слухачів, ми залишаємо за собою право обмежити або відхилити запити на повернення коштів у випадках, коли:

  • значна частина курсу була використана або завантажена студентом до того, як було оформлено заявку на повернення коштів;
  • студент подав кілька запитів на повернення коштів за один і той самий курс;
  • студент вимагає повернути зайву суму;
  • користувачі порушили Умови або Правила платформи.

Як проходить навчання

Prometheus це

2 860 000
слухачів
400+
онлайн-курсів
2 370 000
виданих сертифікатів
9
років у сфері освіти

Нагадайте про старт

Співробітники цих компаній навчаються в нас