Курс Junior Front-end Developer

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

Trainee Level (1 Етап)

JavaScript Start

Середивище виконання

На цьому етапі ми встановимо весь інструментарій, що достатній для знайомства з мовою програмування JavaScript. До них відносяться платформа Node.js та IDE VS Code. З цими інструментами ми будемо працювати протягом усього курсу.

Змінні

Тут ми познайомимося зі змінними, дізнаємось яке їх призначення, що ми можемо зберігати в змінних і розглянемо синтаксис (правила) створення зміних.

Структури даних

На цьому етапі розглянемо структури даних, які використовуються в JS, такі як об'єкти, масиви, Map, Set. Розглянемо окремо кожен з них, наведемо приклади навіщо кожен з них використовують і які їх особливості.

Логічні операції, цикли. функції, помилки

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

Класи та екземпляри класів

В цьому розділі ми розкриємо тему класів. Які елементи є у класів, як вони взаємодіють, для чого вони використовуються, як допомагають робити нашу програму більш зрозумілою та простою до змін.

ООП

ООП - об'єктно-орієнтоване програмування. Підхід, який використовується у величезній кількості проєктів. Ця тема буде продовженням класової теми. Розглянемо поняття успадкування, інкапсуляції та поліморфізм, у чому їх особливість та які проблеми вони вирішують.

Особливості JS

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

Задачі перед менторингом

Розділ 1. Робота з примітивними типами даних

В розділі 10 задач на роботу з примітивними типами даних.

Розділ 2. Умовні оператори

Розділ містить 10 задач на закріплення навичок роботи з умовними операторами.

Розділ 3. Цикли

Цей розділ мscnbnm 10 задач для вирішення за допомогою циклів for та while.

Розділ 4. Масиви

10 задач на роботу з масивами.

Junior Level (2 Етап)

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

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

HTML/CSS

• Основи верстки
• Створення макету в стилі "святий Грааль"
• Flex і Grid layouts
• Реалізацію складних інтерфейсів користувача

JavaScript

• Взаємодія з DOM, рядками та масивами
• Об'єктно-орієнтований JavaScript
• Розширення та валідація форм за допомогою JS
• Оновлення веб-сторінок за допомогою AJAX
• Зберігання даних із застосуванням Local та Session Storage
• Збереження проміжних даних із використанням cookie

Angular

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

Vue.js

Git Course

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

Введення в Vue.js

• Огляд фреймворка
• Створення та використання компонентів
• Встановлення та налаштування середовища розробки

Маршрутизація в Vue та Vue CLI

• Використання Vue Router для навігації в додатку
• Робота з подіями та обробники подій
• Пропси, події компонентів, директиви та реактивність

Vue typescript and configuration

• Робота з конфігурацією Vite та додатковими налаштуваннями
• Створення алгоритмічної задачі
• Створення анімацій

Створення та валідація форм, локалізація тестування

• Створення форм та їх валідація за допомогою VeeValidate
• Використовування ui бібліотеки vuesax
• Основи тестування компонентів та додатку за допомогою VueTestUtils
• Імплементація локалізації за допомогою vue-i18n

Отримання, збереження та управління даними

• Використання Axios або інших інструментів для взаємодії з API
• Введення в управління станом за допомогою Vuex
• Динамічне завантаження даних

Todo список і робота з фаєрбейс

• Робота з фаєрбейс за допомогою vuefire
• Робота з різними типами запитів
• Використання Vue Router для навігації в додатку

SSR за допомогою Nuxt

• Створення проєкту за допомогою Nuxt
• Робота з сторами браузера
• Імплементація проєкту по дизайну

Підсумкова задача

На основі пройденого курсу виконання задачі з використанням останніх тенденцій. Задача може увійти у ваш приклад виконаних задач.

Багатоплатформенний проєкт (опціонально)

На основі пройденого курсу виконання задачі зі створення багатоплатформенного проєкту написаного на quasar.

Strong Junior Level (3 Етап)

Проєкт 1

Java + Angular or React

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

Проєкт 2

Java + Angular or React

Проєкт Learning Management System - інструменти для організації навчального процесу. Java, Spring, мікросервісна архітектура. Інтеграція з Google Calendar, Atlassian Jira.

Проєкт 3

Python + React

Проєкт "Платформа для благодійної організації, що займається опікою над безпритульними котиками (міні-притулок для котів)". Система має за мету поширити інформацію про діяльність організації, інформацію про котів, що потребують прихистку, збору донатів для роботи притулку, покупки кормів і т.д.

Проєкт 4

JuniorSpace (Python + React)

JuniorSpace - це платформа, спрямована на об'єднання молодих IT-фахівців та громадських організацій для створення команд, які розробляють інноваційні рішення в області інформаційних технологій. Мета проєкту - створити сприятливе середовище для розвитку новачків у сфері IT, одночасно допомагаючи соціально важливим проєктам. Платформа пропонує різноманітні інструменти для співпраці та комунікації, такі як веб-сайт, телеграм-чат та соціальні мережі, і реалізує різні форми монетизації для забезпечення стійкості та підтримки проєкту.

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

• Допомога ментора
• Практика
• Проєкт у портфоліо
• Особистий куратор
• Сертифікат про проходження курсу
• Допомога з оформленням LinkedIn
• Перевірка резюме
• Пробна співбесіда
• Вебінар по софт-скілам