Sveltejs Academy logo
HTMLPemulaWebTahap A1 → C122 bahasa

Sveltejs Academy

Bina antara muka pengguna yang pantas dan ringkas dengan teknik moden di Svelte Academy. Laluan pembelajaran CoddyKit yang merangkumi 41 kursus pendek dan 163 pelajaran interaktif, dengan tutor kecerdasan buatan 24/7 di sisi anda.

Kursus
41
Pelajaran
163
Langkah interaktif
2,114
Percuma untuk bermula
Kursus 1
Kurikulum

41 kursus dalam laluan ini

Setiap kursus dalam laluan Sveltejs Academy, mengikut urutan pembelajaran. Kursus pertama adalah percuma.

1

A13 pelajaranPercuma

Fahami maksud Svelte, sebab pendekatannya untuk membina antara muka pengguna berbeza sepenuhnya daripada React atau Vue dan sebab pembangun yang mencubanya biasanya terus menyukainya.

2

A14 pelajaranPRO

Mulakan dengan Svelte dengan memahami keistimewaannya berbanding rangka kerja lain, menyediakan projek pertama serta meneroka struktur projek dan aliran kerja pembangunan.

3

A14 pelajaranPRO

Pelajari cara menulis komponen Svelte dari awal, menggunakan pemboleh ubah reaktif, menginterpolasi ungkapan dan mencipta nilai terhitung dengan pengisytiharan reaktif.

4

A24 pelajaranPRO

Hantar data antara komponen Svelte menggunakan props, tetapkan nilai lalai dan hantarkan props dengan kemas menggunakan $$props serta $$restProps.

5

A24 pelajaranPRO

Kawal perkara yang dipaparkan dalam templat Svelte menggunakan blok bersyarat, ulangi tatasusunan dengan blok each dan paksa pemaparan semula dengan blok key.

6

A24 pelajaranPRO

Kendalikan peristiwa DOM dalam Svelte, gunakan pengubah peristiwa untuk memudahkan corak lazim, hantar peristiwa tersuai daripada komponen anak dan teruskan peristiwa ke atas pepohon.

7

A24 pelajaranPRO

Segerakkan input borang serta unsur DOM dengan pemboleh ubah Svelte menggunakan arahan bind: untuk teks, kotak pilihan, kumpulan radio dan rujukan unsur.

8

B14 pelajaranPRO

Kawal perkara yang berlaku pada setiap peringkat hayat komponen Svelte dengan onMount, onDestroy, beforeUpdate, afterUpdate dan utiliti tick.

9

B14 pelajaranPRO

Kongsikan keadaan reaktif merentas komponen menggunakan primitif store terbina dalam Svelte, langgan kepadanya dengan singkatan $ dan cipta store boleh baca dengan logik tersuai.

10

B14 pelajaranPRO

Gubah store Svelte dengan menerbitkan store terhitung daripada satu atau lebih sumber, dan bina store tersuai sepenuhnya yang melaksanakan kontrak store.

11

B14 pelajaranPRO

Masukkan kandungan ke dalam komponen Svelte menggunakan slot lalai dan bernama, sediakan kandungan sandaran serta semak sama ada slot telah diisi.

12

B14 pelajaranPRO

Animasikan unsur yang memasuki dan meninggalkan DOM dengan arahan peralihan terbina dalam Svelte, konfigurasikan pemasaan serta pelicinan dan kendalikan peralihan masuk/keluar yang tidak simetri.

13

B14 pelajaranPRO

Melangkaui peralihan dengan arahan animate Svelte untuk penyusunan semula senarai, animasi spring berasaskan fizik dan interpolasi nilai tween.

14

B14 pelajaranPRO

Navigasi sistem penghalaan berasaskan fail SvelteKit, cipta laluan dinamik dengan parameter dan gunakan fail susun atur untuk berkongsi UI merentas halaman.

15

B14 pelajaranPRO

Muatkan data untuk halaman anda menggunakan fungsi load SvelteKit, kendalikan ralat dengan baik dan jalankan logik khusus pelayan dalam +page.server.js.

16

B14 pelajaranPRO

