Tips All

Daftar Isi PendahuluanBenefit Setelah BacaDasarVariabelTipe DataOperatorConditionalLoopFungsiFungsi deklaratif dan ekspresiArrow functionParameter dan return valueArray & ObjectArray methodDestructuring array & objectSpread/rest operatorDOM dan Event HandlingCara manipulasi DOMEvent bubbling & delegationAsynchronous JavaScriptPromisesAsync/awaitfetch() untuk HTTP requestES6Template literalsDefault parametersOptional chainingTernary operatorKonsep Pemrograman ModernScopeHoistingClosuresCallback functionImmutabilityBikin 6 Study CasesTabsTop Bar AnimationModalDropdownFetch APIPraktek Library (Swiper JS, Plyr.io, jQuery Dropdown)Masuk React Paling Dasar: component, props, dan stateComponentPropsStatePenutup Pendahuluan React JS itu emang jadi salah satu library JavaScript paling populer sekarang. Tapi banyak banget pemula yang langsung nyemplung ke React tanpa ngerti dasar-dasar JavaScript dulu. Akhirnya? Bingung sendiri pas ketemu state, props, atau arrow function. Padahal masalahnya bukan di React-nya, tapi emang fondasi JavaScript-nya belum kuat. Nah, panduan ini dibuat supaya kamu bisa ngerti JavaScript dari nol, sampai ke konsep-konsep yang bener-bener kepake banget di React. Nggak cuma belajar teori doang, tapi kamu juga bakal diajak buat paham kenapa suatu konsep itu penting, khususnya buat React. Dan pastinya, saya beri ide latihan mini-proyek biar kamu nggak cuma paham di kepala, tapi juga bisa mengasak lebih dalam lagi lewat praktik. Intinya, setelah ngikutin panduan ini, kamu bakal lebih pede pas belajar React. Soalnya kamu bakal bener-bener ngerti apa yang kamu lakuin. Benefit Setelah Baca ✅ Ngerti Gaya Nulis JavaScript Zaman Now (ES6+) ✅ Ngerti Banget Hal-Hal Penting Kayak map, filter, destructuring, sampe promise & async/await ✅ Siap Baca & Tulis Kode JavaScript Tanpa Takut-Takut Lagi ✅ Siap Nyebur ke React JS Tanpa Pusing Lagi Dasar Sebelum kita loncat ke React, penting banget buat ngerti dulu dasar-dasar JavaScript. Soalnya, React itu bukan bahasa baru dia cuma cara lain buat nulis JavaScript, khususnya pas bikin tampilan (UI) pakai komponen. Makanya, di bagian ini kita bakal balik ke basic dulu: bahas hal-hal kayak variabel, tipe data, operator, sampe struktur kontrol kayak if, else, dan looping. Semua ini bakal jadi bekal penting biar kamu nggak cuma bisa nulis kode, tapi juga paham kenapa kodenya jalan seperti itu. Jadi pas nanti mulai belajar React, kamu nggak cuma ngikutin tutorial, tapi bener-bener ngerti alurnya. Variabel Variabel itu intinya tempat nyimpen nilai dalam program. Di JavaScript versi kekinian, kita pakai let dan const buat bikin variabel bukan var lagi, soalnya var suka bikin pusing gara-gara hoisting-nya yang aneh. Di dunia React, kamu bakal sering banget nemu const, terutama buat nyimpen komponen, fungsi-fungsi handler, atau nilai yang emang nggak berubah. Sementara let biasanya dipakai kalau kamu butuh nilai yang bisa berubah di dalam sebuah fungsi misalnya buat counter, atau status sementara. Contoh penggunaan const dan let: const siteName = "Belajar React di BuildWithAngga"; // nilai tidak akan diubah let visitorCount = 0; // nilai bisa berubah console.log(siteName); // output: Belajar React di BuildWithAngga visitorCount += 1; console.log(visitorCount); // output: 1 Perbedaan var, let, dan const secara singkat: var oldVar = "Saya bisa diakses di mana-mana (tidak disarankan)"; let modernLet = "Saya hanya bisa diakses dalam blok saya"; const constantValue = "Saya harus tetap sama"; // Error jika mencoba ubah nilai const // constantValue = "Gagal!"; // ❌ TypeError Contoh di dalam fungsi React: function WelcomeMessage() { const name = "BuildWithAngga"; // menggunakan const untuk nilai yang tidak berubah let greeting = "Selamat datang"; if (new Date().getHours() < 12) { greeting = "Selamat pagi"; } return <h1>{greeting}, {name}!</h1>; } Di contoh React di atas: const name dipakai karena si name ini gak bakal berubah-ubah. Jadi lebih aman dan enak dipakailet greeting dipakai karena nilainya bisa berubah-ubah, tergantung kondisi, misalnya waktu sekarang lagi pagi atau malam. Jadi lebih fleksibel Tipe Data JavaScript tuh punya tipe data data primitif kayak string, number, boolean, terus ada juga null sama undefined. Selain itu, ada tipe yang agak ribet dikit, yaitu non-primitif seperti object sama array. Kenapa sih penting banget? Soalnya di React, kamu bakal sering banget ketemu object dan array, apalagi pas ngirim data lewat props, ngatur state, atau ambil data dari API. Jadi, kalau kamu ngerti bedanya, kamu bisa ngoding React dengan lebih santai dan nggak bingung. Contoh Tipe Data Primitif: const nama = "BuildWithAngga";// string const umur = 21; // number const isOnline = true; // boolean const alamat = null; // null let pekerjaan; // undefined Catatan: null itu artinya kamu sengaja ngasih nilai kosong ke sesuatu, sementara undefined biasanya muncul kalo variabel belum dikasih nilai sama sekali jadi masih ‘ngambang’. Contoh Tipe Data Non-Primitif: const user = { nama: "BuildWithAngga", umur: 21, hobi: ["membaca", "menulis"] }; const angka = [1, 2, 3, 4, 5]; // array Objek itu kayak tempat nyimpen data dalam bentuk pasangan key sama value, sedangkan array itu lebih ke kumpulan data yang tersusun rapi, biasanya dipakai buat bikin list atau koleksi data. Penerapan dalam React: function ProfileCard(props) { // props adalah object return ( <div> <h2>{props.nama}</h2> {/* string */} <p>Umur: {props.umur}</p> {/* number */} <p>Hobi: {props.hobi.join(", ")}</p> {/* array */} </div> ); } // Contoh pemanggilan component: <ProfileCard nama="BuildWithAngga" umur={21} hobi={["membaca", "menulis"]} /> Di React, kita sering banget pakai object sama array karena state, props, sama data dari API itu biasanya bentuknya kompleks. Jadi supaya bisa akses dan tampilinnya secara dinamis, object dan array jadi andalan banget. Operator Operator itu dipakai buat ngelakuin berbagai operasi pada nilai, kayak hitung-hitungan (+, -, *, /), bandingin nilai (===, !==, >, <), atau buat logika (&&, ||, !). Nah, di React, kamu bakal sering pakai operator logika sama ternary buat ngatur kapan komponen ditampilin atau nggak, plus buat nyatuin string sama variabel di JSX. Contoh Penggunaan Dasar Operator: const a = 10; const b = 5; console.log(a + b); // 15 console.log(a > b); // true console.log(a === 10 && b === 5); // true Penggabungan String: const name = "BuildWithAngga"; console.log("Halo, " + name); // Halo, BuildWithAngga Penggunaan Operator dalam JSX (React): function Greeting({ isLoggedIn, userName }) { return ( <div> {/* Operator ternary */} <h1>{isLoggedIn ? `Halo, ${userName}!` : "Silakan login terlebih dahulu."}</h1> {/* Operator logika AND (&&) */} {isLoggedIn && <p>Selamat datang kembali!</p>} </div> ); } Pada contoh di atas: ? : dipakai buat nampilin teks yang beda-beda, tergantung kamu lagi login atau enggak.&& dipakai buat nampilin elemen cuma kalau kondisinya terpenuhi (true). Contoh Gabungan Operator: function DiskonLabel({ harga, diskon }) { const hargaAkhir = diskon > 0 ? harga - diskon : harga; return ( <div> <p>Harga: Rp{harga}</p> {diskon > 0 && <p>Diskon: Rp{diskon}</p>} <p>Total Bayar: Rp{hargaAkhir}</p> </div> ); } React ngajarin kita buat bikin logika tampil komponen yang simpel tapi tetap jelas, makanya operator kayak ternary sama logika ini jadi sangat membantu. Conditional Struktur kontrol kayak if, else, dan switch itu dipakai buat nentuin jalannya program sesuai kondisi yang ada. Ini penting banget di React, soalnya kita sering bikin kondisi supaya elemen yang tampil bisa berubah-ubah berdasarkan state atau props. Contoh Dasar if, else if, dan else: const nilai = 85; if (nilai >= 90) { console.log("A"); } else if (nilai >= 80) { console.log("B"); } else { console.log("C"); } // Output: B Contoh switch: const hari = "Senin"; switch (hari) { case "Senin": console.log("Awal minggu"); break; case "Jumat": console.log("Akhir minggu kerja di BuildWithAngga"); break; default: console.log("Hari biasa"); } Penerapan di React Di React, kondisi dipakai buat nentuin elemen mana yang bakal ditampilin, tergantung dari props, state, atau data yang didapet dari API. Contoh if dalam komponen: function Notifikasi({ jumlah }) { if (jumlah === 0) { return <p>Tidak ada notifikasi baru</p>; } return <p>Kamu memiliki {jumlah} notifikasi baru!</p>; } Contoh switch dalam komponen: function StatusPesanan({ status }) { let pesan; switch (status) { case "pending": pesan = "Pesanan sedang diproses oleh BuildWithAngga."; break; case "shipped": pesan = "Pesanan dalam pengiriman."; break; case "delivered": pesan = "Pesanan telah sampai."; break; default: pesan = "Status tidak diketahui."; } return <p>{pesan}</p>; } Pakai conditional bikin tampilan UI jadi lebih hidup dan bisa langsung berubah sesuai data atau interaksi dari pengguna. Loop Looping kayak for, while, sama for...of itu buat ngejalanin kode berulang-ulang. Tapi di React, biasanya kamu bakal lebih sering pakai method array kayak map() buat nampilin list elemen secara dinamis. Meski gitu, paham dasar looping tetap penting supaya kamu ngerti gimana alur kontrol kerjanya. Contoh Dasar Loop di JavaScript for loop: for (let i = 1; i <= 5; i++) { console.log("Angka ke-" + i); } // Output: Angka ke-1 hingga Angka ke-5 while loop: let i = 1; while (i <= 3) { console.log("Ulang ke-" + i); i++; } for...of: const buah = ["apel", "pisang", "jeruk"]; for (const item of buah) { console.log(item); } Loop dalam React: map() Loop kayak for atau while biasanya nggak dipakai langsung di JSX. Buat nampilin daftar elemen, kita lebih sering pakai array.map() karena hasilnya bisa langsung jadi elemen JSX yang bisa ditampilkan. Contoh: Menampilkan List dengan map(): function DaftarBuah() { const buah = ["Apel", "Pisang", "Jeruk"]; return ( <ul> {buah.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); } Penting: Waktu bikin list di React, pastiin pakai key yang unik supaya React gampang ngenalin elemen mana yang berubah. Fungsi Fungsi itu kayak blok kode yang bisa dipakai ulang kapan aja. Di JavaScript, fungsi punya peran penting karena hampir semua hal termasuk komponen React sebenernya adalah fungsi juga. Di bagian ini, kita bakal bahas berbagai jenis fungsi, cara nulisnya, dan gimana cara kerjanya. Kamu juga bakal belajar bikin fungsi yang rapi dan efisien, jadi pas masuk ke React nanti, kamu udah terbiasa mikir secara modular dan bisa pakai ulang kode dengan gampang. Fungsi deklaratif dan ekspresif Fungsi deklaratif itu ditulis pake kata kunci function, sementara fungsi ekspresif biasanya disimpen dalam variabel pakai ekspresi fungsi. Contohnya kayak gini: // Deklaratif function halo() { console.log("Halo BuildWithAngga"); } // Ekspresif const halo = function() { console.log("Halo BuildWithAngga"); }; Keduanya sama-sama boleh dipakai, tapi cara ekspresif lebih fleksibel buat nulis fungsi di komponen React, apalagi kalau pakai const buat bikin fungsi yang nggak berubah-ubah. Arrow function Arrow function (=>) itu cara modern dan lebih singkat buat nulis fungsi. Selain simpel, arrow function juga punya cara khusus dalam menangani konteks this, yang sangat berguna di React, terutama pas kerja sama handler atau callback: const tambah = (a, b) => a + b; Arrow function populer banget di React karena bikin kode jadi lebih rapi dan ngindarin ribetnya masalah this yang sering muncul di class component atau event handler. Parameter dan return value Setiap fungsi bisa nerima parameter sebagai input dan ngasih nilai (return value) sebagai output. Kemampuan buat atur input-output ini penting banget di React, contohnya pas bikin komponen yang terima props dan ngembaliin elemen JSX buat ditampilin. Array & Object Array sama object itu dua struktur data paling penting di JavaScript modern, apalagi di React. Kamu bakal sering banget lihat data ditampilin dalam bentuk list (array), dan data yang dikirim antar komponen biasanya pakai object. Makanya, ngerti cara pakai, akses, dan ubah keduanya itu wajib banget biar kamu bisa kerja dengan data di React dengan lancar. Array method Array di JavaScript punya banyak method bawaan kayak .map(), .filter(), .reduce(), sama .forEach(). Di React, .map() yang paling sering dipakai, khususnya buat nampilin daftar elemen secara dinamis: const items = ['A', 'B', 'C']; const list = items.map(item => <li key={item}>{item}</li>); Kalau kamu paham array method, kamu bakal lebih gampang ngatur dan nampilin data dengan cara yang efisien dan jelas. Destructuring array & object Destructuring itu fitur dari ES6 yang bikin kamu gampang banget ngambil nilai dari array atau object terus masukin langsung ke variabel. // Array const [a, b] = [1, 2]; // Object const user = { name: 'BuildWithAngga', age: 30 }; const { name, age } = user; React sering banget pakai destructuring, misalnya buat ambil props atau ngambil nilai dari useState. Kalau kamu belum familiar sama destructuring, kode React kadang bisa terasa ribet dan susah dimengerti. Spread/rest operator Operator spread (...) dipakai buat nyalin atau ngegabungin array dan object, sementara rest operator dipakai buat ngumpulin nilai-nilai jadi satu. // Spread const arr1 = [1, 2]; const arr2 = [...arr1, 3]; // [1, 2, 3] // Rest function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } Di React, spread operator sering dipakai buat ngubah state tanpa merusak data asli (immutability) atau buat terusin props dengan cara yang praktis dan efisien. DOM dan Event Handling DOM (Document Object Model) itu semacam gambaran struktur halaman web yang bisa kita akses dan ubah pake JavaScript. Sebelum paham gimana React ngatur tampilan lewat virtual DOM, penting banget buat ngerti dulu cara kita ngubah DOM secara manual. Selain itu, event handling atau cara nangkep interaksi pengguna kayak klik, input, dan hover juga jadi bagian penting buat bikin antarmuka yang interaktif. Cara manipulasi DOM JavaScript punya banyak cara buat ngubah elemen DOM, kayak getElementById, querySelector, innerHTML, sama classList. Contohnya kayak gini: const button = document.querySelector('#myButton'); button.textContent = 'Klik Saya'; button.classList.add('active'); Di React, kita nggak perlu lagi ngubah DOM langsung, karena React yang ngatur semua perubahan itu secara efisien lewat virtual DOM. Tapi, ngerti cara kerja manualnya bakal bikin kamu makin paham dan appreciate betapa gampang dan efisiennya React buat ngelola tampilan. Event bubbling & delegation Event bubbling itu proses di mana event yang terjadi di elemen anak bakal “naik” ke elemen induknya. Nah, event delegation manfaatin proses ini dengan cara naro satu event listener di elemen parent buat nangkep semua event dari anak-anaknya. Jadi lebih efisien, apalagi kalau banyak elemen yang perlu ditangani. document.querySelector('#parent').addEventListener('click', function(e) { if (e.target.matches('.child')) { console.log('Child diklik'); } }); Di React, prinsip event bubbling ini sangat ngebantu buat ngirit resource dan bikin penulisan event handler jadi lebih efisien. Walaupun React udah nyederhanain semuanya lewat synthetic events, ngerti konsep bubbling tetap penting apalagi kalau kamu ngatur interaksi yang lebih kompleks kayak drag-and-drop atau elemen bersarang. Asynchronous JavaScript JavaScript itu non-blocking, artinya dia nggak bakal nunggu satu proses selesai sebelum lanjut ke proses lain. Ini penting banget di web modern, karena kita sering ambil data dari server (API), nunggu respon dari user, atau ngeproses file. Di React, hampir semua urusan sama data luar kayak ambil data dari API itu asinkron. Jadi, sebelum ngelakuin itu di React, kamu perlu paham dulu gimana cara kerja asynchronous di JavaScript. Promises Promise adalah cara yang lebih modern dan rapi buat ngatur operasi asinkron. Daripada pakai callback yang bisa bikin kode jadi ribet (callback hell), promise bikin semuanya lebih terstruktur lewat .then() buat menangani hasilnya, dan .catch() buat nangkep error-nya. fetch('<https://api.BuildWithAngga.com/data>') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Terjadi kesalahan:', error)); Promise sangat berguna di React, terutama pas kita ambil data dari API dan pengen masukin datanya ke dalam state setelah komponen tampil (di-mount). Jadi, begitu datanya udah siap, kita tinggal update state dan React bakal otomatis nge-render ulang tampilannya. Async/await async dan await adalah fitur dari ES2017 yang bikin penulisan kode asinkron jadi kelihatan kayak kode biasa (sinkron). Jadi, kamu bisa nulis logika asinkron tanpa .then() berantai hasilnya lebih bersih, lebih gampang dibaca, dan lebih enak buat ditulis. async function getData() { try { const response = await fetch('<https://api.BuildWithAngga.com/data>'); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } Di React, kamu bakal sering banget bikin fungsi async di dalam hook kayak useEffect() buat ngambil data dari API pas komponen pertama kali muncul. Ini cara yang umum buat nge-load data awal dan langsung nampilin hasilnya di UI setelah dapet respons dari server. fetch() untuk HTTP request fetch() adalah fitur bawaan browser yang dipakai buat ngirim HTTP request, misalnya buat ambil data dari server atau kirim form. fetch() bekerja pakai promise, jadi cocok banget digabungin sama async/await. Di React, ini jadi salah satu cara paling umum buat komunikasi sama backend. Walaupun banyak orang juga pakai pustaka kayak Axios, ngerti dasar fetch() tetap penting biar kamu ngerti cara kerjanya dari awal. fetch('<https://api.BuildWithAngga.com/user/1>') .then(res => res.json()) .then(user => console.log(user)); Ngerti cara kerja fetch() bakal ngebantu banget waktu kamu bikin aplikasi React yang dinamis dan butuh ambil atau kirim data ke backend. Jadi, kamu bisa lebih gampang ngatur alur data dari server ke tampilan, dan sebaliknya. ES6 ES6 (atau ECMAScript 2015) adalah versi JavaScript yang ngenalin banyak fitur baru yang sekarang jadi standar penulisan JavaScript modern terutama di dunia React. Hampir semua kode React masa kini ditulis pakai gaya ES6, jadi penting banget buat ngerti fitur-fitur ini biar kamu bisa baca, nulis, dan ngembangin kode dengan lebih lancar dan efisien. Template literals Template literals bikin kamu bisa nulis string dengan cara yang lebih fleksibel, misalnya gampang masukin variabel langsung ke dalam string tanpa ribet, dan juga bisa bikin string multi-baris tanpa pakai banyak tanda plus (+). Jadi, kodenya lebih bersih dan enak dibaca. const name = 'BuildWithAngga'; const greeting = `Halo, nama saya ${name}`; Di React, template literals sering dipakai buat gabungin class CSS secara dinamis atau bikin URL yang berubah-ubah sesuai data. Jadi, kamu bisa bikin tampilan dan logic yang fleksibel tanpa ribet ngatur string panjang manual. Default parameters Kamu bisa kasih nilai default buat parameter fungsi, jadi kalau pas fungsi dipanggil nggak dikasih nilai, parameter itu otomatis pakai nilai bawaan yang sudah kamu tentukan. Ini bikin kode jadi lebih aman dan nggak error karena nilai yang hilang. function greet(name = 'BuildWithAngga') { console.log(`Halo, ${name}`); } Ini bikin fungsi kamu jadi lebih kuat dan aman, terutama di React, karena kadang komponen nggak selalu dapat semua props. Dengan nilai default, fungsi tetap jalan lancar tanpa error walaupun ada props yang nggak dikirim. Optional chaining Fitur ini bikin kamu lebih gampang akses properti di dalam object yang kadang nggak pasti ada, tanpa perlu ribet nulis banyak cek apakah propertinya ada atau nggak. Jadi, kode kamu jadi lebih singkat dan aman dari error. const user = {}; console.log(user.profile?.name); // undefined, bukan error Di React, fitur ini sangat berguna buat nge-handle data yang belum datang karena lagi proses fetching dari API. Jadi, kamu nggak perlu takut error waktu akses properti yang belum ada, dan UI bisa tetap lancar tampil. Ternary operator Ternary itu cara singkat buat nulis kondisi if-else dalam satu baris, jadi kamu bisa langsung pilih antara dua nilai atau aksi berdasarkan kondisi tertentu tanpa harus pakai banyak baris kode. const isLoggedIn = true; const text = isLoggedIn ? 'Logout' : 'Login'; Pakai ternary tuh udah jadi hal biasa di React, terutama buat nge-handle tampilan yang berubah-ubah sesuai kondisi (conditional rendering). Jadi, kamu bisa dengan cepat tentuin elemen mana yang mau ditampilin tanpa nulis kode panjang. Konsep Pemrograman Modern Biar kamu benar-benar paham cara kerja JavaScript dan bisa nulis kode yang lebih rapi serta minim bug, penting banget buat kuasai konsep-konsep dasar pemrograman modern. Konsep-konsep ini jadi fondasi utama React, apalagi saat kamu mulai pakai hooks, bikin fungsi yang dinamis, dan ngatur state. Scope Scope itu ngasih tahu kamu di bagian mana variabel bisa dipakai dalam kode. Ada tiga tipe utama: global (bisa diakses di mana aja), function (hanya di dalam fungsi), dan block scope (di dalam blok kayak {} misalnya di if atau loop). function test() { let name = 'BuildWithAngga'; console.log(name); // bisa } console.log(name); // error Di React, scope penting banget buat ngatur state lokal di tiap komponen dan supaya variabel nggak bentrok satu sama lain. Jadi, tiap komponen punya ‘ruang’ sendiri buat data dan logikanya. Hoisting Hoisting itu cara JavaScript yang otomatis ‘naikin’ deklarasi variabel atau fungsi ke bagian atas scope-nya sebelum kode dijalankan. Jadi, kamu bisa pakai variabel atau fungsi sebelum deklarasinya muncul di kode. sayHi(); // Berhasil, meskipun fungsi dideklarasikan di bawah function sayHi() { console.log('Hi!'); } Tapi, perlu diingat, variabel yang kamu deklarasi pakai let atau const itu nggak ‘diangkat’ (hoisted) kayak var. Jadi, kalau kamu coba pakai sebelum deklarasi, bakal error. Ini penting banget supaya kamu nggak bingung waktu pakai fungsi atau variabel di React! Closures Closure itu kayak fungsi yang “nginget” variabel dari tempat dia dibuat, walaupun fungsi itu dipanggil di luar tempat aslinya. Jadi, dia tetap bawa ‘kenangan’ dari lingkup luar itu. function counter() { let count = 0; return function() { count++; return count; }; } const increment = counter(); console.log(increment()); // 1 console.log(increment()); // 2 Closures penting banget di React, terutama pas kamu pakai useCallback atau bikin event handler yang butuh ‘nyimpen’ nilai dari luar fungsi supaya tetap bisa diakses nanti. Jadi, fungsi-fungsinya bisa ‘ingat’ data yang mereka butuhin meskipun dipanggil di waktu berbeda. Callback function Callback itu fungsi yang kamu kirim ke fungsi lain sebagai parameter, terus fungsi itu bakal dipanggil lagi (callback) di waktu tertentu kayak janji buat dipanggil balik setelah sesuatu selesai. function greet(callback) { console.log('Halo'); callback(); } greet(() => console.log('Selamat datang!')); Di React, callback sering dipakai banget, terutama buat ngatur event kayak onClick, atau buat komunikasi antara komponen anak dan induk supaya mereka bisa ‘ngobrol’ satu sama lain dengan lancar. Immutability Immutability itu prinsip di mana kamu nggak langsung ngubah data asli, tapi bikin salinan baru kalau mau ubah sesuatu. Jadi data aslinya tetap aman dan nggak berubah langsung. const original = [1, 2, 3]; const updated = [...original, 4]; React sangat ngejalanin prinsip ini, terutama pas kamu ngatur state. Kalau kamu langsung ubah state tanpa bikin salinan baru, React bisa nggak ngeh kalau ada perubahan, dan itu bisa bikin bug yang susah dicari. Bikin 6 Study Cases Biar kamu makin paham JavaScript sebelum nyemplung ke React, coba deh kerjain 6 studi kasus praktis ini. Semua kasus ini gabungin konsep dasar JS yang udah kita bahas, sekaligus ngelatih cara berpikirmu supaya lebih siap jadi developer React nantinya. Seru dan langsung nyambung ke dunia nyata! Tabs Coba bikin tab interaktif yang bisa dipakai pengguna buat pindah-pindah konten cukup dengan klik tombol/tab-nya. Studi kasus ini seru karena ngajarin kamu cara ngubah DOM, nangkep event klik, dan ngerti konsep state sederhana pakai JavaScript. Nanti juga gampang banget paham konsep serupa di React. Top Bar Animation Bikin animasi keren di header atau top bar yang aktif pas pengguna scroll halaman atau interaksi lain. Studi kasus ini ngajarin kamu cara pakai event scroll, gimana ganti kelas CSS secara dinamis, plus manfaatin requestAnimationFrame biar animasinya lancar dan nggak nge-lag. Mantap buat bikin UI yang hidup. Modal Bikin komponen modal popup yang gampang dibuka-tutup, lengkap dengan fitur klik di luar modal buat nutup juga tombol close. Studi kasus ini nyambung banget sama cara kerja komponen dan manajemen state di React, jadi kamu bisa latihan konsepnya secara langsung. Dropdown Bikin dropdown menu yang interaktif, bisa tampilkan pilihan, dan otomatis tutup kalau kamu klik di luar menu. Kasus ini bagus buat kamu paham gimana event bubbling dan delegation bekerja dalam JavaScript. Fetch API Praktik pakai fetch() buat ambil data dari API, terus tampilkan hasilnya langsung di halaman secara dinamis. Studi kasus ini siapin kamu buat ngerti asynchronous di React sekaligus cara render data real-time dengan mudah. Praktek Library ( Swipper JS , Plyr.io , JQuery Dropdown ) Coba deh pakai library kayak Swiper JS buat slider, Plyr.io buat pemutar media, dan jQuery Dropdown buat menu interaktif. Ini bakal kasih kamu pengalaman langsung gimana caranya pasang dan pakai library JavaScript, yang pastinya sering banget kamu butuhin pas kerja dengan React. Masuk React Paling Dasar: component, props, dan state Setelah paham fondasi JavaScript dengan baik, kamu siap buat mulai kenalan sama React lewat konsep dasar yang paling penting: component, props, dan state. Ketiganya jadi pondasi utama buat bikin aplikasi React yang interaktif dan gampang dikembangin. Component Component itu ibarat blok bangunan utama di React. Bentuknya bisa fungsi atau kelas yang menghasilkan tampilan UI (biasanya pakai JSX) dan bisa dipakai ulang di banyak tempat dalam aplikasi. function Greeting() { return <h1>Halo, BuildWithAngga!</h1>; } Component bikin urusan ngatur UI jadi gampang karena halaman bisa dibagi-bagi jadi bagian kecil yang lebih simpel buat diurus dan dikembangin. Props Props itu singkatan dari "properties", yaitu data yang dikirim dari komponen induk ke komponen anak buat jadi input atau informasi yang dipakai di dalamnya. function Greeting(props) { return <h1>Halo, {props.name}!</h1>; } // penggunaan <Greeting name="BuildWithAngga" /> Dengan props, kamu bisa bikin komponen yang fleksibel dan dinamis karena isi atau tampilannya bisa berubah sesuai data yang dikirim dari luar. State State itu data internal di dalam sebuah komponen yang bisa berubah-ubah selama komponen tersebut hidup. Kalau state berubah, React bakal otomatis render ulang bagian UI yang terpengaruh supaya tampilannya update. import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Hitung: {count}</p> <button onClick={() => setCount(count + 1)}>Tambah</button> </div> ); } State bikin tampilan jadi hidup dan langsung nyaut pas kamu ngelakuin sesuatu. Penutup Selamat ya! Kamu udah berhasil melewati panduan lengkap tentang dasar-dasar JavaScript yang wajib banget buat mulai belajar React JS. Dengan paham variabel, fungsi, array, object, event handling, asynchronous programming, fitur ES6, dan konsep pemrograman modern, kamu sekarang punya pondasi yang kuat buat bikin aplikasi web yang keren dan interaktif. Lewat 6 studi kasus praktis juga, kamu udah mulai terbiasa pakai konsep-konsep itu dalam situasi nyata yang mirip banget sama pengembangan aplikasi React. Ditambah lagi, pengenalan tentang component, props, dan state kasih kamu gambaran jelas gimana React bekerja dan gimana cara bikin UI yang modular sekaligus responsif. Terus semangat latihan dan eksplorasi, ya! Dunia React itu luas dan penuh tantangan seru. Jangan takut buat coba-coba, baca dokumentasi resmi, dan gabung komunitas developer supaya proses belajarmu makin cepat dan asik. Semoga panduan ini bikin kamu makin pede buat melangkah di dunia React JS. Selamat ngoding, dan sampai ketemu di tutorial berikutnya! 🚀✨

Daftar Isi PendahuluanSetelah Membaca Akan MahirClaude 3.5 SonnetPenjelasanContoh Prompt & HasilPenjelasan HasilGemini 2.0 FlashPenjelasanContoh Prompt & HasilPenjelasan HasilGPT-4.1PenjelasanContoh Prompt & HasilPenjelasan HasilGPT-4oPenjelasanContoh Prompt & HasilPenjelasan Hasilo3-miniPenjelasanContoh Prompt & HasilPenjelasan HasilRangkumanPenutup Pendahuluan Perkembangan teknologi kecerdasan buatan (AI) makin pesat, dan kini hadir berbagai model bahasa besar (large language models atau LLM) yang bisa jadi copilot andal dalam proses pengembangan perangkat lunak. Salah satu tools favorit developer, Visual Studio Code (VSCode), kini bisa diintegrasikan dengan beragam model AI untuk membantu menulis, merevisi, bahkan memahami kode dengan lebih cepat dan efisien. Tapi tentu, tiap model AI punya kelebihan dan kekurangannya masing-masing. Nama-nama seperti Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4.1, GPT-4o, hingga o3-mini menawarkan kemampuan yang berbeda-beda tergantung kebutuhan kamu. Apakah kamu ingin refactor kode? Menulis dokumentasi teknis? Atau butuh jawaban cepat untuk persoalan rumit? Lewat artikel ini, kita akan bahas secara praktis ragam model AI Copilot yang bisa kamu gunakan di VSCode. Mulai dari fitur unggulan, contoh prompt, sampai kualitas hasilnya. Harapannya, kamu bisa memilih model AI yang paling cocok dengan gaya kerja dan kebutuhan coding kamu sehari-hari. Setalah Membaca Akan Mahir ✅ Integrasi AI dalam VSCode ✅ Membandingkan Model AI Populer ✅ Bisa Menyesuaikan Model dengan Kebutuhan Spesifik ✅ Mampu Analisis Kinerja dan Efisiensi Code ✅ Mahir Memutuskan Penggunaan Model ✅ Meningkatkan Produktivitas dalam Pengembangan Perangkat Lunak Claude 3.5 Sonnet 1. Penjelasan Claude 3.5 Sonnet adalah model terbaru dari Anthropic yang dirancang untuk memberikan respons yang akurat, efisien, dan aman terutama dalam konteks pemrograman. Sebagai bagian dari keluarga Claude 3, model ini dikenal punya kemampuan pemahaman bahasa alami yang kuat, sekaligus pendekatan yang hati-hati terhadap etika dan keamanan AI. Di dunia coding, Claude 3.5 Sonnet cukup bisa diandalkan. Ia mampu memahami instruksi yang kompleks, menjelaskan kode dengan jelas dan runtut, serta menghasilkan kode yang bersih lengkap dengan dokumentasinya. Dari Python, JavaScript, hingga TypeScript Claude bisa bekerja dengan berbagai bahasa pemrograman tanpa masalah. Kalau kamu pakai VSCode, model ini bisa langsung digunakan lewat ekstensi seperti Anthropic Copilot, atau melalui layanan pihak ketiga yang menyediakan akses Claude dalam lingkungan pengembanganmu. Kelebihan: Pemahaman konteks panjang yang baik.Penjelasan kode sangat jernih dan detail.Aman untuk digunakan dalam proyek sensitif karena bias keamanan tinggi. Keterbatasan: Bisa sedikit lebih lambat dibanding model lain dalam memberikan output.Kadang terlalu berhati-hati atau verbose saat menjawab prompt yang sederhana. Nah, sekarang kita coba lihat contoh prompt dan bagaimana hasilnya dari Claude 3.5 Sonnet. 2. Contoh Prompt & Hasil Prompt : VSCode - Asking for Help Copilot Agent Claude 3.5 Sonnet Hasil Generate : VSCode - Result Code of Agent Claude 3.5 Sonnet Hasil Browser : Section 1 Browser - Result of Agent Claude 3.5 Sonnet Section 2 Browser - Result of Agent Claude 3.5 Sonnet Section 3 Browser - Result of Agent Claude 3.5 Sonnet 3. Penjelasan Hasil Model ini memiliki kecepatan respons yang relatif lebih lambat dibandingkan beberapa model AI lainnya. Namun, kualitas hasil yang dihasilkan sangat unggul dan konsisten. Salah satu kelebihannya adalah kemampuannya dalam menangani konteks yang sangat panjang (hingga ~200k+), menjadikannya ideal untuk analisis dan pemrosesan dokumen besar. Selain memberikan solusi berupa kode yang lengkap dan terstruktur, model ini juga menyertakan penjelasan yang komprehensif dari berbagai sudut pandang atas setiap langkah yang dilakukan. Gemini 2.0 Flash 1. Penjelasan Kalau kamu butuh model AI yang super cepat dan responsif, Gemini 2.0 Flash bisa jadi pilihan menarik. Dibuat dengan fokus pada kecepatan, efisiensi, dan latensi rendah, varian ini memang dirancang untuk memberikan hasil instan cocok banget buat fitur seperti autocomplete, inline suggestion, atau chat assistant langsung di editor seperti VSCode. Meskipun termasuk versi ringan dalam keluarga Gemini 2.0, Flash tetap cukup akurat untuk menangani berbagai bahasa pemrograman seperti JavaScript, Python, dan TypeScript. Memang, ia tidak sekuat saudaranya Gemini 2.5 Pro dalam memecahkan logika kompleks, tapi untuk tugas-tugas teknis ringan sampai menengah, performanya bisa diandalkan. Kamu bisa mencoba Gemini 2.0 Flash di ekosistem Google seperti Google Workspace dan Android Studio, atau lewat plugin pihak ketiga yang mendukung integrasi di editor seperti VSCode. Kelebihan: Respons sangat cepat = ideal untuk pengembangan real-time.Hemat sumber daya, cocok untuk mesin dengan keterbatasan performa.Baik dalam menyelesaikan tugas ringan seperti menyarankan baris kode, mengisi komentar, atau men-debug fungsi sederhana. Keterbatasan: Kurang optimal untuk prompt dengan kompleksitas tinggi atau penalaran mendalam.Jawaban bisa bersifat terlalu ringkas dan kurang kontekstual dibanding model kelas atas.Tidak selalu konsisten dalam memahami konteks panjang atau file yang besar. Kalau kamu butuh asisten coding AI yang cepat dan pas buat editor ringan, proyek kecil, atau tugas nulis kode yang gak terlalu rumit, Gemini 2.0 Flash bisa jadi pilihan tepat dan efisien. Tapi, kalau kamu lagi mengerjakan proyek besar yang butuh pemahaman konteks mendalam, logika kompleks, atau refactoring kode secara besar-besaran, model seperti Claude 3.5 Sonnet atau GPT-4o bakal lebih cocok buat kamu. 2. Contoh Prompt & Hasil Prompt : VSCode - Asking for Help Copilot Ask Gemini 2.0 Flash Hasil Generate : VSCode - Result Code of Ask Gemini 2.0 Flash Hasil Browser : Browser - Result of Ask Gemini 2.0 Flash 3. Penjelasan Hasil Berdasarkan pengalaman saya, proses generasi dari model ini terasa sangat cepat dan responsif. Hasil yang diberikan tergolong cukup baik untuk kebutuhan umum. Dengan dukungan panjang konteks menengah (~32k token), model ini menunjukkan keunggulan dalam hal kecepatan, menjadikannya sangat cocok untuk aplikasi ringan dan penggunaan real-time. GPT-4.1 1. Penjelasan GPT-4.1 adalah versi upgrade dari GPT-4 yang dikembangkan oleh OpenAI, dengan performa yang lebih baik untuk pemrograman dan tugas-tugas teknis kompleks. Meski tidak tersedia secara langsung di ChatGPT versi web, GPT-4.1 bisa diakses lewat OpenAI API, dan digunakan di balik layar untuk beberapa produk internal OpenAI. Dibandingkan versi sebelumnya, GPT-4.1 punya kemampuan lebih kuat dalam hal: Pemrograman tingkat lanjut seperti debugging, algoritma, dan struktur data.Pemahaman konteks panjang, bahkan sampai ratusan ribu token (tergantung bagaimana API-nya diimplementasikan).Tugas teknis berlapis seperti penalaran matematis, penulisan dokumentasi teknis, dan konversi atau manipulasi data. Intinya, GPT-4.1 lebih canggih dan efisien cocok buat kamu yang butuh AI dengan presisi tinggi untuk proyek-proyek serius di bidang coding atau analisis teknis mendalam. Kelebihan: Performa unggul untuk coding dan reasoning teknis.Lebih presisi dalam menjawab prompt berlapis atau berisi banyak langkah logika.Cocok untuk pengembangan software skala besar dan kompleksitas tinggi.Lebih baik dalam menjaga struktur dan koherensi jawaban panjang. Keterbatasan: Tidak tersedia di ChatGPT (web) hanya bisa diakses lewat OpenAI API tertentu.Biasanya memerlukan akses enterprise atau Pro dengan token usage lebih tinggi.Tidak secepat GPT-4o atau model "Flash"-style dalam respons instan.Belum mendukung fitur multimodal seperti gambar/suara. Kalau kamu pakai ChatGPT Plus, sebenarnya yang kamu gunakan bukan GPT-4.1, melainkan GPT-4o model yang lebih umum dan serbaguna. Sementara GPT-4.1 biasanya dipakai untuk kebutuhan teknis khusus lewat API. 2. Contoh Prompt & Hasil Prompt : VSCode - Asking for Help Copilot Agent GPT-4.1 Hasil Generate : VSCode - Result Code of Agent GPT-4.1 Hasil Browser : Browser - Result of Agent GPT-4.1 3. Penjelasan Hasil Setelah melakukan serangkaian prompt dengan model ini, saya merasakan bahwa kecepatan generatenya berada pada tingkat sedang. Meskipun demikian, kualitas hasil yang dihasilkan sangat baik dan presisi, terutama dalam konteks logika dan coding yang kompleks. Kecepatan yang sedang tampaknya memberikan ruang bagi model untuk menghasilkan jawaban yang lebih akurat dan terstruktur. Dengan dukungan panjang konteks hingga ~128k, pengguna memiliki fleksibilitas yang cukup besar dalam menyusun pertanyaan atau diskusi mendalam. Model ini sangat cocok untuk kebutuhan teknis yang menuntut ketelitian dan kualitas tinggi meskipun kekurangannya tidak menghasilkan output yang sangat banyak. GPT-4o 1. Penjelasan GPT-4o (huruf “o” berarti omni) adalah model terbaru dari OpenAI yang dirilis pada Mei 2024, dan jadi salah satu yang paling serbaguna sejauh ini. Model ini bisa memahami dan menghasilkan teks, gambar, audio, bahkan video secara langsung menjadikannya benar-benar multimodal. Di ChatGPT, GPT-4o kini menjadi model default untuk pengguna ChatGPT Plus, menggantikan GPT-4 Turbo. Yang bikin GPT-4o menonjol bukan cuma kemampuannya yang luas, tapi juga kecepatannya. Model ini dirancang ulang dari nol agar lebih ringan, cepat, dan efisien, tapi tetap andal dalam urusan pemahaman konteks, logika, dan tentu saja: pembuatan kode. Buat kamu yang bekerja di lingkungan seperti VSCode, GPT-4o bisa diakses lewat GitHub Copilot Chat, API OpenAI, atau plugin pihak ketiga. Ia sangat cocok untuk bantu menyarankan kode secara cepat, memahami struktur lintas file, dan bahkan membantu debugging secara kontekstual. Kelebihan: Sangat cepat dan efisien, bahkan untuk prompt panjang dan multimodal.Kemampuan reasoning dan penulisan kode setara atau lebih baik dari GPT-4 Turbo.Mendukung input/output teks, gambar, audio, dan video secara native (khusus API dan produk OpenAI).Respons lebih natural dan kontekstual di Chat, cocok untuk asisten real-time. Keterbatasan: Masih memiliki keterbatasan pada pemrosesan file besar (konteks token ~128k pada API).Mode multimodal (gambar, suara, dll.) belum sepenuhnya aktif di semua platform seperti ChatGPT atau editor lokal.Untuk proyek yang sangat teknikal dan kompleks, hasilnya bisa terasa sedikit terlalu "ramah" atau generalist jika dibandingkan dengan model seperti Claude 3.5 Sonnet atau GPT-4.1 via API. Kalau kamu butuh model yang seimbang antara kecepatan, kecerdasan, dan fleksibilitas, GPT-4o jadi pilihan terbaik saat ini cocok untuk pengguna umum maupun developer yang ingin kerja produktif, apalagi kalau kamu pakai ChatGPT Plus atau pakai AI buat coding sehari-hari. 2. Contoh Prompt & Hasil Prompt : VSCode - Asking for Help Copilot Agent GPT-4o Hasil Generate : VSCode - Result Code of Agent GPT-4o Hasil Browser : Browser - Result of Agent GPT-4o 3. Penjelasan Hasil Setelah saya mencoba melakukan generate menggunakan model AI ini, saya merasakan bahwa prosesnya berlangsung sangat cepat dengan hasil yang sangat baik. Didukung oleh panjang konteks hingga ~128k token, model ini mampu menangani percakapan yang cukup kompleks dan berkelanjutan. Sangat cocok digunakan untuk aktivitas produktif sehari-hari yang mengandalkan AI secara konsisten. o3-mini 1. Penjelasan o3-mini adalah model ringan dari OpenAI yang masuk dalam generasi ketiga (OpenAI 3rd generation alias o3). Dibuat khusus untuk kecepatan tinggi dan efisiensi maksimal, model ini cocok dipakai di aplikasi real-time atau perangkat dengan sumber daya terbatas. Dibanding model seperti GPT-4o atau GPT-4.1, o3-mini jauh lebih kecil dan cepat, tapi tetap cukup cerdas untuk menangani tugas-tugas seperti: Penulisan teks ringanChatbot sederhanaKode dasar atau snippetTugas non-teknis yang cepat selesai Meski bukan model paling “pintar” di keluarga OpenAI, o3-mini sangat pas untuk situasi di mana waktu respons dan efisiensi lebih penting daripada kecanggihan, misalnya di asisten virtual, aplikasi UI ringan, atau sistem berbasis edge. Kelebihan: Sangat cepat dan ringan cocok untuk aplikasi real-time dan penggunaan mobile.Efisien untuk tugas-tugas sederhana seperti chat, penulisan ringan, dan skrip pendek.Dapat digunakan dengan biaya rendah di lingkungan API atau produk ChatGPT tertentu.Cocok untuk developer yang ingin model hemat biaya untuk produk minimalis. Keterbatasan: Kurang akurat dalam reasoning kompleks, debugging, atau coding lanjutan.Tidak cocok untuk pemrosesan konteks panjang, dokumen besar, atau tugas berat berbasis logika bertingkat.Tidak mendukung multimodal (gambar/suara) seperti GPT-4o. Model ini pas banget kalau kamu butuh alternatif yang lebih ringan dan hemat performa dari GPT, terutama buat aplikasi simpel atau saat butuh respons cepat. Tapi memang ada kompromi dari segi kecanggihan. 2. Contoh Prompt & Hasil Prompt : VSCode - Asking for Help Copilot Ask o3-mini Hasil Generate : VSCode - Result Code of Ask o3-mini Hasil Browser : Page 1 Browser - Result of Ask o3-mini Page 2 Browser - Result of Ask o3-mini Page 3 Browser - Result of Ask o3-mini 3. Penjelasan Hasil Setelah generate menggunakan AI ini saya merasakan kualitas generatenya sangat cepat, kemampuan codingnya bisa untuk yang dasara hingga menengah, tetapi panjang konteksnya terbatas enaknya dia ringan dan hemat biaya. AI ini cocok untuk App ringan, bot sederhana, dan UI cepat. Rangkuman Claude 3.5 Sonnet cocok untuk yang membutuhkan penjelasan teknis mendalam, pemahaman konteks tinggi, dan pendekatan yang hati-hati.Gemini 2.0 Flash ideal untuk respon cepat dan ringan, terutama pada skenario real-time seperti inline suggestion atau autocomplete.GPT-4.1 adalah pilihan utama ketika presisi dan reasoning teknis jadi prioritas misalnya dalam debugging kompleks atau transformasi data.GPT-4o memberi keseimbangan optimal antara performa dan fleksibilitas multimodal (teks, gambar, audio), cocok untuk pengguna ChatGPT Plus.o3-mini unggul dalam skenario yang menuntut kecepatan tinggi dan konsumsi sumber daya rendah, pas untuk chatbot atau antarmuka sederhana. Penutup Dengan semakin banyaknya pilihan model AI Copilot di VSCode, penting bagi para developer untuk benar-benar memahami keunggulan dan batasan masing-masing. Baik Claude 3.5 Sonnet dengan kemampuan penalaran mendalamnya, Gemini 2.0 Flash yang fokus pada kecepatan, GPT-4.1 dan GPT-4o yang menawarkan presisi tinggi dan dukungan multimodal, maupun o3-mini yang ringan dan efisien semua punya peran unik yang bisa disesuaikan dengan kebutuhan proyek. Melalui pengujian dan analisis yang sudah disajikan, diharapkan pembaca bisa lebih percaya diri dalam memilih model AI yang paling tepat untuk meningkatkan produktivitas, efisiensi, dan kualitas kerja di lingkungan pengembangan. Integrasi AI bukan sekadar tren, tapi alat strategis yang bila digunakan secara bijak, mampu membawa nilai tambah besar dalam proses pengembangan perangkat lunak modern.

Daftar Isi PendahuluanDummy CodeDebugPromptCekDebug Kasus Lain:ImprovePromptCekImprove Kasus Lain:KomentarPromptCekKomentar Kasus Lain:Deploy (GitHub)Penutup Pendahuluan Menjelang akhir proses ngoding, jangan buru-buru langsung deploy ke GitHub. Ada beberapa hal penting yang perlu dibereskan dulu mulai dari memperbaiki bug, merapikan struktur kode, menambahkan komentar, sampai memastikan semuanya siap untuk dikirim ke repositori. Proses ini kadang makan waktu dan bisa bikin kepala mumet. Nah, di sinilah Copilot AI bisa jadi teman yang membantu. Dengan bantuannya, pekerjaan jadi lebih cepat dan nggak seberat biasanya. Di artikel ini, kita bakal bahas gimana Copilot bisa bantu meningkatkan kualitas kode, menemukan dan memperbaiki error, menambahkan komentar yang jelas, sampai akhirnya siap di-deploy ke GitHub. Dummy Code Jadi, di sini saya udah siapin satu contoh kode yang bisa kita pakai buat studi kasus. Anggap aja ini proyek yang udah selesai, tapi masih ada beberapa hal yang perlu diberesin—mulai dari tag HTML yang belum lengkap, penggunaan tag semantik yang masih kurang, sampai masalah optimasi SEO yang belum maksimal. Nah, lewat contoh ini, kita bakal lihat gimana AI, khususnya Copilot, bisa bantu ngerapihin semuanya: bikin struktur kodenya lebih bersih, lebih gampang dirawat ke depannya, dan pastinya lebih sesuai sama standar web modern. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" /> <title>Empty State Airplane</title> <style> body { font-family: "Poppins"; background-color: #dae1e9; } </style> </head> <body> <div class="relative mx-auto w-full max-w-[640px] overflow-hidden min-h-screen py-[151px] px-[37.5px] bg-[#FAFAFA]"> <form action="success-checkout.html"> <div id="Card" class="flex flex-col gap-[41px] p-6 rounded-[34px] relative bg-[#5445E5] text-white overflow-hidden"> <div class="flex items-center justify-between relative z-20"> <div> <h2 class="font-light text-sm leading-[21px]">Name</h2> <p><strong class="font-medium text-xl leading-[30px]">Kezia Rifqi</strong></p> </div> <div class="flex items-center gap-[6px] shrink-0"> <img src="<https://empty-state-airplane.vercel.app/assets/images/icons/airplant.svg>" alt="" class="size-6 shrink-0" /> <p class="font-medium">Pay</p> </div> </div> <div class="relative z-20"> <h2 class="font-light text-sm leading-[21px]">Balance</h2> <p> <strong class="font-medium text-[26px] leading-[39px] break-words">IDR <span id="formatted-price">280000000</span></strong> </p> </div> <span class="absolute right-[-38px] top-[-45px] size-[107px] rounded-full bg-[#998EFD] blur-[50px]"></span> <span class="absolute left-[-29px] bottom-[-30px] size-[107px] rounded-full bg-[#998EFD] blur-[50px]"></span> <span class="absolute left-[35px] bottom-[-45px] bg-[#3F32B2]/50 rounded-[25px] right-[35px] h-[45px] blur-2xl"></span> </div <div class="mt-[91px] flex flex-col gap-[10px] w-[250px] mx-auto"> <h1 class="text-center font-semibold text-[32px] leading-[48px] text-[#1F1449]">Big Bonus🎉</h1> <p class="text-center font-light leading-[28px] text-[#9698A9]">We give you early credit so that you can buy a flight ticket</p> </div> <button type="submit" class="mt-[50px] font-medium text-lg leading-[27px] text-white bg-[#5C40CC] py-3.5 px-[50px] mx-auto rounded-[17px] flex hover:shadow-lg shadow-[#5C40CC]/40 transition-all duration-300">Start Fly Now</button> </form> </div> <script> var price = document.getElementById("formatted-price"); var priceT = price.textContent; var priceV = parseInt(priceT, 10); var numberFormatter = new Intl.NumberFormat("id-ID", { currency: "IDR", minimumFractionDigits: 0, maximumFractionDigits: 0, }); var formattedPrice = numberFormatter.format(priceV); price.textContent = formattedPrice; </script> </body> </html> Silakan salin aja kode di atas ke file index.html di proyek kamu, lalu buka di browser. Tapi perlu diingat, ada beberapa error di struktur tag HTML-nya. Jadi sebelum lanjut, kita bakal mulai dengan nge-debug dulu. Di tahap ini, kita akan lihat sejauh mana Copilot AI bisa bantu nemuin dan benerin kesalahan-kesalahan yang ada di dalam kode tersebut. Debug Coba bayangkan, kita nggak tahu persis di mana letak kesalahannya, tapi pas dijalankan di browser, halaman nggak muncul seperti yang kita harapkan. Nah, di situasi kayak gini, kita bisa langsung minta bantuan Copilot AI. Cukup kasih perintah atau konteks yang jelas, Copilot bisa bantu baca isi file, nyari tahu di mana struktur HTML-nya yang keliru, bahkan langsung kasih saran perbaikannya. Misalnya, kita bisa kasih prompt seperti ini: Prompt VSCode - Asking Copilot for Help Cek Setelah Copilot AI ngasih perbaikan, kita tetap perlu cek lagi hasilnya apakah udah sesuai sama yang kita butuhin atau belum. Kalau ternyata udah oke dan semuanya jalan lancar, tinggal klik ikon centang “true” buat nunjukin kalau perbaikannya udah kita terima. VSCode - Results To Compare Karena saya setuju dengan perbaikannya, akhirnya saya klik ikon centang tersebut sebagai tanda kalau perubahan dari Copilot udah oke. Debug Kasus Lain: Selain buat kasus kayak tadi, kita juga bisa pakai fitur debug di situasi lain, misalnya: Identifikasi Kesalahan Secara Kontekstual Contoh document.querySelector("#nonexistent").addEventListener("click", doSomething); Saran Copilot const btn = document.querySelector("#nonexistent"); if (btn) btn.addEventListener("click", doSomething); Copilot ngasih perbaikan ini supaya kodenya jadi lebih rapi dan nggak gampang error, terutama karena sebelumnya ada masalah kayak tag yang belum ditutup atau struktur DOM yang belum lengkap. Saran untuk Penanganan Error Contoh localStorage.setItem("user", JSON.stringify(userData)); Saran Copilot try { localStorage.setItem("user", JSON.stringify(userData)); } catch (e) { console.error("Failed to save user data", e); } Copilot ngasih saran ini biar program kita nggak gampang kena error waktu dijalankan, apalagi error runtime yang bisa bikin aplikasi jadi ngadat atau nggak jalan sebagaimana mestinya. Penyusunan Log atau Breakpoint Otomatis Contoh const result = processData(data); Saran Coplilot console.log("Input data:", data); const result = processData(data); console.log("Processed result:", result); Copilot ngasih saran kayak gini supaya proses debugging kita jadi lebih cepat dan nggak ribet. Jadi, kita bisa fokus ke hal lain tanpa harus pusing cari-cari kesalahan satu per satu. Improve Selanjutnya, saya pengen bikin kode jadi lebih semantic dan SEO friendly supaya struktur halaman lebih rapi, mesin pencari juga gampang ngerti isi kontennya, plus bikin website lebih cepat dan mudah diakses. Makanya, saya minta bantuan Copilot AI dengan perintah kayak gini: Prompt VSCode - Asking Copilot for Improve Cek Setelah perbaikan selesai, kita perlu cek lagi apakah hasilnya sudah sesuai harapan atau masih butuh sedikit penyesuaian. VSCode - Improve Results to Compare Kalau semuanya udah sesuai sama yang kita mau, tinggal klik ikon centang “true” buat nyetujui perubahan itu. Improve Kasus Lain: Selain cara tadi, sebenarnya masih banyak situasi serupa yang bisa kita perbaiki kalau kita paham konteks dan kebutuhannya. Beberapa contoh kasus yang bisa kita tingkatkan antara lain seperti: Mengoptimalkan Algoritma Contoh const visibleItems = items.filter(item => { return item.visible === true; }); Saran Copilot const visibleItems = items.filter(item => item.visible); Tujuannya supaya ekspresinya jadi lebih singkat, jelas, dan terdengar lebih ‘ngalir’ pas dipakai dalam penulisan kode. Mendeteksi Redundansi Kode Contoh const addActive = () => element.classList.add("active"); const removeActive = () => element.classList.remove("active"); Saran Copilot const toggleClass = (el, className, shouldAdd) => el.classList[shouldAdd ? "add" : "remove"](className); Copilot ngasih saran ini supaya kode yang kita buat bisa lebih gampang dipakai ulang, jadi nggak perlu nulis dari awal terus tiap mau pakai di bagian lain. Saran untuk Penamaan Variabel yang Lebih Jelas Contoh let a = document.querySelector("#username"); Saran Coplilot let usernameInput = document.querySelector("#username"); Copilot ngasih saran kayak gini supaya struktur kode jadi lebih gampang dibaca dan dipahami, baik oleh kita sendiri nanti maupun oleh developer lain yang ikut ngerjain proyek ini. Komentar Nah, sepertinya kita juga perlu nambahin komentar di kode yang udah kita buat, supaya orang lain yang baca jadi lebih gampang ngerti alur dan fungsinya. Untuk itu, kita bisa minta bantuan Copilot dengan kasih prompt kayak gini: Prompt VSCode - Asking Copilot for Create Comment Cek Setelah itu, kita cek lagi deh hasil komentarnya, apakah udah pas atau belum. Kalau saya sih ngerasa udah oke, jadi tinggal klik ikon centang buat tanda setuju. VSCode - Comment Results to Compare Komentar Kasus Lain: Komentar Yang Lebih Spesifik /** * Price Formatting Script * This script handles the formatting of the price display in the payment card * It converts the raw number into a properly formatted Indonesian currency format */ // Wait for DOM to be fully loaded to ensure all elements are available document.addEventListener("DOMContentLoaded", function () { // Get the element containing the raw price const price = document.getElementById("formatted-price"); // Convert the price text to a number (base 10) // Example: "280000000" -> 280000000 const priceValue = parseInt(price.textContent, 10); // Create a number formatter using Indonesian locale // This will format numbers according to Indonesian standards // Example: 280000000 -> "280.000.000" const numberFormatter = new Intl.NumberFormat("id-ID", { currency: "IDR", // Set currency to Indonesian Rupiah minimumFractionDigits: 0, // No decimal places maximumFractionDigits: 0, // No decimal places }); // Apply the formatting and update the display // Final output example: "280.000.000" price.textContent = numberFormatter.format(priceValue); }); Jadi, kita juga bisa minta Copilot AI buat kasih komentar yang lebih detail dan mendalam, tergantung bagian kode mana yang pengen kita jelasin lebih spesifik. Semua bisa kita sesuaikan sesuai kebutuhan. Deploy ( GitHub ) Setelah semua kode dirasa cukup dan siap dipublikasikan, saya mau deploy ke GitHub, tapi kali ini minta bantuan AI aja. Sebelumnya, saya harus bikin repository baru di GitHub dulu, supaya bisa kasih link remote-nya dan proses deploy bisa otomatis dikerjain sama Copilot. Langkah pertama, buat repository baru di GitHub sampai tampilannya kayak gini: GitHub - New Repository Setelah repository berhasil dibuat, kita bisa ambil URL remote-nya, kurang lebih kayak gini: git remote add origin <https://github.com/tegarfauzan/airplane-finished.git> Setelah dapat URL remote dari repository GitHub, kita bisa kasih perintah ke AI buat pakai remote itu. Contohnya, perintah yang bisa kita kasih ke Copilot AI seperti ini: VSCode - Asking Copilot for Push in GitHub Setelah kasih perintah itu, kita tinggal klik tombol “Continue” yang disaranin AI. Prosesnya bakal jalan otomatis, dan kalau berhasil, hasilnya bakal muncul kayak gini: VSCode - Successfully Pushed to GitHub Pas kita cek di GitHub, hasilnya bakal keliatan kayak gini: VSCode - Results from Push Jadi, dengan langkah itu, kita udah berhasil deploy ke GitHub. Penutup Dengan bantuan Copilot AI, proses nyelesain kode yang biasanya makan waktu dan bikin capek jadi jauh lebih ringan. Kita nggak cuma kerja lebih cepat, tapi juga bisa pastiin kode yang kita buat jadi lebih rapi, bebas error, dan gampang dipahami. Jadi, yuk kita coba eksplor lebih dalam gimana Copilot bisa jadi asisten pintar yang nemenin perjalanan ngoding kita sampai kodenya siap dipakai.

Daftar Isi • Pendahuluan     • Menyamakan Persepsi        • 1. Sudah Download Extention Copilot AI di dalam VSCode        • 2. Sedikit Paham Tailwind CSS        • 3. Sedikit Paham Github & Git        • 4. Terbiasa Menggunakan VSCode     • Yang Kalian Dapatkan Setelah Membaca        • Keahlian Copilot AI VSCode            • 1. Saran Kode Otomatis            • 2. Bisa Mengubah, Membaca, Menalar Banyak File dalam 1 Proyek            • 3. Copilot Chat            • 4. Dukungan Model AI         • Yang Perlu di Perhatikan Agar Bisa Tanya AI Lebih Efektif            • 1. Punya Ide            • 2. Bisa Riview            • 3. Berusaha Tidak Lepas Kendali            • 4. Anggap Sebagai Asisten Kita     • Mulai Challenge Proyek (BuildWithAngga Online Course)        • Perintah Awal        • Error        • Perbaiki Manual        • Mulai Akses Hasil        • Deploy Otomatis        • Error        • Bikin Repo        • Push With AI        • Improve Semantic        • Review        • Hasil Akhir        • Push Lagi        • Cek GitHub • Kesimpulan Pendahuluan Di era pengembangan perangkat lunak yang serba cepat, efisiensi dan produktivitas menjadi kunci utama. Salah satu terobosan terbaru yang mendukung hal ini adalah GitHub Copilot, sebuah kecerdasan buatan (AI) yang dirancang untuk membantu programmer menulis kode dengan lebih cepat dan cerdas langsung di dalam Visual Studio Code (VSCode). Copilot AI mampu memberikan saran otomatis, menyusun fungsi secara utuh, hingga menjawab pertanyaan teknis melalui fitur percakapan, menjadikannya asisten coding yang sangat berguna terutama bagi pemula. Panduan ini ditujukan bagi siapa saja yang baru mengenal Copilot dan ingin mengetahui cara mengintegrasikannya ke dalam alur kerja di VSCode. Mulai dari instalasi, penggunaan dasar, hingga tips memaksimalkan potensinya, panduan ini akan membantu Anda memulai perjalanan coding dengan dukungan AI secara lebih percaya diri dan terarah. Menyamakan Persepsi Sebelum melangkah lebih jauh, mari kita samakan pemahaman dan asumsi dasar agar panduan ini bisa langsung tepat sasaran. Panduan ini ditujukan bagi kita yang sudah berada pada tahap awal penggunaan Copilot AI dan familiar dengan beberapa teknologi berikut: 1. Sudah Download Extention Copilot AI di dalam VSCode Extention Copilot in VSCode Kita harus sudah memasang ekstensi GitHub Copilot di Visual Studio Code dan mungkin sudah mencoba melihat saran otomatis yang muncul saat mengetik. Jika kita belum mengunduh ekstensi GitHub Copilot, silakan ikuti langkah-langkah berikut untuk memasangnya di Visual Studio Code: Buka VSCode di komputer kita.Klik ikon Extensions di sidebar kiri (atau tekan Ctrl + Shift + X).Pada kolom pencarian di bagian atas, ketik: GitHub Copilot.Pilih ekstensi bernama GitHub Copilot (resmi dari GitHub).Klik tombol Install.Setelah terpasang, kita akan diminta untuk login ke akun GitHub. Ikuti proses otentikasi hingga selesai.Setelah login, Copilot akan aktif dan siap memberikan saran otomatis saat kita mulai mengetik kode. Jika ekstensi sudah terpasang, kita bisa langsung melihat Copilot memberikan saran secara otomatis di editor baik berupa potongan kode kecil maupun fungsi yang lengkap berdasarkan konteks baris yang sedang kita tulis. Panduan ini akan langsung membahas cara menggunakan Copilot secara efektif, jadi pastikan ekstensi sudah aktif sebelum lanjut ke bagian berikutnya. 2. Sedikit Paham Tailwind CSS Kita tidak harus mahir, tetapi setidaknya sudah pernah menggunakan kelas-kelas seperti flex, mt-4, atau bg-blue-500 di proyek web. Hal ini akan sangat membantu karena Copilot bisa memberikan saran yang relevan untuk struktur HTML + Tailwind CSS yang lebih efisien dan bersih. 3. Sedikit Paham Github & Git Minimal kita sudah tahu cara push & pull kode dari GitHub, membuat repository baru, dan memahami perbedaan antara lokal dan remote repo. Ini penting karena Copilot sangat terintegrasi dengan GitHub, termasuk saat bekerja di project berbasis kolaborasi. 4. Terbiasa Menggunakan VSCode Kita sudah menjadikan VSCode sebagai editor utama, tahu cara membuat file baru, membuka folder proyek, dan menggunakan terminal bawaan. Dengan familiaritas ini, kita akan lebih cepat memahami interaksi Copilot di dalam VSCode, baik melalui inline suggestion maupun fitur chat-nya. Yang Kalian Dapatkan Setelah Membaca ✅ Paham AI Copilot ✅ Bisa Praktek AI Copilot ✅ Menulis Code Lebih Cepat ✅ Bisa Deploy Hanya dengan AI ✅ Paham Kapan Harus Manual / Otomatis Dll Keahlian Copilot AI VSCode 1. Saran Kode Otomatis Recomendation From Copilot AI Saat kita mengetik kode, Copilot secara otomatis memberikan saran dalam bentuk potongan kode atau bahkan satu fungsi lengkap yang sesuai dengan konteks. Misalnya, saat kita mulai menulis function, Copilot bisa langsung menyarankan isi dari fungsi tersebut berdasarkan pola yang umum atau yang sudah kita tulis sebelumnya. Ini bisa mempercepat proses coding dan membantu kita menghindari kesalahan kecil. 2. Bisa Mengubah, Membaca, Menalar Banyak File dalam 1 Proyek Reading More Than 1 File Copilot tidak hanya fokus pada satu file yang sedang kita buka. Ia bisa membaca dan memahami struktur proyek secara keseluruhan mulai dari banyak file, dependensi, hingga pola yang digunakan. Dengan kemampuan ini, Copilot bisa menyesuaikan saran berdasarkan konteks seluruh proyek yang sedang kita kerjakan, bukan hanya potongan kode lokal. 3. Copilot Chat Copilot Ask Fitur Copilot Chat memungkinkan kita berinteraksi langsung dengan Copilot layaknya berdiskusi dengan rekan kerja. Kita bisa menanyakan maksud dari sebuah kode, meminta penjelasan baris demi baris, bahkan meminta Copilot untuk memperbaiki atau menyempurnakan bagian tertentu dari kode kita. Ini sangat membantu saat kita sedang belajar atau ketika menemui kendala logika dalam proyek. 4. Dukungan Model AI AI Models Copilot kini didukung oleh model AI yang lebih canggih seperti GPT-4 (bagi pengguna Copilot Pro). Model ini memungkinkan Copilot memahami instruksi yang lebih kompleks, menjawab pertanyaan teknis secara lebih akurat, dan menghasilkan saran yang lebih relevan. Dengan dukungan ini, kita bisa mengandalkan Copilot tidak hanya untuk menyelesaikan kode, tapi juga untuk eksplorasi ide, debugging, hingga dokumentasi. Yang Perlu di Perhatikan Agar Bisa Tanya AI Lebih Efektif 1. Punya Ide Sebelum kita bertanya atau meminta bantuan ke Copilot, sebaiknya kita sudah punya gambaran dasar tentang apa yang ingin kita buat. AI bekerja lebih baik jika diberi arah. Misalnya, daripada hanya menulis "buatkan kode", lebih baik kita menyampaikan, "buatkan fungsi JavaScript untuk menghitung total belanja dengan diskon". Semakin jelas ide yang kita punya, semakin tepat bantuan yang diberikan Copilot. 2. Bisa Riview Kita tetap perlu meninjau ulang semua saran yang diberikan oleh Copilot. Meskipun AI bisa sangat membantu, tidak semua hasilnya langsung bisa kita terima mentah-mentah. Dengan kemampuan review yang baik, kita bisa menyaring apakah kode tersebut aman, efisien, dan sesuai dengan gaya proyek yang sedang kita bangun. 3. Berusaha Tidak Lepas Kendali Saat kita mulai terbiasa dengan bantuan Copilot, kadang kita tergoda untuk menyerahkan semuanya ke AI. Namun, penting untuk tetap mengontrol alur kerja kita sendiri. Jangan sampai kita hanya jadi penonton dari kode yang ditulis Copilot. Kita tetap harus aktif mengarahkan, memeriksa, dan memahami setiap baris yang dihasilkan. 4. Anggap Sebagai Asisten Kita Kita perlu memposisikan Copilot sebagai asisten, bukan pengganti. Copilot sangat cerdas, tapi tetap butuh arahan dari kita. Kita yang bertanggung jawab atas hasil akhir dari kode yang ditulis, jadi interaksi kita dengan Copilot sebaiknya seperti kerja tim kita memimpin, dan Copilot membantu. Mulai Challenge Proyek ( BuildWithAngga Online Course ) Perintah Awal kita memberikan instruksi yang jelas kepada AI agar dapat menghasilkan output sesuai dengan yang kita butuhkan seperti berikut : First Command Selanjutnya, kita mengklik tombol Continue pada gambar di bawah ini untuk memulai proses generate : Generating Process Proses ini akan menghasilkan Konfigurasi awal Tailwind CSS. Error Ternyata kita mengalami error pada generatenya maka saat terjadi error, Copilot secara otomatis memperbaikinya seperti berikut: AI Auto Debug Selanjutnya di jalan terjadi masalah yaitu AI berhenti tidak merespon dalam waktu yang cukup lama seperti berikut : AI Not Response Sehingga kita perlu sentuhan manual juga. Perbaiki Manual kita melakukan perbaikan secara manual dengan menghapus seluruh folder terlebih dahulu, kemudian menjalankan perintah berikut untuk mengubahnya menjadi CDN agar proses lebih mudah: Manual Repair kita menyetujui bagian yang berwarna hijau karena sudah kita tinjau dan pastikan kebenarannya. Mulai Akses Hasil Selanjutnya, kita membuka hasil generate AI tersebut di browser dengan cara Open In Default Browser ( Extention VSCode jadi perlu Install ) untuk melihat kualitasnya seperti berikut: Top Results Bottom Results Deploy Otomatis Selanjutnya, kita langsung meminta bantuan untuk melakukan deploy ke GitHub guna menguji apakah AI juga mampu melakukannya seperti berikut : Automated Deployment Process Error Terdapat perintah yang gagal, kemudian AI secara otomatis mencari solusi dengan memisahkannya seperti contoh berikut: Have Error Karena AI membutuhkan waktu loading yang lama dan terkesan tidak merespons, kita mengulangi perintah yang sama, dan hasilnya adalah sebagai berikut: AI Response Takes Too Long Ternyata proses loading yang tidak kunjung selesai disebabkan karena kita perlu membuat repository di GitHub terlebih dahulu. Bikin Repo Maka perlu bikin repo baru Github: Create a Repo Push With AI Setelah itu, kita menguji apakah perintah remote saja sudah cukup, yaitu dengan menggunakan perintah berikut: (git remote add origin https://……). Seperti gambar di bawah ini : Push With AI Ternyata copilot mampu push sendiri tanpa kita push manual. Results From Push Improve Semantic Untuk mendukung struktur semantik, kita juga ingin menggunakan elemen <section> dalam HTML kita. Oleh karena itu, perintah yang kita berikan adalah sebagai berikut: Improving maka hasilnya : Results From Improving Review Setelah kita melakukan review, kita menyetujui perubahan dengan mengklik centang pada bagian yang memiliki latar belakang berwarna hijau. Namun, ternyata masih terdapat jumlah tag yang terlalu banyak, terlalu sedikit, atau penempatan tag yang tidak tepat (dalam hal ini, kita tidak mengetahui secara pasti letak kesalahannya). Oleh karena itu, kita meminta AI untuk melakukan debug, dan hasilnya adalah sebagai berikut: Review Code Improving AI berhasil menemukan Error dan memperbaikinya sendiri. Hasil Akhir Saat ini, kode telah diperbaiki dan disempurnakan oleh AI. Berikut hasilnya: The final result Push Lagi Kita memberikan perintah kepada AI untuk melakukan push ulang ke GitHub, seperti ditunjukkan pada gambar berikut: Push Again Cek GitHub Selanjutnya, kita memeriksa di GitHub untuk memastikan apakah proyek sudah berhasil masuk, seperti ditunjukkan pada gambar berikut: My Github Respository Kesimpulan GitHub Copilot merupakan inovasi AI yang dirancang untuk meningkatkan efisiensi dan produktivitas dalam menulis kode di VSCode, terutama bagi pemula. Panduan ini hadir untuk membantu pengguna baru memahami cara menggunakan Copilot, mulai dari instalasi hingga praktik penggunaannya, agar dapat memulai proses coding dengan lebih percaya diri dan terstruktur.

Daftar Isi PendahuluanBenefit Setelah Membaca Artikel IniApa Itu Mobile-First?Kenapa Mobile-First Lebih Baik?Tailwind CSS: Mobile-First by DefaultCara Kerja Responsive di Tailwind CSSPrefix Breakpoint Bawaan TailwindCara Menggunakan PrefixContoh Responsive Text dan LayoutImplementasi Tampilan Mobile Pada Desain Mahouse AppStandar Umum Industri WebTailwind Menggunakan Pendekatan Mobile-FirstKonvensi Tailwind CSS (Bisa Diubah Jika Mau)KesimpulanContoh Kode untuk Mahouse AppPenjelasanPenutupApa Langkah Selanjutnya? Pendahuluan Di era digital seperti sekarang, pengguna mengakses website dari berbagai perangkat mulai dari smartphone, tablet, hingga layar desktop beresolusi tinggi. Karena itu, membuat tampilan yang responsive atau bisa menyesuaikan dengan ukuran layar adalah hal wajib dalam pengembangan web modern. Namun, menerapkan responsive design sering kali dianggap rumit karena harus menulis banyak media query secara manual. Di sinilah Tailwind CSS hadir sebagai solusi yang elegan dan efisien. Dengan pendekatan mobile-first dan utility class yang fleksibel, Tailwind memungkinkan kita untuk membangun tampilan web yang responsif tanpa repot mengatur media query satu per satu. Cukup gunakan class dengan prefix tertentu, dan tampilan akan langsung menyesuaikan ukuran layar. Artikel ini akan membahas secara lengkap cara kerja responsive design di Tailwind CSS, mulai dari konsep mobile-first hingga contoh penerapannya dalam proyek nyata semuanya tanpa ribet! Benefit Setelah Membaca Artikel Ini Setelah membaca artikel ini, kamu akan: Memahami konsep mobile-first design dan kenapa itu penting.Mengetahui cara kerja breakpoint dan utility class responsive di Tailwind CSS.Bisa menerapkan responsive design tanpa menulis media query manual.Mendapat contoh nyata yang bisa langsung kamu praktikkan di proyek HTML kamu.Lebih percaya diri membangun website yang tampil bagus di semua ukuran layar. Apa Itu Mobile-First? Mobile-first adalah pendekatan desain dan pengembangan website yang dimulai dari layar terkecil (smartphone) terlebih dahulu, lalu dikembangkan untuk ukuran layar yang lebih besar seperti tablet dan desktop. Alih-alih membuat desain desktop dulu lalu menyusutkannya untuk mobile, mobile-first memastikan bahwa pengalaman pengguna utama di perangkat mobile mendapat prioritas. Ini penting karena mayoritas pengguna internet saat ini mengakses website lewat ponsel. Kenapa Mobile-First Lebih Baik? Beberapa alasan kenapa mobile-first jadi pendekatan yang direkomendasikan: Lebih ringan & cepat dimuat karena hanya memuat elemen-elemen penting terlebih dahulu.Fokus pada konten inti, bukan hiasan.Lebih fleksibel untuk ditingkatkan ke layar besar daripada menyesuaikan ke layar kecil.SEO dan user experience lebih baik, karena Google juga mengutamakan mobile experience. Tailwind CSS: Mobile-First by Default Tailwind CSS sudah dirancang dengan prinsip mobile-first. Artinya, utility class yang tidak memiliki prefix breakpoint akan berlaku untuk semua ukuran layar secara default (yaitu mulai dari mobile). Jika ingin mengatur gaya khusus untuk layar lebih besar, kamu tinggal menambahkan prefix seperti sm:, md:, lg:, dan seterusnya. Contoh sederhana: <p class="text-base md:text-lg lg:text-xl"> Ini teks responsive. </p> text-base: berlaku untuk semua ukuran (default/mobile).md:text-lg: berlaku mulai dari ukuran medium (768px).lg:text-xl: berlaku mulai dari ukuran large (1024px). Cara Kerja Responsive di Tailwind CSS Tailwind CSS menggunakan pendekatan mobile-first dalam sistem responsive-nya. Artinya, gaya default (tanpa prefix) berlaku untuk semua perangkat, khususnya perangkat dengan layar kecil seperti smartphone. Untuk menyesuaikan gaya pada layar yang lebih besar, kamu tinggal menambahkan prefix breakpoint yang sudah disediakan. Prefix Breakpoint Bawaan Tailwind Tailwind menyediakan beberapa breakpoint standar yang dapat kamu pakai untuk mengatur gaya sesuai ukuran layar: PrefixNama BreakpointUkuran Minimum Layar (px)sm:Small640md:Medium768lg:Large1024xl:Extra Large12802xl:2x Extra Large1536 Cara Menggunakan Prefix Jika kamu ingin mengubah gaya elemen pada layar yang lebih besar, cukup tambahkan prefix di depan utility class Tailwind. Contoh: <div class="bg-red-500 p-4 sm:bg-green-500 md:bg-blue-500"> Kotak ini berubah warna berdasarkan ukuran layar. </div> Di layar mobile (default), background merah.Pada layar kecil ke atas (sm:), background hijau.Pada layar medium ke atas (md:), background biru. Hasil: Tampilan mobile Tampilan layar kecil ke atas Tampilan layar medium ke atas Contoh Responsive Text dan Layout <h1 class="text-lg md:text-3xl lg:text-5xl font-bold"> Judul Responsive dengan Tailwind </h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="bg-gray-200 p-4">Item 1</div> <div class="bg-gray-300 p-4">Item 2</div> <div class="bg-gray-400 p-4">Item 3</div> <div class="bg-gray-500 p-4">Item 4</div> </div> Judul Responsive: <h1 class="text-lg md:text-3xl lg:text-5xl font-bold"> Judul Responsive dengan Tailwind </h1> Baris ini menampilkan judul <h1> yang ukuran font-nya berubah sesuai ukuran layar: text-lg: Ukuran teks besar untuk layar mobile (default).md:text-3xl: Saat lebar layar 768px ke atas, ukuran teks berubah jadi 3xl.lg:text-5xl: Saat lebar layar 1024px ke atas, teks makin besar jadi 5xl.font-bold: Membuat teks menjadi tebal. 💡 Ini contoh klasik mobile-first: kita mendesain untuk mobile dulu, lalu naikkan skalanya di breakpoint lebih besar. Layout Grid Responsive <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> Ini adalah container grid yang memiliki jumlah kolom berbeda tergantung ukuran layar: grid: Mengaktifkan layout grid.grid-cols-1: Di layar kecil, grid hanya punya 1 kolom.md:grid-cols-2: Di layar medium (≥768px), grid jadi 2 kolom.lg:grid-cols-4: Di layar besar (≥1024px), grid jadi 4 kolom.gap-4: Memberi jarak antar kolom/baris sebesar 1rem. Item dalam Grid <div class="bg-gray-200 p-4">Item 1</div> <div class="bg-gray-300 p-4">Item 2</div> <div class="bg-gray-400 p-4">Item 3</div> <div class="bg-gray-500 p-4">Item 4</div> Keempat elemen ini merupakan isi dari grid: bg-gray-*: Memberi warna latar berbeda untuk tiap item.p-4: Menambahkan padding ke dalam kotak sebanyak 1rem (16px). Hasil Akhir Di mobile: semua item tersusun vertikal (1 kolom).Di tablet: jadi 2 kolom.Di desktop: jadi 4 kolom.Teks judul juga semakin besar sesuai ukuran layar. Hasil: Tampilan mobile Tampilan tablet Tampilan Desktop Implementasi Tampilan Mobile Pada Desain Mahouse App Sekarang kita akan coba menerapkan tampilan mobile pada desain Mahouse App dari shaynakit.com, kalian bisa unduh templatenya di sini. Untuk mengatur tampilan mobile kita perlu mengatur lebar maksimal yaitu 640px. Tampilan Home Mahouse App Dark Mode Ukuran maksimal untuk mobile ditetapkan di 640px karena: Standar Umum Industri Web Mayoritas framework CSS dan panduan responsive design (termasuk Bootstrap, Foundation, dan Material Design) menganggap ≤640px sebagai rentang tipikal lebar layar smartphone. Contoh perangkat:iPhone SE (375px)Galaxy S22 (360px)Pixel 7 (412px) Ukuran layar smartphone modern rata-rata berkisar antara 320px hingga 430px. Jadi, batas 640px aman mencakup semua smartphone. Tailwind Menggunakan Pendekatan Mobile-First Tailwind mendesain breakpoints dengan prinsip: 💡 Semua gaya default berlaku untuk mobile (di bawah sm:)Gunakan sm:, md:, dst. untuk menyesuaikan tampilan di layar yang lebih besar. Jadi: text-base → tampil di semua layar.sm:text-lg → hanya tampil mulai dari 640px ke atas (bukan di bawah). Itu artinya, semua layar ≤639px dianggap mobile, dan mulai dari 640px dianggap "small screen" atau lebih besar dari mobile. Konvensi Tailwind CSS (Bisa Diubah Jika Mau) Default breakpoints Tailwind: BreakpointUkuran MinimalDigunakan untuk...sm640pxTablet kecil / layar kecilmd768pxTablet landscape / netbooklg1024pxDesktopxl1280pxDesktop lebar / monitor besar2xl1536px4K monitor, TV, dll Kesimpulan Ukuran 640px dipilih sebagai batas awal breakpoint sm karena: Masuk akal untuk batas atas perangkat mobile.Mengikuti standar industri.Memberi pengalaman responsive mobile-first yang solid. Contoh Kode untuk Mahouse App <body class="bg-background pb-[144px] font-poppins pt-[30px] text-foreground mx-auto w-full max-w-[640px] min-h-screen overflow-x-hidden"> ... </body> Penjelasan Kelas TailwindPenjelasanbg-backgroundMengatur warna latar belakang. Ini biasanya menggunakan warna dari custom theme (misal dari plugin atau config Tailwind).pb-[144px]Memberikan padding bawah sebesar 144px (biasanya untuk memberi ruang agar tidak tertutup elemen tetap seperti footer).font-poppinsMengatur jenis font menjadi Poppins. Font ini harus sudah diimpor via CSS atau Google Fonts.pt-[30px]Memberi padding atas sebesar 30px, biasanya untuk jarak dari atas layar.text-foregroundMengatur warna teks utama, sering digunakan dari custom theme Tailwind (seperti dark mode atau UI kit tertentu).mx-autoMengatur margin kiri dan kanan otomatis, membuat <body> terpusat secara horizontal.w-fullMembuat elemen memiliki lebar penuh dari container induknya.max-w-[640px]Membatasi lebar maksimum hingga 640px (biasanya untuk menjaga agar konten tidak terlalu lebar dan tetap nyaman dibaca di layar besar).min-h-screenMengatur tinggi minimum menjadi 100% tinggi layar (viewport height), memastikan body setidaknya sepanjang layar.overflow-x-hiddenMenyembunyikan scroll horizontal, mencegah konten yang terlalu lebar menyebabkan scroll samping. Penutup Membangun tampilan yang responsive kini tidak perlu ribet lagi. Dengan pendekatan mobile-first yang diterapkan Tailwind CSS, kamu bisa fokus mendesain dari ukuran layar terkecil terlebih dahulu, lalu menyesuaikan tampilan di layar yang lebih besar hanya dengan menambahkan prefix seperti sm:, md:, lg:, dan seterusnya. Tanpa perlu menulis media query manual, kamu bisa menciptakan layout yang fleksibel, ringan, dan mudah dibaca—langsung dari HTML. Ini bukan hanya mempercepat workflow, tapi juga menjaga konsistensi desain di berbagai ukuran layar. Apa Langkah Selanjutnya? Sekarang saatnya kamu: Eksperimen dengan breakpoint Tailwind di proyekmu.Coba buat layout grid dan typography yang adaptif.Atau mulai refactor kode CSS lamamu jadi lebih efisien dengan Tailwind. Dan yang paling penting: jangan takut mencoba! Responsive design bukan hal rumit jika kamu menggunakan alat yang tepat dan Tailwind CSS sudah membuktikannya.

Daftar Isi PendahuluanBenefit Setelah MembacaApa Itu Hover Effect?Hover Effects SederhanaUbah Warna Teks dan Latar BelakangPenjelasan:Ubah Skala atau Rotasi ElemenPenjelasan:Hover Effects MenengahMenggunakan group untuk Hover Anak ElemenPenjelasan:Shadow dan Border TransitionPenjelasan:Hover Effects KompleksKombinasi Layering + TransformPenjelasan:Implementasi Pada Proyek Mahouse AppEfek Hover Pada Search FormPenjelasan:Efek Interaktif yang Terjadi:Efek Hover Pada KategoriPenjelasan:Efek Interaktif:Tips & Best PracticesPenutup Pendahuluan Hover effect adalah salah satu elemen penting dalam desain antarmuka modern. Efek ini bukan hanya sekadar mempercantik tampilan, tetapi juga memberikan feedback visual yang membuat pengalaman pengguna terasa lebih interaktif dan responsif. Di era pengembangan web yang serba cepat, kita butuh solusi yang fleksibel dan efisien dan di sinilah Tailwind CSS v4 hadir sebagai game changer. Dengan utilitas barunya, Tailwind CSS memungkinkan kita membuat hover effects yang tidak hanya sederhana, tapi juga kompleks dan menarik, tanpa harus menulis CSS dari nol. Di artikel ini, kita akan menjelajahi berbagai contoh hover effects, mulai dari yang paling basic hingga yang advanced, menggunakan Tailwind CSS v4. Benefit Setelah Membaca Setelah membaca artikel ini, kamu akan mendapatkan beberapa manfaat langsung yang bisa diterapkan ke dalam proyek kamu, antara lain: Memahami Konsep Hover Effect dengan Tailwind Kamu jadi lebih paham bagaimana cara kerja efek hover di Tailwind CSS dan bagaimana mengaplikasikannya dengan efisien. Menguasai Utility Class Populer untuk Hover Kamu terbiasa menggunakan class penting seperti transition-all, duration-300, group-hover, ring, focus-within, dan lainnya yang sangat berguna dalam menciptakan efek interaktif. Mampu Menciptakan UI yang Interaktif dan Responsif Dengan menggabungkan beberapa efek, kamu bisa membuat antarmuka yang lebih menarik tanpa perlu menulis CSS tambahan. Siap Menerapkan Hover Effect pada Komponen Nyata Dari tombol, form input, hingga kartu dan slider — kamu kini punya referensi dan pola praktis untuk diterapkan langsung ke dalam desain UI/UX proyek kamu. Lebih Percaya Diri Mengeksplorasi Tailwind CSS v4 Kamu siap mencoba fitur-fitur baru di Tailwind CSS v4, termasuk animasi, masking, dan efek visual lainnya, dengan pendekatan yang lebih sistematis. Apa Itu Hover Effect? Secara sederhana, hover effect adalah perubahan visual yang terjadi saat kursor pengguna berada di atas suatu elemen biasanya tombol, gambar, atau kartu. Efek ini bisa berupa perubahan warna, ukuran, bayangan, rotasi, atau bahkan animasi yang lebih kompleks. Hover effect punya peran penting dalam meningkatkan interaksi pengguna. Misalnya, saat pengguna mengarahkan kursor ke tombol dan warnanya berubah, itu memberi sinyal bahwa tombol tersebut bisa diklik. Efek ini terlihat simpel, tapi secara psikologis membantu pengguna merasa lebih “terhubung” dengan antarmuka. Contoh paling umum dari hover effect adalah: Tombol yang berubah warna saat disentuh.Gambar yang sedikit membesar saat diarahkan kursor.Kartu produk yang menampilkan informasi tambahan saat di-hover. Dengan kata lain, hover effect adalah cara mudah dan cepat untuk membuat website terasa lebih hidup dan responsif tanpa harus menambahkan logika JavaScript yang rumit. Tailwind CSS v4 memungkinkan kita membuat semua efek ini hanya dengan utility class yang bersih dan mudah dibaca. Hover Effects Sederhana Ubah Warna Teks dan Latar Belakang <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Hover Saya </button> Penjelasan: bg-blue-500: Memberikan latar belakang biru (tingkat kecerahan 500).hover:bg-blue-700: Saat kursor diarahkan, warna latar berubah menjadi biru yang lebih gelap (700).text-white: Warna teks menjadi putih.font-bold: Membuat teks lebih tebal.py-2 px-4: Padding vertikal 2 dan horizontal 4 (jarak dalam tombol).rounded: Membuat sudut tombol menjadi melengkung (rounded default). Efek: Saat kursor diarahkan ke tombol, latar belakang tombol akan berubah warna dari biru terang ke biru gelap. Ubah Skala atau Rotasi Elemen <div class="hover:scale-105 transition-transform duration-300"> Konten saya </div> Penjelasan: hover:scale-105: Saat di-hover, elemen akan membesar sedikit (105% dari ukuran asli).transition-transform: Mengaktifkan transisi halus untuk properti transform.duration-300: Lama transisi adalah 300 milidetik. Efek: Saat elemen disentuh kursor, ukurannya membesar sedikit dengan efek animasi yang halus. Hover Effects Menengah Menggunakan group untuk Hover Anak Elemen <div class="group"> <img src="gambar.jpg" alt="Gambar" /> <p class="opacity-0 group-hover:opacity-100 transition"> Deskripsi yang muncul saat di-hover </p> </div> Penjelasan: group: Menandai elemen induk sebagai sebuah grup. Ini diperlukan agar anak-anaknya bisa merespons hover dari induknya.opacity-0: Teks <p> awalnya disembunyikan dengan membuat opasitas 0 (transparan).group-hover:opacity-100: Saat elemen induk (div.group) di-hover, teks akan muncul (opasitas jadi 100).transition: Memberi efek transisi halus saat opasitas berubah. Efek: Ketika pengguna mengarahkan kursor ke seluruh kotak (div), teks deskripsi yang tersembunyi akan muncul dengan animasi halus. Shadow dan Border Transition <div class="p-4 border border-gray-300 rounded hover:shadow-xl hover:border-blue-500 transition-all duration-300"> Konten Card </div> Penjelasan: p-4: Padding ke dalam sebesar 1rem (jarak isi konten dari tepi elemen).border border-gray-300: Menambahkan border abu-abu tipis di sekeliling elemen.rounded: Sudut elemen membulat.hover:shadow-xl: Saat di-hover, elemen menampilkan bayangan besar (shadow ekstra).hover:border-blue-500: Saat di-hover, border berubah warna menjadi biru cerah.transition-all: Mengaktifkan animasi untuk semua properti CSS yang bisa berubah.duration-300: Durasi transisi selama 300ms. Efek: Saat pengguna mengarahkan kursor, elemen akan terlihat "terangkat" dengan bayangan besar dan garis pinggir (border) berubah warna, memberikan kesan interaktif. Hover Effects Kompleks Kombinasi Layering + Transform <div class="relative overflow-hidden group"> <img src="gambar.jpg" alt="Gambar" class="transition-transform duration-500 group-hover:scale-110" /> <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> </div> Penjelasan: relative: Elemen pembungkus dibuat relatif agar anak dengan posisi absolute bisa menempel berdasarkan elemen ini.overflow-hidden: Memastikan elemen yang membesar (seperti gambar saat di-hover) tidak meluber ke luar.group: Digunakan agar anak elemen bisa merespon hover dari elemen induk. Elemen <img>: transition-transform duration-500: Mengatur efek transisi pada transformasi (dalam hal ini skala) selama 500ms.group-hover:scale-110: Saat induk di-hover, gambar membesar 110%. Elemen <div> overlay: absolute inset-0: Menjadikan div ini melapisi seluruh area induknya.bg-black bg-opacity-50: Warna hitam transparan (sebagai overlay).opacity-0: Awalnya tak terlihat.group-hover:opacity-100: Muncul saat di-hover.transition-opacity duration-500: Transisi halus pada perubahan opasitas. Efek: Saat pengguna mengarahkan kursor, gambar akan membesar, dan overlay gelap akan muncul dari atasnya. Cocok untuk kartu gambar yang ingin memberi highlight atau preview interaktif. Implementasi Pada Proyek Mahouse App Sekarang kita akan coba implentasi efek hover pada desain Mahouse App dari shaynakit.com, kalian bisa unduh templatenya di sini. Efek Hover Pada Search Form Search form normal Search form ketika hover Kode: <!-- Search Input --> <form class="group flex items-center gap-4 mt-[30px] bg-accent rounded-full px-5 mx-6 py-3.5 transition-all duration-300 focus-within:ring focus-within:ring-foreground hover:ring hover:ring-foreground" > <img src="./assets/images/icons/search-normal.svg" class="h-6 w-6 shrink-0" /> <input class="w-full placeholder-secondary text-[16px] group-hover:outline-none focus:outline-none" placeholder="Search by city or agent" /> </form> Penjelasan: Elemen <form> (Container Utama): <form class="group flex items-center gap-4 mt-[30px] bg-accent rounded-full px-5 mx-6 py-3.5 transition-all duration-300 focus-within:ring focus-within:ring-foreground hover:ring hover:ring-foreground"> group: Menandai elemen ini sebagai grup agar elemen anak (input) bisa merespons hover dari parent.flex items-center: Mengatur isi form horizontal & center secara vertikal.gap-4: Memberi jarak antar elemen (icon dan input).mt-[30px]: Margin atas 30px (nilai kustom).bg-accent: Warna latar belakang, biasanya didefinisikan dalam config Tailwind.rounded-full: Sudut elemen dibulatkan total (seperti kapsul).px-5 py-3.5: Padding horizontal 1.25rem & vertical 0.875rem.mx-6: Margin kiri-kanan 1.5rem.transition-all duration-300: Transisi halus selama 300ms untuk semua properti yang bisa dianimasikan.focus-within:ring focus-within:ring-foreground: Menambahkan efek ring (seperti border glow) saat salah satu anak (misalnya input) sedang fokus.hover:ring hover:ring-foreground: Menambahkan efek ring saat form di-hover. Elemen <img> (Ikon Search): <img src="./assets/images/icons/search-normal.svg" class="h-6 w-6 shrink-0" /> src: Gambar ikon pencarian.h-6 w-6: Ukuran ikon 1.5rem × 1.5rem.shrink-0: Mencegah ikon mengecil saat ruang terbatas. Elemen <input> (Kolom Input): <input class="w-full placeholder-secondary text-[16px] group-hover:outline-none focus:outline-none" placeholder="Search by city or agent" /> w-full: Input mengambil lebar penuh dari ruang tersisa.placeholder-secondary: Warna teks placeholder (biasanya abu-abu muda, tergantung theme).text-[16px]: Ukuran font 16px (kustom, bukan skala Tailwind default).group-hover:outline-none: Menghapus outline bawaan browser saat parent (form) di-hover.focus:outline-none: Menghilangkan outline saat input difokuskan (digantikan dengan ring di parent). Efek Interaktif yang Terjadi: Saat hover, form akan menunjukkan garis ring di sekelilingnya.Saat input difokuskan, efek ring muncul juga (berkat focus-within).Semua efek transisinya halus dan responsif.Input akan tetap bersih tanpa outline bawaan browser. Efek Hover Pada Kategori Efek hover pada kategori Kode: <a href="#" class="swiper-slide group max-w-[130px]"> <div class="flex flex-col gap-4 items-center justify-center py-5 bg-accent rounded-[16px] w-[130px] transition-all duration-300 group-hover:ring group-hover:ring-foreground"> <div class="w-[60px] h-[60px] bg-primary rounded-full flex items-center justify-center shrink-0"> <img src="./assets/images/icons/building-4.svg" /> </div> <div class="text-center"> <h3 class="font-semibold text-[16px]">City</h3> <p class="text-secondary text-[14px]">829 house</p> </div> </div> </a> Penjelasan: Elemen <a> : <a href="#" class="swiper-slide group max-w-[130px]"> a: Elemen anchor sebagai kontainer klik (bisa diarahkan ke halaman daftar properti berdasarkan kota).swiper-slide: Kelas dari Swiper.js yang menunjukkan bahwa ini adalah satu slide.group: Menandai elemen ini sebagai parent group, agar elemen anak bisa merespons event hover dari sini.max-w-[130px]: Batas maksimal lebar 130px agar tampilan seragam dalam slider. Elemen <div> (Isi Kartu): <div class="flex flex-col gap-4 items-center justify-center py-5 bg-accent rounded-[16px] w-[130px] transition-all duration-300 group-hover:ring group-hover:ring-foreground"> flex flex-col: Susun elemen secara vertikal.gap-4: Jarak antar elemen (ikon dan teks) sebesar 1rem.items-center justify-center: Pusatkan elemen secara horizontal dan vertikal.py-5: Padding atas dan bawah.bg-accent: Warna latar belakang khusus, didefinisikan di Tailwind config (biasanya netral terang).rounded-[16px]: Border-radius khusus sebesar 16px.w-[130px]: Lebar tetap agar sejajar dengan max-w sebelumnya.transition-all duration-300: Transisi animasi halus selama 300ms.group-hover:ring group-hover:ring-foreground: Saat kartu di-hover, akan muncul efek ring (glow) di sekitar border dengan warna teks aktif (foreground). Ikon kategori: <div class="w-[60px] h-[60px] bg-primary rounded-full flex items-center justify-center shrink-0"> <img src="./assets/images/icons/building-4.svg" /> </div> w-[60px] h-[60px]: Ukuran ikon bulat 60px × 60px.bg-primary: Warna latar ikon (biasanya warna utama branding).rounded-full: Membuat ikon jadi bulat.flex items-center justify-center: Posisi gambar tepat di tengah.shrink-0: Mencegah elemen mengecil saat ruang sempit. Teks dan Jumlah Rumah: <div class="text-center"> <h3 class="font-semibold text-[16px]">City</h3> <p class="text-secondary text-[14px]">829 house</p> </div> text-center: Rata tengah untuk teks di bawah ikon.h3: Nama kategori.font-semibold: Tebal sedang.text-[16px]: Ukuran font 16px.p: Info jumlah rumah.text-secondary: Warna abu-abu sekunder untuk teks informasi.text-[14px]: Ukuran lebih kecil. Efek Interaktif: Hover: Saat pengguna mengarahkan kursor ke salah satu kartu:Muncul efek ring (seperti glow border) pada keseluruhan kartu.Transisi efek dilakukan secara halus.Responsif: Karena ini digunakan dalam slider (swiper-slide), bisa disesuaikan tampilannya di berbagai ukuran layar. Tips & Best Practices Efek hover bisa membuat tampilan UI menjadi lebih menarik, tetapi perlu digunakan secara bijak agar tidak mengganggu pengalaman pengguna. Berikut beberapa tips yang bisa kamu terapkan: Jangan terlalu berlebihan dalam efek. Gunakan efek hover seperlunya. Terlalu banyak animasi atau transisi bisa membuat tampilan terlihat berantakan dan mengurangi fokus pengguna. Prioritaskan performa dan aksesibilitas. Efek visual yang kompleks bisa memengaruhi performa, terutama pada perangkat dengan spesifikasi rendah. Pastikan juga elemen-elemen penting dapat diakses menggunakan keyboard dengan menambahkan focus, focus-visible, atau focus-within. Gunakan efek yang sesuai konteks. Hover effect sebaiknya mendukung tujuan elemen. Misalnya, tombol aksi utama boleh memiliki efek mencolok, sedangkan elemen navigasi cukup dengan efek sederhana agar tidak mengganggu hierarki visual. Penutup Dalam artikel ini, kita telah membahas berbagai jenis hover effects menggunakan Tailwind CSS v4 mulai dari efek yang sederhana seperti perubahan warna, bayangan, dan transisi, hingga yang lebih kompleks seperti masking. Tailwind CSS v4 memberikan keleluasaan untuk membuat interaksi yang menarik dengan tetap mempertahankan kinerja dan konsistensi desain. Kamu hanya perlu menggabungkan beberapa utility class, tanpa menulis CSS tambahan. Sekarang saatnya kamu mencoba sendiri. Eksplorasi lebih dalam, sesuaikan efek sesuai kebutuhan UI/UX proyekmu, dan jangan takut bereksperimen!

Daftar Isi PendahuluanApa Itu Swiper.js?Kelebihan SwiperPersiapan AwalCara Install SwiperPakai CDNPakai NPMStruktur HTML Dasar untuk Swiper ScrollImplementasi Swiper Scroll HorizontalContoh Swiper Scroll HorizontalImplementasi Swiper Scroll VertikalContoh Swiper Scroll VertikalTroubleshooting UmumPenutup Pendahuluan Pernah lihat slider di website yang bisa digeser ke kanan atau ke bawah dengan mulus banget? Nah, itu biasanya dibuat pakai Swiper.js sebuah library JavaScript yang ringan tapi powerful untuk bikin slider modern. Swiper ini bukan cuma responsif, tapi juga bisa di-scroll pakai mouse, sentuhan jari, atau bahkan trackpad. Di artikel ini, kita akan bahas dari nol gimana cara menggunakan Swiper Scroll, baik horizontal maupun vertikal, lengkap dengan scrollbar, efek transisi, dan pastinya responsif untuk semua perangkat. Apa Itu Swiper.js? Swiper.js adalah library open-source yang biasa dipakai buat bikin slider (carousel) yang cepat, ringan, dan sangat fleksibel. Dibuat oleh Vladimir Kharlampidi, Swiper dirancang untuk aplikasi mobile dan web modern. Kelebihan Swiper Support touch gesture (drag pakai jari)Super ringan & cepatBisa diintegrasikan dengan React, Vue, dan SvelteBanyak efek transisi keren (fade, cube, coverflow, dll) Banyak website dan aplikasi populer udah pakai Swiper, dari situs e-commerce, landing page startup, sampai platform media sosial. Persiapan Awal Sebelum mulai, pastikan kamu punya alat berikut: Text editor (contoh: VS Code)Browser modern (Chrome, Firefox, Safari)Koneksi internet (kalau pakai CDN) Cara Install Swiper Pakai CDN: Paste swiper css berikut sebelum tag penutup </head> <!-- Swiper CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> Lalu tambahkan swiper js berikut sebelum tag penutup </body> <!-- Swiper JS --> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> Sehingga struktur HTML akan seperti ini: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swiper Scroll untuk Pemula: Cara Bikin Slider Keren di Website</title> <!-- Swiper CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> </head> <body> <!-- Swiper JS --> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> </body> </html> Pakai NPM: npm install swiper Lalu import di file JavaScript kamu: import Swiper from 'swiper'; import 'swiper/css'; Struktur HTML Dasar untuk Swiper Scroll Untuk mulai pakai Swiper, kamu butuh struktur HTML seperti ini: <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-scrollbar"></div> </div> swiper: container utamaswiper-wrapper: pembungkus semua slideswiper-slide: masing-masing slideswiper-scrollbar: untuk scrollbar opsional Implementasi Swiper Scroll Horizontal Ini dia konfigurasi dasar buat scroll horizontal: const swiper = new Swiper('.swiper', { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true, }); Dengan konfigurasi ini, slider bisa digeser pakai mouse atau sentuhan secara bebas, seperti scroll biasa. Cocok banget buat galeri gambar atau daftar produk. Contoh Swiper Scroll Horizontal Ini kode lengkap untuk swiper scroll horizontal: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Swiper Scroll Horizontal</title> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> <style> body { font-family: sans-serif; padding: 2rem; } .swiper { width: 100%; height: 200px; margin-top: 20px; } .swiper-slide { background: #2447f9; color: white; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; width: 300px; border-radius: 10px; } </style> </head> <body> <h1>Swiper Scroll Horizontal</h1> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <div class="swiper-scrollbar"></div> </div> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> <script> const swiper = new Swiper(".swiper", { direction: "horizontal", slidesPerView: "auto", spaceBetween: 16, freeMode: true, scrollbar: { el: ".swiper-scrollbar", }, mousewheel: true, }); </script> </body> </html> Hasilnya: Result Swiper Scroll Horizontal Implementasi Swiper Scroll Vertikal Cukup ubah properti direction: 'vertical' dan tambahkan height untuk slide: <style> .swiper { width: 100%; height: 500px; } .swiper-slide { height: 300px; } </style> <script> const swiper = new Swiper('.swiper', { direction: 'vertical', slidesPerView: 'auto', freeMode: true, scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true, }); </script> Contoh Swiper Scroll Vertikal Ini kode lengkap untuk swiper scroll vertikal: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Swiper Scroll Vertikal</title> <!-- Swiper CSS --> <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" /> <style> body { font-family: sans-serif; padding: 2rem; margin: 0; } .swiper { width: 100%; height: 500px; } .swiper-slide { background-color: #2447f9; color: white; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; height: 150px; border-radius: 10px; margin-bottom: 16px; } .swiper-scrollbar { background-color: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-drag { background-color: #0ea5e9; } </style> </head> <body> <h1>Swiper Scroll Vertikal</h1> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Konten 1</div> <div class="swiper-slide">Konten 2</div> <div class="swiper-slide">Konten 3</div> <div class="swiper-slide">Konten 4</div> <div class="swiper-slide">Konten 5</div> <div class="swiper-slide">Konten 6</div> <div class="swiper-slide">Konten 7</div> </div> <div class="swiper-scrollbar"></div> </div> <!-- Swiper JS --> <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script> <script> const swiper = new Swiper(".swiper", { direction: "vertical", slidesPerView: "auto", spaceBetween: 16, freeMode: true, mousewheel: true, scrollbar: { el: ".swiper-scrollbar", }, }); </script> </body> </html> Hasilnya: Result Swiper Scroll Vertikal Troubleshooting Umum Swiper tidak muncul: Cek HTML & CSS sudah benar.Scroll tidak jalan: Pastikan mousewheel: true.Slide tumpang tindih: Tambahkan spaceBetween. Penutup Swiper Scroll itu gampang dipakai dan hasilnya keren. Mau bikin slider gambar, konten, video, atau galeri Swiper bisa semuanya. Tinggal atur arah scroll dan sedikit styling, website kamu langsung tampil lebih profesional. Swiper Scroll bisa bikin tampilan website kamu lebih hidup dan interaktif. Dengan setup yang mudah dan dokumentasi lengkap, kamu bisa bikin berbagai jenis slider tanpa pusing. Selamat mencoba!

Daftar Isi PendahuluanApa Itu Struktur HTML?Tag Pembuka dan PenutupAtribut dalam Tag HTMLMengenal Elemen Teks: Paragraf, Judul, dan Tag SemantikTag <p> untuk ParagrafTag <h1> sampai <h6> untuk JudulPenggunaan Semantic Tag dalam Struktur HTMLMembedakan Tombol dan LinkTag <a> untuk LinkTag <button> untuk TombolPerbedaan UtamaTips Penulisan HTML yang BaikKesalahan Umum yang Perlu DihindariTips Lanjutan untuk SEO dan AksesibilitasGunakan Heading Secara Berurutan dan BermaknaGunakan Atribut alt pada GambarGunakan Atribut aria-* Saat DiperlukanTingkatkan Navigasi dengan Landmark Tag SemantikGunakan Link dengan Teks yang JelasPastikan Tombol dan Link Bisa Diakses KeyboardGunakan Lang di Tag <html>Optimalkan Struktur URL dan Meta TagGunakan Kontras Warna yang CukupUji Halaman dengan Lighthouse dan Screen ReaderPenutup Pendahuluan HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat struktur halaman web. Bagi siapa pun yang ingin belajar web development, memahami struktur HTML adalah langkah awal yang wajib dikuasai. Tanpa pemahaman yang benar tentang elemen-elemen HTML seperti tombol (button), tautan (link), paragraf (paragraph), dan judul (heading), sebuah halaman web bisa jadi tidak terstruktur dengan baik dan sulit dipahami baik oleh pengguna maupun mesin pencari. Dalam panduan ini, kita akan membahas secara lengkap dan jelas perbedaan serta fungsi dari elemen-elemen dasar HTML tersebut. Kamu akan belajar bagaimana cara menulis tag HTML dengan benar, kapan harus menggunakan link dibanding tombol, serta bagaimana menyusun konten menggunakan paragraf dan judul yang sesuai. Dengan memahami struktur HTML yang baik, kamu akan lebih siap membangun website yang terorganisir, ramah pengguna, dan SEO-friendly. Apa Itu Struktur HTML? Struktur HTML adalah susunan elemen-elemen yang membentuk kerangka dasar sebuah halaman web. HTML tidak bekerja sendiri, tapi berperan penting dalam menentukan apa yang ditampilkan di halaman dan bagaimana informasi tersebut disusun secara logis. Setiap halaman HTML terdiri dari elemen-elemen yang ditandai dengan tag. Contohnya adalah <p> untuk paragraf, <a> untuk link, <button> untuk tombol, dan <h1> sampai <h6> untuk judul. Elemen-elemen ini bekerja bersama untuk membentuk struktur konten yang mudah dibaca oleh pengguna dan mudah dipahami oleh mesin pencari (SEO-friendly). Dalam struktur HTML, ada dua hal penting yang perlu dipahami: Tag Pembuka dan Penutup Sebagian besar elemen HTML menggunakan tag pembuka dan tag penutup. Misalnya: <p>Ini adalah paragraf.</p> <p> adalah tag pembuka</p> adalah tag penutupIsi di antara keduanya adalah konten yang akan ditampilkan di halaman Atribut dalam Tag HTML Beberapa elemen memiliki atribut untuk memberikan informasi tambahan. Misalnya pada tag <a>: <a href="<https://example.com>">Kunjungi Website</a> href adalah atribut yang menentukan tujuan tautan Struktur HTML yang baik akan membuat halaman web menjadi lebih teratur, mudah diakses, dan memudahkan pengelolaan konten seiring bertambahnya skala proyek. Mengenal Elemen Teks: Paragraf, Judul, dan Tag Semantik Dalam HTML, elemen teks seperti paragraf dan judul digunakan untuk menyusun isi konten agar mudah dibaca dan dipahami. Namun, selain tag-tag dasar tersebut, HTML juga menyediakan semantic tag yang membantu memperjelas makna struktur konten. Hal ini sangat penting untuk meningkatkan aksesibilitas, keterbacaan kode, dan optimasi SEO. Tag <p> untuk Paragraf Tag <p> digunakan untuk menandai sebuah paragraf teks. Setiap gagasan atau pemikiran sebaiknya ditulis dalam satu tag paragraf agar mudah dipahami oleh pembaca dan crawler mesin pencari. Contoh: <p>Belajar HTML adalah langkah awal yang penting dalam dunia pengembangan web.</p> Tag <h1> sampai <h6> untuk Judul Tag heading digunakan untuk memberikan struktur hierarki pada konten. Gunakan tag ini secara berurutan untuk menunjukkan hubungan antara bagian-bagian dalam artikel atau halaman. <h1> → Judul utama (hanya satu kali per halaman)<h2> → Subjudul dari <h1><h3> → Subjudul dari <h2>, dan seterusnya Contoh: <h1>Panduan Belajar HTML</h1> <h2>Struktur Dasar HTML</h2> <h3>Penggunaan Tag Heading</h3> Penggunaan Semantic Tag dalam Struktur HTML Semantic tags adalah elemen HTML5 yang secara eksplisit menjelaskan tujuan dari konten di dalamnya. Ini membuat struktur halaman lebih bermakna dan lebih mudah dipahami oleh mesin pencari dan teknologi bantu seperti screen reader. Beberapa contoh semantic tag yang umum digunakan: <header> – bagian atas halaman atau bagian tertentu (biasanya berisi logo atau navigasi)<nav> – navigasi utama atau internal<main> – konten utama dari halaman<section> – bagian dari konten yang memiliki tema tertentu<article> – konten yang berdiri sendiri seperti postingan blog<aside> – informasi tambahan (sidebar, catatan, iklan)<footer> – bagian bawah halaman atau bagian tertentu (biasanya berisi informasi kontak, hak cipta, dll.) Contoh penggunaan semantic tag: <main> <article> <header> <h1>Belajar HTML Dasar</h1> </header> <section> <h2>Apa Itu Paragraf?</h2> <p>Paragraf digunakan untuk menyusun teks menjadi bagian yang mudah dibaca.</p> </section> <section> <h2>Mengenal Tag Heading</h2> <p>Tag heading memberikan struktur dan hierarki pada konten halaman.</p> </section> </article> </main> Dengan menggunakan tag semantik, kode HTML kamu akan menjadi lebih terstruktur, profesional, dan ramah SEO. Membedakan Tombol dan Link Dalam HTML, tombol dan link sering digunakan untuk tujuan berbeda meskipun terkadang tampilannya mirip. Penting untuk memahami perbedaan fungsi keduanya agar halaman web bekerja dengan benar dan mudah diakses. Tag <a> untuk Link Tag <a> adalah elemen yang digunakan untuk membuat tautan (link) ke halaman lain, bagian lain dari halaman yang sama, atau sumber eksternal. Contoh: <a href="<https://example.com>" target="_blank" rel="noopener noreferrer">Kunjungi Website</a> href menentukan alamat tujuan linktarget="_blank" membuka link di tab barurel="noopener noreferrer" meningkatkan keamanan saat membuka tab baru Tag <button> untuk Tombol Tag <button> digunakan untuk membuat tombol interaktif yang biasanya digunakan untuk mengirim form, memicu event JavaScript, atau aksi lain dalam halaman web. Contoh: <button type="submit">Kirim</button> Perbedaan Utama Aspek<a> (Link)<button> (Tombol)FungsiNavigasi ke halaman/sumber lainInteraksi dalam halaman (submit, aksi)Tag SemantikLink, navigasiKontrol interaktif/formDapat diklikYa, mengarahkan ke URLYa, menjalankan aksi atau fungsiAtribut pentinghref, targettype, event handler JavaScript Menggunakan elemen yang tepat tidak hanya membuat kode lebih bersih tapi juga membantu SEO dan aksesibilitas. Tips Penulisan HTML yang Baik Gunakan tag sesuai dengan fungsi semantiknya.Susun tag heading secara berurutan, jangan loncat level heading.Hindari menggunakan <div> untuk segalanya tanpa alasan.Pastikan setiap tag pembuka memiliki tag penutup.Gunakan semantic tag untuk memperjelas struktur halaman. Kesalahan Umum yang Perlu Dihindari Menggunakan tombol untuk navigasi atau link untuk aksi interaktif.Tidak menggunakan heading secara berurutan, seperti langsung dari <h1> ke <h4>.Menulis seluruh teks panjang tanpa membaginya ke dalam paragraf <p>.Mengabaikan penggunaan semantic tag sehingga halaman sulit dipahami mesin pencari dan pengguna berkebutuhan khusus. Tips Lanjutan untuk SEO dan Aksesibilitas Gunakan Heading Secara Berurutan dan Bermakna Pastikan hanya ada satu <h1> per halaman (biasanya judul utama).Gunakan heading secara hierarkis: <h2> untuk subjudul, <h3> untuk sub-subjudul, dan seterusnya.Jangan melompati level (misal dari <h1> langsung ke <h4>), agar pembaca layar dapat memahami struktur dokumen dengan benar. Gunakan Atribut alt pada Gambar Tambahkan alt pada setiap gambar untuk menjelaskan isi gambar bagi pengguna dengan pembaca layar, dan juga membantu SEO image. <img src="/logo.png" alt="Logo Website Belajar HTML"> Hindari menggunakan gambar sebagai satu-satunya informasi penting selalu sediakan teks alternatif. Gunakan Atribut aria-* Saat Diperlukan Atribut aria-label, aria-hidden, dan lainnya bisa membantu menjelaskan elemen interaktif kepada pengguna pembaca layar. Contoh: <button aria-label="Tutup Pop-up"> <svg aria-hidden="true" ... /> </button> Tapi ingat, gunakan semantic tag terlebih dahulu, dan aria hanya jika tidak ada elemen semantik yang sesuai. Tingkatkan Navigasi dengan Landmark Tag Semantik Gunakan tag semantik berikut agar pengguna pembaca layar dapat melompat ke bagian penting dengan cepat: <header> – bagian atas halaman<nav> – navigasi<main> – konten utama<aside> – sidebar/informasi tambahan<footer> – bagian bawah halaman Gunakan Link dengan Teks yang Jelas Hindari menggunakan teks seperti “klik di sini”.Gunakan teks deskriptif yang menjelaskan ke mana link mengarah. <!-- Buruk --> <a href="/artikel">Klik di sini</a> <!-- Baik --> <a href="/artikel">Baca panduan belajar HTML dasar</a> Pastikan Tombol dan Link Bisa Diakses Keyboard Semua elemen interaktif harus bisa diakses dengan keyboard (tekanan tab + enter/space).Jangan gunakan <div> atau <span> sebagai tombol kecuali kamu menambahkan atribut dan event keyboard dengan JavaScript (namun ini bukan praktik terbaik). Gunakan lang di Tag <html> Menentukan bahasa halaman akan membantu mesin pencari dan pembaca layar membaca teks dengan benar: <html lang="id"> Optimalkan Struktur URL dan Meta Tag Gunakan struktur URL yang deskriptif dan mengandung kata kunci.Pastikan setiap halaman memiliki tag <title> dan <meta description> yang unik dan relevan. <title>Panduan Lengkap HTML untuk Pemula</title> <meta name="description" content="Pelajari dasar-dasar HTML mulai dari struktur, paragraf, heading, tombol, link, dan semantic tag untuk SEO."> Gunakan Kontras Warna yang Cukup Pastikan teks memiliki kontras warna yang memadai dengan latar belakang.Gunakan tools seperti Coolors Contrast Checker untuk mengecek. Uji Halaman dengan Lighthouse dan Screen Reader Gunakan Lighthouse (di Chrome DevTools) untuk mengaudit SEO dan aksesibilitas.Cobalah screen reader seperti NVDA (Windows), VoiceOver (Mac), atau TalkBack (Android) untuk menguji pengalaman pengguna difabel. Penutup Memahami struktur HTML adalah langkah awal yang sangat penting dalam belajar web development. Dengan mengenal fungsi dan perbedaan antara elemen seperti tombol, link, paragraf, judul, serta penggunaan semantic tag, kamu dapat membuat halaman web yang terstruktur dengan baik, mudah diakses, dan SEO-friendly. Mulailah praktik menulis HTML sederhana dengan mengaplikasikan pengetahuan ini, dan terus kembangkan kemampuanmu dengan belajar CSS dan JavaScript untuk membuat website yang lebih interaktif dan menarik.

Daftar Isi Benefit Setelah BacaPastikan Tailwind Sudah TerpasangInstall Tailwind CSSTambahin Warna CustomKustomisasi LainnyaKesimpulan Buat kamu yang sering ngoding tampilan (alias slicing) pakai Tailwind CSS, pasti udah tau betapa enaknya pake utility class kayak text-red-500, bg-blue-200, dan semacamnya. Tapi kadang, desain dari Figma atau brand yang kita garap punya warna-warna khusus yang nggak ada di bawaan Tailwind. Nah, daripada tiap kali nulis text-["#00008B"] , bg-["#00008B"] atau nyari warna manual, mending sekalian tambahin aja ke konfigurasi Tailwind-nya. Jadi kita bisa pake class kayak text-dark_blue, bg-dark_blue, dan lain-lain. Gampang kok! Benefit Setelah Baca ✅ Mudah Menambahkan Class Warna Kustom✅ Lebih Efisien✅ Konsisten Desain✅ Mempersingkat Waktu Slicing Pastikan Tailwind Sudah Terpasang Buat kamu yang baru mulai, ini cara paling simple buat setup Tailwind: 1. Install Tailwind CSS Buka Terminal terus ketik : npm install tailwindcss @tailwindcss/cli Ini bakal install Tailwind CSS dan CLI-nya biar kamu bisa compile file CSS dari class Tailwind. 2. Import Tailwind CSS Jangan lupa buat folder src dulu baru bikin file CSS misalnya input.css, terus isi dengan ini : /* src/input.css */ @import "tailwindcss"; Ini gunanya buat masukin semua base class Tailwind ke file kamu. 3. Jalankan Build Tailwind Ketik perintah ini di terminal: npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch Artinya: kamu compile dari input.css jadi output.css, dan --watch bikin dia update otomatis kalau ada perubahan class. 4. Tambahin CSS-nya ke HTML Sekarang tinggal hubungkan file CSS yang udah jadi (output.css) ke HTML kamu: <!-- src/index.html --> <!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 world! </h1> </body> </html> Done! Tailwind-nya udah siap kamu pakai! Tambahin Warna Custom Misalnya kamu punya warna branding #00008B (biru gelap) dan pengen pakai dia di project-mu. Di Tailwind 4, kamu cukup buka file input.css dan tambahkan: @theme { --color-dark_blue: #00008B; --color-primary: #83D987; } Tailwind otomatis bikin class-class berikut: text-dark_bluebg-dark_blueborder-dark_bluering-dark_bluedan lainnya Jadi kamu tinggal panggil aja class-nya di HTML: <h1 class="text-dark_blue">BuildWithAngga</h1> <button class="bg-primary text-white py-2 px-4"> Tombol </button> Hasil : Result Custom Color Kustomisasi Lainnya Sama juga caranya. Misalnya kamu pengen bikin ukuran teks extra-giant tinggal tambahkan: @theme { --text-extra_giant: 200px; } Nanti bisa langsung kamu pakai: <h1 class="text-dark_blue text-extra_giant">BuildWithAngga</h1> Hasil : Result Custom Text Size Kesimpulan Tailwind CSS 4 bikin kustomisasi jadi lebih gampang, lebih cepat, dan lebih ringan. Kalau kamu suka styling yang ringkas dan fleksibel, Tailwind 4 ini cocok banget buat kamu. Slicing jadi lebih lancar, nggak banyak mikir, tinggal gas!

Daftar Isi Latar BelakangPendahuluanPersiapan AwalKustomisasi TailwindCSS v4Menentukan Font FamilyMenentukan Warna, Background, Foreground dan PrimaryKenapa Menggunakan @theme Bukan :root?Kenapa Masih Tetap Menggunakan :root?Penutup Latar Belakang TailwindCSS v4 hadir dengan berbagai peningkatan performa dan fitur baru yang membuat pengembangan antarmuka semakin cepat dan efisien. Namun, bagi pemula maupun web developer yang baru mengenal Tailwind, melakukan kustomisasi bisa terasa membingungkan. Padahal, kemampuan untuk menyesuaikan konfigurasi seperti warna, font, breakpoint, hingga utility classes sangat penting agar tampilan website sesuai dengan kebutuhan desain. Dalam panduan ini, kamu akan belajar langkah demi langkah bagaimana cara melakukan customize TailwindCSS v4 secara efektif, mulai dari dasar hingga tips praktis yang bisa langsung diterapkan dalam proyek webmu. Pendahuluan TailwindCSS adalah utility-first CSS framework yang semakin populer di kalangan web developer karena fleksibilitas dan kecepatannya dalam membangun antarmuka. Dengan pendekatan kelas-kelas siap pakai (utility classes), kamu bisa membuat desain yang konsisten dan efisien tanpa harus menulis banyak CSS manual. Pada versi terbarunya, TailwindCSS v4 membawa peningkatan performa dan arsitektur yang lebih modern, menjadikannya pilihan utama untuk banyak proyek web. Namun, agar hasil akhirnya sesuai dengan kebutuhan desain suatu produk, kamu perlu memahami bagaimana cara melakukan customize konfigurasi Tailwind. Mulai dari mengganti warna default, menambahkan font sendiri, hingga menyesuaikan ukuran dan breakpoint. Proses ini sangat penting terutama bagi pemula dan front-end developer yang ingin membuat sistem desain yang konsisten, skalabel, dan mudah di-maintain. Dalam artikel ini, kamu akan mempelajari langkah demi langkah cara melakukan kustomisasi TailwindCSS v4 dengan cara yang mudah dipahami, bahkan jika kamu belum pernah menyentuh file konfigurasi sebelumnya. Persiapan Awal Sebelum mulai melakukan kustomisasi TailwindCSS v4, pastikan kamu sudah memiliki proyek HTML yang telah terinstal TailwindCSS v4 dengan benar. Jika belum, kamu bisa mengikuti panduan lengkap kami melalui artikel Cara Install dan Setup TailwindCSS v4 untuk Proyek HTML, CSS, dan JavaScript. Artikel tersebut akan membantumu memahami setiap langkah instalasi agar tidak ada bagian penting yang terlewat. Berikut adalah beberapa hal yang perlu dipersiapkan sebelum melanjutkan: Proyek HTML yang sudah menggunakan TailwindCSS v4Desain Figma, pada artikel ini kita menggunakan desain Pricing Pro dari shaynakit.comCode editor seperti Visual Studio Code (VSCode) atau sejenisnyaNode.js versi 22 atau yang lebih baru Kustomisasi TailwindCSS v4 Pada artikel ini, kita akan belajar bagaimana melakukan kustomisasi TailwindCSS v4 menggunakan theme variables. Mengapa menggunakan theme variables? Karena pendekatan ini membuat kode lebih mudah untuk dipelihara dan membantu menjaga konsistensi tampilan di seluruh proyek. Menentukan Font Family Buka file Figma, kemudian pilih teks yang ingin diketauh jenis font nya. Lalu lihat pada sidebar kanan bagian Typography, seperti pada gambar di bawah ini. Pricing Pro - Text Dari gambar tersebut kita tahu jenis font yang dipakai adalah Poppins. Sekarang kita akan tambahkan font Poppins di TailwindCSS. Buka file input.css lalu tambahkan kode berikut di paling atas. @import url("<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>"); Jika sudah sekarang kita tambahkan kustom font dengan cara tambahkan kode berikut: @theme inline { --font-poppins: "Poppins", sans-serif; } Kemudian kita terapkan font dengan kode berikut: @layer base { body { @apply font-poppins; } } File input.css secara keseluruhan akan terlihat seperti ini: @import url("<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>"); @import "tailwindcss"; @theme inline { --font-poppins: "Poppins", sans-serif; } @layer base { body { @apply font-poppins; } } Build proyek menggunakan Tailwind CLI dengan perintah berikut: npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch Buka browser maka font akan berubah seperti berikut: Local Result Menentukan Warna, Background, Foreground dan Primary Buka lagi desain figma, lalu pilih Layer utama dan lihat pada sidebar kanan pada bagian Selections colors Pricing Pro - Colors Kita akan gunakan #FFFFFF sebagai background, #0A0815 sebagai foreground, dan #EB7145 sebagai primary. Buka file input.css lalu tambahkan kode berikut: :root { --background: #ffffff; --foreground: #0a0815; --primary: #eb7145; } Edit bagian @theme inline {} sehingga menjadi seperti berikut ini: @theme inline { --font-poppins: "Poppins", sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); } Untuk menerapkan warna yang sudah kita kustom, edit pada bagian @layer base {} menjadi seperti berikut ini: @layer base { body { @apply font-poppins bg-background text-foreground; } } Buka browser dan lihat perubahannya: Local Result Kenapa Menggunakan @theme Bukan :root? Tailwind menggunakan @theme bukan :root karena variabel tema bukan sekadar CSS variable biasa. Selain menyimpan nilai seperti warna atau ukuran, @theme juga memberi tahu Tailwind untuk membuat utility class baru yang bisa langsung kamu gunakan di HTML. Karena @theme punya fungsi tambahan, Tailwind memakai sintaks khusus agar kamu mendefinisikannya secara eksplisit. Variabel tema juga harus didefinisikan di level atas (tidak boleh di dalam selector lain atau media query). Dengan sintaks khusus ini, Tailwind bisa memastikan kamu mengikuti aturan tersebut dengan benar. Kenapa Masih Tetap Menggunakan :root? Kita tetap menggunakan :root karena jika di kemudian hari ingin menambahkan fitur dark mode, akan lebih mudah untuk mendefinisikan variabel-variabelnya di sana. Penutup Dengan memahami cara melakukan kustomisasi TailwindCSS v4, kamu tidak hanya bisa membuat tampilan website yang sesuai dengan kebutuhan, tapi juga membangun sistem desain yang konsisten dan mudah dimaintain. Mulai dari mengatur warna, font, hingga membuat utility class sendiri — semua itu bisa dilakukan dengan lebih fleksibel berkat pendekatan terbaru di versi ini. Semoga panduan ini bisa jadi langkah awal yang solid bagi kamu, baik sebagai pemula maupun front-end developer, untuk semakin mahir menggunakan TailwindCSS dalam proyek nyata.