0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Bangun antarmuka pengguna yang cepat dan sederhana dengan teknik modern di Svelte Academy.

🤖 Bertenaga AI📚 41 kursus👥 100.000+ pelajar⭐ Rating 4,9
Ringkasan Kursus

Bangun Antarmuka Nyata dengan Svelte dan SvelteKit

Svelte mengambil pendekatan yang fundamentally berbeda dari React dan Vue — alih-alih mengirim runtime ke browser, ia mengompilasi komponen Anda menjadi vanilla JavaScript yang sangat efisien pada build time. Hasilnya adalah bundle yang lebih kecil, waktu loading yang lebih cepat, dan lebih sedikit boilerplate. SvelteKit, framework aplikasi resmi, menambahkan file-based routing, server-side rendering, form actions, dan deployment adapters sehingga Anda dapat mengirim aplikasi production-grade di platform apa pun. Track ini mencakup keduanya, dari komponen pertama hingga full-stack architecture.

Apa yang Akan Anda Pelajari

Anda akan memulai dengan component model Svelte — props, template syntax, conditionals, loops, dan two-way binding — kemudian masuk ke reactivity system, lifecycle functions, dan store primitives: writable, readable, derived, dan custom stores. Di sisi UI, Anda akan bekerja dengan slots, Context API, CSS transitions, animations, dan Svelte Motion. Chapter SvelteKit mencakup routing, data loading, SSR dan prerendering, form actions, API routes, hooks, error handling, advanced layouts, auth patterns, dan deployment adapters. Track ini juga mencakup rune system Svelte 5, testing dengan unit tests dan Playwright E2E, third-party library integration, dan SvelteKit security practices.

Jalur Pembelajaran

Empat puluh satu kursus berkembang dari A1 hingga C1. Tujuh kursus pertama menetapkan fondasi: components, props, events, dan template syntax. B1 memperkenalkan stores, slots, transitions, dan first SvelteKit pages serta data-loading patterns Anda. B2 — blok terbesar — bekerja melalui form actions, API routes, hooks, advanced reactivity, Svelte Actions, custom animations, auth patterns, adapters, Svelte 5 runes, testing, dan security. Track ditutup di C1 dengan advanced runes, advanced component patterns, SvelteKit streaming, performance optimization, large-scale state management, dan full-stack SvelteKit application capstone.

Cara Kerjanya

Setiap kursus dibagi menjadi lesson yang singkat dan terfokus yang Anda selesaikan di editor kode built-in dengan real-time feedback. Seorang AI tutor tersedia kapan pun Anda terjebak, dan setiap konsep diperkuat dengan hands-on exercises sebelum Anda pindah ke topik berikutnya.

Mulai Belajar →

Cara Kamu Belajar

🎯
Pelajaran Interaktif
Latihan koding langsung dengan umpan balik real-time
🤖
AI Tutor
Dapatkan bantuan instan dari AI kami saat kamu stuck
💻
Editor Bawaan
Tulis dan jalankan kode langsung di browser kamu
🏆
Sertifikat
Raih sertifikat saat kamu menyelesaikan kursus
Kurikulum

41 Kursus

Setiap kursus di jalur belajar Sveltejs Academy.

01

Selamat Datang di Svelte

A13 pelajaran

Pahami apa itu Svelte, alasan pendekatannya dalam membangun UI sangat berbeda dibandingkan React atau Vue, dan mengapa pengembang yang menc…

02

Pengenalan dan Penyiapan Svelte

A14 pelajaranPRO

Mulailah menggunakan Svelte dengan memahami perbedaannya dari framework lain, menyiapkan proyek pertama, serta menjelajahi struktur proyek…

03

Komponen Svelte Pertama Anda

A14 pelajaranPRO

Pelajari cara menulis komponen Svelte dari awal, menggunakan variabel reaktif, menginterpolasikan ekspresi, dan membuat nilai terhitung den…

04

Props dan Komunikasi Komponen

A24 pelajaranPRO

Teruskan data antarkomponen Svelte menggunakan props, tetapkan nilai bawaan, dan teruskan props dengan elegan melalui $$props dan $$restPro…

05

Sintaks Templat: Kondisional dan Perulangan

A24 pelajaranPRO

Kendalikan hasil render dalam templat Svelte menggunakan blok kondisional, lakukan iterasi pada array dengan blok each, dan paksa render ul…

06

Peristiwa dan Penanganan Peristiwa

A24 pelajaranPRO

Tangani peristiwa DOM dalam Svelte, gunakan pengubah peristiwa untuk menyederhanakan pola umum, kirim peristiwa khusus dari komponen anak,…

07

Pengikatan Dua Arah

A24 pelajaranPRO

Sinkronkan input formulir dan elemen DOM dengan variabel Svelte menggunakan direktif bind: untuk teks, kotak centang, grup radio, dan refer…

08

