0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Создавайте быстрые и простые пользовательские интерфейсы с современными методами в Svelte Academy.

🤖 На основе AI📚 41 курсов👥 100 000+ учеников⭐ Рейтинг 4,9
Обзор курса

Создавайте настоящие интерфейсы с Svelte и SvelteKit

Svelte использует принципиально иной подход, чем React и Vue — вместо отправки runtime в браузер он компилирует ваши компоненты в высокоэффективный ванильный JavaScript на этапе сборки. Результат — меньше размер бандлов, быстрее время загрузки и меньше boilerplate кода. SvelteKit, официальный фреймворк приложений, добавляет file-based routing, server-side rendering, form actions и deployment adapters, так что вы сможете развёртывать production-grade приложения на любой платформе. Этот курс охватывает оба инструмента — от первого компонента до full-stack архитектуры.

Чему вы научитесь

Вы начнёте с компонентной модели Svelte — props, синтаксис шаблонов, условия, циклы и двусторонний binding — затем перейдёте к системе reactivity, lifecycle функциям и store примитивам: writable, readable, derived и custom stores. На UI стороне вы будете работать со slots, Context API, CSS transitions, animations и Svelte Motion. Главы SvelteKit охватывают routing, data loading, SSR и prerendering, form actions, API routes, hooks, error handling, продвинутые layouts, auth patterns и deployment adapters. Курс также включает систему runes Svelte 5, тестирование с unit tests и Playwright E2E, интеграцию сторонних библиотек и SvelteKit security practices.

Путь обучения

Сорок один курс развивается от уровня A1 до C1. Первые семь курсов закладывают основы: компоненты, props, events и синтаксис шаблонов. B1 представляет stores, slots, transitions и ваши первые SvelteKit страницы с data-loading patterns. B2 — самый большой блок — охватывает form actions, API routes, hooks, продвинутую reactivity, Svelte Actions, кастомные animations, auth patterns, adapters, Svelte 5 runes, тестирование и security. Курс завершается на уровне C1 с продвинутыми runes, продвинутыми component patterns, SvelteKit streaming, performance optimization, large-scale state management и capstone full-stack SvelteKit приложением.

Как это работает

Каждый курс состоит из коротких, сфокусированных уроков, которые вы проходите во встроенном коде редакторе с real-time feedback. AI tutor всегда доступен, когда вы застряли, и каждая концепция закрепляется практическими exercises перед переходом к следующей теме.

Начать учиться →

Как ты будешь учиться

🎯
Интерактивные уроки
Практические упражнения по программированию с мгновенной обратной связью
🤖
ИИ-репетитор
Получай мгновенную помощь от нашего ИИ, когда застрянешь
💻
Встроенный редактор
Пиши и запускай код прямо в браузере
🏆
Сертификат
Получи сертификат при завершении курса
Программа обучения

41 курсов

Все курсы в пути обучения Sveltejs Academy.

01

Добро пожаловать в Svelte

A13 уроков

Разберитесь, что такое Svelte, почему его подход к созданию пользовательских интерфейсов полностью отличается от React и Vue и почему разра…

02

Введение в Svelte и настройка

A14 уроковPRO

Начните изучать Svelte: поймите, чем он отличается от других фреймворков, настройте первый проект и изучите его структуру и рабочий процесс…

03

Ваш первый компонент Svelte

A14 уроковPRO

Научитесь писать компоненты Svelte с нуля, использовать реактивные переменные, интерполировать выражения и создавать вычисляемые значения с…

04

Свойства и взаимодействие компонентов

A24 уроковPRO

Передавайте данные между компонентами Svelte с помощью свойств, задавайте значения по умолчанию и элегантно передавайте свойства дальше с п…

05

Синтаксис шаблонов: условия и циклы

A24 уроковPRO

Управляйте отображением в шаблонах Svelte с помощью условных блоков, перебирайте массивы блоками each и принудительно перерисовывайте компо…

06

События и их обработка

A24 уроковPRO

Обрабатывайте события DOM в Svelte, используйте модификаторы событий, отправляйте пользовательские события из дочерних компонентов и переда…

07

Двусторонняя привязка

A24 уроковPRO

Синхронизируйте элементы форм и DOM с переменными Svelte с помощью директив bind: для текста, флажков, переключателей и ссылок на элементы

08

