Proyek Sederhana Svelte - Todo App

Di course ini akan dibahas pengenalan svelte dan mini project yang akan dibuat (todo app) untuk dapat memahami tentang Svelte

INTERMEDIATE170 penilaian1096 peserta

Tentang Kelas

Dalam kelas online ini kamu akan belajar langkah demi langkah dasar-dasar Svelte dengan disertakan mini project. Materi belajar telah disusun sedemikian rupa agar kamu mudah dalam memahaminya.

Tujuan Umum dan Khusus Pelatihan

  • Di akhir pelatihan, peserta dapat mengenal langkah-langkah membuat Proyek Sederhana Svelte - Todo App
  • Dapat mempraktikan dasar-dasar membuat Proyek Sederhana Svelte - Todo App
  • Dapat merangkumkan cara membuat Proyek Sederhana Svelte - Todo App

Silabus

  • Topik 1: Belajar Svelte - Membuat Todo App

Jenis Pekerjaan Kelas ditujukan bagi siapa saja yang ingin berkarir menjadi seorang programmer

Metode Ajar

  • Online Self-paced Learning
  • Siswa dapat menentukan sendiri waktu belajarnya

Fasilitas Pengajaran

  • Materi disediakan berupa video
  • Forum tanya jawab: Forum digunakan apabila siswa mendapatkan kendala saat belajar, dan akan dibalas oleh tim support CodePolitan
  • Grup telegram: Berisi member CodePolitan Evaluasi pembelajaran: Ujian di akhir modul dan ujian di akhir kelas Sertifikat kelulusan

Peralatan Belajar Siswa

  • Siswa wajib memiliki akses internet melalui komputer yang menggunakan Windows/Mac/Linux
  • Spesifikasi minimal komputer milik siswa: Sistem operasi : Windows, Linux, atau MacOS. Prosesor : Intel Dual Core (Rekomendasi Core i3 ke atas). RAM : 1GB (Rekomendasi 2GB). Resolusi layar : 1366 x 768 (Rekomendasi Full HD 1920 x 1080)
  • Software: Browser (tidak ada preferensi khusus)

Daftar Materi

Pengenalan01:35
Memulai Proyek Svelte09:56
Tag HTML Pada Svelte03:03
Unused export property & Unused CSS Selector Svelte02:42
Menggunakan CSS Framework04:16
Membuat Box List Todo06:09
Membuat Todo Card03:41
Components dan Props08:03
List / Each Block pada Svelte06:05
List Array of Object03:49
Binding dan Reactivity Svelte06:35
Event Handlers dan Reactivity Array06:50
Membuat CardList Component07:27
Pengenalan Component Events05:47
Implementasi Component Events07:40
Conditional Rendering10:13
Fungsi Menghapus Kartu Todo11:23
Fungsi Memindahkan Kartu Todo14:57
Menggunakan Local Storage12:30
Efek Transisi04:16
Penyusun Materi

Prev
Next
Bagus Budi Cahyono
Bagus Budi Cahyono

Back End Developer at Bibit.id

Testimoni Oleh Siswa

  • Semua
  • Bintang 5
  • Bintang 4
  • Bintang 3
  • Bintang 2
  • Bintang 1
4.7

(170 reviews)

