Встигніть пройти безкоштовний тиждень до 7 листопада

Старт курсу: 31 жовтня

Курс-професія

Frontend-розробник

Безкоштовний тиждень

Frontend розробка

Зробіть перші кроки у фронтенд-розробці. Пройдіть один безкоштовний тиждень курсу, почніть працювати з HTML та дізнайтеся:

• як проходить навчання на Prometheus;
• як влаштовані браузери та яка між ними різниця;
• що таке середовище розробки;
• що необхідно, щоб за 14 тижнів претендувати на позицію Trainee Frontend Developer.

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

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

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

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

00днів
00годин
00хвилин
00секунд

3 головні технології

HTML, CSS, JavaScript

Власний вебсайт

від макета до завантаження на хостинг

Початковий рівень

з нуля до Trainee Frontend Developer

Про курс
Лектор
Програма
Вартість
Відгуки

067 568 74 33

1 Зареєструйтеся в один клік

2 Отримайте доступ до 4 безплатних модулів

3 Ознайомтеся з додатковими матеріалами

4 Оцініть стиль викладання авторки курсу Світлани Сікори

5 Зрозумійте,
чи підходить вам навчання

6 Продовжуйте навчання на курсі
«Frontend-розробник»

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

Безкоштовний тижденьВступний блок. Як працює WWW та браузери. Середовище розробки. HTML

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: загальний огляд семантики

Безкоштовний тиждень — це можливість ознайомитися з професією та основними інструментами frontend-розробника. Розпочніть заняття зараз, щоб розібратися, чи підходить вам обрана професія та навчання у Prometheus+.

2Тиждень 2

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
В чому принципова різниця та як змусити їх взаємодіяти
Практика

3Тиждень 3

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
Практика

4Тиждень 4

13. JavaScript – основи

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

14. JavaScript – основи II

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

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

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

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

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

17. Рендеринг

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

5Тиждень 5

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
Інші методи масивів
Вкладені масиви

6Тиждень 6

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

7Тиждень 7

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”

8Тиждень 8

32. JS — ООП

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

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

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

9Тиждень 9

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 – підсумок
Кінозал

10Тиждень 10

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()
Підсумок

11Тиждень 11

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
Кінозал

12Тиждень 12

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

13Тиждень 13

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

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

47. Основи React.js

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

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

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

14Тиждень 14

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. Що далі?

Що далі?

Бонуси для випускників

Усім слухачам курсу, хто впродовж місяця після початку сертифікації отримає сертифікат про завершення навчання, ми даруємо два спеціальних курси. Дякуємо, що обираєте Prometheus+!

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