Функции жизненного цикла

B14 уроковPRO

Управляйте происходящим на каждом этапе жизненного цикла компонента Svelte с помощью onMount, onDestroy, beforeUpdate, afterUpdate и утилит…

09

Хранилища Svelte: Writable и Readable

B14 уроковPRO

Делитесь реактивным состоянием между компонентами с помощью встроенных примитивов-хранилищ Svelte, подписывайтесь на них с сокращённым синт…

10

Производные и пользовательские хранилища

B14 уроковPRO

Составляйте хранилища Svelte, создавая вычисляемые хранилища из одного или нескольких источников, и создавайте полностью пользовательские х…

11

Слоты и композиция компонентов

B14 уроковPRO

Передавайте содержимое в компоненты Svelte с помощью слотов по умолчанию и именованных слотов, задавайте резервное содержимое и проверяйте,…

12

Переходы CSS

B14 уроковPRO

Анимируйте появление и исчезновение элементов в DOM с помощью встроенных директив переходов Svelte, настраивайте длительность и плавность и…

13

Анимации CSS

B14 уроковPRO

Выйдите за рамки переходов с директивой animate в Svelte для перестановки элементов списка, пружинных анимаций на основе физики и интерполя…

14

Маршрутизация и страницы SvelteKit

B14 уроковPRO

Изучите файловую систему маршрутизации SvelteKit, создавайте динамические маршруты с параметрами и используйте файлы макетов для общего инт…

15

Загрузка данных в SvelteKit

B14 уроковPRO

Загружайте данные для страниц с помощью функций load в SvelteKit, корректно обрабатывайте ошибки и запускайте логику только на сервере в +p…

16

Context API

B14 уроковPRO

Передавайте данные глубоко в дерево компонентов без последовательной передачи свойств с помощью Context API Svelte и разберитесь, когда кон…

17

SEO и метаданные SvelteKit

B14 уроковPRO

Повышайте видимость в поиске, задавая динамические метатеги, карточки OpenGraph, структурированные данные JSON-LD и управляя каноническими…

18

Действия форм SvelteKit

B24 уроковPRO

Обрабатывайте отправку HTML-форм на сервере с помощью действий форм SvelteKit, постепенно улучшайте их с JavaScript и возвращайте ошибки пр…

19

Маршруты API SvelteKit

B24 уроковPRO

Создавайте RESTful- и потоковые конечные точки API в SvelteKit с помощью файлов +server.js, обрабатывайте несколько HTTP-методов и возвраща…

20

Перехватчики SvelteKit

B24 уроковPRO

Перехватывайте и преобразуйте каждый запрос с помощью серверных перехватчиков SvelteKit, централизованно регистрируйте ошибки и объединяйте…

21

Обработка ошибок в SvelteKit

B24 уроковPRO

Создавайте удобный интерфейс даже при сбоях: настраивайте страницы ошибок, различайте ожидаемые и неожиданные ошибки и обрабатывайте ошибки…

22

Продвинутая реактивность Svelte

B24 уроковPRO

Углубите понимание реактивной системы Svelte: изучите порядок реактивных инструкций, когда выбирать хранилища вместо локального состояния и…

23

Действия Svelte

B24 уроковPRO

Добавляйте повторно используемое императивное поведение к элементам DOM с помощью действий Svelte, обрабатывайте параметры и обновления и с…

24

Пользовательские переходы и анимации

B24 уроковPRO

Пишите пользовательские функции переходов Svelte с нуля, управляйте параметрами времени и создавайте морфинг и продвинутые переходы на осно…

25

Движение в Svelte

B24 уроковPRO

Анимируйте значения во времени с помощью хранилищ движения spring и tweened в Svelte, используйте функции интерполяции и применяйте движени…

26

Продвинутые макеты SvelteKit

B24 уроковPRO

Освойте продвинутую систему макетов SvelteKit: групповые макеты, переопределения на уровне маршрутов, выход из макетов и обмен данными по и…

27

Шаблоны аутентификации SvelteKit

B24 уроковPRO

Реализуйте аутентификацию в SvelteKit с помощью сессий на основе файлов cookie, безопасных JWT, защиты маршрутов в перехватчиках и OAuth с…

28

Адаптеры и развёртывание SvelteKit

B24 уроковPRO

