Membuat UI/UX Modern menggunakan AlpineJs
Kelas ini dirancang untuk pengembang web yang ingin mempelajari cara menggunakan Alpine.js untuk membuat antarmuka pengguna (UI) dan pengalaman pengguna (UX) yang modern dan interaktif. Peserta akan belajar dasar-dasar Alpine.js, cara mengintegrasikannya dengan proyek web mereka, dan membangun komponen UI dinamis yang responsif. Melalui latihan praktis dan proyek nyata, peserta akan memahami bagaimana Alpine.js dapat digunakan untuk meningkatkan kualitas dan interaktivitas aplikasi web.
Tentang Kelas
Kelas "Membuat UI/UX Modern menggunakan Alpine.js" ini dirancang untuk pengembang web yang ingin meningkatkan kemampuan mereka dalam menciptakan antarmuka pengguna (UI) dan pengalaman pengguna (UX) yang interaktif dan modern. Alpine.js adalah framework JavaScript minimalis yang memungkinkan pengembang menambahkan interaktivitas ke halaman web mereka dengan mudah tanpa memerlukan library berat seperti React atau Vue.
Apa yang Akan Anda Pelajari:
- Pengenalan Alpine.js
- Dasar-dasar Alpine.js
- Membangun Komponen UI dengan Alpine.js
- Proyek 1: Landing Page Interaktif
- Proyek 2: Dashboard Aplikasi Web
Metode Pengajaran:
- Teori dan Konsep: Sesi pembelajaran interaktif yang menjelaskan konsep dasar Alpine.js dan UI/UX.
- Latihan Praktis: Latihan langsung untuk menerapkan apa yang telah dipelajari dalam kode nyata.
- Proyek Nyata: Membangun proyek nyata yang menggabungkan konsep Alpine.js dan UI/UX modern.
- Diskusi dan Tanya Jawab: Sesi tanya jawab untuk mengatasi kesulitan dan pertanyaan peserta.
Target Peserta:
Kelas ini cocok untuk pengembang web pemula hingga menengah yang ingin memahami dan menggunakan Alpine.js untuk membangun antarmuka pengguna yang modern dan interaktif.
Hasil yang Diharapkan:
Setelah menyelesaikan kelas ini, peserta diharapkan memiliki kemampuan untuk:
- Memahami dan menggunakan Alpine.js untuk membangun antarmuka pengguna interaktif.
- Menerapkan konsep UI/UX modern dalam proyek web mereka.
- Membangun dan mendeploy proyek web yang fungsional dan responsif menggunakan Alpine.js.
Daftar Materi
| Apa Itu Alpine.Js | 09:34 | |
| Cara Install Alpine.Js | 03:54 | |
| Cara Mengolah Data Di Alpine.Js | 05:34 | |
| Mengenal Attribute Dari Alpine.Js | 03:46 | |
| Mengenal Properties Dari Alpine.Js | 07:02 | |
| Mengenal Methods Dari Alpine.Js | 06:25 | |
| Todo App - Menampilkan Daftar Data | 07:19 | |
| Todo App - Menambahkan Data. | 06:48 | |
| Todo App - Mengubah Style Secara Dinamis Berdasarkan Data | 05:44 | |
| Todo App - Menghapus Daftar Data | 05:32 | |
| Alpine.Js Directive - Perbedaan X-Text Dan X-Html | 05:04 | |
| Alpine.Js Directive - Cara Kerja X-Model Di Form | 07:25 | |
| Alpine.Js Directive - Mendalami Modifier Dari X-Model | 07:12 | |
| Alpine.Js Directive - Cara Mudah Memilih Element Dengan X-Ref | 04:46 | |
| Alpine.Js Directive - Memahami Cara Kerja X-If Dan X-Show | 04:29 | |
| Alpine.Js Directive - Menggunakan Effect Transisi Dengan X-Transition | 06:58 | |
| Alpine.Js Directive - Menyiapkan Logic Di Awal Atau Di Akhir Dengan X-Init | 03:46 | |
| Alpine.Js Properties - Cara Kerja $Store Pada Global State | 05:55 | |
| Alpine.Js Properties - Cara Kerja $Refs Untuk Memanipulasi Dom | 05:29 | |
| Alpine.Js Properties - Memanggil Event Diluar Componentnya Dengan $Dispatch | 07:23 | |
| Alpine.Js Properties - Menjalankan Fungsi Ketika Sebuah Data Berubah Dengan $Watch | 05:27 | |
| Alpine.Js Plugins - Membuat Inputan Terformat Dengan Masking | 06:24 | |
| Alpine.Js Plugins - Mengubah Inputan Nominal Mata Uang | 02:29 | |
| Project Pagination - Membuat Card Daftar Anggota | 07:45 | |
| Project Pagination - Membuat Ui Untuk Pagination | 04:57 | |
| Project Pagination - Menampilkan Daftar Anggota Dari Alpine.Js | 09:21 | |
| Project Pagination - Mengaktifkan Proses Pagination Dengan Alpine.Js | 07:57 | |
| Project Pagination - Mendapatkan Data Members Dari Api.Js | 06:31 | |
| Project Pagination - Mencari Data Member Berdasrakan Pencarian | 08:01 | |
| Calculator - Membuat Component Calculator | 04:52 | |
| Calculator - Percantik Ui Calculator Dengan Tailwindcss | 06:00 | |
| Calculator - Mendapatkan Nilai Dan Operator Dari Tombol | 05:04 | |
| Calculator - Mengaktifkan Fungsi Menghitungnya | 04:15 | |
| Calculator - Membuat Perhitungan Dengan Persen | 05:16 | |
| Calculator - Mengaktifkan Fungsi Calculator Dengan Keyboard | 05:18 |
Penyusun Materi
Ahmad Hakim
Founder & Mentor IDStack | CTO di Nusabot | Software Engineer di GovTech Edu | Former Software Engineer di Track&ROLL
Testimoni Oleh Siswa
(1 reviews)
Muhammad Irfan Bakhtiar
Cocok untuk pemula dan cara penyampaiannya mudah dipahami. Walau sebelumnya sudah belajar tentang Vue.js, untuk mempelajari Alpine.js tidak terlalu sulit.