онлайн-курс

Онлайн-курс
Frontend-разробник

Курс на якому ти напишеш свій чистий код на JavaScript, попрацюєш із різними видами верстки, а також адаптаціями проектів під будь-які екрани. Ти дізнаєшся, як створювати не лише сайти, але й веб-додатки, набуваючи найактуальніші навички в сфері фронтенд розробки.

Наші випускників проходять стажування в ІТ компанії
Cyber Pioneers

Навчайся в зручному для себе ритмі
Онлайн

формат

3,5 місяці

тривалість

26 занять

кількість занять

Хто такий front-end розробник?

Frontend-розробка - це дуже популярний IT-напрямок, який передбачає низький поріг входження для початківців та високий темп розвитку. Цей напрямок роботи не потребує глибоких знань у математиці, алгоритмах та структурах даних.

Front-end передбачає поєднання програмування з творчістю, уважністю та розумінням сучасних трендів.

Результат роботи фронтенд-розробника - це правильно працюючий сайт або додаток, який виконує передбачені замовником функціі.
Фронтенд-розробник займається «зовнішньою» частиною сайту, тобто інтерфейсом. Він "збирає" сайт, настроює форми, кнопки, виринаючі вікна та інше.

Це другий за популярністю напрямок в ІТ серед початківців.

Що треба знати фронтенд-розробнику?

  • HTML – це мова розмітки веб, CSS – каскадні таблиці стилів, JavaScript – основна мова програмування для Front End.
  • Важливо знати як мінімум один з трьох фреймворків: Angular.js, React.js, Ember.js. Саме їх використовують більшість веб студій.

Скільки заробляє фронтенд-розробник?

В середньому зарплата новачків фронтенд-розробників стартує від 400-600 $. Найчастіше за декілька років фронтенд-розробник переростає у фулстек-розробника та займається більш масштабними проектими.
1000$ - 2500$
гілка зарплат у фронт-енд розробці від Junior до Senior спеціаліста (на місяць)

Кому підійде цей курс?

Тим, хто хоче почати кар’єру в ІТ
Ти навчишся перекладати мову дизайну на мову коду, опануєш мову розмітки сторінки HTML, а також мову стилів CSS, будеш працювати з JavaScript та React, а зафіналиш курс власним pet-проєктом
IT фахівці нетехнічних спеціальностей, які шукають професійного росту
Якщо ти вже працюєш в ІТ, але відчуваєш, що досягаєш стелі кар’єрного росту, тебе приваблює робота з кодом, поєднання творчості та технологічності, цей курс допоможе реалізувати потенціал і отримати кратний професійний ріст.
Backend Developer, які прагнуть стати Full-Stack розробниками
Розвинеш свої навички, такі як робота з Git, використання інструментів розробки та робота з API, зможеш ефективніше дебажити та оптимізувати серверний код, розуміючи, як дані передаються та обробляються на стороні клієнта.
Якщо ти хочеш працювати в одній з найприбутковіших галузей, заробляючи у валюті – ми чекаємо!

Чому студенти обирають цей курс

МЕНТОРСЬКА ПІДТРИМКА ПРОТЯГОМ ВСЬОГО КУРСУ
Наші ментори допомагають студентам освоїти не тільки hard skills, а й soft skills
МИ МАЄМО СПРАВЖНІЙ ІТ-ШНИЙ ДОСВІД
Ми самі виросли з IT компанії та беремо участь у розвитку ринку разом із ІТ Асоціацією EASE
БОНУС: БЕЗКОШТОВНИЙ КУРС АНГЛІЙСЬКОЇ ДЛЯ ІТ
Для студентів усіх курсів є факультативні заняття «English for IT»
ОПЛАТА У РОЗСТРОЧКУ АБО ЧАСТИНАМИ
Для студентів діє програма розтермінування від 3 до 12 місяців. 

Програма навчання

3,5 місяця

15 модуля

27 занять

18 годин

Налаштування простору для кодингу
Основи HTML і CSS. Синтаксис.
Блочні елементи та стрічкові елементи.
Додавання тексту та його стилізація. Гіперпосилання.
Додавання графіки. Списки.

Практика: ти створиш першу сторінку та зверстаєш свій перший header
Результат: ти вмієш створювати базові елементи вебсторінки.

Створення таблиць. Робота з формами.
HTML 5 теги. Семантика.
Робота з ресурсами (іконки, шрифти, fontawesome).
Position. Flexbox. Grid.
Домашнє завдання.
Тести.

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