Hantar data jauh ke dalam pepohon komponen tanpa menghantar props berulang kali menggunakan Context API Svelte, dan fahami masa untuk mengutamakan konteks berbanding store.

17

B14 pelajaranPRO

Tingkatkan kebolehtemuan dengan menetapkan tag meta dinamik, kad OpenGraph, data berstruktur JSON-LD dan mengurus URL kanonik dalam SvelteKit.

18

B24 pelajaranPRO

Kendalikan penghantaran borang HTML pada pelayan dengan tindakan borang SvelteKit, tingkatkannya secara progresif dengan JavaScript dan kembalikan ralat pengesahan.

19

B24 pelajaranPRO

Bina titik akhir API RESTful dan penstriman dalam SvelteKit menggunakan fail +server.js, kendalikan pelbagai kaedah HTTP dan kembalikan respons JSON bertipa.

20

B24 pelajaranPRO

Pintas dan ubah setiap permintaan dengan cangkuk pelayan SvelteKit, catat ralat secara berpusat dan gubah beberapa cangkuk dengan utiliti sequence.

21

B24 pelajaranPRO

Sediakan pengalaman pengguna yang baik apabila berlaku masalah dengan menyesuaikan halaman ralat, membezakan ralat yang dijangka daripada yang tidak dijangka dan mengendalikan ralat dalam susun atur…

22

B24 pelajaranPRO

Perdalam pemahaman anda tentang sistem reaktif Svelte: susunan pernyataan reaktif, masa untuk menggunakan store berbanding keadaan setempat dan cara mengelakkan penutupan lapuk.

23

B24 pelajaranPRO

Lampirkan tingkah laku imperatif yang boleh digunakan semula pada unsur DOM dengan tindakan Svelte, kendalikan parameter serta kemas kini dan bina tindakan praktikal seperti clickOutside serta petua…

24

B24 pelajaranPRO

Tulis fungsi peralihan Svelte tersuai dari awal, kawal parameter pemasaan dan cipta peralihan perubahan bentuk serta peralihan CSS berbanding JS yang lanjutan.

25

B24 pelajaranPRO

Animasikan nilai mengikut masa dengan store gerakan spring dan tween Svelte, gunakan fungsi interpolasi dan laksanakan gerakan pada laluan SVG.

26

B24 pelajaranPRO

Kuasai sistem susun atur lanjutan SvelteKit: susun atur kumpulan, penggantian pada aras laluan, keluar daripada susun atur dan perkongsian data merentas hierarki susun atur.

27

B24 pelajaranPRO

Laksanakan pengesahan dalam SvelteKit menggunakan sesi berasaskan kuki, JWT yang selamat, perlindungan laluan dalam cangkuk dan OAuth dengan Lucia Auth.

28

B24 pelajaranPRO

Gunakan aplikasi SvelteKit di mana-mana sahaja dengan penyesuai yang sesuai: tapak statik, pelayan Node.js, Vercel dan Cloudflare Workers.

29

B24 pelajaranPRO

Temui sistem runes Svelte 5 yang menggantikan keajaiban pengkompil dengan primitif reaktif eksplisit untuk keadaan, nilai terbitan dan kesan sampingan.

30

B24 pelajaranPRO

