Menguasai Nuxt.js dan Tailwindcss dengan 2 Project
Kelas "Menguasai Nuxt.js dan Tailwind CSS dengan 2 Proyek" dirancang untuk membantu pengembang web pemula hingga menengah memahami dan mengimplementasikan Nuxt.js dan Tailwind CSS.
BEGINNER0 penilaian0 peserta
Tentang Kelas
Kelas "Menguasai Nuxt.js dan Tailwind CSS dengan 2 Proyek" dirancang untuk pengembang web yang ingin memperdalam pengetahuan mereka tentang Nuxt.js, framework berbasis Vue.js yang populer untuk aplikasi Universal (SSR) dan Tailwind CSS, framework utility-first CSS yang efisien. Melalui kelas ini, peserta akan belajar bagaimana mengintegrasikan dan menggunakan kedua teknologi ini secara efektif melalui dua proyek praktis yang menantang dan menginspirasi.
Apa yang Akan Anda Pelajari:
- Pengenalan Nuxt.js
- Pengenalan Tailwind CSS
- Integrasi Nuxt.js dan Tailwind CSS
- Proyek 1: Web Page
- Proyek 2: Web Dinamis
Metode Pengajaran:
- Teori dan Konsep: Sesi pembelajaran interaktif yang menjelaskan konsep dasar dan teknik pengembangan.
- Latihan Praktis: Latihan langsung untuk menerapkan apa yang telah dipelajari dalam kode nyata.
- Proyek Nyata: Membangun proyek nyata yang menggabungkan Nuxt.js dan Tailwind CSS.
- 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 Nuxt.js dan Tailwind CSS untuk membangun aplikasi web yang modern dan responsif.
Hasil yang Diharapkan:
Setelah menyelesaikan kelas ini, peserta diharapkan memiliki kemampuan untuk:
- Memahami dan menggunakan Nuxt.js untuk membangun aplikasi web.
- Mengintegrasikan dan menggunakan Tailwind CSS untuk styling dan layout.
- Membangun dan mendeploy proyek web yang lengkap dan fungsional menggunakan Nuxt.js dan Tailwind CSS.
Daftar Materi
| Kenapa Harus Vue.Js Dulu | 04:42 | |
| Alasan Kenapa Kamu Perlu Menggunakan Nuxt.Js | 07:33 | |
| Penjelasan Client-Server Dan Universal Rendering | 07:08 | |
| Apa Yang Bisa Dibuat Dengan Nuxt.Js | 04:14 | |
| Melihat Contoh Project Pertama - Portfolio Online | 02:48 | |
| Install Nuxt Dan Devtools Di Dalamnya | 06:30 | |
| Mengenal Standar Folder Dan File Di Project Nuxt | 10:27 | |
| Cara Membuat Halaman Dan Route Berbasis File | 03:06 | |
| Cara Berpindah Halaman Di Nuxt.Js | 04:33 | |
| Cara Menambahkan Parameter Route Di Pages | 05:53 | |
| Menentukan Layout Halaman Di Nuxt | 05:14 | |
| Menggunakan Layout Yang Berbeda Pada Setiap Page | 03:52 | |
| Nuxt Modules Dan Cara Install Tailwindcss Di Nuxt | 03:03 | |
| Styling Layout Dengan Tailwindcss | 07:12 | |
| Menggunakan Component Terpisah Di Nuxt | 03:33 | |
| Cara Mengubah Informasi Pada Bagian Head Di Nuxt | 05:38 | |
| Cara Konfigurasi Seo Page Di Nuxt | 04:23 | |
| Mengenal Data Fetching Di Nuxt | 06:16 | |
| Mengenal Data Fetching Dengan Usefetch | 03:44 | |
| Membuat Component Untuk Daftar Project | 05:52 | |
| Melakukan Filter Dan Sorting Data Dari Api | 06:42 | |
| Dark Mode Di Nuxt.Js Dengan Tailwindcss | 03:58 | |
| Membuat Toggle Mode Tema Website | 07:38 | |
| Menggunakan Nuxt Content Untuk Menampilkan Isi Markdown | 04:57 | |
| Menggunakan Prose Untuk Menampilkan Style Markdown | 04:49 | |
| Mengisikan Meta Tag Dari Content Markdown Dengan Front-Matter | 04:51 | |
| Menggunakan Markdown Untuk Content Suatu Page | 03:58 | |
| Menampilkan Highlight Pada Konten Yang Berisi Kode | 04:29 | |
| Cara Mendapatkan Daftar Content Dengan Query | 06:37 | |
| Filtering Daftar Konten Dan Memuat Asset Gambar | 04:11 | |
| Memanggil Component Melalui File Markdown | 05:36 | |
| Memanggil Component Melalui File Markdown | 04:36 | |
| Mengelompokkan Konten Blog Berdasarkan Tanggal | 07:26 | |
| Challange - Mengubah Konten Project Menggunakan Markdown | 04:31 | |
| Persiapan Untuk Menampilkan Table Of Content Dari Markdown | 04:40 | |
| Menampilkan Table Of Content Dari Markdown | 07:31 | |
| Menambahkan Logic Untuk Show Dan Hide Table Of Content | 03:38 | |
| Perbaiki Styling Layout Dan Header Project | 04:06 | |
| Membuat Scroll Table Of Content Lebih Smooth | 04:10 | |
| Menambahkan Style Indikator Aktif Dari Toc | 07:39 | |
| Membuat Desain Halaman Error Di Nuxt | 05:27 | |
| Menambahkan Efek Transisi Ketika Berpindah Halaman | 05:03 | |
| Menggunakan Reusable Component Content Pada Home Page | 06:58 | |
| Mengubah Desain Project Menjadi Responsive | 05:07 | |
| Generate Sitemap Agar Seo Friendly | 06:38 | |
| Memulai Project Finance Tracker Dan Mengenal Teknologinya | 05:25 | |
| Persiapan Layout Untuk Project Finance Tracker | 05:09 | |
| Membuat Homepage Dan Header Avatar | 04:29 | |
| Membuat Halaman Rangkuman Dengan Component Periode | 05:47 | |
| Tren Kas Component - Desain Responsive | 04:44 | |
| Tren Kas Component - Membuat Loading Spinner Dan Icon Nuxt Ui | 09:23 | |
| Tren Kas Component - Membuat Logic Trend Untuk Warna Dan Icon | 04:05 | |
| Tren Kas Component - Membuat Logic Percentage Perbandingan | 04:05 | |
| Membuat Helper Currency Dengan Composable | 05:31 | |
| Transaction Component - Daftar Transaksi | 05:27 | |
| Transaction Component - Currency Dan Action Button | 04:17 | |
| Cara Membuat Project Supabase | 03:47 | |
| Menghubungkan Nuxt Dengan Supabase | 06:00 | |
| Cara Membuat Tabel Database Di Supabase | 07:26 | |
| Cara Mendapatkan Data Dari Supabase Melalui Nuxt | 06:37 | |
| Menampilkan Data Ke Component Transaction | 04:41 | |
| Menentukan Icon Dan Warna Transaction Sesuai Tipe | 04:30 | |
| Membuat Logic Mengelompokkan Transaksi Berdasarkan Tanggal | 04:22 | |
| Membuat Component Untuk Total Transaksi Perhari | 03:50 | |
| Menampilkan Total Transaksi Perhari Beserta Detailnya | 03:34 | |
| Menghapus Data Transaction Dan Membuat Notifikasi | 06:07 | |
| Memperbarui Tampilan Transaksi Setelah Hapus Dengan Emit | 06:07 | |
| Menambahkan Effect Loading Pada Saat Hapus Dan Fetch Data | 04:44 | |
| Mendapatkan Nilai Total Transaksi Income Dan Expense | 03:33 | |
| Implementasi Component Modal Untuk Form Transaction | 06:23 | |
| Memindahkan Component Modal Pada File Terpisah | 04:59 | |
| Desain Form Transaction | 06:18 | |
| Membuat State Untuk Menyimpan Data Transaksi Dari Form | 03:55 | |
| Menambahkan Rules Validation Pada Form | 06:51 | |
| Membuat Logic Clear Form Dan Close Modal | 05:01 | |
| Menyimpan Data Dari Form Ke Supabasel | 06:00 | |
| Refactor Logic Fetch Transaction Ke Composable | 07:23 | |
| Membuat Logic Time Period Transaction | 06:34 | |
| Mendapatkan Data Transaksi Berdasarkan Period | 06:59 | |
| Mendapatkan Nilai Transaksi Sebelumnya Dan Perbaikan Component Trend | 07:50 |
Penyusun Materi
Ahmad Hakim
Founder & Mentor IDStack | CTO di Nusabot | Software Engineer di GovTech Edu | Former Software Engineer di Track&ROLL
Testimoni Oleh Siswa
0
(0 reviews)
5 Bintang
0%
4 Bintang
0%
3 Bintang
0%
2 Bintang
0%
1 Bintang
0%
Lihat Rekaman