Курс Fullstack розробник

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

Вступ

• Огляд курсу
• Будуємо наш перший міні проєкт

Інтернет

• Основи Інтернету: Розуміння глобальної мережі
• IP-адреси та доменні імена: Розшифровка інтернет-адрес
• HTTP (Hypertext Transfer Protocol): Як працює веб-комунікація
• Веб-браузери: Навігація інтернет-інтерфейсу
• HTML, CSS, та JavaScript: Будівельні блоки Інтернету
• DNS (Domain Name System): Адресної книга Інтернету
• Хостинг: Де знаходиться Інтернет
• Архітектура клієнт-сервер: Діалог Інтернету
• Розробка Front-End та Back-End: Дві половини вебу

HTML

• Базова структура HTML-документа
• Призначення та використання HTML-тегів
• Різниця між блочними та рядковими елементами
• Використання заголовків та абзаців в HTML
• Додавання посилань на інші сторінки або веб-сайти
• Додавання зображень на веб-сторінку
• Створення списків (впорядкованих та невпорядкованих)
• Створення таблиць в HTML
• Використання форм в HTML
• Створення текстових вводів, радіокнопок, прапорців та випадаючих списків
• Додавання міток та заповнювачів до елементів форми
• Створення кнопок в HTML
• Додавання коментарів до вашого HTML-коду
• Створення семантичного HTML за допомогою відповідних тегів
• Використання HTML-сутностей для відображення спеціальних символів
• Додавання аудіо та відео на веб-сторінку
• Використання елемента HTML canvas для створення графіки
• Додавання метаданих до вашого HTML-документа, таких як заголовок та опис
• Використання контуру документа HTML5
• Додавання мікроданих до вашого HTML-документа для SEO
• Створення адаптивного веб-дизайну за допомогою HTML
• Використання медіазапитів для створення різних макетів для різних розмірів екрану
• Створення семантичних тегів HTML5, таких як <article>, <section> та <nav>
• Додавання нижнього колонтитула на вашу веб-сторінку
• Створення навігаційного меню за допомогою HTML
• Використання HTML для структурування даних в таблиці
• Створення спливаючих вікон та підказок за допомогою HTML та CSS
• Використання iframe для вбудовування вмісту з іншого веб-сайту
• Створення якірних посилань на конкретні розділи веб-сторінки
• Використання HTML5 для вбудовування SVG-графіки на вашу веб-сторінку
• Додавання CSS та JavaScript до вашого HTML-документа
• Перевірка вашого HTML-коду за допомогою інструменту валідатора

CSS

• Призначення та використання CSS
• Різниця між вбудованим, внутрішнім та зовнішнім CSS
• Синтаксис та структура правил CSS
• Використання селекторів для цілеспрямованого вибору HTML-елементів
• Блокова модель та її вплив на макет та стиль
• Використання властивостей margin, padding та border
• Використання властивості display для контролю макету та видимості
• Використання властивості position для контролю позиціонування елементів
• Використання властивості float для створення колонок та сіток
• Використання властивості clear для контролю обгортання елементів
• Використання властивості overflow для контролю прокрутки та обрізання
• Використання властивості z-index для контролю порядку накладання елементів
• Використання властивості background для додавання кольору та зображень до елементів
• Використання властивості font для контролю стилю тексту
• Використання властивості text для контролю вирівнювання тексту, декорування та трансформації
• Використання властивості box-shadow для додавання тіней до елементів
• Використання властивості transform для створення анімацій та переходів
• Використання властивості transition для створення плавних анімаційних ефектів
• Використання медіазапитів для створення адаптивного веб-дизайну
• Використання flexbox для створення гнучких макетів
• Використання сіткового макету для створення складних сіткових структур
• Використання правила @keyframes для створення користувацьких анімацій
• Використання префіксів постачальників для крос-браузерної сумісності
• Використання CSS-препроцесорів, таких як Sass або Less
• Використання CSS-фреймворків, таких як Bootstrap або Foundation
• Використання CSS-змінних для створення динамічних стилів
• Використання селекторів атрибутів для цілеспрямованого вибору елементів з конкретними атрибутами
• Використання псевдокласу :hover для створення ефектів наведення
• Використання псевдокласів :active та :focus для стилювання активних та фокусованих елементів
• Використання псевдоелементів :before та :after для додавання вмісту до елементів
• Використання псевдокласів :first-child та :last-child для цілеспрямованого вибору перших та останніх дітей елемента
• Використання псевдокласу :nth-child для цілеспрямованого вибору конкретних дітей елемента
• Використання функції calc() для виконання обчислень в CSS
• Використання властивості filter для застосування візуальних ефектів до елементів
• Використання властивості backdrop-filter для додавання розмиття або інших ефектів до фону елемента
• Використання властивості clip-path для створення користувацьких форм та вирізів
• Використання властивості pointer-events для контролю подій миші на елементах
• Використання властивості user-select для контролю поведінки вибору тексту
• Використання властивості text-overflow для контролю поведінки переповнення тексту
• Використання інспектора CSS Grid для налагодження макетів сітки