5 Bintang
82%
4 Bintang
12%
3 Bintang
5%
2 Bintang
0%
1 Bintang
1%
Mulyo Anjang Jaya Kusuma
Mulyo Anjang Jaya Kusuma
Materinya gampang dimengerti untuk pemula sangat worth it, bisa langsung praktek mengikuti tutorialnya.
Mulyo Anjang Jaya Kusuma
Mulyo Anjang Jaya Kusuma
Materinya gampang dimengerti untuk pemula sangat worth it, bisa langsung praktek mengikuti tutorialnya.
Pentester
Pentester
bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus bagus
Rafi Fahrezi
Rafi Fahrezi
Penyampain dan metode cara nya yg sederhana dan mudah dijelaskan, Terbaik untuk bapak, semoga bisa memberikan pembelajaran yg banyak yaa
Athallah Ahmad Ghozali
Athallah Ahmad Ghozali
Kelas Proyek Sederhana Svelte - Todo App dari CodePolitan cocok buat pemula yang mau belajar framework Svelte. Materinya step-by-step, mulai dari instalasi hingga implementasi fitur utama seperti tambah, hapus, dan edit todo. Pengajar menjelaskan konsep dengan jelas, termasuk penggunaan store dan reaktifitas di Svelte. Kode mudah dipahami karena sederhana, tapi cukup untuk menunjukkan kekuatan framework ini. Meski kelasnya singkat, peserta dapat gambaran lengkap bagaimana Svelte bekerja. Sayangnya, mungkin kurang mendalam untuk yang sudah berpengalaman. Overall, kelas ini recommended buat yang baru masuk ke dunia framework JavaScript dan ingin memahami Svelte secara cepat tapi tetap fun.
Heri
Heri
Materi yang disampaikan oleh mentornya mudah di mengerti dan cocok untuk saya belajar sebagai pemula!
Bagus Budi Satoto
Bagus Budi Satoto
Membuat Todo App menggunakan Svelte adalah proyek yang bagus untuk memahami dasar-dasar framework ini. Berikut adalah beberapa ulasan tentang proses pembuatan Todo App dengan Svelte: Kelebihan: Simplicity dan Performance: Svelte menawarkan sintaks yang sederhana dan intuitif, yang memudahkan pemula untuk memahami. Tidak seperti framework JavaScript lainnya, Svelte mengkompilasi kode ke JavaScript vanilla, sehingga menghasilkan performa yang lebih baik dan ukuran bundle yang lebih kecil. Reactivity: Salah satu fitur utama Svelte adalah reaktivitasnya yang otomatis tanpa memerlukan kode boilerplate yang berlebihan. Setiap kali ada perubahan pada data, UI secara otomatis diperbarui. Svelte Store: Svelte memiliki konsep "store" untuk mengelola state yang lebih kompleks, mirip dengan state management di framework lain, tetapi lebih ringan dan mudah digunakan. CSS Scoped: Svelte memungkinkan penulisan CSS langsung di dalam komponen dengan scoping otomatis, sehingga style hanya diterapkan ke komponen yang relevan. Tantangan: Learning Curve untuk Reaktivitas dan Store: Meskipun sintaks Svelte sederhana, konsep reaktivitas dan pengelolaan state menggunakan store bisa membingungkan bagi pemula yang belum pernah menggunakan framework JavaScript reaktif sebelumnya. Ekosistem yang Lebih Kecil: Karena Svelte adalah framework yang relatif baru dibandingkan dengan React atau Vue, ekosistemnya masih berkembang. Ini berarti dokumentasi, plugin, atau komponen pihak ketiga mungkin belum sebanyak framework lainnya. Build Time Compilation: Karena Svelte mengkompilasi kode di build time, mungkin ada sedikit tambahan waktu dalam proses build untuk aplikasi yang lebih besar. Namun, ini biasanya diimbangi dengan waktu loading yang lebih cepat di sisi pengguna. Langkah-Langkah Membuat Todo App: Inisialisasi Proyek: Mulai dengan menginisialisasi proyek menggunakan npx degit sveltejs/template svelte-todo-app dan menginstal dependensi yang diperlukan dengan npm install. Membuat Komponen Todo: Buat komponen utama yang berisi daftar todo dan form input untuk menambahkan item baru. Gunakan reactive statements ($:) untuk memonitor perubahan data. Mengelola State: Gunakan store untuk mengelola state global jika aplikasi tumbuh lebih besar dan memerlukan pengelolaan data yang lebih kompleks, seperti mengedit atau menghapus item. Styling dan Optimasi: Tambahkan styling yang diinginkan dan optimalkan komponen dengan membagi menjadi sub-komponen yang lebih kecil jika diperlukan. Kesimpulan: Membuat Todo App dengan Svelte adalah pengalaman yang menyenangkan dan sangat bermanfaat untuk memahami bagaimana framework ini bekerja. Dengan pendekatan yang sederhana namun kuat, Svelte memungkinkan pengembang membuat aplikasi web yang cepat dan efisien dengan lebih sedikit kode.
Bagus Budi Satoto
Bagus Budi Satoto
Membuat Todo App menggunakan Svelte adalah proyek yang bagus untuk memahami dasar-dasar framework ini. Berikut adalah beberapa ulasan tentang proses pembuatan Todo App dengan Svelte: Kelebihan: Simplicity dan Performance: Svelte menawarkan sintaks yang sederhana dan intuitif, yang memudahkan pemula untuk memahami. Tidak seperti framework JavaScript lainnya, Svelte mengkompilasi kode ke JavaScript vanilla, sehingga menghasilkan performa yang lebih baik dan ukuran bundle yang lebih kecil. Reactivity: Salah satu fitur utama Svelte adalah reaktivitasnya yang otomatis tanpa memerlukan kode boilerplate yang berlebihan. Setiap kali ada perubahan pada data, UI secara otomatis diperbarui. Svelte Store: Svelte memiliki konsep "store" untuk mengelola state yang lebih kompleks, mirip dengan state management di framework lain, tetapi lebih ringan dan mudah digunakan. CSS Scoped: Svelte memungkinkan penulisan CSS langsung di dalam komponen dengan scoping otomatis, sehingga style hanya diterapkan ke komponen yang relevan. Tantangan: Learning Curve untuk Reaktivitas dan Store: Meskipun sintaks Svelte sederhana, konsep reaktivitas dan pengelolaan state menggunakan store bisa membingungkan bagi pemula yang belum pernah menggunakan framework JavaScript reaktif sebelumnya. Ekosistem yang Lebih Kecil: Karena Svelte adalah framework yang relatif baru dibandingkan dengan React atau Vue, ekosistemnya masih berkembang. Ini berarti dokumentasi, plugin, atau komponen pihak ketiga mungkin belum sebanyak framework lainnya. Build Time Compilation: Karena Svelte mengkompilasi kode di build time, mungkin ada sedikit tambahan waktu dalam proses build untuk aplikasi yang lebih besar. Namun, ini biasanya diimbangi dengan waktu loading yang lebih cepat di sisi pengguna. Langkah-Langkah Membuat Todo App: Inisialisasi Proyek: Mulai dengan menginisialisasi proyek menggunakan npx degit sveltejs/template svelte-todo-app dan menginstal dependensi yang diperlukan dengan npm install. Membuat Komponen Todo: Buat komponen utama yang berisi daftar todo dan form input untuk menambahkan item baru. Gunakan reactive statements ($:) untuk memonitor perubahan data. Mengelola State: Gunakan store untuk mengelola state global jika aplikasi tumbuh lebih besar dan memerlukan pengelolaan data yang lebih kompleks, seperti mengedit atau menghapus item. Styling dan Optimasi: Tambahkan styling yang diinginkan dan optimalkan komponen dengan membagi menjadi sub-komponen yang lebih kecil jika diperlukan. Kesimpulan: Membuat Todo App dengan Svelte adalah pengalaman yang menyenangkan dan sangat bermanfaat untuk memahami bagaimana framework ini bekerja. Dengan pendekatan yang sederhana namun kuat, Svelte memungkinkan pengembang membuat aplikasi web yang cepat dan efisien dengan lebih sedikit kode.
Fauzia zahra
Fauzia zahra
Mudah dipahami,Keren sekali,Kontennya menarik
Cinta Putriana
Cinta Putriana
Mudah dipahami,Kontennya menarik,Keren sekali,Recommended,Informatif
;
...
Lihat Rekaman
Gratis!
Yang akan kamu dapatkan :
20 Modul
2 jam durasi
Forum Diskusi Tanya Jawab
Klaim Sertifikat Digital
Belajar Sekarang

Kelas Populer Lainnya

Prev
Next