0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Buduj szybkie i proste interfejsy użytkownika z nowoczesną techniką w Svelte Academy.

🤖 Napędzane AI📚 41 kursów👥 100 000+ uczniów⭐ Ocena 4,9
Przegląd kursu

Buduj Rzeczywiste Interfejsy za Pomocą Svelte i SvelteKit

Svelte przyjmuje fundamentalnie inny podход niż React i Vue — zamiast wysyłać runtime do przeglądarki, kompiluje komponenty do wysoce wydajnego vanilla JavaScript w czasie budowania. Rezultatem są mniejsze pakiety, szybsze czasy ładowania i mniej boilerplate'u. SvelteKit, oficjalna framework aplikacji, dodaje routing oparty na plikach, renderowanie po stronie serwera, akcje formularzy i adaptatory wdrażania, dzięki czemu możesz wysyłać aplikacje klasy produkcyjnej na dowolną platformę. Ten tor obejmuje oba, od pierwszego komponentu przez architekturę full-stack.

Co Się Nauczysz

Zaczniesz od modelu komponentów Svelte — props, składni szablonów, warunkowych, pętli i wiązania dwukierunkowego — a następnie przejdziesz do systemu reaktywności, funkcji cyklu życia i prymitywów magazynu: writable, readable, derived i custom stores. Po stronie interfejsu użytkownika będziesz pracować ze slotami, Context API, przejściami CSS, animacjami i Svelte Motion. Rozdziały SvelteKit obejmują routing, ładowanie danych, SSR i prerendering, akcje formularzy, trasy API, hooks, obsługę błędów, zaawansowane layouty, wzorce uwierzytelniania i adaptatory wdrażania. Tor obejmuje również system rune Svelte 5, testowanie za pomocą testów jednostkowych i Playwright E2E, integrację bibliotek zewnętrznych oraz praktyki bezpieczeństwa SvelteKit.

Ścieżka Edukacyjna

Czterdzieści jeden kursów postępuje od A1 do C1. Pierwsze siedem kursów ugruntowuje fundamenty: komponenty, props, eventy i składnia szablonów. B1 wprowadza stores, sloty, przejścia i pierwsze strony SvelteKit oraz wzorce ładowania danych. B2 — największy blok — przechodzi przez akcje formularzy, trasy API, hooks, zaawansowaną reaktywność, Svelte Actions, niestandardowe animacje, wzorce uwierzytelniania, adaptatory, rune Svelte 5, testowanie i bezpieczeństwo. Tor kończy się na C1 zaawansowanymi runami, zaawansowanymi wzorcami komponentów, strumieniowaniem SvelteKit, optymalizacją wydajności, zarządzaniem stanem na dużą skalę i capstone'ową aplikacją full-stack SvelteKit.

Jak To Działa

Każdy kurs dzieli się na krótkie, skoncentrowane lekcje, które wykonujesz w wbudowanym edytorze kodu z informacją zwrotną w czasie rzeczywistym. Tutor AI jest dostępny za każdym razem, gdy utkniesz, a każda koncepcja jest wzmacniana ćwiczeniami praktycznymi przed przejściem do następnego tematu.

Zacznij naukę →

Jak się będziesz uczyć

🎯
Interaktywne lekcje
Praktyczne ćwiczenia kodowania z opinią zwrotną w czasie rzeczywistym
🤖
Tutor AI
Uzyskaj natychmiastową pomoc od naszego AI, gdy się zatniesz
💻
Wbudowany edytor
Pisz i uruchamiaj kod bezpośrednio w przeglądarce
🏆
Certyfikat
Uzyskaj certyfikat po ukończeniu kursu
Program nauczania

41 kursów

Każdy kurs ze ścieżki edukacyjnej Sveltejs Academy.

01

Witamy w Svelte

A13 lekcji

Zrozum, czym jest Svelte, dlaczego zupełnie inaczej podchodzi do tworzenia interfejsów użytkownika niż React czy Vue oraz dlaczego develope…

