Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиFrontend / Svelte: Магія Простоти

Svelte: Магія Простоти

Вигляд:

Модуль 1. Старт проекту TaskFlow

1

Чому Svelte — це революція

Компілятор vs фреймворк

2

Створюємо проект TaskFlow

Налаштування та структура

3

Перша сторінка додатку

Header та базовий layout

4

Додаємо інтерактивність

Кнопки та реактивність

5

Стилізуємо TaskFlow

CSS та темна тема

Модуль 2. Компоненти TaskFlow

6

Компонент TaskCard

Створюємо картку задачі

7

Props для TaskCard

Передаємо дані в картку

8

Список задач TaskList

Контейнер для карток

9

Події: виконання задачі

Чекбокси та dispatch

10

Події: видалення задачі

Кнопка delete з підтвердженням

11

Компонент Badge

Пріоритети та статуси

12

Збираємо UI разом

Композиція компонентів

Модуль 3. Реактивна магія

13

Лічильник виконаних

Реактивні декларації $:

14

Прогрес-бар завдань

Обчислюємо відсоток

15

Панель статистики

Dashboard з метриками

16

Автозбереження даних

Реактивні побічні ефекти

17

Фільтрація задач

Реактивні масиви

Модуль 4. Умови та цикли

18

Порожній стан списку

{#if} для empty state

19

Рендер списку задач

{#each} з ключами

20

Вкладки фільтрів

All / Active / Done

21

Завантаження даних

{#await} для API

22

Категорії задач

Групування та вкладки

23

Пошук задач

Фільтр в реальному часі

Модуль 5. Форми TaskFlow

24

Форма нової задачі

bind:value та submit

25

Валідація форми

Перевірка даних

26

Вибір пріоритету

Radio та select

27

Дедлайн задачі

Date picker

28

Редагування задачі

Inline edit mode

29

Модальне вікно

Modal компонент

Модуль 6. Stores та збереження

30
31

Дії над задачами

Custom store methods

32

Settings store

Налаштування користувача

33

Derived stores

Статистика з store

34

LocalStorage sync

Персистентність даних

35

Lifecycle hooks

onMount для ініціалізації

36

Undo/Redo

Історія змін

Модуль 7. Анімації TaskFlow

37

Fade для задач

Перші transitions

38

Slide для списку

fly та slide

39

Анімація виконання

Кастомні transitions

40

Flip анімація

Плавне сортування

41

Прогрес-бар анімація

Tweened values

42

Spring ефекти

Пружна анімація

43

Мікро-анімації

Hover та click

Модуль 8. SvelteKit роутинг

44

Що таке SvelteKit

Full-stack фреймворк

45

Структура проекту

routes та lib

46

Головна сторінка

Dashboard route

47

Сторінка задачі

Dynamic routes [id]

48

Layout з sidebar

+layout.svelte

49

Навігація

Меню та active states

50

Налаштування

Settings route

51

404 сторінка

Error handling

Модуль 9. Просунуті фічі

52

Drag & Drop

Перетягування задач

53

Keyboard shortcuts

Actions (use:)

54

Теми оформлення

Light/Dark/System

55

Context меню

Right-click actions

56

Toast нотифікації

Feedback користувачу

57

Експорт/Імпорт

JSON backup

Модуль 10. Фініш!

58

PWA підтримка

Offline mode

59

Оптимізація

Performance tips

60

Деплой TaskFlow!

Публікуємо проект

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів