Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
Kelas Panduan Lengkap Setup TailwindCSS v4 di Proyek HTML, CSS, dan JavaScript di BuildWithAngga

Panduan Lengkap Setup TailwindCSS v4 di Proyek HTML, CSS, dan JavaScript

Daftar Isi Persiapan ProyekLangkah-Langkah Membuat ProyekCara Membuat Folder Baru di Windows dan MacMenggunakan File Explorer (Windows)Menggunakan Finder (Mac)Menggunakan Command Line (Terminal)Tips TambahanCara Install Tailwind CSS v4 Secara Manual di Proyek HTML, CSS, dan JavaScriptTutorial Install dan Menggunakan live-server untuk HTML, CSS, dan JavaScriptPenutup Persiapan Proyek Sebelum memulai, pastikan kalian sudah memiliki: Code Editor (VSCode direkomendasikan)Node.js versi 22 ke atas Langkah-Langkah Membuat Proyek Berikut ini langkah-langkah yang perlu kalian lakukan untuk membuat proyek TailwindCSS 4: Cara Membuat Folder Baru di Windows dan Mac Membuat folder atau direktori adalah langkah penting saat memulai proyek pemrograman seperti HTML, CSS, dan JavaScript. Berikut ini beberapa cara untuk membuat folder baru di Windows dan Mac. Menggunakan File Explorer (Windows) Buka File Explorer (Tekan Windows + E).Arahkan ke lokasi tempat Anda ingin membuat folder.Klik kanan di area kosong, pilih New > Folder.Beri nama folder, misalnya: tailwind-project.Tekan Enter. Menggunakan Finder (Mac) Buka Finder.Arahkan ke lokasi yang diinginkan (misalnya Desktop atau Documents).Klik kanan dan pilih New Folder.Beri nama folder, misalnya: tailwind-project.Tekan Return (Enter di Mac). Menggunakan Command Line (Terminal) Di Windows (Command Prompt): Buka Command Prompt atau Terminal (untuk Windows 11).Arahkan ke direktori tujuan, contoh: cd Desktop Buat folder baru: mkdir tailwind-project Di Mac/Linux (Terminal): Buka Terminal.Arahkan ke direktori tujuan: cd ~/Desktop Buat folder baru: mkdir tailwind-project Tips Tambahan Gunakan nama folder tanpa spasi (gunakan tanda hubung atau underscore) agar kompatibel dengan terminal dan pemrograman web.Jika Anda membuat proyek Tailwind CSS, folder ini bisa digunakan sebagai tempat menyimpan file index.html, style.css, dan konfigurasi lainnya. Cara Install Tailwind CSS v4 Secara Manual di Proyek HTML, CSS, dan JavaScript Buka proyek menggunakan Code Editor lalu buat struktur proyek seperti berikut ini: tailwind-project/ ├── src/ │ ├── assets/ │ │ ├── images/ │ │ │ ├── backgrounds/ │ │ │ ├── icons/ │ │ │ └── thumbnails/ │ ├── js/ │ │ └── main.js │ ├── index.html │ ├── input.css └───└── output.css *(generated by Tailwind CLI)* Inisialisasi Proyek, jalankan perintah berikut di terminal (pastikan berada di dalam folder tailwind-project): npm init -y Install tailwindcss dan @tailwindcss/cli npm install tailwindcss @tailwindcss/cli Maka struktur proyek akan menjadi seperti ini: tailwind-project/ ├── **node_modules/** *(node.js)* ├── src/ │ ├── assets/ │ │ ├── images/ │ │ │ ├── backgrounds/ │ │ │ ├── icons/ │ │ │ └── thumbnails/ │ ├── js/ │ │ └── main.js │ ├── index.html │ ├── input.css │ └── output.css (*generated by Tailwind CLI*) ├── **package-lock.json** *(node.js)* └── **package.json** *(node.js)* Import Tailwind di file CSS dengan cara buka file input.csslalu tambahkan kode berikut: @import "tailwindcss"; Build proyek menggunakan Tailwind CLI dengan perintah berikut, maka akan ada file baru yaitu output.css npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch Selanjutnya buka file index.html lalu tambahkan kode berikut: <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello BuildWithAngga! </h1> </body> </html> Class seperti text-3xl, font-bold, dan underline adalah contoh utility dari Tailwind CSS. Kalian bisa jelajahi lebih banyak class lainnya di dokumentasi resminya. Tutorial Install dan Menggunakan live-server untuk HTML, CSS, dan JavaScript Untuk melihat tampilan website, Anda bisa membuka file index.html langsung di browser. Namun, agar proses development lebih efisien, disarankan menggunakan library seperti live-server. Dengan live-server, setiap kali Anda menyimpan perubahan pada file HTML, browser akan melakukan reload otomatis sehingga mempercepat alur pengembangan. Install live-server secara global npm install -g live-server Buka Terminal dan pastikan kalian sudah berada di direktori proyek, pada tutorial ini tailwind-project.Jalankan perintah berikut: live-server --watch="src/index.html" Perintah tersebut menjalankan live-server dengan mode pemantauan (watch) hanya pada file src/index.html.Buka browser maka hasilnya akan seperti ini: Local Result Penutup Sebagai penutup, dengan mengikuti Panduan Lengkap Setup TailwindCSS v4 di Proyek HTML, CSS, dan JavaScript, kini kita telah berhasil mengintegrasikan Tailwind secara langsung menggunakan Tailwind CLI. Pendekatan ini sangat cocok untuk proyek kecil hingga menengah karena lebih ringan, cepat, dan tidak memerlukan konfigurasi tambahan seperti PostCSS atau bundler. Anda dapat langsung menulis class utility Tailwind di HTML dan melihat hasilnya secara real-time. Jangan lupa untuk terus eksplorasi dokumentasi resmi TailwindCSS agar makin mahir dalam membangun tampilan website yang modern dan responsif. Selamat mencoba!

Kelas Kesalahan Umum Seorang UI Engineer : Salah Memahami Pembuatan Garis Horizontal dan Vertikal di BuildWithAngga

Kesalahan Umum Seorang UI Engineer : Salah Memahami Pembuatan Garis Horizontal dan Vertikal

Daftar Isi Tidak Membedakan Jenis GarisPakai <hr> Untuk Garis HorizontalPakai <div> Untuk Garis VertikalTidak Konsisten Antara Visual dan SemantikPenutup Sebagai UI Engineer, kita sering banget ngurusin tampilan - tampilan kecil yang kelihatannya sepele tapi sebenarnya penting banget. Salah satunya adalah masalah garis. Baik itu garis Horizontal (mendatar) maupun Vertikal (tegak). Banyak yang keliru soal ini, padahal cara pakainya beda loh. 1. Tidak Membedakan Jenis Garis Pertama, penting banget buat tahu kalau garis itu ada 2 tipe : Garis Horizontal (Mendatar, Memisahkan antar bagian)Garis Vertikal (Tegak, Memisahkan konten kiri dan kanan) Masalahnya, kadang semua garis dibikin pakai <div> aja, padahal ada tag HTML khusus yang bisa bantu bikin kode lebih rapi dan semantik. 2. Pakai <hr> Untuk Garis Horizontal Nah, untuk buat garis horizontal, sebenarnya HTML sudah menyediakan tag khusus, yaitu : <hr> Tag <hr> ini udah otomatis punya border bawaan. jadi kita nggak perlu nambahin border lagi kayak gini : <hr class="border border-gray-300"> <!-- Ini sebenarnya nggak perlu --> Yang lebih benar dan simpel <hr class="mt-4"> <!-- Cukup tambahin margin kalau mau ngatur jarak --> Kalau mau ganti warna garis atau tebalnya, baru deh tambahin border untuk modifikasi tebalnya dan bisa juga pakai border-red-600 untuk mengganti warnanya. Contoh : Lentera - Header Horizontal Line Seperti yang kita lihat di konten bagian kiri ada 1 garis horizontal (Mendatar) yang pakai tag <hr> <hr class="w-1/2 border-[#ECECEC]"> 3. Pakai <div> Untuk Garis Vertikal Buat garis yang berdiri (vertikal), jangan pakai <hr> karena itu khusus horizontal. Di sini justru kita boleh banget pakai <div> Contohnya kayak gini : <div class="w-1 h-6 bg-gray-300"></div> Kita atur lebarnya pakai w-1 yang artinya punya lebar 1 px dan tinggi sesuai kebutuhan dan juga bg-gray-300 buat atur warnanya, Gampang kan? Contoh : Lentera - The Part That Has Lines Vertical Line <div class="w-[1px] h-[96px] bg-[#D5D9E0]"></div> Bisa dilihat pada gambar di atas, ini adalah contoh penggunaan garis vertikal yang misahin antar konten kiri dan kanan. 4. Tidak Konsisten Antara Visual dan Semantik Kadang kita bikin tampilan asal keliatan bagus aja, tapi ngelupain arti semantik dari elemen yang kita pakai. Padahal kalau tim lain baca kode kita, mereka bisa bingung. Jadi, penting banget buat konsisten antara tampilan dan struktur HTML nya. Penutup Jenis GarisPakai ApaCatatanGaris Horizontal<hr>Nggak perlu nambah border yaGaris Vertikal<div>Pakai w-xx, h-xx, dan bg-xxx Intinya, garis itu emang kecil, tapi kalau salah pakai bisa bikin kode jadi nggak rapi dan susah maintenance. Yuk mulai biasain pakai elemen yang tepat, biar tampilan cakep dan kode tetap rapi.

Kelas Tips Membuat Animasi Scroll Selalu Berjalan di BuildWithAngga

Tips Membuat Animasi Scroll Selalu Berjalan

Daftar Isi PendahuluanContoh HasilHTML DasarCSSBodyContainer SliderContent SlidernyaGanti ImagePenutup Pendahuluan Slider yang bergerak secara terus-menerus menjadi elemen kunci dalam menciptakan pengalaman pengguna yang dinamis dan menyenangkan, dengan arus visual yang tak terputus, perhatian pengunjung akan tertahan lebih lama, meningkatkan interaksi dan kepuasan karena pada slider mengandung banyak informasi yang sampai kepada user lewat pergerakannya. Menggunakan Tailwind CSS, pembuatan slider otomatis ini dapat dilakukan dengan langkah-langkah sederhana yang memanfaatkan utilitas kelas yang terstruktur untuk mengatur animasi dan responsivitas secara efisien. Teknik slicing yang tepat pada desain modern tidak hanya memudahkan implementasi, tetapi juga menghasilkan tampilan yang memukau, menjadikan setiap pergeseran slide sebuah sajian visual yang menarik dan estetis. Contoh Hasil HTML Dasar Buat folder lalu buat index.html di dalamnya dan letakkan kode berikut ke dalam file tersebut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HeyHao - Slider</title> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> </head> <body></body> </html> Maka penjelasannya : <!DOCTYPE html> Mendeklarasikan dokumen sebagai HTML5, memastikan browser merender halaman dalam “standards mode” modern, bukan “quirks mode” lama yang berusaha kompatibel dengan HTML versi terdahulu. <html lang="en"> Menjadi elemen akar dari seluruh dokumen HTML, dengan atribut lang="en" untuk menandakan bahasa utama adalah Inggris berguna bagi mesin pencari (SEO), pembaca layar, dan sistem lokalisasi. <head> … </head> Bagian metadata dan instruksi untuk browser; tidak menampilkan konten langsung. Berisi pengaturan karakter, responsivitas, judul, dan pemanggilan library. <meta charset="UTF-8" /> Menetapkan set karakter UTF-8, mendukung hampir semua aksara dunia (termasuk non-Latin dan emoji) dan mencegah masalah tampilan karakter rusak. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Mengatur viewport agar lebarnya sama dengan lebar layar perangkat dan skala awal 100%, sehingga desain responsif bekerja dengan baik di ponsel dan tablet. <title>HeyHao - Slider</title> Menentukan judul halaman yang tampil di tab browser dan sebagai judul di hasil pencarian sebaiknya singkat, deskriptif, dan mencantumkan kata kunci utama. <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> Mengimpor Tailwind CSS via CDN dalam mode “browser” untuk kompilasi utilitas on-the-fly, memudahkan prototyping tanpa setup build tool; namun kurang ideal untuk produksi karena performa dan kontrol tree-shaking. <body></body> Wadah konten utama yang akan dirender (teks, gambar, slider, dan elemen interaktif lainnya). Saat ini kosong Anda dapat menambahkan struktur slider dengan utilitas Tailwind dan logika JavaScript agar berjalan otomatis. CSS Lalu lanjut pada CSS nya untuk menentukan pergerakan animas dan durasinya seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HeyHao - Slider</title> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> <!-- dari sini --> <style> .slide-top { animation: slide-top 20s infinite linear; } .slide-bottom { animation: slide-bottom 20s infinite linear; } @keyframes slide-top { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes slide-bottom { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } </style> <!-- sampai sini --> </head> <body></body> </html> Maka penjelasannya : <!-- dari sini --> hingga <!-- sampai sini --> Komentar HTML yang menandai awal dan akhir blok kustom CSS, memudahkan pengembang untuk mengenali area styling khusus pada kode. <style> … </style> Tag HTML untuk menuliskan CSS langsung di dalam dokumen, digunakan di sini untuk mendefinisikan animasi slider tanpa membuat file CSS eksternal. .slide-top { animation: slide-top 20s infinite linear; } Kelas CSS yang menerapkan animasi slide-top selama 20 detik, berjalan terus-menerus (infinite) dengan kecepatan konstan (linear), memindahkan elemen dari posisi awal ke atas. .slide-bottom { animation: slide-bottom 20s infinite linear; } Kelas CSS yang menerapkan animasi slide-bottom dengan durasi dan perilaku sama, namun memindahkan elemen dari atas ke posisi akhir asalnya. @keyframes slide-top { … } Mendefinisikan rangkaian frame animasi dengan nama slide-top: 0% { transform: translateY(0); }: elemen berada pada posisi vertikal awal.100% { transform: translateY(-100%); }: elemen digeser ke atas sebesar 100% tinggi elemen itu sendiri. @keyframes slide-bottom { … } Mendefinisikan rangkaian frame animasi dengan nama slide-bottom: 0% { transform: translateY(-100%); }: elemen dimulai dari posisi terangkat penuh ke atas (di luar layar atas).100% { transform: translateY(0); }: elemen kembali ke posisi vertikal awalnya. Dengan setup ini, elemen yang diberi kelas slide-top akan terus bergerak naik, sedangkan elemen dengan kelas slide-bottom bergerak turun, menciptakan efek slider yang saling berkelanjutan. Body Lalu sekarang lanjut ke area tag body, pada area ini kita harus membuat Container Slider dulu, maka : Container Slider perhatikan yang mengandung <!-- dari sini --> <!-- sampai sini --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HeyHao - Slider</title> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> <style> .slide-top { animation: slide-top 20s infinite linear; } .slide-bottom { animation: slide-bottom 20s infinite linear; } @keyframes slide-top { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes slide-bottom { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } </style> </head> <body> <!-- dari sini --> <div class="flex min-h-screen bg-[#EBEDF2]"> <section id="ContainerBackgroundImages" class="flex w-full max-w-[685px]"> <span class="fixed w-[685px] top-0 left-0 right-0 h-[160px] bg-[linear-gradient(0deg,rgba(235,237,242,0)_0%,#EBEDF2_100%)] z-10"></span> <span class="fixed w-[685px] bottom-0 left-0 right-0 h-[160px] bg-[linear-gradient(0deg,#EBEDF2_0%,rgba(235,237,242,0)_100%)] z-10"></span> <section id="BackgroundImages" class="fixed top-0 h-screen w-full max-w-[685px] overflow-hidden"> <div class="flex justify-center gap-[10px]"> <!-- konten slidernya --> </div> </section> </section> <!-- Container Inputs --> </div> <!-- sampai sini --> </body> </html> Maka Penjelasan : <div class="flex min-h-screen bg-[#EBEDF2]"> Membuat kontainer utama dengan display flex, tinggi minimum setara viewport penuh (min-h-screen), dan background warna abu-abu muda #EBEDF2, sehingga seluruh area layar menjadi fleksibel dan memiliki latar yang konsisten. <section id="ContainerBackgroundImages" class="flex w-full max-w-[685px]"> Bagian wrapper untuk gambar latar slider, bersifat fleksibel (flex), memenuhi lebar penuh parent (w-full), namun dibatasi maksimal lebar 685px (max-w-[685px]) agar slider tidak melebar di layar yang sangat lebar. <span class="fixed w-[685px] top-0 left-0 right-0 h-[160px] bg-[linear-gradient(0deg,rgba(235,237,242,0)_0%,#EBEDF2_100%)] z-10"></span> Elemen overlay gradient atas: fixed: selalu di posisi view port.w-[685px], h-[160px]: ukuran tepat 685×160px.top-0 left-0 right-0: melekat di sisi atas.bg-[linear-gradient(...)]: menambahkan fade dari transparan ke warna latar.z-10: menempatkan overlay di atas layer konten gambar.<span class="fixed w-[685px] bottom-0 left-0 right-0 h-[160px] bg-[linear-gradient(0deg,#EBEDF2_0%,rgba(235,237,242,0)_100%)] z-10"></span> Elemen overlay gradient bawah: Serupa dengan overlay atas, tetapi bottom-0 untuk melekat di bawah.Gradien terbalik, membuat efek fade di bagian bawah kontainer.<section id="BackgroundImages" class="fixed top-0 h-screen w-full max-w-[685px] overflow-hidden"> Kontainer gambar latar yang diposisikan fixed memenuhi seluruh tinggi layar (h-screen) dan lebar hingga 685px, dengan overflow-hidden untuk menyembunyikan bagian gambar yang keluar area, menciptakan efek slider yang bersih. <div class="flex justify-center gap-[10px]"> Wadah bagi elemen slide: flex untuk layout horizontal.justify-center meratakan konten di tengah.gap-[10px] memberi jarak 10px antar slide.<!-- konten slidernya --> Komentar penanda di mana markup elemen slide (misalnya <img> atau <div>) akan diletakkan untuk membentuk slider. <!-- Container Inputs --> Komentar penanda bagi kontainer input biasanya tempat form atau kontrol navigasi slider diletakkan di samping konten gambar. Content Slidernya Perhatikan pada : <!-- slider 1 --> dan <!-- akhir slider 2 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HeyHao - Slider</title> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> <style> .slide-top { animation: slide-top 20s infinite linear; } .slide-bottom { animation: slide-bottom 20s infinite linear; } @keyframes slide-top { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes slide-bottom { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } </style> </head> <body> <div class="flex min-h-screen bg-[#EBEDF2]"> <section id="ContainerBackgroundImages" class="flex w-full max-w-[685px]"> <span class="fixed w-[685px] top-0 left-0 right-0 h-[160px] bg-[linear-gradient(0deg,rgba(235,237,242,0)_0%,#EBEDF2_100%)] z-10"></span> <span class="fixed w-[685px] bottom-0 left-0 right-0 h-[160px] bg-[linear-gradient(0deg,#EBEDF2_0%,rgba(235,237,242,0)_100%)] z-10"></span> <section id="BackgroundImages" class="fixed top-0 h-screen w-full max-w-[685px] overflow-hidden"> <div class="flex justify-center gap-[10px]"> <!-- dari sini --> <!-- slider 1 --> <div class="flex flex-col w-[380px] gap-[10px]"> <div class="slider w-[380px]"> <div class="slide-top flex flex-col gap-[10px]"> <img src="assets/images/thumbnails/auth-1.png" alt="image" /> <img src="assets/images/thumbnails/auth-2.png" alt="image" /> <img src="assets/images/thumbnails/auth-3.png" alt="image" /> <img src="assets/images/thumbnails/auth-1.png" alt="image" /> <img src="assets/images/thumbnails/auth-2.png" alt="image" /> <img src="assets/images/thumbnails/auth-3.png" alt="image" /> </div> </div> <div class="slider w-[380px]"> <div class="slide-top flex flex-col gap-[10px]"> <img src="assets/images/thumbnails/auth-1.png" alt="image" /> <img src="assets/images/thumbnails/auth-2.png" alt="image" /> <img src="assets/images/thumbnails/auth-3.png" alt="image" /> <img src="assets/images/thumbnails/auth-1.png" alt="image" /> <img src="assets/images/thumbnails/auth-2.png" alt="image" /> <img src="assets/images/thumbnails/auth-3.png" alt="image" /> </div> </div> </div> <!-- akhir slider 1 --> <!-- slider 2 --> <div class="flex flex-col w-[275px] gap-[10px]"> <div class="slider w-[275px]"> <div class="slide-bottom flex flex-col gap-[10px]"> <img src="assets/images/thumbnails/auth-4.png" alt="image" /> <img src="assets/images/thumbnails/auth-5.png" alt="image" /> <img src="assets/images/thumbnails/auth-6.png" alt="image" /> <img src="assets/images/thumbnails/auth-4.png" alt="image" /> <img src="assets/images/thumbnails/auth-5.png" alt="image" /> <img src="assets/images/thumbnails/auth-6.png" alt="image" /> </div> </div> <div class="slider w-[275px]"> <div class="slide-bottom flex flex-col gap-[10px]"> <img src="assets/images/thumbnails/auth-4.png" alt="image" /> <img src="assets/images/thumbnails/auth-5.png" alt="image" /> <img src="assets/images/thumbnails/auth-6.png" alt="image" /> <img src="assets/images/thumbnails/auth-4.png" alt="image" /> <img src="assets/images/thumbnails/auth-5.png" alt="image" /> <img src="assets/images/thumbnails/auth-6.png" alt="image" /> </div> </div> </div> <!-- akhir slider 2 --> <!-- sampai sini --> </div> </section> </section> <!-- Container Inputs --> </div> </body> </html> Penjelasan : <!-- slider 1 --> Slider ini terdiri dari dua blok vertikal identik yang masing-masing berukuran 380px (“slider w-[380px]”) dan disusun ulang secara vertikal (flex flex-col gap-[10px]), dengan jarak 10px antar elemen. .slider (wrapper) Menjadi kontainer berukuran tepat 380px yang menahan elemen slide, dan berfungsi sebagai “viewport” tempat animasi slide-top terjadi. .slide-top flex flex-col gap-[10px] Mengaplikasikan animasi slide-top (bergerak ke atas selama 20 detik secara linear dan terus-menerus) pada daftar gambar yang disusun secara kolom dengan jarak 10px. Duplikasi gambar: Setiap thumbnail muncul dua kali berurutan (auth-1, auth-2, auth-3, kemudian ulang) untuk memastikan ketika animasi mendorong daftar ke atas, alur loop-nya mulus tanpa jeda.<img src="…auth-1.png" alt="image" /> dkk. Thumbnail gambar slide yang akan berpindah bergantian. Atribut alt sederhana “image” bisa ditingkatkan dengan deskripsi yang lebih spesifik untuk aksesibilitas. <!-- slider 2 --> Mirip dengan slider pertama, namun lebih sempit (275px) dan animasinya terbalik (slide-bottom). Kontainer Utama div.flex.flex-col.w-[275px].gap-[10px] menata dua slider di dalam kolom selebar 275px, dengan gap 10px. .slider w-[275px] Viewport untuk setiap animasi, membatasi lebar slide agar tidak melebihi 275px. .slide-bottom flex flex-col gap-[10px] Menerapkan animasi slide-bottom (dimulai dari -100% ke posisi semula dalam 20 detik, linear, infinite) pada set gambar. Duplikasi thumbnail (auth-4, auth-5, auth-6) memastikan loop visual tanpa jeda. Thumbnail Gambar Gambar auth-4.png hingga auth-6.png diulang dua kali agar saat animasi kembali ke awal, transisinya halus dan tidak ada “lompat” pada pergantian. Dengan struktur ini, kedua slider menampilkan deretan gambar yang bergerak terus-menerus slider pertama naik (slide-top) dan slider kedua turun (slide-bottom) menciptakan kontras visual dinamis pada tampilan modern Kalian. Di dalam setiap blok “slider 1 atau 2” kamu akan melihat dua buah elemen <div class="slider w-[...px]"> yang struktur dan isinya identik. Alasan utamanya ada dua adalah untuk menciptakan efek looping yang mulus tanpa jeda Ganti Image Setelah itu tinggal kalian ubah gambar sesuai dengan yang kalian inginkan. Penutup dengan mengintegrasikan slider otomatis yang halus dan menarik melalui Tailwind CSS, kalian tidak hanya menghadirkan tampilan modern yang memukau, tetapi juga mengukuhkan kesan profesional dan interaktif yang akan membuat pengguna selalu ingin kembali ke halaman kalian. Bila ingin mempelajari secara detail kalian berada di tempat yang tepat, akses kelas BuildWithAngga dan rasanya kekayaan ilmu yang akan kalian dapatkan. Terimakasih!

Kelas Mengubah Design Figma Menjadi HTML, TailwindCSS, JavaScript dan Deploy ke Github Pages di BuildWithAngga

Mengubah Design Figma Menjadi HTML, TailwindCSS, JavaScript dan Deploy ke Github Pages

Daftar Isi Latar BelakangPersyaratanProses Mengubah Desain Figma ke HTML, TailwindCSS, JavaScriptDeploy Projek ke Github Pages Menggunakan Github Action Latar Belakang Figma banyak digunakan untuk mendesain antarmuka web. Namun, desain tersebut perlu dikonversi ke kode agar bisa diakses secara online. Proses ini melibatkan HTML untuk struktur, Tailwind CSS untuk styling yang cepat dan konsisten, serta JavaScript untuk interaktivitas. Setelah selesai, halaman hasil konversi dapat dideploy menggunakan Github Pages secara gratis. Dengan demikian, penting untuk mempelajari alur kerja dari desain Figma hingga menjadi halaman web yang aktif dan responsif. Persyaratan Personal Computer atau LaptopAkun FigmaAkun GithubCode Editor (Pada tutorial ini menggunakan VSCode)Git Proses Mengubah Desain Figma ke HTML, TailwindCSS, JavaScript Buka file desain yang akan diubah menjadi HTML. Pada tutorial ini saya menggunakan desain dari Shayna.com yaitu Pricing Pro. PricingPro - Figma Page Selanjutnya kita akan buat projek. Buka Terminal lalu buat folder baru dengan perintah mkdir pricing-pro (pricing-pro adalah nama projek, silahkan sesuaikan dengan projek kalian). Pricing Pro - Create Page Kemudian pilih direktori yang kita buat dengan perintah cd pricing-pro lalu buka code editor dengan perintah code . Pricing Pro - Open Text Editor Maka akan tampil windows baru VSCode dengan projek yang sudah kita buat. Sekarang bisa tutup Terminal dan bisa menggunakan Command Prompt bawaan VSCode. Pricing Pro - After Open VSCode Untuk membuka Command Prompt di VSCode tekan ctrl + j atau kalian juga bisa menggunakan Terminal bawaan dari Windows seperti sebelumnya.Selanjutnya kita perlu inisialisasi projek node.js dengan perintah npm init -y Pricing Pro - Terminal Selanjutnya kita install tailwindcss dan @tailwindcss/cli dengan perintah npm i tailwindcss @tailwindcss/cli Pricing Pro - Terminal Kemudian buat struktur projek seperti berikut ini Pricing Pro - Structure Folder Buka file input.css lalu import tailwindcss seperti pada gambar berikut Pricing Pro - CSS File Buka file index.html dan ubah jadi seperti berikut Pricing Pro - HTML File Buka command prompt lalu ketik perintah berikut npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch Pricing Pro - Running The Project Tambah command prompt baru kemudian install live-server dengan cara npm i -g live-server. Jika sudah jalankan perintah live-server —watch=”src/index.html” Pricing Pro - Terminal Buka browser jika tampilan sudah seperti berikut ini maka TailwindCSS sudah terpasang dengan benar. Pricing Pro - Result in Browser Sekarang kita akan menentukan font dan color. Buka desain figma lalu pilih teks untuk mengetahui jenis font yang dipakai, umumnya desain web hanya menggunakan satu jenis font. Pada tutorial ini kita akan menggunakan Poppins. Pricing Pro - Text in Figma Buka lagi file input.css lalu tambahkan custom font Poppins ke TailwindCSS Pricing Pro - CSS File Jika berhasil maka font nya akan berubah seperti pada gambar berikut Pricing Pro - Result in Browser Sekarang kita akan membuat variable color untuk TailwindCSS. Pada desain figma pilih layer terluar dan lihat pada sidebar kanan Selections colors. Pada tutorial ini saya akan menggunakan #FFFFFF ****sebagai background color, #0A0815 sebagai foreground color, dan #EB7145 sebagai primary color. ****Untuk penamaan color tidak harus sama, silahkan bebas tentukan sesuai keinginan kalian. Pricing Pro - CSS File Sekarang lihat hasilnya, jika sukses maka akan seperti berikut ini Pricing Pro - Detection Sekarang kita akan mencoba slicing header. Pada desain figma pilih frame untuk header, di sini kita akan menentukan lebar, tinggi, dan warna background. Sesuai dengan desain lebar 1512px, tinggi 752px, dan warna background adalah warna foreground. Pricing Pro - HTML File Untuk menentukan padding horizontal dan padding top dari navbar, pilih frame yang diperlukan lalu tekan alt sambil arahkan kursor ke frame lain yang ingin kita ketahui jaraknya. Dari sini kita dapat tentukan padding x nya 100px dan padding top nya 30px Kita tarapkan pada kode HTML seperti berikut ini Pricing Pro - Header in HTML File Sekarang kita akan buat logo, karena di sini logonya hanya menggunakan teks kita hanya perlu menerapkan style nya menggunakan TailwindCSS. Dari desain ini kita tahu font size 32px, font weight bold, line height auto, dan warna teks primary. Pricing Pro - Company Logos Figma Sekarang kita coba terapkan pada kode HTML. Biasanya logo akan dibungkus oleh tag a. Oh iya, kita perlu menambahkan class -z-50 pada background agar background tidak menutupi teks. Pricing Pro - Company Logos VSCode Dan hasilnya akan seperti ini Pricing Pro - Result Deploy Projek ke Github Pages Menggunakan Github Action Buat repository baru di Github Pricing Pro - Github Sebelum inisialisasi git, buat file dengan nama .gitignore di root direktori projek lalu tambahkan node_modules Pricing Pro - Ignore File Sekarang buat Github Action. Buat file dengan nama gh-page.yml letakkan pada direktori .github/workflows, maka akan seperti berikut ini. Pricing Pro - File Kemudian tambahkan kode berikut ini ke dalam file gh-page.yml name: Deploy to GitHub Pages on: push: branches: - main # Pastikan branch utama sesuai dengan repo kamu permissions: contents: write # Izinkan workflow menulis ke repository jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout Repository uses: actions/checkout@v4 - name: Deploy to GitHub Pages uses: JamesIves/github-pages-deploy-action@v4 with: branch: gh-pages # Membuat dan mengupdate branch gh-pages folder: src # Sesuaikan dengan lokasi index.html (src/) clean: true Sekarang buka command prompt lalu ketik perintah git init (Pastikan Git sudah terinstall)Kemudian git add .Lalu git commit -m “chore: first commit”Setelah itu buat branch dengan perintah git branch -M mainLalu tambahkan repository dengan perintah git remote add origin <https://github.com/cakfan/bwa-pricing-pro.git>Kemudian push ke repository yang sudah kita buat dengan perintah git push -u origin main Pricing Pro - Terminal Buka halaman Settings pada repository. Kemudain pilih Pages di bagian Code and automation. Kemudan pada Branch pilih gh-page lalu klik Save Pricing Pro - Github Untuk mengakses github page kita https://{username}.github.io/{nama_repository} pada tutorial ini adalah https://cakfan.github.io/bwa-pricing-pro untuk slicing yang sudah selesai bisa diakses di https://cakfan.github.io/pricing-pro

Kelas Slicing Figma ke HTML : Hero Section - Broperti di BuildWithAngga

Slicing Figma ke HTML : Hero Section - Broperti

Daftar Isi Sebelum Mulai SlicingStruktur HTMLNavigasi AtasJudul dan DeskripsiForm Filter PropertiFull KodePenutup Broperti - Hero Section Kalau dilihat sekilas, hero section itu kelihatan gampang tinggal pasang logo, bikin menu, tulis judul gede, kasih gambar background, selesai. Tapi waktu mulai nyoba slicing beneran, baru deh kerasa : “Lho kok spacing nya beda?”“Ini teks kenapa nggak center center amat ya?”“Kenapa form nya geser padahal di figma lurus?” Nah, di artikel ini kita akan bahas bareng cara slicing Hero Section - Broperti, dari desain Figma ke HTML menggunakan Tailwind CSS. Sebelum Mulai Slicing Biasanya godaan terbesar waktu buka FIgma itu langsung aja bikin div kasih class dan jalan terus. Tapi percayalah, tanpa paham dulu pola layout nya kamu bakal bolak balik revisi. Jadi, sebelum ngetik satu baris pun, ada baiknya kita pelajari dulu strukturnya. Di Hero Broperti ini ada 3 bagian utama : Navigasi (Logo, Menu, Tombol Akun)Headline + DeskripsiForm filter properti Dan semuanya ditaruh di atas background gambar yang full screen. Struktur HTML Kita mulai dengan membungkus semuanya dalam <header> dan kasih id="hero" : <header id="hero"> ... </header> <header> ... </header> Ini adalah tag semantik HTML5 yang dipakai buat menandai bagian header dari sebuah halaman atau section. Ini penanda “bagian atas” dari konten penting. Bukan cuma buat SEO, tapi juga bantu screen reader memahami struktur halaman. id="hero” Ini adalah atribut HTML yang ngasih identitas unik ke elemen tersebut. Berfungsi buat nandain bahwa ini adalah Hero Section bagian yang biasanya pertama kali dilihat pengunjung saat buka website. CSS untuk mengatur background image biar full : #hero { background-image: url(assets/images/photos/hero-background.png); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; height: 800px; } #hero { ... } Ini artinya kita lagi ngasih gaya khusus ke elemen yang punya id="hero". background-image: url(...) Ini buat ngasih gambar latar belakang ke hero section. url(assets/images/photos/hero-background.png) Artinya gambar di-load dari folder assets/images/photos. background-size: cover Gambar background-nya di-zoom biar nutupin seluruh area hero. background-position: center Ini ngatur posisi gambar supaya bagian tengahnya yang tampil. background-repeat: no-repeat Gambar nggak diulang (no tile/tile-tile gitu). width: 100vw vw = viewport width (lebar layar browser). 100vw artinya lebarnya 100% dari layar browser, jadi bener-bener full lebar. height: 800px Ini ngatur tinggi si hero section: 800 pixel. Navigasi Atas Bagian nav ini isinya adalah : Logo di kiriMenu di tengahTombol “My Account” di kanan Kita pakai flex dan kasih justify-between biar rapi : <nav class="px-[90px] pt-[40px] flex items-center justify-between"> px-[90px] Ini ngatur padding kiri dan kanan jadi 90 pixel, supaya isi <nav> gak nempel ke pinggir layar. pt-[40px] Ini buat ngasih jarak dari atas (padding top) sebesar 40 pixel, jadi nav-nya turun dikit dari atas halaman. flex Ini aktifin mode flexbox di <nav>, biar elemen-elemen di dalamnya (kayak logo dan menu) bisa disusun sejajar secara horizontal. items-center Ini bikin semua item di dalam flex disejajarkan di tengah secara vertikal, jadi tampilannya lebih rapi. justify-between Ini bikin elemen pertama nempel kiri dan elemen terakhir nempel kanan, dengan jarak kosong maksimal di antara mereka. Cocok buat layout logo di kiri, menu di kanan. Menu nya pakai <ul> dan dikasih gap-x-[43px] biat spasinya sesuai desain. Untuk hover, tinggal mainin hover:text-[#83D987] dan hover:font-medium . Judul dan Deskripsi Setelah nav, lanjut ke konten utama : Judul besar dan deskripsi kecil di bawahnya. Tailwind bantu banget buat ngatur Typography tanpa ribet. <h1 class="text-[48px] text-white font-semibold leading-[65px] max-w-[461px]"> Discover Your <br> Own Future Empire Easy Cozy </h1> <p class="text-[16px] text-[#9094A2] max-w-[352px] mt-[20px] leading-[32px]"> Saving much time by finding the match one using our algorithm... </p> text-[48px] Ini ngatur ukuran hurufnya jadi 48 pixel, supaya judulnya besar dan mencolok. text-white Warna teksnya diubah jadi putih, biar kontras sama background. font-semibold Ini bikin hurufnya agak tebal, tapi nggak setebal bold. leading-[65px] Ini ngatur jarak antar baris teksnya jadi 65 pixel, supaya teks gak dempet-dempet pas ada <br>. max-w-[461px] Ini batasi lebar maksimum elemen jadi 461 pixel, biar teks nggak kepanjangan ke samping. Di sini penting banget perhatiin ukuran teks dan line height biar visualnya enak dilihat, dan sama persis dengan desain. Form Filter Properti Bagian paling “Interaktif” di hero ini adalah : Form pencarian properti berdasarkan lokasi dan tipe. Strukturnya simpel : 2 dropdown dan satu tombol <form action="" class="flex items-end gap-x-[21px] text-[#020B2A]"> <div> <div class="w-[230px]"> <label id="location" class="text-[14px] font-normal">Location</label> <select name="location" id="location" class="mt-[4px] appearance-none w-full focus:outline-none bg-[#F7F7F9] px-[10px] py-[10.5px] rounded-[6px] text-[16px] font-medium" > <option value="">Sumatra Tenggara</option> <option value="">Sumatra Selatan</option> <option value="">Sumatra Utara</option> <option value="">Sumatra Barat</option> </select> </div> </div> <div> <div class="w-[230px]"> <label id="type" class="text-[14px] font-normal">Type</label> <select name="type" id="type" class="mt-[4px] appearance-none w-full focus:outline-none bg-[#F7F7F9] px-[10px] py-[10.5px] rounded-[6px] text-[16px] font-medium" > <option value="">Apartement</option> <option value="">Townhouse</option> <option value="">Mansion</option> <option value="">Resort</option> </select> </div> </div> <div> <button type="submit" class="px-[30px] py-[21.5px] text-[#132039] bg-[#83D987] hover:bg-[#70bb74] duration-300 transition-all cursor-pointer rounded-[4px] font-medium text-[18px]" > Explore Now </button> </div> </form> form Tag HTML untuk membungkus input, biasanya digunakan untuk kirim data ke server. flex Bikin elemen di dalam <form> disusun horizontal (sejajar). items-end Semua elemen di dalam form ditempatkan sejajar di bagian bawah (end), supaya button dan dropdown rata bawah. gap-x-[21px] Ngatur jarak horizontal antar elemen jadi 21 pixel, supaya gak nempel. text-[#020B2A] Semua teks di dalam form warnanya jadi biru gelap kehitaman, biar lebih readable. w-[230px] Lebar div dibatasi jadi 230 pixel, buat ngebatesin lebar dropdown. label Tag untuk menjelaskan input, berguna juga untuk aksesibilitas. text-[14px] Ukuran teks label: 14 pixel, kecil dan elegan. font-normal Berarti hurufnya normal (nggak tebal). select Tag untuk bikin dropdown pilihan. mt-[4px] Ngasih jarak 4 pixel ke atas dari label. appearance-none Hilangkan tampilan default browser (panah dropdown bawaan), biar bisa dikustom pakai CSS. w-full Dropdown ngikutin lebar div induknya (230px). focus:outline-none Waktu elemen ini difokuskan (klik/tab), outline bawaan browser dihilangkan. bg-[#F7F7F9] Warna latar belakang dropdown jadi abu terang (#F7F7F9), bikin tampilannya bersih. px-[10px] py-[10.5px] Padding dalam dropdown: horizontal 10px, vertikal 10.5px. Buat isinya gak terlalu sempit. rounded-[6px] Bikin sudut dropdown agak membulat (radius 6px), biar modern. text-[16px] Ukuran teks dropdown: 16 pixel. font-medium Hurufnya agak tebal sedikit, bukan normal tapi juga bukan bold. button Tag untuk tombol aksi. Di sini fungsinya untuk kirim form. type="submit" Ini penting biar waktu tombol diklik, form akan dikirim (submit). px-[30px] py-[21.5px] Padding tombol: horizontal 30px, vertikal 21.5px. Biar kelihatan besar dan gampang diklik. text-[#132039] Warna teks: biru gelap (#132039). bg-[#83D987] Warna background tombol: hijau muda (#83D987). hover:bg-[#70bb74] Waktu kursor diarahkan ke tombol, warnanya jadi hijau sedikit lebih gelap. duration-300 transition-all Efek transisinya halus selama 300ms saat hover (warna berubah pelan, nggak langsung). cursor-pointer Bikin kursor berubah jadi tangan saat diarahkan ke tombol, tanda tombol bisa diklik. rounded-[4px] Sudut tombol dibikin sedikit membulat (4px), tampak modern. font-medium Teks di tombol agak tebal. text-[18px] Ukuran huruf tombol: 18 pixel, cukup besar buat CTA. Dropdown-nya pakai select, dikasih appearance-none biar styling default browser hilang. Background-nya abu muda (#F7F7F9), dan semuanya dibungkus dalam div putih dengan padding dan rounded corner Full Kode <header id="hero"> <nav class="px-[90px] pt-[40px] flex items-center justify-between"> <div> <a href=""> <img src="assets/images/logos/logo.svg" alt="" class="w-[53.4px] h-[60px] shrink-0" /> </a> </div> <div> <ul class="text-[18px] font-normal text-[#9094A2] flex items-center gap-x-[43px]" > <li class="font-medium text-[#83D987]"><a href="">Home</a></li> <li class="hover:font-medium hover:text-[#83D987] transition-all duration-300" > <a href="">Featured</a> </li> <li class="hover:font-medium hover:text-[#83D987] transition-all duration-300" > <a href="">Stories</a> </li> <li class="hover:font-medium hover:text-[#83D987] transition-all duration-300" > <a href="">Partner</a> </li> <li class="hover:font-medium hover:text-[#83D987] transition-all duration-300" > <a href="">About</a> </li> </ul> </div> <div> <a href=""> <div class="px-[31.5px] py-[11.5px] bg-[#83D987] hover:bg-[#70bb74] duration-300 transition-all text-[18px] text-[#132039] font-medium rounded-[4px]" > My Account </div> </a> </div> </nav> <section class="px-[90px] mt-[119px]"> <h1 class="text-[48px] text-white font-semibold leading-[65px] max-w-[461px]" > Discover Your <br /> Own Future Empire Easy Cozy </h1> <p class="text-[16px] text-[#9094A2] max-w-[352px] mt-[20px] leading-[32px]" > Saving much time by finding the match one using our algorithm that we designed </p> <div class="bg-white p-[21px] w-fit mt-[60px] rounded-[6px]"> <form action="" class="flex items-end gap-x-[21px] text-[#020B2A]"> <div> <div class="w-[230px]"> <label id="location" class="text-[14px] font-normal" >Location</label > <select name="location" id="location" class="mt-[4px] appearance-none w-full focus:outline-none bg-[#F7F7F9] px-[10px] py-[10.5px] rounded-[6px] text-[16px] font-medium" > <option value="">Sumatra Tenggara</option> <option value="">Sumatra Selatan</option> <option value="">Sumatra Utara</option> <option value="">Sumatra Barat</option> </select> </div> </div> <div> <div class="w-[230px]"> <label id="type" class="text-[14px] font-normal">Type</label> <select name="type" id="type" class="mt-[4px] appearance-none w-full focus:outline-none bg-[#F7F7F9] px-[10px] py-[10.5px] rounded-[6px] text-[16px] font-medium" > <option value="">Apartement</option> <option value="">Townhouse</option> <option value="">Mansion</option> <option value="">Resort</option> </select> </div> </div> <div> <button type="submit" class="px-[30px] py-[21.5px] text-[#132039] bg-[#83D987] hover:bg-[#70bb74] duration-300 transition-all cursor-pointer rounded-[4px] font-medium text-[18px]" > Explore Now </button> </div> </form> </div> </section> </header> Penutup Slicing desain hero section ini sebenarnya nggak ribet, asal kamu: Paham dulu struktur layout-nyaPerhatiin spacing dan ukuran font sesuai desainJangan asal pakai grid atau flex — sesuaikan dengan kebutuhan layout Dengan pendekatan step-by-step seperti ini, kamu bisa slicing desain apapun dari Figma ke HTML + Tailwind dengan lebih percaya diri. 🎯

Kelas Tips Menggunakan ChatGPT sebagai UI Engineer untuk Inspirasi Desain di BuildWithAngga

Tips Menggunakan ChatGPT sebagai UI Engineer untuk Inspirasi Desain

Daftar Isi PendahuluanMetode Brainstorming Konsep dengan ChatGPTSiapkan konteks proyekGunakan teknik “prompt chaining”Variasi prompt untuk perspektif berbedaMetode Analisis Tren Desain TerkiniMinta ringkasan tren globalKaitkan tren dengan proyek AndaUpdate rutinMetode Moodboard dan Style ExplorationBuat daftar elemen visualDeskripsi gaya visualEkspor ke moodboardMetode Variant ComparisonSiapkan dua atau tiga opsi desainMinta analisis pro dan kontraSkor atau rekomendasiMetode Adaptasi Feedback UserRingkas hasil user testingRefine desainIterasi cepatRingkasan Pendahuluan Dalam dunia UI engineering, ideasi kreatif sering kali menjadi tahap paling menantang. Kita dihadapkan pada beragam tuntutan: kebutuhan bisnis yang spesifik, preferensi pengguna yang terus berubah, serta batasan teknis platform dan perangkat. Siklus desain yang cepat membuat kita harus menghasilkan konsep baru tanpa mengorbankan kualitas, sementara tekanan deadline menuntut solusi instan. Di sisi lain, kita juga perlu memastikan desain terasa segar, relevan dengan tren terbaru, dan tetap mudah diimplementasikan oleh tim development. Memecahkan kebuntuan kreatif (creative block) bisa memakan waktu yang berharga menghabiskan jam-hari untuk sekadar menentukan palet warna atau struktur layout. Padahal, setiap elemen antarmuka punya dampak besar terhadap pengalaman pengguna. Di sinilah ChatGPT hadir sebagai mitra ideasi yaitu dengan kemampuannya memproses jutaan contoh desain, ia dapat membantu memunculkan rangkaian konsep, mengusulkan kombinasi visual, bahkan memberikan perspektif fresh berdasarkan data UX terkini. Menggunakan ChatGPT bukan berarti melepas kendali kreatif, melainkan memperkaya proses brainstorming, mempercepat iterasi awal, dan membuka jalan bagi inovasi yang lebih terarah. Pada bagian selanjutnya, kita akan membahas lima metode praktis memanfaatkan ChatGPT untuk menyuntikkan inspirasi baru ke dalam proses desain Anda. Metode Brainstorming Konsep dengan ChatGPT Siapkan konteks proyek Jelaskan secara singkat tujuan produk, audiens, dan persona.Contoh prompt: “Saya mendesain aplikasi mobile untuk pencinta kopi, target usia 18–35, suka fitur sosial. Berikan saya 5 konsep antarmuka home screen yang unik dan engaging.”Hasil Gunakan teknik “prompt chaining” Mulai dengan prompt broad, lalu gali detail secara bertahap.Misalnya, setelah ChatGPT memberikan 5 konsep kasar, minta rincian tiap konsep: warna dominan, tipe navigasi, dan tipografi. Variasi prompt untuk perspektif berbeda Ubah gaya bahasa: “serius profesional” vs “fun dan playful.”Bandingkan hasilnya untuk menemukan tone dan mood yang paling sesuai. Metode Analisis Tren Desain Terkini Minta ringkasan tren global Prompt: “Apa saja 3 tren UI/UX terpanas di kuartal kedua 2025 dalam aplikasi fintech?”Hasil Kaitkan tren dengan proyek Anda Setelah mendapatkan tren, minta contoh implementasi spesifik: “Bagaimana tren glassmorphism bisa diterapkan pada dashboard admin?”Hasil Update rutin Jadwalkan sesi mingguan atau bulanan dengan ChatGPT untuk mengidentifikasi perubahan tren, sehingga Anda selalu up-to-date tanpa harus membaca puluhan artikel. Metode Moodboard dan Style Exploration Buat daftar elemen visual Warna, tekstur, ilustrasi, dan ikon yang sesuai tema.Prompt: “Berikan palet warna 4 warna untuk aplikasi edukasi anak-anak yang ceria.”Hasil Deskripsi gaya visual Minta ChatGPT merinci gaya ilustrasi (flat vs skeuomorphic), jenis garis, dan mood. Ekspor ke moodboard Gunakan output ChatGPT sebagai teks pendukung dalam tools moodboard (Figma, Milanote), lalu tambahkan contoh gambar nyata. Metode Variant Comparison Siapkan dua atau tiga opsi desain Sertakan deskripsi singkat setiap variant: layout, warna, ikonografi. Minta analisis pro dan kontra Prompt: “Bandingkan Variant A (layout grid minimalis) dengan Variant B (layout kartu berwarna-warni) dari sisi readability, engagement, dan accessibility.”Hasil Skor atau rekomendasi Minta ChatGPT memberikan skor 1–10 untuk setiap kriteria, serta rekomendasi opsi terbaik berdasarkan data tersebut. Metode Adaptasi Feedback User Ringkas hasil user testing Input berupa poin-poin feedback atau transkrip wawancara.Prompt: “Ringkas 5 poin utama feedback pengguna berikut dan rekomendasikan 3 perubahan UI prioritas.”Hasil Refine desain Berdasarkan rekomendasi ChatGPT, minta detail implementasi perubahan (misalnya, ubah ukuran tombol, perjelas label). Iterasi cepat Setelah perubahan di-desain, upload ulang desain baru ke ChatGPT untuk pengecekan ulang: “Apakah desain ini sudah menjawab feedback terkait readability pada teks body?”Hasil Ringkasan Dengan memanfaatkan ChatGPT sebagai partner ideasi, UI engineer dapat: Mempercepat brainstorming, dengan konsep awal yang langsung actionable.Stay updated mengenai tren terbaru tanpa habiskan banyak waktu riset.Menyusun moodboard dan style guide yang kohesif dengan lebih sistematis.Menganalisis variant desain secara objektif, meminimalkan bias subjektif.Merespons feedback pengguna lebih cepat dan terarah, meningkatkan kualitas iterasi. Integrasi ChatGPT dalam workflow tak hanya membuat proses kreatif lebih efisien, tapi juga membuka peluang eksplorasi visual yang sebelumnya mungkin terlewat. Pada BuildWithAngga juga telah menyediakan kelas yang terbaik untuk student jadi apabila ingin belajar lebih dalam, kalian berada di tempat yang tepat, akses buildwithangga.com dan nikmati ilmu yang berharga. Terimakasih!

Kelas Cara Cepat Membuat Komponen UI Menggunakan ChatGPT di BuildWithAngga

Cara Cepat Membuat Komponen UI Menggunakan ChatGPT

Daftar Isi Kenapa Perlu menggunakan ChatGPT?Contoh Kasus: Komponen Tombol TailwindHasil yang Bisa Kita Dapatkan:Struktur Dasar Dokumen HTML:Bagian <head> :Bagian <body>:Komponen Tombol:Tips Prompting Buat KomponenReusable dan ModularReview Manual Tetap PentingKesimpulan Source : https://unsplash.com/photos/a-computer-chip-with-the-letter-a-on-top-of-it-eGGFZ5X2LnA Sebagai seorang UI Engineer, kita sering kali dihadapkan pada kebutuhan untuk membuat berbagai komponen dengan tampilan dan logika yang serupa. Proses ini dapat memakan waktu, terutama jika setiap kali harus dimulai dari awal. Dalam konteks inilah ChatGPT dapat berperan sebagai asisten coding yang efisien dan membantu mempercepat alur kerja. Kenapa Perlu menggunakan ChatGPT? Meskipun kita sudah jago membuat komponen, tetap saja mengetik manual dari awal itu memakan waktu. Dengan ChatGPT, kita bisa malakukan beberapa yaitu : Dapatkan draft awal kode komponen dalam hitungan detikFokus ke bagian logika atau desain yang lebih kompleksHemat waktu untuk pekerjaan berulang Contoh Kasus: Komponen Tombol Tailwind Misalnya kita ingin membuat tombol sederhana dengan Tailwind CSS. Cukup memberi perintah seperti ini ke ChatGPT : Prompt:Buatkan komponen tombol HTML dengan Tailwind CSS. Harus ada versi primary dan secondary, dengan hover effect dan disabled state. Hasil yang Bisa Kita Dapatkan: My First Search ChatGPT <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:bg-gray-400"> Primary Button </button> <button class="bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 disabled:opacity-50"> Secondary Button </button> Kita bisa langsung menggunakan, atau modifikasi agar lebih sesuai dengan guideline desain tim kita. Selain itu kita juga bisa meletakkan kode tersebut di dalam kode yang telah ada seperti berikut: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- CDN Tailwind --> <script src="<https://cdn.tailwindcss.com>"></script> <title>Sidebar Scroll Independent</title> </head> <body class="flex justify-center gap-4 py-32"> <!-- dari sini --> <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:bg-gray-400"> Primary Button </button> <button class="bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 disabled:opacity-50"> Secondary Button </button> <!-- sampai sini --> </body> </html> Struktur Dasar Dokumen HTML: <!DOCTYPE html> Mendefinisikan bahwa dokumen ini adalah dokumen HTML5. <html lang="en"> Elemen root HTML dengan atribut lang="en" yang menandakan bahasa utama adalah Inggris (baik untuk SEO dan screen reader). Bagian <head>: <meta charset="UTF-8" /> Menetapkan karakter encoding ke UTF-8 agar teks ditampilkan dengan benar, termasuk karakter internasional. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Mengatur tampilan agar responsive di perangkat mobile. width=device-width memastikan lebar sesuai perangkat, initial-scale=1.0 mengatur zoom awal. <script src="https://cdn.tailwindcss.com"></script> Memuat Tailwind CSS dari CDN. Ini memungkinkan kamu menggunakan class Tailwind langsung tanpa build proses. <title>Sidebar Scroll Independent</title> Judul halaman yang muncul di tab browser. Bagian <body>: <body class="flex justify-center gap-4 py-32"> flex: Mengatur layout menjadi flex container (horizontal secara default).justify-center: Memposisikan isi secara horizontal di tengah.gap-4: Memberi jarak antar elemen sebesar 1rem.py-32: Padding atas dan bawah sebesar 8rem. Komponen Tombol: Tombol Primary <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:bg-gray-400">Primary Button</button> bg-blue-600: Latar biru.text-white: Teks putih.px-4 py-2: Padding horizontal 1rem, vertikal 0.5rem.rounded: Sudut membulat.hover:bg-blue-700: Ubah warna saat di-hover.disabled:bg-gray-400: Jika tombol disabled, warnanya abu-abu. Tombol Secondary <button class="bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-50 disabled:opacity-50">Secondary Button</button> bg-white: Latar putih.border border-blue-600: Garis tepi biru.text-blue-600: Teks biru.hover:bg-blue-50: Hover menjadi biru muda.disabled:opacity-50: Jika disabled, tampilannya transparan 50%. Akan menghasilkan : My VSCode Result Tips Prompting Buat Komponen Supaya hasil dari ChatGPT makin relevan, maka kita perlu : Jelaskan framework yang kita pakai: HTML, React, Vue, dsb.Sebutkan library styling: Tailwind, Bootstrap, CSS Modules, dll.Minta variasi (primary/secondary), ukuran, dan kondisi (hover, focus, disabled)Sertakan spesifikasi desain jika ada Contoh prompt yang lebih kompleks: My Second Search ChatGPT Buat komponen tombol React menggunakan Tailwind, dengan props variant (primary, secondary), dan event onClick. Reusable dan Modular Kalau kita menggunakan React atau Vue, minta ChatGPT buatkan komponen yang sudah siap menerima props, seperti kode dibawah ini : const Button = ({ variant = 'primary', children, ...props }) => { const baseStyle = 'px-4 py-2 rounded'; const styles = { primary: 'bg-blue-600 text-white hover:bg-blue-700', secondary: 'bg-white border border-blue-600 text-blue-600 hover:bg-blue-50', }; return ( <button className={`${baseStyle} ${styles[variant]}`} {...props}> {children} </button> ); }; Review Manual Tetap Penting Walau sangat membantu, hasil dari ChatGPT tetap perlu kita review: Pastikan aksesibilitas (contoh: penggunaan aria-label)Periksa konsistensi dengan design system timJangan langsung copy-paste ke production Kesimpulan ChatGPT bukan pengganti kita sebagai UI Engineer, tapi bisa jadi partner yang mempercepat workflow. Dengan prompt yang tepat, kita bisa menghemat banyak waktu dalam membuat komponen UI dari tombol sederhana sampai layout kompleks. Apabila kalian ingin mempelajari AI lebih lanjut, di BuildWithAngga telah menyediakan kelas yang membahas tentang tentang AI, dimuali dari A hingga Z, sehingga membantu menambah pemahaman kalian di era zaman AI ini. Terimakasih!

Kelas Membuat Efek Love (Like) dari Outline Menjadi Full di Website di BuildWithAngga

Membuat Efek Love (Like) dari Outline Menjadi Full di Website

Daftar Isi TujuanStruktur HTMLStyling CSSJavascript Untuk Efek LikePenutup Efek "love" atau "like" sering kita jumpai di aplikasi belanja online, seperti saat pengguna menyukai sebuah produk. Efek ini biasanya berupa ikon hati kosong (outline) yang berubah menjadi hati penuh saat diklik, disertai dengan animasi kecil yang memperkuat pengalaman pengguna. Tujuan Shaynakit - ShoSo Cards Preview Memberikan feedback visual interaktif kepada pengguna melalui efek "love".Menambahkan fitur favorit produk yang dapat dikembangkan menjadi wishlist.Meningkatkan tampilan UI/UX agar lebih modern dan menarik.Memperkenalkan integrasi JavaScript dan Tailwind CSS secara sederhana. Struktur HTML Kita mulai dengan struktur HTML untuk menampilkan nama produk dan tombol love. <div class="mt-[10px] flex justify-between relative z-50"> <div> <p class="text-[12px] text-[#9E9E9E]">7 Colours</p> <h6 class="text-[16px] text-[#131E3F] font-semibold mt-[2px] line-clamp-1 max-w-[160px] duration-300 transition-all break-words w-full"> Nike Red Shoe </h6> </div> <div class="love-container pt-[9px]"> <button type="button" class="love-button"> <img src="assets/images/icons/love-outline.svg" alt="Like" class="w-[24px] h-[24px] shrink-0 love-icon"> </button> </div> </div> Styling CSS Tambahkan CSS berikut ke file style.css kamu atau di dalam <style> .love-button { transition: all 0.3s ease; } .love-button:hover .love-icon { transform: scale(1.1); } .love-button.active .love-icon { transform: scale(1.1); } .love-icon { transition: transform 0.2s ease; } Javascript Untuk Efek Like Tambahkan kode ini di file main.js dan hubungkan ke file HTML kamu. const loveButtons = document.querySelectorAll('.love-button'); loveButtons.forEach(button => { let isLoved = false; const icon = button.querySelector('.love-icon'); button.addEventListener('click', function() { isLoved = !isLoved; if (isLoved) { icon.src = "assets/images/icons/love.svg"; icon.alt = "Unlike"; button.classList.add('active'); } else { icon.src = "assets/images/icons/love-outline.svg"; icon.alt = "Like"; button.classList.remove('active'); } icon.style.transform = 'scale(1.2)'; setTimeout(() => { icon.style.transform = 'scale(1)'; }, 200); }); }); Penjelasan: Variabel isLoved menyimpan status like.Mengganti src dan alt dari ikon tergantung status.Animasi scale(1.2) memberi efek membesar saat diklik lalu kembali normal. Penutup Dengan kombinasi HTML, Tailwind CSS, dan JavaScript sederhana, kamu bisa menambahkan efek "love" interaktif yang menarik dan modern untuk meningkatkan UX pada website e-commerce atau galeri produkmu. Apabila kalian ingin mempelajari logika setipe lebih lanjut, di BuildWithAngga telah menyediakan kelas yang membahas hal tersebut, sehingga membantu menambah pengalaman belajar lebih baik by study kasus yang mana ilmu tersebut sangat relevan di era sekarang. Terimakasih!

Kelas Cara Memisahkan Scroll Antara Sidebar dan Konten Secara Terpisah + Menyembunyikan Default Scroll ( Tailwind CSS ) di BuildWithAngga

Cara Memisahkan Scroll Antara Sidebar dan Konten Secara Terpisah + Menyembunyikan Default Scroll ( Tailwind CSS )

Daftar Isi Contoh KasusCodePenjelasanHidden ScrollTesHasilPenutup Contoh Kasus Shaynakit - ShoSo Dashboard Shaynakit - Store Dashboard Member Purple Shaynakit - AnggaCBT Course Page Pada ke-3 kasus tersebut terdapat sidebar yang berisi tombol navigasi dan sisi kanan berisi konten halaman. Untuk kasus seperti ini bagaimana cara membuat tiap bagiannya dapat di scroll vertikal secara independent tanpa terpengaruh satu sama lain? Hal ini sangat penting disebabkan kita tidak ingin ketika scroll pada sidebar maka konten halaman ikut ter-scroll. Code Untuk melakukannya perhatikan penjelasan berikut: <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- CDN Tailwind --> <script src="<https://cdn.tailwindcss.com>"></script> <title>Sidebar Scroll Independent</title> </head> <body class="flex min-h-screen"> <!-- Sidebar --> <aside class="w-[270px] h-screen bg-gray-300 px-[30px] py-[30px] border-r border-[#EEEEEE] flex flex-col justify-between overflow-y-auto [&::-webkit-scrollbar]:hidden"></aside> <!-- Main Content --> <main class="flex-1 h-screen overflow-y-auto bg-white"></main> </body> </html> Letakkan kode tersebut pada file html kalian. Penjelasan <body class="flex min-h-screen">flex: membuat layout horizontal (baris) di mana <aside> dan <main> menjadi kolom berdampingan.min-h-screen: tinggi minimum body = 100% tinggi layar. Ini memastikan tinggi penuh agar scroll bekerja dengan benar di dalam elemen anak.<aside class="... h-screen overflow-y-auto">h-screen: tinggi tetap = tinggi layar.overflow-y-auto: memungkinkan area sidebar untuk scroll vertikal jika kontennya melebihi tinggi yang diberikan (h-screen).<main class="... h-screen overflow-y-auto">Sama seperti sidebar: tinggi penuh dan scroll vertikal diaktifkan jika isi lebih tinggi dari viewport. Pada penjelasan tersebut, masing-masing elemen (<aside> dan <main>) punya tinggi tetap (h-screen) dan overflow-y-auto, maka mereka tidak akan membiarkan isinya "tumpah" ke luar, tapi malah memberikan scroll bar hanya pada elemen itu sendiri, bukan seluruh halaman. Contoh visual: [Sidebar] |----------------------| <- batas tinggi layar (h-screen) | konten banyak | <- bisa discroll hanya di sidebar | | |----------------------| [Main Content] |----------------------| <- batas tinggi layar (h-screen) | konten panjang | <- bisa discroll hanya di main content | | |----------------------| Hidden Scroll Pada scroll sidebar juga dapat di sembunyikan tanpa memengaruhi cara kerjanya, hal ini berguna agar kalian bisa lebih kreatif dari segi desain dalam slicing. Kode yang membuat scroll tidak terlihat namun tetap berfungsi adalah : &::-webkit-scrollbar]:hidden di <aside> menyembunyikan scrollbar khusus untuk browser berbasis WebKit (seperti Chrome, Safari), sehingga meskipun bisa discroll, scrollbarnya tidak terlihat. Tes Tambahkan kode yang dapat membuat halaman penuh dengan konten. Contoh tesnya seperti : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- CDN Tailwind --> <script src="<https://cdn.tailwindcss.com>"></script> <title>Sidebar Scroll Independent</title> </head> <body class="flex min-h-screen"> <!-- Sidebar --> <aside class="w-[270px] h-screen bg-gray-300 px-[30px] py-[30px] border-r border-[#EEEEEE] flex flex-col justify-between overflow-y-auto [&::-webkit-scrollbar]:hidden"> <h1>Ini Sidebar baris 1</h1> <h1>Ini Sidebar baris 2</h1> <h1>Ini Sidebar baris 3</h1> <h1>Ini Sidebar baris 4</h1> <h1>Ini Sidebar baris 5</h1> <h1>Ini Sidebar baris 6</h1> <h1>Ini Sidebar baris 7</h1> <h1>Ini Sidebar baris 8</h1> <h1>Ini Sidebar baris 9</h1> <h1>Ini Sidebar baris 10</h1> <h1>Ini Sidebar baris 11</h1> <h1>Ini Sidebar baris 12</h1> <h1>Ini Sidebar baris 13</h1> <h1>Ini Sidebar baris 14</h1> <h1>Ini Sidebar baris 15</h1> <h1>Ini Sidebar baris 16</h1> <h1>Ini Sidebar baris 17</h1> <h1>Ini Sidebar baris 18</h1> <h1>Ini Sidebar baris 19</h1> <h1>Ini Sidebar baris 20</h1> <h1>Ini Sidebar baris 21</h1> <h1>Ini Sidebar baris 22</h1> <h1>Ini Sidebar baris 23</h1> <h1>Ini Sidebar baris 24</h1> <h1>Ini Sidebar baris 25</h1> <h1>Ini Sidebar baris 26</h1> <h1>Ini Sidebar baris 27</h1> <h1>Ini Sidebar baris 28</h1> <h1>Ini Sidebar baris 29</h1> <h1>Ini Sidebar baris 30</h1> <h1>Ini Sidebar baris 31</h1> <h1>Ini Sidebar baris 32</h1> <h1>Ini Sidebar baris 33</h1> <h1>Ini Sidebar baris 34</h1> <h1>Ini Sidebar baris 35</h1> <h1>Ini Sidebar baris 36</h1> <h1>Ini Sidebar baris 37</h1> <h1>Ini Sidebar baris 38</h1> <h1>Ini Sidebar baris 39</h1> <h1>Ini Sidebar baris 40</h1> <h1>Ini Sidebar baris 41</h1> <h1>Ini Sidebar baris 42</h1> <h1>Ini Sidebar baris 43</h1> <h1>Ini Sidebar baris 44</h1> <h1>Ini Sidebar baris 45</h1> <h1>Ini Sidebar baris 46</h1> <h1>Ini Sidebar baris 47</h1> <h1>Ini Sidebar baris 48</h1> <h1>Ini Sidebar baris 49</h1> <h1>Ini Sidebar baris 50</h1> </aside> <!-- Main Content --> <main class="flex-1 h-screen overflow-y-auto bg-white"> <h1>Ini Konten Utama baris 1</h1> <h1>Ini Konten Utama baris 2</h1> <h1>Ini Konten Utama baris 3</h1> <h1>Ini Konten Utama baris 4</h1> <h1>Ini Konten Utama baris 5</h1> <h1>Ini Konten Utama baris 6</h1> <h1>Ini Konten Utama baris 7</h1> <h1>Ini Konten Utama baris 8</h1> <h1>Ini Konten Utama baris 9</h1> <h1>Ini Konten Utama baris 10</h1> <h1>Ini Konten Utama baris 11</h1> <h1>Ini Konten Utama baris 12</h1> <h1>Ini Konten Utama baris 13</h1> <h1>Ini Konten Utama baris 14</h1> <h1>Ini Konten Utama baris 15</h1> <h1>Ini Konten Utama baris 16</h1> <h1>Ini Konten Utama baris 17</h1> <h1>Ini Konten Utama baris 18</h1> <h1>Ini Konten Utama baris 19</h1> <h1>Ini Konten Utama baris 20</h1> <h1>Ini Konten Utama baris 21</h1> <h1>Ini Konten Utama baris 22</h1> <h1>Ini Konten Utama baris 23</h1> <h1>Ini Konten Utama baris 24</h1> <h1>Ini Konten Utama baris 25</h1> <h1>Ini Konten Utama baris 26</h1> <h1>Ini Konten Utama baris 27</h1> <h1>Ini Konten Utama baris 28</h1> <h1>Ini Konten Utama baris 29</h1> <h1>Ini Konten Utama baris 30</h1> <h1>Ini Konten Utama baris 31</h1> <h1>Ini Konten Utama baris 32</h1> <h1>Ini Konten Utama baris 33</h1> <h1>Ini Konten Utama baris 34</h1> <h1>Ini Konten Utama baris 35</h1> <h1>Ini Konten Utama baris 36</h1> <h1>Ini Konten Utama baris 37</h1> <h1>Ini Konten Utama baris 38</h1> <h1>Ini Konten Utama baris 39</h1> <h1>Ini Konten Utama baris 40</h1> <h1>Ini Konten Utama baris 41</h1> <h1>Ini Konten Utama baris 42</h1> <h1>Ini Konten Utama baris 43</h1> <h1>Ini Konten Utama baris 44</h1> <h1>Ini Konten Utama baris 45</h1> <h1>Ini Konten Utama baris 46</h1> <h1>Ini Konten Utama baris 47</h1> <h1>Ini Konten Utama baris 48</h1> <h1>Ini Konten Utama baris 49</h1> <h1>Ini Konten Utama baris 50</h1> </main> </body> </html> Hasil Maka hasilnya akan seperti ini: Hasil Proyek Penutup Dengan menerapkan teknik ini, kalian dapat menciptakan pengalaman pengguna yang lebih rapi dan profesional, di mana sidebar dan konten utama bisa digulir secara terpisah tanpa menampilkan scrollbar bawaan semua hanya dengan utilitas dari Tailwind CSS. Apabila kalian ingin belajar lebih lanjut bisa langsung kunjungi kelas-kelas BuildWithAngga yang telah tersedia. Terimakasih!

Kelas Cara Mudah Membuat Dropdown Smooth dengan jQuery ( Tailwind CSS ) di BuildWithAngga

Cara Mudah Membuat Dropdown Smooth dengan jQuery ( Tailwind CSS )

Daftar Isi Pengenalan Dropdown Menu InteraktifApa Itu Dropdown Menu?Kenapa Menggunakan Animasi Smooth?Keuntungan Dropdown Default Terbuka Sejak AwalMembangun Struktur HTMLKeseluruhanHeadBodyMembangun Struktur JavaScript (JQuery)Penutup Pengenalan Dropdown Menu Interaktif Apa Itu Dropdown Menu? Dropdown menu (sering juga disebut select menu atau pulldown menu) adalah komponen navigasi/interaksi yang menyembunyikan daftar opsi di balik sebuah kontrol tunggal (misalnya tombol atau bidang teks), dan menampilkannya saat pengguna mengaktifkan kontrol tersebut. Karakteristik utama:Terselubung (collapsed): Pada kondisi normal, hanya judul atau label menu yang terlihat.Melebar (expanded): Saat diaktifkan, daftar opsi muncul bisa berupa teks, ikon, atau elemen kompleks lainnya.Interaksi: Biasanya menggunakan klik, tap, atau hover. Setelah pengguna memilih salah satu item, menu otomatis menutup kembali (kecuali diatur lain).Kegunaan umum:Memilih opsi pada form (misalnya memilih negara, jenis kelamin, dsb.)Navigasi situs (menu utama dengan sub-menu)Menyembunyikan opsi-opsi lanjutan agar tampilan lebih ringkas Lalu ada dropdown menu otomatis terbuka yang saat ini sedang kita pelajari, adalah varian di mana daftar opsi muncul tanpa perlu klik/tap, melainkan dipicu oleh Saat Halaman Dimuat (on-load), yaitu : Dropdown langsung terbuka begitu halaman selesai dimuat (page load).Umumnya digunakan untuk menekankan pilihan awal atau menampilkan pengumuman. Kenapa Menggunakan Animasi Smooth? Mengurangi Kejutan VisualMemberi Indikasi StatusDengan transisi, konten dropdown perlahan muncul → mata pengguna lebih siap membaca dan menyerap informasi.Gerakan dari atas ke bawah, atau fade-in, memberi sinyal visual tentang asal-usul dan tujuan menu itu sendiri.Website atau aplikasi dengan transisi halus terlihat lebih modern, meyakinkan, dan berkualitas tinggi. Keuntungan Dropdown Default Terbuka Sejak Awal Pengguna langsung melihat semua opsi tanpa harus klik dulu. Tidak perlu klik untuk membuka → cocok untuk akses cepat. Berguna di perangkat mobile atau untuk pengguna dengan keterbatasan motorik. Pilihan dropdown default terbuka bisa mempercepat pengisian data. Membangun Struktur HTML Keseluruhan <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dropdown Menu Jquery</title> </head> <body> <!-- abaikan ini dulu --> </body> </html> <!DOCTYPE html> (Deklarasi doctype) Menyatakan bahwa dokumen ini menggunakan HTML5. <html lang="en"> (Tag pembuka <html> dengan atribut lang="en") Awal dari dokumen HTML; lang="en" menyatakan bahasa Inggris. <head> (Tag pembuka <head>) Bagian metadata, tidak ditampilkan di halaman secara langsung. <meta charset="UTF-8" /> (Meta charset) Mengatur encoding karakter ke UTF-8, mendukung banyak bahasa/simbol. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> (Meta viewport) Membuat tampilan responsif di perangkat mobile/tablet. <title>Dropdown Menu Jquery</title> (Tag <title>) Judul halaman yang muncul di tab browser atau hasil pencarian. </head> (Tag penutup <head>) Mengakhiri bagian metadata. <body> (Tag pembuka <body>) Bagian utama tempat elemen konten ditampilkan di browser. <!-- abaikan ini dulu --> (Komentar HTML) Catatan pengembang; tidak akan terlihat di tampilan browser. </body> (Tag penutup <body>) Mengakhiri bagian konten utama halaman. </html> (Tag penutup <html>) Menandakan akhir dokumen HTML. Head <!-- index.html --> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap>" rel="stylesheet" /> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> <title>Dropdown Menu Jquery</title> <style> body { font-family: "Poppins", sans-serif; } </style> </head> <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap>" rel="stylesheet" /> (Tag <link> untuk font) Mengimpor font Poppins dari Google Fonts dengan varian ketebalan 400, 500, 600, dan 700. Digunakan untuk mempercantik tampilan teks pada halaman. rel="stylesheet" menandakan bahwa ini adalah file CSS eksternal. <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> (Tag <script> untuk Tailwind via CDN) Mengimpor versi browser dari Tailwind CSS langsung dari CDN jsDelivr. Script ini memungkinkan penggunaan Tailwind CSS tanpa perlu proses build, cocok untuk proyek kecil atau prototipe. Tag <style> Menambahkan CSS langsung di dalam HTML. Dalam contoh ini, font pada elemen <body> diatur agar menggunakan Poppins (dengan fallback sans-serif jika font gagal dimuat). Body <!-- index.html --> <main class="relative mx-auto px-5 pt-[100px] min-h-screen w-full max-w-[640px] bg-[#F4F5F7]"> <section id="BookingDetails" class="flex flex-col gap-4 rounded-3xl border border-[#E4E5E9] bg-white px-[14px] py-[14px]"> <div class="flex items-center justify-between"> <h2 class="font-semibold">Booking Details</h2> <!-- fokus pada sini --> <button type="button" data-expand="BookingDetailsJ" class="cursor-pointer"> <img src="assets/arrow.svg" alt="icon" class="h-[32px] w-[32px] shrink-0 transition-all duration-300" /> </button> <!-- sampai sini --> </div> <!-- fokus pada sini --> <div class="flex flex-col gap-4" id="BookingDetailsJ"> <!-- sampai sini --> <div class="flex justify-between"> <div class="flex items-center gap-[10px]"> <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" /> <p class="text-[#43484C]">Sub Total</p> </div> <strong class="font-semibold">Rp 180.394.392</strong> </div> <hr class="border-[#E4E5E9]" /> <div class="flex justify-between"> <div class="flex items-center gap-[10px]"> <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" /> <p class="text-[#43484C]">Tax 11%</p> </div> <strong class="font-semibold">Rp 18.495.699</strong> </div> <hr class="border-[#E4E5E9]" /> <div class="flex justify-between"> <div class="flex items-center gap-[10px]"> <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" /> <p class="text-[#43484C]">Insurance</p> </div> <strong class="font-semibold">Free for All</strong> </div> <hr class="border-[#E4E5E9]" /> <div class="flex justify-between"> <div class="flex items-center gap-[10px]"> <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" /> <p class="text-[#43484C]">Service Tools</p> </div> <strong class="font-semibold">Free for All</strong> </div> </div> </section> </main> <!-- fokus pada sini --> <script src="<https://code.jquery.com/jquery-3.7.1.min.js>" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="jquery.js"></script> <!-- sampai sini --> Script pertama : <script src="<https://code.jquery.com/jquery-3.7.1.min.js>" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> memuat pustaka jQuery dari CDN, agar $ dan semua fungsi jQuery tersedia.Kedua memuat file jquery.js, yang berisi kode pada bab dibawah ini : Membangun Struktur JavaScript ( JQuery ) // jquery.js $(() => { $("[data-expand]").on("click", function (e) { $(this).children("img").toggleClass("-rotate-180"); let target = $(`#${$(this).data("expand")}`); target.slideToggle(); }); }); Kode JS ini mencari semua elemen yang memiliki atribut data-expand (dalam kasus kita hanya <button … data-expand="BookingDetailsJ">). Lalu dipasang event handler untuk klik.Di dalam handler, $(this) merujuk ke tombol yang diklik. Pemanggilan .data("expand") akan mengambil string "BookingDetailsJ", yaitu nilai dari atribut data-expand.Karakter back-tick (```) dan ${key} membentuk selektor jQuery "#BookingDetailsJ". jQuery kemudian mencari elemen dengan id="BookingDetailsJ" yaitu <div … id="BookingDetailsJ">..toggleClass("-rotate-180") menambahkan/menukar kelas Tailwind yang memutar ikon 180° setiap klik..slideToggle() menjalankan animasi “slide down/up” pada elemen target, sehingga bagian detail (#BookingDetailsJ) muncul atau hilang. Dengan cara ini, tombol <button data-expand="BookingDetailsJ"> “mengomunikasikan” ke mana ia harus mencari konten tersembunyi lewat nilai data-expand, dan jQuery menggunakan nilai itu untuk menemukan <div id="BookingDetailsJ"> agar bisa di-slideToggle(). Sederhana tapi sangat fleksibel—cukup ubah data-expand dan id untuk membuat dropdown lain tanpa mengubah kode JavaScript-nya. Penutup Dengan mekanisme data-expand dan id yang saling terhubung ini, kalian dapat membuat dropdown interaktif yang mudah dikembangkan dan dipelihara cukup dengan menyesuaikan nilai pada atribut HTML tanpa perlu mengubah logika JavaScript-nya. Apabila kalian ingin mengasah keterampilan slicing kalian maka jangan ragu belajar di website BuildWithAngga. Terima Kasih!