Fungsi Siklus Hidup

B14 pelajaranPRO

Kendalikan hal yang terjadi pada setiap tahap siklus hidup komponen Svelte dengan onMount, onDestroy, beforeUpdate, afterUpdate, dan utilit…

09

Store Svelte: Writable dan Readable

B14 pelajaranPRO

Bagikan status reaktif antarkomponen menggunakan primitif store bawaan Svelte, berlangganan melalui singkatan $, dan buat store readable de…

10

Store Turunan dan Store Khusus

B14 pelajaranPRO

Susun store Svelte dengan menurunkan store terhitung dari satu atau beberapa sumber, lalu bangun store khusus yang sepenuhnya menerapkan ko…

11

Slot dan Komposisi Komponen

B14 pelajaranPRO

Proyeksikan konten ke dalam komponen Svelte menggunakan slot bawaan dan bernama, sediakan konten cadangan, serta periksa apakah slot telah…

12

Transisi CSS

B14 pelajaranPRO

Animasikan elemen yang masuk dan keluar dari DOM dengan direktif transisi bawaan Svelte, konfigurasikan waktu dan easing, serta tangani tra…

13

Animasi CSS

B14 pelajaranPRO

Melampaui transisi dengan direktif animate Svelte untuk pengurutan ulang daftar, animasi pegas berbasis fisika, dan interpolasi nilai bertw…

14

Perutean dan Halaman SvelteKit

B14 pelajaranPRO

Navigasikan sistem perutean berbasis file SvelteKit, buat rute dinamis dengan parameter, dan gunakan file tata letak untuk berbagi UI di be…

15

Pemuatan Data SvelteKit

B14 pelajaranPRO

Muat data untuk halaman Anda menggunakan fungsi load SvelteKit, tangani kesalahan dengan baik, dan jalankan logika khusus peladen dalam +pa…

16

Context API

B14 pelajaranPRO

Teruskan data jauh ke dalam hierarki komponen tanpa meneruskan props berulang kali menggunakan Context API Svelte, serta pahami kapan conte…

17

SEO dan Meta SvelteKit

B14 pelajaranPRO

Tingkatkan keterlihatan dengan menetapkan tag meta dinamis, kartu OpenGraph, data terstruktur JSON-LD, dan mengelola URL kanonis dalam Svel…

18

Aksi Formulir SvelteKit

B24 pelajaranPRO

Tangani pengiriman formulir HTML di peladen dengan aksi formulir SvelteKit, tingkatkan secara progresif dengan JavaScript, dan kembalikan k…

19

Rute API SvelteKit

B24 pelajaranPRO

Bangun titik akhir API RESTful dan streaming dalam SvelteKit menggunakan file +server.js, tangani berbagai metode HTTP, dan kembalikan resp…

20

Hook SvelteKit

B24 pelajaranPRO

Sela dan transformasikan setiap permintaan dengan hook peladen SvelteKit, catat kesalahan secara terpusat, dan susun beberapa hook dengan u…

21

Penanganan Kesalahan SvelteKit

B24 pelajaranPRO

Berikan pengalaman pengguna yang baik saat terjadi masalah dengan menyesuaikan halaman kesalahan, membedakan kesalahan yang diperkirakan da…

22

Reaktivitas Svelte Lanjutan

B24 pelajaranPRO

Perdalam pemahaman Anda tentang sistem reaktif Svelte: urutan pernyataan reaktif, kapan menggunakan store dibandingkan status lokal, dan ca…

23

Aksi Svelte

B24 pelajaranPRO

Pasang perilaku imperatif yang dapat digunakan ulang pada elemen DOM dengan aksi Svelte, tangani parameter dan pembaruan, serta bangun aksi…

24

Transisi dan Animasi Khusus

B24 pelajaranPRO

Tulis fungsi transisi Svelte khusus dari awal, kendalikan parameter waktu, dan buat transisi morphing serta transisi CSS versus JS tingkat…

25

Motion Svelte

B24 pelajaranPRO

Animasikan nilai seiring waktu dengan store motion spring dan tweened Svelte, gunakan fungsi interpolasi, dan terapkan motion pada jalur SV…

26

Tata Letak Lanjutan SvelteKit

B24 pelajaranPRO

Kuasai sistem tata letak lanjutan SvelteKit: tata letak grup, penimpaan tingkat rute, keluar dari tata letak, dan berbagi data di seluruh h…

27

Pola Autentikasi SvelteKit

B24 pelajaranPRO

Terapkan autentikasi dalam SvelteKit menggunakan sesi berbasis cookie, JWT yang aman, perlindungan rute dalam hook, dan OAuth dengan Lucia…

28

Adaptor dan Penerapan SvelteKit

B24 pelajaranPRO

Terapkan aplikasi SvelteKit di mana saja menggunakan adaptor yang tepat: situs statis, peladen Node.js, Vercel, dan Cloudflare Workers.