Результат: ти впевнено працюєш з можливостями HTML, CSS, розумієш семантику та принципи взаємодії з ресурсами.

Grid.
Анімації CSS.
Адаптивність CSS (@media).
SASS (SCSS).
Bootstrap.
Домашнє завдання (коротке відео).
Тести.

Практика: ти будеш працювати з додаванням анімації та опануєш принципи крос-браузерної верстки.

Результат: ти вмієш налаштовувати анімацію на сайті та адаптовувати інтерфейс під параметри екранів гаджетів.

Вступ до JS.
Змінні. Типи даних.
Тернарний та логічні оператори.
Інструкція switch.
Цикли: for, while, do…while.
Function Declaration і Function Expression.
Анонімні функції.
Функція callback.
Функції alert, prompt, confirm.

Практика: ти будеш працювати з алгоритмами JavaScript: створення функціоналу для відкривання/закривання модальних вікон; практичні приклади використання циклів; використання alert, prompt та confirm.

Результат: ти зрозумієш в чому полягає суть мови програмування JavaScript та навчишся підключати її код до власної сторінки.

Цикли: for, while, do..while.
Об’єкти. Методи об’єктів.
Копіювання об’єктів та посилання.

Практика: ти будеш створювати mock дані для магазину, а також розв’язувати практичні задачі з використанням методів об’єктів та масивів.

Результат: ти розумітимеш, що таке об’єкти та для чого вони використовуються.

Вчимося створювати масиви.
Методи масивів.
Використання циклів.

Практика: ти будеш розв’язувати завдання з використанням методів об’єктів та масивів.
Результат: ти вмієш працювати з масивами та використовувати цикли.

Контекст виклику і this. Методи call, bind та apply.
Функції конструктори. Дескриптори об’єктів.
Local та Sesion storages. Дата та час.
Глобальний об’єкт window. Об’єкт лексичного оточення.

Практика: ти будеш вчитися працювати зі зберіганням користувача та куплених товарів в LocalStorage, а також з використанням глобального об’єкта window.

Результат: ти вмієш працювати з даними та функціями.

Замикання.
Оператор try/catch/finally.
Синтаксис setTimeout/setInterval.
Як влаштований Event Loop в JavaScript.
OOP та його принципи.

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

Результат: ти розумієш принцип взаємодії із сервером, розробленим з використанням об’єктно-орієнтованого програмування. 

Об’єкт Promise.
Функції async/await в JS.
DOM/BOM. Вибір елементів на сторінці.

Практика: ти будеш використовувати об’єкт Promise, працювати з вибором елементів на сторінці та бібліотекою jQuery.

Результат: ти розумієш, що таке запити та звідки беруться дані на вебсторінці, вмієш працювати з DOM та розташовувати всі елементи сторінки в ієрархічній послідовності.

NPM та Yarn. Огляд властивостей Webpack. Робота з import/export.
Огляд структури React додатку.
JSX та props: Рендеринг списків та Conditional рендеринг.
Віртуальний DOM.
Обробка подій. Контрольовані та неконтрольовані компоненти.
Практика: ти дізнаєшся, як виглядає дефолтниц React проєкт, а також працюватимеш з перенесенням верстки з сайту магазину в JSX код.
Результат: ти навчишся оптимізувати ресурси, робити асинхронні завантаження та розробляти застосунки за модульним підходом, а також використовувати механізми import та export для організації модульного коду та зручного управління залежностями між файлами.

Життєвий цикл компонента.
Створення ErrorBoundary.
React-router-dom.
Портали.

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

Результат: ти отримаєш глибокі та розширені знання щодо управління та підтримки внутрішніх процесів React-додатків.

Хук useState.
Хук useRef.
Хук useEffect.
Хук useMemo.
Хук useCallback.
React.memo().

Практика: ти напишеш основну логіку сайту магазину з використанням хуків, які описано вище.

Результат: ти будеш розуміти принципи використання React хуків, які роблять функціональні компоненти більш потужними, читабельними та підтримуваними.

Способи стилізації React додатку:
Css modules.
Styled Components.
Redux та redux-thunk.
Material UI.
Formik.

Практика: ти будеш працювати зі створенням Css modules, Styled Components, Redux, Material UI та Formik.
Результат: ти отримаєш практичні навички у стилізації та управління станом React-додатків. Вивчення цих інструментів та бібліотек дозволить тобі вибирати оптимальний підхід залежно від потреб та вимог конкретного проєкту.