Развёртывайте приложения SvelteKit где угодно, выбирая подходящий адаптер: статические сайты, серверы Node.js, Vercel и Cloudflare Workers

29

Svelte 5: введение в руны

B24 уроковPRO

Познакомьтесь с системой рун Svelte 5, которая заменяет магию компилятора явными реактивными примитивами для состояния, производных значени…

30

Svelte 5: свойства и фрагменты

B24 уроковPRO

Используйте $props() для типизированных свойств компонентов и новый синтаксис фрагментов с {#snippet} и {@render} для мощной композиции сод…

31

SSR и предварительная генерация в SvelteKit

B24 уроковPRO

Управляйте стратегией отображения для каждого маршрута в SvelteKit: выбирайте универсальную или серверную загрузку, предварительно генериру…

32

Тестирование Svelte: модульные тесты

B24 уроковPRO

Пишите надёжные модульные тесты для компонентов и хранилищ Svelte с Vitest и @testing-library/svelte, проверяя отображение, взаимодействие…

33

Тестирование Svelte: сквозные тесты с Playwright

B24 уроковPRO

Пишите сквозные тесты для приложений SvelteKit с Playwright, проверяя навигацию по страницам, взаимодействие с формами и интеграцию в конве…

34

Интеграция сторонних библиотек

B24 уроковPRO

Добавляйте Tailwind CSS, визуализацию данных D3.js, карты Leaflet и редакторы форматированного текста в проекты SvelteKit с помощью действи…

35

Безопасность SvelteKit

B24 уроковPRO

Защитите приложение SvelteKit от атак CSRF, XSS и внедрения кода, безопасно управляйте переменными окружения и ограничивайте частоту запрос…

36

Svelte 5: продвинутые руны

C14 уроковPRO

Изучите продвинутые шаблоны рун Svelte 5, включая исходное состояние, сложные производные значения, ручную очистку эффектов и переход с Sve…

37

Продвинутые шаблоны компонентов

C14 уроковPRO

Создавайте сложные повторно используемые API компонентов Svelte с помощью свойств-рендеров во фрагментах, компонентов высшего порядка, шабл…

38

Потоковая передача в SvelteKit

C14 уроковPRO

Ускоряйте первоначальную загрузку страниц, передавая обещания из функций load, откладывая медленные данные и передавая данные из маршрутов…

39

Производительность SvelteKit

C14 уроковPRO

Оптимизируйте производительность приложений SvelteKit с помощью автоматического разделения кода, улучшенной работы с изображениями, отложен…

40

Управление состоянием в крупных проектах

C14 уроковPRO

Проектируйте крупные приложения Svelte с шаблонами хранилищ по функциональным модулям, шинами событий, оптимистичными обновлениями интерфей…

41

Создание полноценно стекового приложения на SvelteKit

C14 уроковPRO

Объедините все полученные знания, чтобы создать готовое к эксплуатации полноценно стековое приложение с аутентификацией, базой данных через…

Часто задаваемые вопросы

Часто задаваемые вопросы

Курс Sveltejs Academy бесплатный?

Да. Ты можешь начать курс Sveltejs Academy бесплатно и пройти его интерактивные уроки без платежей. Опциональная подписка PRO открывает продвинутые инструменты на базе ИИ и сертификат, который можно поделиться.

Нужен ли мне опыт, чтобы выучить HTML?

Нет. Курс начинается с основ и постепенно переходит к более сложным темам, поэтому ты можешь начать даже без предыдущего опыта HTML.

Как я выучу HTML на CoddyKit?

Ты учишься на практике. Короткие интерактивные уроки сочетают понятное объяснение с практическими упражнениями по программированию, которые выполняются в реальном времени, а круглосуточный ИИ-репетитор помогает, когда ты застрянешь.

Получу ли я сертификат за завершение Sveltejs Academy?

Да. Пользователи PRO могут пройти экзамен и получить сертификат завершения Sveltejs Academy с проверяемым кодом.

Могу ли я выучить HTML на телефоне?

Да. CoddyKit доступен в браузере и как нативное приложение на iOS и Android, так что ты можешь выучить HTML на любом устройстве и твой прогресс синхронизируется.

Начни Sveltejs Academy прямо сейчас

Присоединись к тысячам учеников, которые осваивают программирование с помощью уроков на AI.

Начать бесплатно →Все курсы