JavaScript

• Призначення та використання JavaScript
• Основи програмування, такі як змінні, типи даних та оператори
• Як писати код JavaScript в документі HTML
• Різниця між глобальними та локальними змінними
• Як використовувати if/else для умовної логіки
• Як використовувати цикли, такі як for, while та do/while
• Як працювати з масивами та методами масивів, такими як push, pop, shift та unshift
• Як працювати з об'єктами та методами об'єктів, такими як Object.keys та Object.values
• Як використовувати функції для написання повторно використовуваного коду
• Як використовувати параметри функцій та повернені значення
• Як використовувати оператор розповсюдження для маніпуляцій з масивами та об'єктами
• Як використовувати шаблонні літерали для створення динамічних рядків
• Як використовувати синтаксис стрілкової функції ES6
• Як використовувати зворотні виклики та функції вищого порядку
• Як використовувати setTimeout та setInterval для асинхронного програмування
• Як працювати з датами та часом за допомогою об'єкта Date
• Як використовувати регулярні вирази для зіставлення зразків
• Як використовувати консоль для налагодження коду JavaScript
• Як працювати з даними JSON
• Як використовувати API fetch для виконання HTTP-запитів
• Як використовувати проміси та async/await для асинхронного програмування
• Як працювати з DOM для маніпуляцій з веб-сторінками
• Як використовувати слухачі подій для реагування на дії користувачів
• Як динамічно створювати та видаляти елементи HTML
• Як обходити DOM для вибору та маніпуляції елементами
• Як використовувати API classList для додавання та видалення класів CSS
• Як працювати з cookies та локальним сховищем
• Як використовувати AJAX для виконання асинхронних HTTP-запитів
• Як використовувати WebSockets для комунікації реального часу
• Як використовувати API Document Object Model (DOM) для доступу та зміни елементів HTML
• Як використовувати об'єкт Window для доступу до властивостей та методів браузера
• Як створювати анімації та візуальні ефекти за допомогою JavaScript та CSS
• Як працювати з Canvas для програмування графіки
• Як використовувати WebGL для програмування 3D-графіки
• Розуміння підняття JavaScript
• Розуміння замикань JavaScript
• Розуміння прототипів та наслідування JavaScript
• Розуміння обробки помилок та налагодження JavaScript
• Розуміння ключового слова 'this' в JavaScript
• Розуміння строгого режиму JavaScript
• Розуміння циклу подій JavaScript
• Розуміння контексту виконання та ланцюга області видимості JavaScript
• Розуміння функцій map, reduce та filter JavaScript
• Розуміння деструктивного присвоєння JavaScript
• Розуміння async та await в JavaScript
• Розуміння генераторів та ітераторів JavaScript
• Розуміння модулів JavaScript та імпорту/експорту
• Розуміння оператора об'єднання null та опціонального ланцюжка в JavaScript
• Розуміння побітових операторів JavaScript
• Розуміння структур даних set та map в JavaScript
• Розуміння структур даних weakset та weakmap в JavaScript
• Розуміння інтернаціоналізації та локалізації JavaScript
• Розуміння питань продуктивності JavaScript
• Розуміння питань безпеки JavaScript
• Розуміння найкращих практик та конвенцій кодування JavaScript

Система контролю версій