02

Wprowadzenie do Svelte i konfiguracja

A14 lekcjiPRO

Rozpoczną Państwo pracę ze Svelte, poznając różnice względem innych frameworków, konfigurując pierwszy projekt oraz analizując jego struktu…

03

Pierwszy komponent Svelte

A14 lekcjiPRO

Nauczą się Państwo pisać komponenty Svelte od podstaw, używać zmiennych reaktywnych, interpolować wyrażenia i tworzyć wartości obliczane za…

04

Props i komunikacja między komponentami

A24 lekcjiPRO

Będą Państwo przekazywać dane między komponentami Svelte za pomocą props, ustawiać wartości domyślne oraz elegancko przekazywać props przez…

05

Składnia szablonów: warunki i pętle

A24 lekcjiPRO

Będą Państwo kontrolować renderowanie w szablonach Svelte za pomocą bloków warunkowych, iterować po tablicach z blokami each oraz wymuszać…

06

Zdarzenia i ich obsługa

A24 lekcjiPRO

Będą Państwo obsługiwać zdarzenia DOM w Svelte, upraszczać typowe wzorce za pomocą modyfikatorów, wysyłać własne zdarzenia z komponentów po…

07

Wiązanie dwukierunkowe

A24 lekcjiPRO

Zsynchronizują Państwo pola formularzy i elementy DOM ze zmiennymi Svelte za pomocą dyrektyw bind: dla tekstu, checkboxów, grup radio oraz…

08

Funkcje cyklu życia

B14 lekcjiPRO

Będą Państwo kontrolować działanie komponentu Svelte na każdym etapie jego cyklu życia za pomocą onMount, onDestroy, beforeUpdate, afterUpd…

09

Store Svelte: zapisywalne i tylko do odczytu

B14 lekcjiPRO

Będą Państwo współdzielić reaktywny stan między komponentami za pomocą wbudowanych store Svelte, subskrybować je skrótem $, a także tworzyć…

10

Store pochodne i niestandardowe

B14 lekcjiPRO

Połączą Państwo store Svelte, tworząc obliczane store pochodne z jednego lub wielu źródeł, oraz zbudują w pełni niestandardowe store implem…

11

Sloty i kompozycja komponentów

B14 lekcjiPRO

Wstawią Państwo treść do komponentów Svelte za pomocą slotów domyślnych i nazwanych, zapewnią treść zastępczą oraz sprawdzą, czy sloty zost…

12

Przejścia CSS

B14 lekcjiPRO

Będą Państwo animować elementy pojawiające się w DOM i z niego znikające za pomocą wbudowanych dyrektyw przejść Svelte, konfigurując czas,…

13

Animacje CSS

B14 lekcjiPRO

Wyjdą Państwo poza przejścia, korzystając z dyrektywy animate w Svelte do zmiany kolejności list, animacji sprężynowych opartych na fizyce…

14

Routing i strony SvelteKit

B14 lekcjiPRO

Poznają Państwo oparty na plikach system routingu SvelteKit, utworzą trasy dynamiczne z parametrami oraz wykorzystają pliki layoutów do wsp…

15

Ładowanie danych w SvelteKit

B14 lekcjiPRO

Załadują Państwo dane stron za pomocą funkcji load w SvelteKit, elegancko obsłużą błędy i uruchomią logikę wyłącznie po stronie serwera w +…

16

Context API

B14 lekcjiPRO

Przekażą Państwo dane głęboko w drzewie komponentów bez prop drillingu za pomocą Context API Svelte oraz poznają sytuacje, w których kontek…

17

SEO i metadane SvelteKit

B14 lekcjiPRO

Poprawią Państwo widoczność aplikacji, ustawiając dynamiczne tagi meta, karty OpenGraph, dane strukturalne JSON-LD oraz zarządzając kanonic…

18