29

Svelte 5: Pengenalan Runes

B24 pelajaranPRO

Temukan sistem runes Svelte 5 yang menggantikan keajaiban kompilator dengan primitif reaktif eksplisit untuk status, nilai turunan, dan efe…

30

Svelte 5: Props dan Snippet

B24 pelajaranPRO

Gunakan $props() untuk props komponen bertipe dan sintaks snippet baru dengan {#snippet} serta {@render} untuk komposisi konten yang kuat d…

31

SSR dan Prarendering SvelteKit

B24 pelajaranPRO

Kendalikan strategi render per rute dalam SvelteKit: pilih antara load universal dan khusus peladen, prarender halaman statis, serta nonakt…

32

Pengujian Svelte: Pengujian Unit

B24 pelajaranPRO

Tulis pengujian unit yang andal untuk komponen dan store Svelte dengan Vitest dan @testing-library/svelte, yang mencakup render, interaksi,…

33

Pengujian Svelte: E2E dengan Playwright

B24 pelajaranPRO

Tulis pengujian menyeluruh untuk aplikasi SvelteKit menggunakan Playwright, yang mencakup navigasi halaman, interaksi formulir, dan integra…

34

Integrasi Pustaka Pihak Ketiga

B24 pelajaranPRO

Tambahkan Tailwind CSS, visualisasi data D3.js, peta Leaflet, dan editor teks kaya ke proyek SvelteKit menggunakan aksi Svelte dan pembungk…

35

Keamanan SvelteKit

B24 pelajaranPRO

Perkuat aplikasi SvelteKit Anda dari serangan CSRF, XSS, dan injeksi, kelola variabel lingkungan dengan aman, serta batasi laju rute API.

36

Svelte 5: Runes Lanjutan

C14 pelajaranPRO

Jelajahi pola rune Svelte 5 tingkat lanjut, termasuk status mentah, derivasi kompleks, pembersihan efek manual, dan migrasi dari Svelte 4.

37

Pola Komponen Lanjutan

C14 pelajaranPRO

Bangun API komponen Svelte yang canggih dan dapat digunakan ulang menggunakan render props dengan snippet, komponen tingkat tinggi, pola bu…

38

Streaming SvelteKit

C14 pelajaranPRO

Berikan pemuatan halaman awal yang cepat dengan melakukan streaming promise dari fungsi load, menunda data lambat, dan melakukan streaming…

39

Kinerja SvelteKit

C14 pelajaranPRO

Optimalkan kinerja aplikasi SvelteKit dengan pemisahan kode otomatis, penanganan gambar yang ditingkatkan, pemuatan malas, dan alat pembuat…

40

Pengelolaan Status dalam Skala Besar

C14 pelajaranPRO

Rancang aplikasi Svelte besar dengan pola store berbasis modul fitur, bus peristiwa, pembaruan UI optimistis, serta urungkan/ulangi menggun…

41

Membangun Aplikasi SvelteKit Full-Stack

C14 pelajaranPRO

Gabungkan semua yang telah Anda pelajari untuk membangun aplikasi full-stack siap produksi dengan autentikasi, basis data melalui Drizzle O…

FAQ

Pertanyaan yang Sering Diajukan

Apakah kursus Sveltejs Academy gratis?

Ya. Kamu bisa memulai kursus Sveltejs Academy secara gratis dan menyelesaikan pelajaran interaktifnya tanpa biaya. Langganan PRO opsional membuka akses ke alat AI tingkat lanjut dan sertifikat yang bisa dibagikan.

Apakah aku perlu pengalaman sebelumnya untuk belajar HTML?

Tidak. Kursus dimulai dari dasar dan secara bertahap bergerak ke topik yang lebih canggih, jadi kamu bisa memulai meski tanpa pengalaman HTML sebelumnya.

Bagaimana cara aku belajar HTML di CoddyKit?

Kamu belajar dengan praktik. Pelajaran interaktif pendek memadukan penjelasan yang jelas dengan latihan koding langsung yang berjalan real-time, dan tutor AI 24/7 memberikan bantuan personal kapan pun kamu stuck.

Apakah aku dapat sertifikat saat menyelesaikan Sveltejs Academy?

Ya. Pelajar PRO bisa mengikuti ujian dan meraih sertifikat penyelesaian yang bisa dibagikan dengan kode verifikasi untuk kursus Sveltejs Academy.

Bisakah aku belajar HTML di ponselku?

Ya. CoddyKit tersedia di web dan sebagai aplikasi native iOS dan Android, jadi kamu bisa belajar HTML di perangkat apa pun dan progresmu tersinkronisasi di semuanya.

Mulai Sveltejs Academy Sekarang

Bergabunglah dengan ribuan pelajar yang menguasai pemrograman dengan pelajaran bertenaga AI.

Mulai Gratis →Jelajahi Semua Kursus