• Контроль версій: Як відстежувати зміни файлів за допомогою контролю версій
• Git: Як керувати кодом за допомогою Git
• Репозиторій: Як зберігати код в репозиторіях Git
• Бранчі та мьорджі: Як працювати незалежно за допомогою гілок Git
• GitHub: Як співпрацювати за допомогою GitHub
• Співпраця та форки: Як внести вклад в проєкти за допомогою Git та GitHub

Інструменти для JavaScript

• NPM (Node Package Manager): Як керувати пакетами JavaScript
• Інструменти збірки: Автоматизація за допомогою webpack, Parcel або Rollup
• Лінтери та форматери: Як підтримувати якість коду за допомогою ESLint та Prettier.
• Запускачі завдань: Як автоматизувати завдання за допомогою Gulp та Grunt.
• Пакувальники модулів: Як пакувати модулі JavaScript за допомогою webpack та Rollup
• Транспілятори: Як забезпечити крос-браузерну сумісність за допомогою Babel
• Управління залежностями: Як керувати пакетами за допомогою NPM або Yarn
• Редактори коду та IDE: Як ефективно працювати з Visual Studio Code
• Гаряче перезавантаження: Як бачити миттєві зміни коду за допомогою HMR webpack або React Fast Refresh
• Неперервна інтеграція/неперервне розгортання (CI/CD): Як автоматизувати робочі процеси за допомогою Jenkins, Travis CI або GitHub Actions

React

• Основи React та його призначення у веб-розробці
• Як створити компонент React та його методи життєвого циклу
• Як використовувати синтаксис JSX для відображення компонентів на веб-сторінці
• Як використовувати стан та реквізити для управління даними компонента
• Як використовувати обробники подій для реагування на взаємодію користувача
• Як використовувати умовний рендеринг для показу або приховування компонентів за певних умов
• Як використовувати списки та ключі для відображення динамічних даних
• Як використовувати форми та контрольовані компоненти для обробки вводу користувача
• Як використовувати композицію компонентів для створення складних інтерфейсів
• Як використовувати хуки React для управління станом та життєвим циклом у функціональних компонентах
• Як використовувати хук useEffect для управління побічними ефектами в компонентах
• Як використовувати хук useContext для обміну даними між компонентами
• Як використовувати хук useReducer для управління складною логікою стану
• Як використовувати React Router для обробки навігації в односторінковому додатку
• Як використовувати React Context для управління глобальним станом у кількох компонентах
• Як використовувати Redux для управління станом в додатку React
• Розуміння ключів в React та чому вони важливі
• Розуміння меж помилок в React
• Розуміння компонентів вищого порядку в React
• Розуміння властивостей рендерингу в React
• Як використовувати рендеринг на стороні сервера для покращення продуктивності та SEO
• Як використовувати Storybook для розробки та тестування компонентів ізольовано
• Як використовувати інструменти розробника React для налагодження та інспекції компонентів React в браузері
• Як використовувати найкращі практики та шаблони проектування для створення масштабованих та легко підтримуваних додатків React

Сучасний CSS

• Стилізовані компоненти: Як стилізувати компоненти React
• CSS модулі: Як обмежити стилі CSS до компонентів
• Tailwind CSS: Як швидко створювати та стилізувати компоненти
• Атомний CSS: Як створювати повторно використовувані компоненти
• Бібліотеки CSS-in-JS: Як інтегрувати з JavaScript фреймворками
• Теми: Як застосовувати теми в усьому додатку
• Анімації та переходи: Як створювати плавні анімації в CSS
• Відповідна типографіка: Як створювати регульовану типографіку
• Розширені селектори: Як динамічно застосовувати стилі
• CSS Grid Frameworks: Як використовувати Susy або CSS Grid Generator
• Оптимізація продуктивності: Як оптимізувати продуктивність CSS
• Налагодження CSS: Як діагностувати проблеми з макетом

Тести

• Основи тестування: Як розуміти різні типи тестів
• Jest: Як тестувати JavaScript з Jest
• react-testing-library: Як тестувати компоненти React
• Cypress: Як виконувати end-to-end тестування веб-додатків
• Playwright: Як автоматизувати взаємодію з браузером для тестування
• Покриття тестами: Розуміння концепції покриття тестами та того, як воно допомагає вимірювати ефективність ваших тестів. Вивчіть, як використовувати інструменти, такі як Istanbul, для генерації звітів про покриття коду та виявлення областей вашої кодової бази, які не мають покриття тестами.
• Покриття тестами: Як вимірювати ефективність тестування за допомогою Istanbul
• Тестування в процесі неперервної інтеграції/неперервного розгортання (CI/CD): Як інтегрувати тестування в робочі процеси CI/CD