Akcje formularzy SvelteKit

B24 lekcjiPRO

Będą Państwo obsługiwać wysyłanie formularzy HTML po stronie serwera za pomocą form actions SvelteKit, stopniowo wzbogacać je JavaScriptem…

19

Trasy API w SvelteKit

B24 lekcjiPRO

Zbudują Państwo REST-owe i strumieniowe endpointy API w SvelteKit z użyciem plików +server.js, obsłużą wiele metod HTTP i zwrócą typowane o…

20

Hooki SvelteKit

B24 lekcjiPRO

Będą Państwo przechwytywać i przekształcać każde żądanie za pomocą hooków serwerowych SvelteKit, centralnie rejestrować błędy oraz łączyć w…

21

Obsługa błędów w SvelteKit

B24 lekcjiPRO

Zapewnią Państwo użytkownikom dobre doświadczenia w razie problemów, dostosowując strony błędów, rozróżniając błędy oczekiwane i nieoczekiw…

22

Zaawansowana reaktywność Svelte

B24 lekcjiPRO

Pogłębią Państwo wiedzę o systemie reaktywnym Svelte: kolejności instrukcji reaktywnych, wyborze między store a stanem lokalnym oraz unikan…

23

Akcje Svelte

B24 lekcjiPRO

Dodadzą Państwo wielokrotnego użytku imperatywne zachowania do elementów DOM za pomocą akcji Svelte, obsłużą parametry i aktualizacje oraz…

24

Niestandardowe przejścia i animacje

B24 lekcjiPRO

Napiszą Państwo od podstaw własne funkcje przejść Svelte, skonfigurują parametry czasu oraz utworzą przejścia morphing i zaawansowane przej…

25

Ruch w Svelte

B24 lekcjiPRO

Będą Państwo animować wartości w czasie za pomocą store ruchu spring i tweened w Svelte, używać funkcji interpolacji oraz stosować ruch do…

26

Zaawansowane layouty SvelteKit

B24 lekcjiPRO

Opanują Państwo zaawansowany system layoutów SvelteKit: layouty grupowe, nadpisania na poziomie trasy, opuszczanie layoutów oraz współdziel…

27

Wzorce uwierzytelniania w SvelteKit

B24 lekcjiPRO

Zaimplementują Państwo uwierzytelnianie w SvelteKit za pomocą sesji opartych na cookies, bezpiecznych JWT, ochrony tras w hookach oraz OAut…

28

Adaptery i wdrażanie SvelteKit

B24 lekcjiPRO

Wdrożą Państwo aplikacje SvelteKit w dowolnym środowisku, dobierając właściwy adapter: dla stron statycznych, serwerów Node.js, Vercel i Cl…

29

Svelte 5: wprowadzenie do runes

B24 lekcjiPRO

Poznają Państwo system runes w Svelte 5, który zastępuje magię kompilatora jawnymi prymitywami reaktywnymi dla stanu, wartości pochodnych i…

30

Svelte 5: props i snippets

B24 lekcjiPRO

