Semua course
Materi oleh Hifzon Β· Pemula

Svelte 5 dari Nol sampai Mahir

Bagian dari jalur: Frontend dengan Svelte

Belajar Svelte 5 secara runtut dan mudah dipahami, dari dasar sampai mahir: markup dan ekspresi, reaktivitas dengan runes ($state, $derived, $effect), event, class dan style dinamis, kondisi dan perulangan, form binding, komponen (props, $bindable, callback, snippet, context), lifecycle, bind:this dan actions, store, state bersama di file .svelte.js, transisi dan animasi, tween dan spring, TypeScript, pengenalan SvelteKit (routing, load, form actions), pola mengambil data, sampai proyek akhir aplikasi Daftar Tugas. Belajar santai lewat animasi, materi singkat, dan latihan yang langsung dicek.

4.9 rating 30 part Jadilah peserta pertama Pemula
Akses gratis Tanpa instalasi Sertifikat kelulusan
30Part seru
GratisAkses penuh
0Peserta aktif
1Sertifikat kelulusan
Hasil belajar

Setelah ini, kamu bisa...

Runes Svelte 5: $state, $derived, $effect, $props, $bindable
Template: {#if}, {#each}, {#await}, bind:, event, class & style dinamis
Komponen: props, callback, snippet & {@render}, context, lifecycle
Store, state bersama (.svelte.js), transisi, animasi, tween & spring
TypeScript di Svelte dan pengenalan SvelteKit (routing, load, form actions)
Proyek akhir Daftar Tugas + panduan build & deploy
Keunggulan

Belajar jadi lebih gampang dan nggak ngebosenin

Animasi konsep

Tiap part dibuka dengan animasi singkat, jadi konsepnya langsung kebayang. Nggak cuma baca teks!

Materi mudah dipahami

Dijelaskan pelan-pelan pakai analogi, contoh kode, dan tips biar nggak salah di hal yang umum.

Latihan interaktif langsung

Langsung praktik di halaman yang sama. Jawabanmu dicek otomatis, dan ada petunjuk kalau kamu mentok.

Belajar bertahap

Selesaikan latihan untuk membuka part berikutnya, jadi dasarmu selalu kuat.

Quiz akhir

Tes seberapa paham kamu sebelum ambil sertifikat.

Sertifikat kelulusan

Sertifikat atas namamu siap diambil setelah semua part selesai dan quiz minimal 70.

Peta Petualangan

Tuntaskan misi, kumpulkan XP

1Pengenalan Svelte & Komponen Pertama +100 XP
Markup & Ekspresi+100 XP
Reaktivitas: $state+100 XP
Nilai Turunan: $derived+100 XP
Atribut, Class & Style Dinamis+100 XP
Event Handling+100 XP
Kondisi: {#if}, {:else if}, {:else}+100 XP
Perulangan: {#each} & key+100 XP
Form Binding dengan bind:+100 XP
Efek Samping: $effect+100 XP
State Objek & Array (Deep Reactivity)+100 XP
Tag Template: {#await}, {@const}, {@html}, {#key}+100 XP
Komponen: Memecah UI Jadi Bagian Kecil+100 XP
Props: Mengirim Data ke Komponen Anak+100 XP
Binding Antar Komponen: $bindable+100 XP
Callback Props: Komunikasi dari Anak ke Induk+100 XP
Snippets & {@render}: Menyisipkan Konten+100 XP
Context: Berbagi Data Tanpa Props Berlapis+100 XP
Lifecycle: onMount, onDestroy & tick+100 XP
bind:this & Actions+100 XP
Store: writable, readable & derived+100 XP
State Bersama dengan File .svelte.js & Class+100 XP
Transisi & Animasi+100 XP
Tween & Spring: Gerakan Halus untuk Angka+100 XP
TypeScript di Svelte+100 XP
SvelteKit: Routing, Layout & Halaman+100 XP
SvelteKit: Load, Form Actions & API+100 XP
Pola Mengambil Data: Loading, Error & Muat Ulang+100 XP
Praktik Terbaik: Aksesibilitas, Head, Testing & Deploy+100 XP
Proyek Akhir: Aplikasi Daftar Tugas+100 XP
πŸ†Quiz Arena+150 XP
Lulus Misi aktif Terkunci πŸ† Quiz Arena membuka sertifikat Β· tamat course +300 XP bonus
Kurikulum

30 part, dari nol sampai bisa

Daftar part
0 dari 30 part selesai
1
Pengenalan Svelte & Komponen PertamaApa itu Svelte, apa bedanya dengan framework lain, cara memulai proyek, anatomi file .svelte, dan membuat komponen pertamamu.
Buka
Markup & EkspresiDaftar gratis untuk membuka part ini. Daftar sekarang
Reaktivitas: $stateDaftar gratis untuk membuka part ini. Daftar sekarang
Nilai Turunan: $derivedDaftar gratis untuk membuka part ini. Daftar sekarang
Atribut, Class & Style DinamisDaftar gratis untuk membuka part ini. Daftar sekarang
Event HandlingDaftar gratis untuk membuka part ini. Daftar sekarang
Kondisi: {#if}, {:else if}, {:else}Daftar gratis untuk membuka part ini. Daftar sekarang
Perulangan: {#each} & keyDaftar gratis untuk membuka part ini. Daftar sekarang
Form Binding dengan bind:Daftar gratis untuk membuka part ini. Daftar sekarang
Efek Samping: $effectDaftar gratis untuk membuka part ini. Daftar sekarang
State Objek & Array (Deep Reactivity)Daftar gratis untuk membuka part ini. Daftar sekarang
Tag Template: {#await}, {@const}, {@html}, {#key}Daftar gratis untuk membuka part ini. Daftar sekarang
Komponen: Memecah UI Jadi Bagian KecilDaftar gratis untuk membuka part ini. Daftar sekarang
Props: Mengirim Data ke Komponen AnakDaftar gratis untuk membuka part ini. Daftar sekarang
Binding Antar Komponen: $bindableDaftar gratis untuk membuka part ini. Daftar sekarang
Callback Props: Komunikasi dari Anak ke IndukDaftar gratis untuk membuka part ini. Daftar sekarang
Snippets & {@render}: Menyisipkan KontenDaftar gratis untuk membuka part ini. Daftar sekarang
Context: Berbagi Data Tanpa Props BerlapisDaftar gratis untuk membuka part ini. Daftar sekarang
Lifecycle: onMount, onDestroy & tickDaftar gratis untuk membuka part ini. Daftar sekarang
bind:this & ActionsDaftar gratis untuk membuka part ini. Daftar sekarang
Store: writable, readable & derivedDaftar gratis untuk membuka part ini. Daftar sekarang
State Bersama dengan File .svelte.js & ClassDaftar gratis untuk membuka part ini. Daftar sekarang
Transisi & AnimasiDaftar gratis untuk membuka part ini. Daftar sekarang
Tween & Spring: Gerakan Halus untuk AngkaDaftar gratis untuk membuka part ini. Daftar sekarang
TypeScript di SvelteDaftar gratis untuk membuka part ini. Daftar sekarang
SvelteKit: Routing, Layout & HalamanDaftar gratis untuk membuka part ini. Daftar sekarang
SvelteKit: Load, Form Actions & APIDaftar gratis untuk membuka part ini. Daftar sekarang
Pola Mengambil Data: Loading, Error & Muat UlangDaftar gratis untuk membuka part ini. Daftar sekarang
Praktik Terbaik: Aksesibilitas, Head, Testing & DeployDaftar gratis untuk membuka part ini. Daftar sekarang
Proyek Akhir: Aplikasi Daftar TugasDaftar gratis untuk membuka part ini. Daftar sekarang
Pengajar

Ditemani mentor

H
Mentor kamu

Hifzon

Course ini disusun santai tapi praktis: teori singkat, animasi, lalu langsung latihan, supaya kamu terbiasa mencoba sendiri sejak part pertama.

Lanjut belajar

Course lain yang cocok untukmu

FAQ

Masih bingung? Cek ini dulu

Apakah course ini gratis?

Gratis! Cukup daftar dan verifikasi email, lalu semua part bisa langsung kamu buka.

Apakah saya perlu memasang aplikasi tambahan?

Nggak perlu. Semua latihan dikerjakan langsung di KelasIT, cukup pakai browser.

Bagaimana sistem kelulusan dan sertifikat?

Setiap part punya latihan singkat. Kalau sudah lulus, part berikutnya terbuka. Sertifikat bisa kamu ambil setelah semua part selesai dan quiz akhir minimal 70.

Harus selesai dalam berapa lama?

Bebas! Belajar sesuai tempomu, berhenti dan lanjut kapan saja. Progress-mu selalu tersimpan.

Apakah bisa dipelajari lewat ponsel?

Bisa banget untuk baca materi. Tapi untuk menulis kode, laptop atau tablet berkeyboard akan lebih nyaman.

Siap mulai belajar Svelte 5 dari Nol sampai Mahir?

Part pertama ringan kok. Mulai sekarang dan rasakan sendiri serunya belajar!

Coba Gratis Sekarang, Tanpa Daftar