Аутентифікація

• Основи аутентифікації: Як захистити веб-додатки
• Базова аутентифікація: Як надсилати облікові дані з кожним запитом
• Сесії: Як підтримувати стан користувача за допомогою сесій
• JWT (JSON Web Tokens): Як використовувати JWT для аутентифікації та авторизації
• OAuth: Як делегувати доступ до ресурсів за допомогою OAuth
• Одноразова аутентифікація (SSO): Як аутентифікуватися один раз для кількох служб
• Питання безпеки: Як захистити механізми аутентифікації
• Впровадження аутентифікації: Як впровадити аутентифікацію в веб-додатках

Express.js

• Express.js: Як створювати серверні додатки
• Розробка бекенду: Як обробляти програмування на стороні сервера
• Основи Node.js: Як запускати JavaScript на стороні сервера
• SQL бази даних: Як виконувати операції CRUD з SQL
• NoSQL бази даних: Як працювати з моделями даних NoSQL
• Створення RESTful API: Як проєктувати API з Express.js
• Забезпечення додатків Express.js: Як забезпечити свої серверні додатки
• Оптимізація продуктивності: Як оптимізувати ваші додатки на Express.js для покращення продуктивності
• Обробка помилок та проміжне програмне забезпечення: Як обробляти помилки в Express.js
• Перевірка даних: Як перевіряти дані на стороні сервера
• Завантаження файлів: Як обробляти завантаження файлів в Express.js
• Розбиття на сторінки та фільтрація: Як реалізувати розбиття на сторінки в RESTful API
• Кешування: Як покращити продуктивність сервера за допомогою кешування
• Тестування та налагодження: Як тестувати та налагоджувати серверні додатки
• Розгортання: Як розгортати додатки Express.js
• Хмарні сервіси та масштабування: Як масштабувати додатки за допомогою хмарних сервісів

Пошук роботи

• Створення резюме та портфоліо: дізнайтеся, як створити переконливе резюме та побудувати вражаюче портфоліо, що демонструє ваші навички, проєкти та досягнення. Підлаштовуйте своє резюме та портфоліо так, щоб вони висвітлювали актуальні технології, фреймворки та проєкти.
• Підготовка до технічного інтерв'ю: готуйтеся до технічних інтерв'ю, виконуючи завдання з програмування. Ознайомтеся з поширеними форматами інтерв'ю, такими як сесії на дошці або вправи з парного програмування.
• Побудова професійної мережі: витрачайте час на побудову професійної мережі в спільноті програмних інженерів. Відвідуйте галузеві заходи, приєднуйтеся до онлайн-спільнот та спілкуйтеся з іншими фахівцями на платформах, таких як LinkedIn або GitHub. Нетворкінг може надати цінні лідей та можливості для пошуку роботи.
• Дослідження компаній: досліджуйте компанії, якими ви зацікавлені, щоб зрозуміти їх продукти, технології, культуру та цінності. Прилаштовуйте свої заявки на роботу та підготовку до інтерв'ю так, щоб вони відповідали потребам компанії та демонстрували ваш ентузіазм щодо їх місії.
• Поведінкове інтерв'ю та м'які навички: готуйтеся до поведінкових інтерв'ю, які оцінюють ваші м'які навички та культурне вписування. Навчайтеся артикулювати свої досвіди, підходи до вирішення проблем та здатностей до співпраці. Показуйте свої навички комунікації, роботи в команді та адаптації під час інтерв'ю.
• Постійне навчання: слідкуйте за останніми трендами, технологіями та кращими практиками у full-stack розробці. Виделяйте час на вивчення нових фреймворкiв, інструментів або мов, які є востребованими в галузі. Постійне навчання свідчить про ваше прагнення до професійного зростання.

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

• Навчання з професійним куратором. Доступ до курсу на 1 рік
• 5 проєктів у портфоліо
• Сертифікат про проходження курсу
• Гарантоване працевлаштування за договіром
• Домашні завдання
• Іспит по завершенню навчання