Підказки щодо архітектури, бібліотек і софту
Написання документації
Написання коду (функцій і скриптів)
Написання unit-тестів (модульне тестування)
Тестування коду із запропонованими вхідними даними
Виправлення помилок як синтаксичних, так і логічних
Оптимізація та оформлення коду
Поліпшення коду на основі найкращих практик
Зміна однієї бібліотеки на іншу
Допомога у пошуку вразливостей у коді, динамічне тестування (DAST), статичне тестування (SAST)
Робота з git

Наші випускників проходять стажування в ІТ компанії
Cyber Pioneers

Сертифікація OpenEDG js institute

Certified Entry-Level JavaScript Programmer

По закінченню курсу ви маєте можливість отримати ваучер на проходження европейської сертифікації від JavaScript Institute
Сертифікація JSE (сертифікація JS розробника-початківця) – це професійний сертифікат, який вимірює здатність виконувати завдання кодування, пов’язані з основами програмування на мові JavaScript.
Кандидат повинен продемонструвати достатні знання основних концепцій мови JavaScript, включаючи основи синтаксису та семантики JavaScript, найкращі практики програмування, інструменти та ресурси JS, а також такі концепції кодування, як змінні, типи даних, приведення типів, оператори, взаємодія з користувачем, потік керування, функції, помилки, винятки, налагодження та усунення несправностей.
На курсі діє "ЗАМОРОЗКА".

Ми добре розуміємо стан подій у нашій країні, тому програма максимально адаптована до реалій. Ви можете навчатися у власному темпі. У нас є обов'язковий модуль по підготовці до працевлаштування. Крім того ми постійно шукаємо партнерів де наші студенти можуть пройти стажування або працевлаштуватись.

Як відбуватиметься навчання

  • Особистий кабінет з доступом до модулів
  • Відеозаписи кожного заняття завжди доступні, ти можеш повернутись до них у зручний час. Також, ти отримаєш доступ до додаткових матеріалів: гайдів, чек-листів, інструкцій з використання інструментів
  • Домашні завдання (індивідуальні та у групі), а також тестування після кожного модуля
  • Закритий чат для спілкування
  • Дипломна робота
У процесі навчання вас підтримуватиме команда методистів. Ви зможете поставити будь-яке запитання та отримати консультацію у внутрішньому чаті
В кінці курсу вас чекає модуль з HR-ом PowerCode Academy по підготовці до співбесіди, де ви отримаєте відповіді на усі важливі питання щодо працевлаштування.

Ваші результати після курсу

Ви навчитесь:
Опануєте інструменти:

Приклади робіт, які виконують студенти на курсі

Відгуки про курс Frontend:

Наші викладачі

У нас у команді не просто викладачі, але наставники, практики та найкращі друзі студентів!
Олександра Рекало
  • Викладач курсу Front End розробник у Powercode Academy
  • Web developer, designer, IT mentor
  • Досвід практичної роботи близько 8 років, понад 100 реалізованих проектів
  • Досвід викладання основ веб розробки понад 5 років
  • Більше ніж 1000 студентів освоїли HTML та CSS під менторством Олександри
Елеонора Кормиш
  • Викладач курсу Front End розробник у Powercode Academy
  • Діючий Full-stack developer у сфері game-development
  • Магістр комп’ютерних наук
  • Основний напрямок діяльності – розробка багатофункціональних сайтів для конвертації зображень, відео та музики, обробки графічних файлів та створення графіків
  • Являється співавтором Сhrome-розширення для тестувальників
  • Основні стеки: JavaScript, jQuery, React, Vue
Віктор Бойко
  • Викладач курсу Front End розробник у Powercode Academy
  • Expert Full-stack developer в Infopulse 15 років стажу практичної роботи
  • Останні 5 років робота над проектами TietoEVRY, однієї з найбільших скандинавських ІТ компаній
  • Брав участь в розробці системи аудитів для норвезьких нафтогазових компаній, інтелектуальних систем моніторингу для мережі японських супермаркетів та працював на одного з найбільших виробників аудіо-відео гарнітур
  • Основні стеки: JavaScript, TypeScript, Node.js, Angular, React, React Native, Electron

Дізнатись вартість курсу та умови.

демо-урок з курсу

Відправлено!

Посилання на демо-урок надіслано на e-mail, який ви вказали у формі.

Хочу купити курс у розстрочку

Надішліть нам ваші контакти і наш менеджер передзвонить вам, щоб відповісти на всі питання про навчання у нашій Академії1

Натискаючи на кнопку я погоджуюсь з політикою конфіденційності