Старт курсу: 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
Premium
Стипендія
Standard
Premium
Вартість пакету для команд
Для придбання курсу за спеціальними умовами надішліть реквізити та інформацію про кількість осіб на пошту [email protected] або у Facebook — ми підготуємо для вас персональну пропозицію.
Відгуки
Володимир Нацвлішвілі
Юрій Максимович
Анна Вольфман
Віталій Венгриняк
Kateryna Vyshtaliuk
Чи є обмеження по віку?
Немає. Головне, щоб у студента було бажання пройти курс до кінця і застосувати набуті знання на практиці.
Які мінімальні знання потрібні для успішного проходження курсу?
Бажано мати базові знання з HTML/CSS/JS.
Чи достатнього цього курсу, щоб розпочати пошук роботи?
Так, у курсі зібрана вся необхідна інформація, яка знадобиться новачкам для старту кар’єри в ІТ. Пошук роботи може стати коротшим й успішнішим з курсовим проєктом, який ви створите для свого портфоліо.
Чи будуть записи вебінарів?
Так. Всі вебінари будуть доступні в матеріалах курсу у записі наступного дня після проведення. Ви зможете переглянути їх у зручний час.
Скільки часу матеріали курсу будуть доступні після його завершення?
Матеріали будуть доступні для слухачів після завершення курсу без обмежень по часу.
Якою мовою викладається курс?
Курс викладається українською мовою.
Чи можливо повернути курс? Які правила повернення коштів?
Повернення коштів за всі курси, придбані на Prometheus+, можливе протягом 14 днів. Запит на повернення направляється на пошту [email protected]; у ньому вказуються email, на який зареєстровано акаунт, ПІБ та курс, за який ви хочете повернути кошти. Процедура повернення коштів займає 30 календарних днів з моменту схвалення заявки. Щоб уникнути зловживань з боку слухачів, ми залишаємо за собою право обмежити або відхилити запити на повернення коштів у випадках, коли:
- значна частина курсу була використана або завантажена студентом до того, як було оформлено заявку на повернення коштів;
- студент подав кілька запитів на повернення коштів за один і той самий курс;
- студент вимагає повернути зайву суму;
- користувачі порушили Умови або Правила платформи.
Як проходить навчання
Навчальний кабінет Prometheus
Після придбання курсу ви отримаєте доступ до персонального кабінету, в якому зібрані всі відео, завдання та додаткові навчальні матеріали.
Зворотний зв’язок
Ви зможете поставити запитання на вебінарі чи в чаті, а також спілкуватися з іншими студентами курсу у закритій спільноті.
Будь-де та будь-коли
Переглядайте відеолекції курсу та виконуйте завдання у зручний для вас час. Завантажте наші мобільні застосунки, щоб продовжити навчатися дорогою на роботу чи під час подорожі.
Сертифікат
Успішно виконавши всі завдання курсу, ви отримаєте сертифікат, який ви зможете з гордістю додати до свого резюме.
Соціальна відповідальність
Доходи від продажу курсів Prometheus+ дозволяють нам підтримувати та розвивати безкоштовні курси Prometheus: від критичного мислення і підприємництва до підвищення кваліфікації вчителів і лікарів.
Prometheus це
Нагадайте про старт
Співробітники цих компаній навчаються в нас
