Курс Front-end

На курсах по Front-end від компанії Foxminded ми навчаємо трьох стовпів Front-end: HTML, CSS, JavaScript. Наші студенти освоюють основи верстки та розмітки сторінки, навчаються підключати бібліотеки та віджети, валідувати та зберігати дані, а також забезпечувати ефективну взаємодію з Back-end частиною. У процесі курсів студенти створюють простий додаток, який можна буде додати до портфоліо проектів.

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

React

Git Course

Вiдеокурс по GitLab допоможе вам зрозуміти основні концепції та інструменти, які використовуються для керування проєктами програмного забезпечення. Під час цього курсу ви ознайомитеся з основами системи контролю версій Git та платформою GitLab, яка надає широкий спектр можливостей для спільної роботи над кодом, відстеження змін, управління задачами та багато іншого. Ви дізнаєтеся, як ефективно використовувати GitLab для спільної роботи в команді, ведення проєктів та забезпечення якості програмного забезпечення.

Передмова

Для всіх завдань курсу, які передбачають наявність дизайнів, ми надаємо їх у Figma, де вони чітко опрацьовані талановитим дизайнером. Тож у вас не виникне запитань щодо того, який вигляд має бути у виконаного завдання. У розділі React, окрім базових завдань, є завдання із зірочкою, спрямовані на найамбітніших студентів, щоб зробити ваше навчання ще цікавішим і наповненим відчуттям подолання виклику.

HTML/CSS

• Верстка сторінки відповідно до наданого дизайну, використовуючи Flex
• Верстка адаптивної веб-сторінки, використовуючи Flex і Grid для двох різних макетів
• Створення форми, аналогічної дизайну, обов'язково використовуючи всі зазначені інпути
• Створення анімації з використанням CSS
• Створення сторінки з паралакс-ефектом, де прокрутка покаже 4 пори року
• Створення сторінки документації з використанням дизайну
• Створення каруселі згідно з дизайном
• Фінал. Верстка повноцінної адаптивної веб-сторінки з використанням усіх вивчених у курсі технік

JavaScript

• Зміна кольору фону сторінки, що випадково генерується, під час кліку на кнопку
• Створення сторінки ресторанного меню з фільтрацією елементів за натисканням кнопки
• Сортування масиву різними способами (Bubble Sort, Sort by choice, Insertion Sort, Quicksort, Merge Sort)
• Реалізація класу валідації для перевірки строкових даних (OOP challenge)
• Створення віджета погоди з можливістю пошуку
• Створення списку завдань (Todo list) відповідно до дизайну. Todo list повинен зберігатися в cookie з обмеженим терміном дії
• Створення сторінки зі списком країн з можливістю переключитися на темну тему оформлення, фільтрацією за регіоном і пошуком за назвою
• Створення онлайн-магазину з кошиком покупок. Використання local storage
• JavaScript на серверній стороні (Node.js, Express). Створення простого API для додатка TODO
• Створення гри Doodle Jump на JavaScript. (Опціонально)

React

• Вступ до React. Створення mobile gallery app з використанням css/scss modules, styled-components або tailwind на вибір.
• Поглиблене занурення в React hooks. Створення простого додатка "Таймер" з використанням useState, useEffect, useMemo, useRef, useCallback.
• Форми в React. Створення сторінки з двома формами, використовуючи контрольовані та неконтрольовані компоненти.
• Керування станом у React. Створення гри хрестики-нулики з використанням однієї з бібліотек: redux-toolkit, zustand, mobx тощо.
• Маршрутизація в React. Створення додатка магазину з навігацією між сторінками, використовуючи react-router або аналогічні бібліотеки.
• UI Kit. Створення кастомних компонент (Button, Link, Input, Textarea, Checkbox, SelectMenu, Dropdown, ColorPicker тощо), що використовуватимуться у фінальному проєкті.
• Тестування у React. Написання юніт-тестів для UI Kit з попереднього завдання. Використання Jest framework і react-testing-library.
• Асинхронні операції в React. Створення клієнт-серверного додатка TODO з асинхронними операціями, використовуючи локальне API із завдання 2.9. Використання однієї з бібліотек: react-query, rtk-query, useSWR, redux-saga та ін.
• Фінальний проєкт - Веб-календар із широким функціоналом.

Angular