Wykorzystają Państwo $props() dla typowanych props komponentów oraz nową składnię snippetów z {#snippet} i {@render} do zaawansowanej kompo…

31

SSR i prerendering w SvelteKit

B24 lekcjiPRO

Będą Państwo sterować strategią renderowania dla każdej trasy w SvelteKit: wybiorą ładowanie uniwersalne lub wyłącznie serwerowe, wygeneruj…

32

Testowanie Svelte: testy jednostkowe

B24 lekcjiPRO

Napiszą Państwo niezawodne testy jednostkowe komponentów i store Svelte za pomocą Vitest oraz @testing-library/svelte, obejmujące renderowa…

33

Testowanie Svelte: E2E z Playwright

B24 lekcjiPRO

Napiszą Państwo testy end-to-end aplikacji SvelteKit za pomocą Playwright, obejmujące nawigację po stronach, interakcje z formularzami oraz…

34

Integracja bibliotek zewnętrznych

B24 lekcjiPRO

Dodadzą Państwo Tailwind CSS, wizualizacje danych D3.js, mapy Leaflet i edytory tekstu sformatowanego do projektów SvelteKit za pomocą akcj…

35

Bezpieczeństwo SvelteKit

B24 lekcjiPRO

Zabezpieczą Państwo aplikację SvelteKit przed atakami CSRF, XSS i injection, bezpiecznie zarządzą zmiennymi środowiskowymi oraz ograniczą c…

36

Svelte 5: zaawansowane runes

C14 lekcjiPRO

Poznają Państwo zaawansowane wzorce runes w Svelte 5, w tym raw state, złożone wyprowadzenia, ręczne czyszczenie efektów oraz migrację z Sv…

37

Zaawansowane wzorce komponentów

C14 lekcjiPRO

Zbudują Państwo zaawansowane, wielokrotnego użytku API komponentów Svelte, korzystając z render props z użyciem snippetów, komponentów wyżs…

38

Strumieniowanie w SvelteKit

C14 lekcjiPRO

Zapewnią Państwo szybkie początkowe ładowanie stron, strumieniując promises z funkcji load, odraczając wolne dane oraz przesyłając dane z t…

39

Wydajność SvelteKit

C14 lekcjiPRO

Zoptymalizują Państwo wydajność aplikacji SvelteKit dzięki automatycznemu dzieleniu kodu, usprawnionej obsłudze obrazów, cichemu ładowaniu…

40

Zarządzanie stanem w dużej skali

C14 lekcjiPRO

Zaprojektują Państwo duże aplikacje Svelte z użyciem wzorców store opartych na modułach funkcjonalnych, magistral zdarzeń, optymistycznych…

41

Tworzenie aplikacji full-stack w SvelteKit

C14 lekcjiPRO

Połącz zdobytą wiedzę, aby zbudować gotową do wdrożenia aplikację full-stack z uwierzytelnianiem, bazą danych obsługiwaną przez Drizzle ORM…

FAQ

Często zadawane pytania

Czy kurs Sveltejs Academy jest bezpłatny?

Tak. Możesz rozpocząć kurs Sveltejs Academy za darmo i ukończyć jego interaktywne lekcje bez żadnych kosztów. Opcjonalna subskrypcja PRO odblokowuje zaawansowane narzędzia AI i certyfikat możliwy do udostępnienia.

Czy potrzebuję wcześniejszego doświadczenia, aby nauczyć się HTML?

Nie. Kurs zaczyna się od podstaw i stopniowo przechodzi do bardziej zaawansowanych tematów, więc możesz zacząć nawet bez wcześniejszego doświadczenia z HTML.

Jak nauczysz się HTML na CoddyKit?

Uczysz się praktycznie. Krótkie interaktywne lekcje łączą jasne wyjaśnienie z praktycznym ćwiczeniem kodowania, które działa w czasie rzeczywistym, a tutor AI dostępny 24/7 udziela spersonalizowanej pomocy, gdy się zatniesz.

Czy dostajesz certyfikat po ukończeniu Sveltejs Academy?

Tak. Uczniowie PRO mogą przystąpić do egzaminu i uzyskać certyfikat ukończenia możliwy do udostępnienia z kodem możliwym do weryfikacji dla kursu Sveltejs Academy.

Czy możesz nauczyć się HTML na telefonie?

Tak. CoddyKit jest dostępny na stronie internetowej i jako natywne aplikacje iOS i Android, dzięki czemu możesz nauczyć się HTML na dowolnym urządzeniu, a Twoje postępy synchronizują się między nimi.

Zacznij Sveltejs Academy Teraz

Dołącz do tysięcy uczniów opanowujących programowanie dzięki lekcjom wspieranym AI.

Rozpocznij Bezpłatnie →Przeglądaj Wszystkie Kursy