Membuat Website Crowd Funding dengan Tailwind - Slicing

Kelas "Membuat Website Crowd Funding dengan Tailwind - Slicing" memberikan panduan langkah demi langkah dalam membangun antarmuka pengguna (UI) untuk website crowd funding. Kamu akan memanfaatkan Tailwind CSS, framework utility-first yang populer, untuk membuat desain yang responsif, modern, dan mudah dikelola.

Dalam kelas ini, kamu akan diajarkan teknik slicing dari desain ke kode, mencakup elemen-elemen inti seperti header, banner, kategori, daftar artikel, hingga fitur kompleks seperti halaman donasi, konfirmasi pembayaran, dan riwayat transaksi. Materi dirancang agar kamu dapat memahami proses pengembangan UI secara menyeluruh, mulai dari persiapan hingga koreksi akhir.

Materi yang Akan Dipelajari:

1. Persiapan Awal:

   • Environment Preparation: Menyiapkan lingkungan kerja untuk proyek.
   • Assets Preparation: Mengelola aset seperti gambar, font, dan warna yang dibutuhkan untuk desain.

2. Konfigurasi Tailwind CSS:

   • Instalasi Tailwind CSS.
   • Import custom font dan palet warna untuk mencocokkan desain.

3. Slicing Halaman Utama (Home):

   • Header: Membuat navigasi utama dengan desain responsif.
   • Banner & Background: Menampilkan banner dinamis dengan latar belakang menarik.
   • Categories: Menyusun kategori donasi yang informatif.
   • List Article: Menampilkan daftar artikel yang relevan.
   • Bottom Navigation: Menambahkan navigasi bawah untuk kemudahan akses pengguna.
   • Review & Koreksi: Meninjau dan menyempurnakan halaman utama.

4. Halaman Kategori:

   • Membuat halaman kategori umum dan kategori khusus, seperti Kemanusiaan.

5. Detail Post & Cerita Donasi:

   • Membuat halaman detail postingan donasi dalam dua bagian.
   • Menambahkan elemen narasi cerita untuk menarik perhatian donatur.

6. Proses Donasi:

   • Halaman Donasi: Formulir untuk memasukkan jumlah dan informasi donasi.
   • Konfirmasi Donasi: Menyusun halaman konfirmasi sebelum pembayaran.
   • Pembayaran: Membuat halaman pembayaran dan notifikasi keberhasilan.
   • Riwayat Donasi: Menampilkan daftar riwayat donasi pengguna.

7. Halaman Pengguna Sebelum Login:

   • Akun & Profil: Membuat halaman akun, profil, dan edit profil.
   • Autentikasi: Membuat fitur login, daftar, lupa kata sandi, dan ubah kata sandi.

8. Halaman Tambahan:

   • FAQ: Menambahkan halaman Frequently Asked Questions.
   • SK & Tentang: Membuat halaman syarat & ketentuan serta informasi tentang website.

Target Peserta:

Kelas ini cocok untuk pemula hingga menengah yang ingin mempelajari cara membuat website responsif dengan Tailwind CSS dan memahami proses slicing desain ke kode secara sistematis.

Hasil yang Diharapkan:

Setelah menyelesaikan kelas ini, kamu akan mampu:

• Membuat website crowd funding dengan desain profesional menggunakan Tailwind CSS.
• Mengimplementasikan berbagai elemen UI seperti header, banner, kategori, hingga proses donasi.
• Mengembangkan halaman responsif yang sesuai dengan standar UI/UX modern.

Bergabunglah di kelas ini dan tingkatkan keterampilan kamu dalam membangun website dengan Tailwind CSS yang efisien dan responsif!