Онлайн-курсFrontend-разробник
Наші випускників проходять стажування в ІТ компанії
Cyber Pioneers
формат
тривалість
кількість занять
Хто такий front-end розробник?
Front-end передбачає поєднання програмування з творчістю, уважністю та розумінням сучасних трендів.
Результат роботи фронтенд-розробника - це правильно працюючий сайт або додаток, який виконує передбачені замовником функціі.
Це другий за популярністю напрямок в ІТ серед початківців.
Що треба знати фронтенд-розробнику?
- HTML – це мова розмітки веб, CSS – каскадні таблиці стилів, JavaScript – основна мова програмування для Front End.
- Важливо знати як мінімум один з трьох фреймворків: Angular.js, React.js, Ember.js. Саме їх використовують більшість веб студій.
Скільки заробляє фронтенд-розробник?
Кому підійде цей курс?
Чому студенти обирають цей курс
МЕНТОРСЬКА ПІДТРИМКА ПРОТЯГОМ ВСЬОГО КУРСУ
Наші ментори допомагають студентам освоїти не тільки hard skills, а й soft skillsМИ МАЄМО СПРАВЖНІЙ ІТ-ШНИЙ ДОСВІД
БОНУС: БЕЗКОШТОВНИЙ КУРС АНГЛІЙСЬКОЇ ДЛЯ ІТ
ОПЛАТА У РОЗСТРОЧКУ АБО ЧАСТИНАМИ
Програма навчання
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
- Інформаційна сторінка: JSE Certification
- Канал доставки: OpenEDG Testing Service (TestNow™)
- Правила іспиту: JSE Testing Policies Page
Ми добре розуміємо стан подій у нашій країні, тому програма максимально адаптована до реалій. Ви можете навчатися у власному темпі. У нас є обов'язковий модуль по підготовці до працевлаштування. Крім того ми постійно шукаємо партнерів де наші студенти можуть пройти стажування або працевлаштуватись.
Як відбуватиметься навчання
- ФОРМАТ
- Особистий кабінет з доступом до модулів
- Відеозаписи кожного заняття завжди доступні, ти можеш повернутись до них у зручний час. Також, ти отримаєш доступ до додаткових матеріалів: гайдів, чек-листів, інструкцій з використання інструментів
- Домашні завдання (індивідуальні та у групі), а також тестування після кожного модуля
- Закритий чат для спілкування
- Дипломна робота
- СУПРОВІД
- КАР'ЄРА
Ваші результати після курсу
- ти розумієш синтаксис HTML, CSS та вмієш грамотно верстати вебресурси за макетом дизайнера
- опануєш мову програмування JavaScript та бібліотеку React, яка дозволяє ефективно будувати динамічні та інтерактивні вебсторінки
- будеш самостійно створювати інтерактивні сайти та додатки
- отримаєш необхідну базу для роботи з комерційними замовленнями
- створиш перший pet-проєкт у портфоліо
Приклади робіт, які виконують студенти на курсі
Відгуки про курс Frontend:
Курс побудований дуже гідно - нічого зайвого з теорії та багато практики. Дуже великий обсяг інформації подавався на курсі та наявність відеозаписів занять виявилася величезним бонусом. Викладач - Ілля, дякую йому величезне за фідбеки та пояснення зрозумілою мовою!
Для тих, хто вибирає для себе курс – можу сміливо радити PowerCode (до речі, одного з бажаючих направила до вас) Після закінчення курсу мені запропонували взяти участь у проекті IT Nation 2.0, як ментор, чому я шалено рада! Дякую за курс і можливості!!!"
Подобалася манера офлайн навчання, а також викладач, з яким мені пощастило – на курсах дали мінімальну та зрозумілу базу, далі я самостійно заглибився у розробку та пройшов стажування у PowerCode.
Рекомендую ці курси всім початківцям, запевняю, що на ринку ви краще не знайдете)"
Сподобався матеріал на заняттях, а також викладач, його пояснення, ведення уроку та актуальна інформація. База дається, а далі самій довелося заглиблюватись і заглиблюватись. Але в результаті все-таки пішла на роботу в IT компанію.
Порадила б курс тим, хто хоча б розуміє, чого хоче і хоч трохи знається на напрямках IT спеціальностей.
Після успішного закінчення курсів, я почав стажуватися в IT компанії PowerCode, думаю, що це стане хорошим фундаментом для початку моєї кар'єри"
Наші викладачі
- Викладач курсу 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