• Git Course
• HTML/CSS
• JavaScript
• Angular:
  • Створення основних компонентів, модулів, моделей та сервісів за допомогою Angular CLI
  • Види прив'язки даних
  • Вбудовані директиви
  • Події та форми
  • Використання та створення каналів (pipes)
  • Компоненти та їх життєвий цикл
  • Служби (Services) та їх провайдери
  • Маршрутизація та навігація
  • Модулі (створення та використання) та таке відкладене завантаження (lazy loading)
  • Асинхронні запити HTTP, використання бібліотеки RxJS
  • Зберігання даних із застосуванням Firebase

Vue.js

• Git Course
• Введення в Vue.js
  • Огляд фреймворка
  • Створення та використання компонентів
  • Встановлення та налаштування середовища розробки
• Маршрутизація в Vue та Vue CLI
  • Використання Vue Router для навігації в додатку
  • Робота з подіями та обробники подій
  • Пропси , події компонентів, директиви та реактивність
• Vite typescript and configuration
  • Робота з конфігурацією Vite та додатковими налаштуваннями
  • Створення алгоритмічної задачі
  • Створення анімацій
• Створення та валідація форм, локалізація та тестування
  • Створення форм та їх валідація за допомогою VeeValidate
  • Використовування ui бібліотеки vuesax
  • Основи тестування компонентів та додатку за допомогою VueTestUtils
  • Імплементація локалізації за допомогою vue-i18n
• Отримання, збереження та управління даними
  • Використання Axios або інших інструментів для взаємодії з API
  • Введення в управління станом за допомогою Vuex
  • Динамічне завантаження даних
• Todo список і робота з фаєрбейс
  • Робота з фаєрбейс за допомогою vuefire
  • Робота з різними типами запитів
  • Використання Vue Router для навігації в додатку
• SSR за допомогою Nuxt
  • Створення проєкту за допомогою Nuxt
  • Робота з сторами браузера
  • Імплементація проєкту по дизайну
• Підсумкове завдання
  • На основі пройденого курсу виконання задачі з використанням останніх тенденцій. Задача може увійти у ваш приклад виконаних задач.
• Багатоплатформенний проєкт (опціонально)
  • На основі пройденого курсу виконання задачі зі створення багатоплатформенного проєкту написаного на quasar.

Попередні вимоги

• Знання Javascript на базовому рівні
• Базові поняття верстки, знання та використання тегів HTML та селекторів CSS
• Навички пошуку інформації
• Знання англ. мови на рівні читання технічної документації

Особливості курсу

• Швидкість проходження курсу залежить від вас. Швидже вчитесь - менше платите. Середня швидкість проходження 4-5 місяців.
• 7 днів тестового періоду
• Менторинг
• Безкоштовна заморозка
• Можливість вибору напрямку

Викладачі курсу

Викладачі Angular:

• Олексій Стус - Senior Front-end (Angular) at Innovecs
• Юлія Ламотько - Front-end Angular Developer at JetSoftPro
• Антон Скиба - Senior Front-end Developer at LabOS
• Станіслав Діор - Senior Front-end Developer at Intersog
• Ростислав Рошкович - Software Web Developer (Angular) at Lazy ant's
• Марина Шарун - Front-end Developer at Ekreative
• Юрій Шевчук - Middle Front-end Developer at SoftServe

Викладачі React:

• Вадим Олійник - Senior Software Developer (React) at Itransition
• Віталій Мельник - Front-end Developer at SoftServe, EPAM
• Артур Полянський - Senior Front-end Developer at N-iX
• Владислав Зубко - Lead Fullstack Developer at Binary Studio
• Іван Беккер - Senior Front-end Developer at Customertimes
• Євген Матвєєв - Lead Front-end Developer at Radensy
• Вадим Свиридов - Senior Software Engineer at SoftServe
• Дмитро Винту - Software Engineer (React) at Grid Dynamics
• Олександр Сімонов - Front-end Developer at Bookmap
• Денис Абрамов - Middle React Developer at DTI Algorithmic
• Станіслав Діор - Senior Front-end Engineer at Intersog
• Євген Сметана - Front-end Engineer at Avenga
• Денис Ніканов - Senior Front-end Engineer at AgileEngine
• Юрій Вовк - Front-end Developer at PlanetOfHotels
• Данило Голенок - Senior Front-end Developer at Parimatch Tech
• Давид Бенідзе - Front-end Developer

Викладачі Vue.js:

• Ярослав Гюльназарян - Frontend Engineer at SoftBlues
• Віталій Мельник - Team/Tech lead front-end at GlobalLogic