Gunakan $props() untuk props komponen bertipa serta sintaks snippet baharu dengan {#snippet} dan {@render} bagi gubahan kandungan yang berkuasa dalam Svelte 5.

31

B24 pelajaranPRO

Kawal strategi pemaparan bagi setiap laluan dalam SvelteKit: pilih antara load sejagat dan khusus pelayan, prapapar halaman statik dan nyahdayakan SSR apabila diperlukan.

32

B24 pelajaranPRO

Tulis ujian unit yang boleh dipercayai untuk komponen dan store Svelte dengan Vitest serta @testing-library/svelte, meliputi pemaparan, interaksi dan simulasi modul.

33

B24 pelajaranPRO

Tulis ujian hujung ke hujung untuk aplikasi SvelteKit menggunakan Playwright, meliputi navigasi halaman, interaksi borang dan penyepaduan saluran CI.

34

B24 pelajaranPRO

Tambahkan Tailwind CSS, visualisasi data D3.js, peta Leaflet dan penyunting teks kaya ke projek SvelteKit menggunakan tindakan Svelte serta pembalut komponen.

35

B24 pelajaranPRO

Perkukuh aplikasi SvelteKit anda daripada serangan CSRF, XSS dan suntikan, urus pemboleh ubah persekitaran dengan selamat serta hadkan kadar laluan API.

36

C14 pelajaranPRO

Terokai corak rune Svelte 5 lanjutan termasuk keadaan mentah, terbitan kompleks, pembersihan kesan manual dan penghijrahan daripada Svelte 4.

37

C14 pelajaranPRO

Bina API komponen Svelte yang canggih dan boleh digunakan semula menggunakan props render dengan snippet, komponen tertib tinggi, corak builder dan komponen gabungan.

38

C14 pelajaranPRO

Sampaikan pemuatan halaman awal yang pantas dengan menstrim promise daripada fungsi load, menangguhkan data lambat dan menstrim daripada laluan API menggunakan ReadableStream.

39

C14 pelajaranPRO

Optimumkan prestasi aplikasi SvelteKit dengan pemisahan kod automatik, pengendalian imej yang dipertingkat, pemuatan malas dan alat pemprofilan.

40

C14 pelajaranPRO

Reka seni bina aplikasi Svelte besar dengan corak store modul ciri, bas peristiwa, kemas kini UI optimistik dan buat asal/buat semula menggunakan sejarah store.

41

C14 pelajaranPRO

Gabungkan semua yang telah dipelajari untuk membina aplikasi tindanan penuh yang sedia digunakan dalam pengeluaran, lengkap dengan pengesahan, pangkalan data melalui Drizzle ORM, pelancaran di Vercel…

CoddyKit PRO

Dapatkan akses kepada kesemua 41 kursus dalam laluan ini dan semua laluan lain

Tutor AI, peperiksaan pensijilan dan sijil. Berfungsi di laman web, iOS dan Android.

Lihat semua pelan
Tahunan$29.90 / tahunKira-kira $2.49 sebulanBayar sekaliSeumur hidup$69.99 sekaliTiada pembaharuan. PRO selama-lamanya.
Gambaran Keseluruhan Kursus

Bina Antara Muka Sebenar dengan Svelte dan SvelteKit

Svelte menggunakan pendekatan yang berbeza secara asas daripada React dan Vue — bukannya menghantar masa jalan ke pelayar, Svelte menyusun komponen anda menjadi JavaScript vanilla yang sangat cekap pada masa binaan. Hasilnya ialah himpunan yang lebih kecil, masa pemuatan yang lebih pantas dan kurang kod berulang. SvelteKit, rangka kerja aplikasi rasmi, menambah penghalaan berasaskan fail, pemaparan sisi pelayan, tindakan borang dan penyesuai penggunaan supaya anda boleh menerbitkan aplikasi bertaraf produksi pada mana-mana platform. Laluan ini merangkumi kedua-duanya, daripada komponen pertama hingga seni bina tindanan penuh.

Perkara yang Akan Dipelajari

Anda akan bermula dengan model komponen Svelte — props, sintaks templat, syarat, gelung dan pengikatan dua hala — kemudian beralih kepada sistem reaktiviti, fungsi kitar hayat serta asas stor: writable, readable, derived dan stor tersuai. Dari sudut antara muka pengguna, anda akan menggunakan slot, Context API, peralihan CSS, animasi dan Svelte Motion. Bab SvelteKit merangkumi penghalaan, pemuatan data, SSR dan prapemaparan, tindakan borang, laluan API, cangkuk, pengendalian ralat, susun atur lanjutan, corak pengesahan dan penyesuai penggunaan. Laluan ini turut merangkumi sistem rune Svelte 5, ujian dengan ujian unit dan Playwright E2E, integrasi pustaka pihak ketiga serta amalan keselamatan SvelteKit.

Laluan Pembelajaran

Empat puluh satu kursus bergerak daripada A1 hingga C1. Tujuh kursus pertama membina asas: komponen, props, peristiwa dan sintaks templat. B1 memperkenalkan stor, slot, peralihan serta halaman SvelteKit pertama anda dan corak pemuatan data. B2 — blok terbesar — membimbing anda melalui tindakan borang, laluan API, cangkuk, reaktiviti lanjutan, Svelte Actions, animasi tersuai, corak pengesahan, penyesuai, rune Svelte 5, ujian dan keselamatan. Laluan ini berakhir pada C1 dengan rune lanjutan, corak komponen lanjutan, penstriman SvelteKit, pengoptimuman prestasi, pengurusan keadaan pada skala besar serta aplikasi SvelteKit tindanan penuh sebagai projek kemuncak.

Cara Ia Berfungsi

Setiap kursus dibahagikan kepada pelajaran pendek dan berfokus yang anda siapkan dalam editor kod terbina dalam dengan maklum balas masa nyata. Tutor AI tersedia apabila anda menghadapi kesukaran, dan setiap konsep diperkukuh dengan latihan praktikal sebelum anda beralih kepada topik seterusnya.

Cara Anda Belajar

  1. 01

    Pelajaran Interaktif

    Latihan pengekodan amali dengan maklum balas masa nyata

  2. 02

    Tutor AI

    Dapatkan bantuan segera daripada AI kami apabila anda buntu

  3. 03

    Penyunting Terbina Dalam

    Tulis dan jalankan kod terus dalam pelayar anda

  4. 04

    Sijil

    Dapatkan sijil selepas melengkapkan kursus

FAQ

Soalan Lazim

Adakah kursus Sveltejs Academy percuma?

Ya. Anda boleh memulakan kursus Sveltejs Academy secara percuma dan mengikuti pelajaran interaktifnya tanpa sebarang bayaran. Langganan PRO pilihan membuka akses kepada alat kecerdasan buatan lanjutan dan sijil yang boleh dikongsi.

Adakah saya memerlukan pengalaman terdahulu untuk mempelajari HTML?

Tidak. Kursus ini bermula dengan asas dan beralih secara beransur-ansur kepada topik yang lebih maju, jadi anda boleh bermula walaupun tanpa pengalaman terdahulu dalam HTML.

Bagaimanakah saya akan mempelajari HTML di CoddyKit?

Anda belajar melalui amali. Pelajaran interaktif yang ringkas menggabungkan penerangan yang jelas dengan latihan pengekodan praktikal yang berjalan dalam masa nyata, manakala tutor kecerdasan buatan 24/7 memberikan bantuan yang diperibadikan apabila anda menghadapi kesukaran.

Adakah saya mendapat sijil selepas menamatkan Sveltejs Academy?

Ya. Pelajar PRO boleh menduduki peperiksaan dan memperoleh sijil tamat kursus yang boleh dikongsi, lengkap dengan kod yang boleh disahkan untuk kursus Sveltejs Academy.

Bolehkah saya mempelajari HTML melalui telefon saya?

Ya. CoddyKit tersedia di web dan sebagai aplikasi asli iOS serta Android, jadi anda boleh mempelajari HTML pada mana-mana peranti dan kemajuan anda disegerakkan merentas semua peranti.

Berapakah kos CoddyKit PRO?

Kursus pertama dalam Sveltejs Academy adalah percuma. CoddyKit PRO membuka akses kepada setiap kursus: $5.90 seminggu, $7.90 sebulan, $29.90 setahun atau $69.99 sekali untuk akses seumur hidup tanpa pembaharuan.

Berapa lama masa yang diperlukan untuk melengkapkan Sveltejs Academy?

Sveltejs Academy mempunyai 41 kursus dan 163 pelajaran. Kebanyakan pelajaran mengambil masa kira-kira 5–10 minit, jadi keseluruhan laluan ini memerlukan sekitar 19 jam latihan amali, mengikut rentak anda sendiri.

Mulakan Sveltejs Academy Sekarang

Sertai ribuan pelajar yang menguasai pengaturcaraan melalui pelajaran berkuasa kecerdasan buatan.