Tips Frontend Development

Daftar Isi PendahuluanDummy Code (Free)MulaiBuat Proyek ReactStep 1Step 2Step 3Step 4FocusAmbil KodenyaCovert Ke React Pake WebsiteData ReactTypes (TypeScript)Download LibrarySetelah Semua di Atas Bisa di Tulis GiniSwiperPengkondisianPerulanganLinkRupiah (Bonus)Hasil Akhir Semua Tutorial KitaPenutup Pendahuluan Kalau kamu lgi pegang file HTML dan mulai mikir, “Gimana ya caranya ngeubah ini jadi komponen React pakai TypeScript?” tenang, kamu ada di tempat yang tepat. Di sini, kita bakal bongkar bareng gimana cara nyulap HTML biasa jadi struktur React yang rapi dan reusable. Gak cuma itu, kamu juga bakal dapet kodenya secara gratis, tinggal ubah dan sesuaikan. Kita bakal bahas gimana data bisa ditampilkan, dan gimana cara ngelola data yang berulang biar gak bikin kepala cenat-cenut. Siap? Yuk mulai! Dummy Code (Free) Di tutorial kali ini, kita bakal sru-seruan bareng ngebedah proyek keren dari Shaynakit. Kabar baiknya: ini 100% gratis, bro! Dan yang makin mantep, kodenya udah siap tempur. Jadi lo nggak perlu mulai dari nol, tinggal colok, modif dikit, langsung jalan. Nggak ribet, nggak bikin kening berkerut, pokoknya ngoding jadi fun banget! Shaynakit ini tuh kayak buffet buat front-end developer tinggal pilih desain yang lo suka, semua udah sepaket sama kodenya. Ada versi gratis, ada juga yang premium. Tapi santai, yang gratis pun udah cukup loyal kok. Biasanya yang dibatesin cuma jumlah halaman aja. Nah, kalau yang premium? Itu sih udah kayak pesta coding semua elemen tinggal comot, tinggal pakai, beres! Sekarang masuk ke inti dari semuanya: gimana cara dapetin template gratisnya. Gampang banget, nggak perlu mantra khusus. Cukup ikutin langkah-langkah ini: Buka situs utamanya di sini: https://shaynakit.com/landing.Klik menu Register atau langsung aja meluncur ke https://shaynakit.com/register buat daftar akun dulu.Setelah berhasil daftar dan login, buka halaman template yang mau dipakai di sini: https://shaynakit.com/details/mahouse-real-estate-html-tailwind-css-template.Klik tombol Download, lalu pilih opsi Free Trial.Lanjut klik Start Today buat mulai akses gratisnya.Setelah itu, balik lagi ke halaman template tadi dan klik tombol Download sekali lagi.File-nya bakal langsung keunduh dalam format .zip.Simpan file .zip itu ke folder lokal kamu, misalnya ke: ./source-code/mahouse.zip. Udah, beres. Sekarang kamu punya satu paket desain + kode yang siap kamu eksplor. Tinggal buka, utak-atik, terus bawa ke proyek kamu. Mulai Buat Proyek React 1. Buat Folder Pertama-tama, bikin dulu folder baru sbagai tempat project-nya. Setelah itu, buka terminal di dalam folder itu, lalu ketik perintah ini: npm create vite@latest Sampai hasilnya nanti kira-kira bakal keliatan kayak gini: 2. Jalankan Proyeknya cd .\\mahouse-buildwithangga npm install npm run dev 3. Akses Browser 4. Buat Filenya Step 1 Sekarang kita geser dulu ke proyek gratisan dari shaynakit.com. Di sini kita bakal mulai utak-atik kode dari proyek mahouse yang udh kamu download. Pastikan file-nya udah kamu extract all, terus udah kamu buka juga di VSCode. Intinya, sebelum lanjut, pastiin dulu tampilan awalnya udah kayak gini: Nah, ini dia halaman utama VSCode ibaratnya kayak meja kerja kamu. Semua alat, catatan, dan bahan buat ngoding ada di sini. Di sinilah tempat kamu mulai ngerakit proyeknya pelan-pelan, satu baris kode demi satu ide. Step 2 Sekarang kita masuk ke file package.json ibaratnya ini kayak daftar belanjaan atau peta jalan buat project kamu. Nah, di dalamnya, kamu tinggal isi bagian ini: "dependencies": { ...... ...... "@tailwindcss/vite": "^4.1.4", "tailwindcss": "^4.1.4", ...... ...... }, ekarang buka file vite.config.ts anggap aja ini kayak remote control yang nge-set gimana proyek kamu jalan. Isi file ini dengan kode berikut: import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import tailwindcss from '@tailwindcss/vite' // <https://vite.dev/config/> export default defineConfig({ plugins: [react(), tailwindcss(),], }) Selanjutnya, di terminal kamu tinggal jalankan perintah ini buat mulai ngejalanin proyeknya: npm install npm install itu ibarat kamu lagi masuk ke toko alat tempur buat ngoding, terus bilang, "Bro, aku butuh senjata ini buat proyek aku!" Nah, begitu kamu ketik npm install, si npm (singkatan dari Node Package Manager) bakal lngsung ngedownload semua alat-alat (alias package/library) yang dibutuhin sama proyek kamu. Biasanya perintah ini dijalanin pertama kali setelah kamu ngedownload proyek orang dari GitHub atau nyalin template. Soalnya, di situ biasanya cuma ada daftar alat-alat yang dibutuhin (di file package.json), tapi barangnya belum ada. Jadi, npm install tuh yang bakal ngambilin semuanya dari gudang dan naro di folder node_modules. Hasil akhirnya? Kamu bakal dapet folder node_modules yang isinya semua tools yang proyek kamu butuhin biar bisa jalan dengan mulus. Bisa dibilang ini tuh kayak ngisi ulang amunisi sebelum perang di medan coding. Hasil: Step 3 Selanjutnya, tinggal kamu ketik dan jalanin perintah ini di terminal: npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch Perintah npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch itu intinya kamu nyuruh Tailwind buat ambil CSS mentah lalu diolah jadi CSS siap pakai, terus dipantau terus kalau ada perubahan. Lalu akses Proyeknya ke Browser kalian. Hasil: Step 4 Abis itu, klik tombol “Explore Houses”, nanti kamu bakal langsung diarahkan ke halaman ini: Ini tuh tampilan buat mobile, alias layar kcil dengan lebar maksimal 640px. Kalau ukurannya udah lewat dari 640px, itu udah masuk ke wilayah tablet atau desktop. Jadi, intinya: di bawah 640px = mobile, di atas itu = tablet dan desktop. Focus Sekarang, kita fokus ke bagian ini ya, kita bakal ngulik dan kerja bareng di bagian Category. Ambil Kodenya File-nya bisa kamu temukan di sini: <http://127.0.0.1:3000/src/home.html> Nah, ini dia kode yang buat nampilin gambar dari path tadi: <!-- Categories Section --> <section class="relative w-full overflow-hidden"> <div class="swiper !px-6"> <div class="swiper-wrapper py-5"> <!-- City --> <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> <!-- Nature --> <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/tree.svg" /> </div> <div class="text-center"> <h3 class="font-semibold text-[16px]">Nature</h3> <p class="text-secondary text-[14px]">54,293 house</p> </div> </div> </a> <!-- Apartment --> <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/3dcube.svg" /> </div> <div class="text-center"> <h3 class="font-semibold text-[16px]">Apartment</h3> <p class="text-secondary text-[14px]">221 house</p> </div> </div> </a> </div> </div> </section> Covert Ke React Pake Website Step-stepnya : Yuk, buka link ini: <https://transform.tools/html-to-jsx> Paste kode-nya persis seperti gambar di atas ya (gambar itu hasil dari kode yang tadi kamu paste).Klik tombol “Copy” yang berwrna biru di pojok kanan atas, ya!Lalu, paste kode-nya ke proyek React kamu, kira-kira bakal jadi seperti ini: Data React Bayangin kamu dapet data dari Back End Engineer, bentuknya kayak gini nih. Entah kamu liatnya di Postman, atau di tools lain yang biasa kamu pakai buat cek data. [ { id: 1, name: "City", slug: "city", photo: "<https://cakfan.github.io/mahouse-dark-mobile/assets/images/icons/building-4.svg>", staycations_count: 3, staycations: [ { id: 101, name: "Sunset Paradise Villa", location: "Bali, Indonesia", price: 1200000, image: "<https://example.com/images/staycations/villa1.jpg>", }, { id: 102, name: "Ocean Breeze Resort", location: "Lombok, Indonesia", price: 950000, image: "<https://example.com/images/staycations/resort1.jpg>", }, { id: 103, name: "Coral View Inn", location: "Raja Ampat, Indonesia", price: 1500000, image: "<https://example.com/images/staycations/inn1.jpg>", }, ], popular_staycations: [ { id: 103, name: "Coral View Inn", location: "Raja Ampat, Indonesia", price: 1500000, image: "<https://example.com/images/staycations/inn1.jpg>", }, { id: 101, name: "Sunset Paradise Villa", location: "Bali, Indonesia", price: 1200000, image: "<https://example.com/images/staycations/villa1.jpg>", }, ], }, { id: 2, name: "Nature", slug: "nature", photo: "<https://cakfan.github.io/mahouse-dark-mobile/assets/images/icons/tree.svg>", staycations_count: 3, staycations: [ { id: 101, name: "Sunset Paradise Villa", location: "Bali, Indonesia", price: 1200000, image: "<https://example.com/images/staycations/villa1.jpg>", }, { id: 102, name: "Ocean Breeze Resort", location: "Lombok, Indonesia", price: 950000, image: "<https://example.com/images/staycations/resort1.jpg>", }, { id: 103, name: "Coral View Inn", location: "Raja Ampat, Indonesia", price: 1500000, image: "<https://example.com/images/staycations/inn1.jpg>", }, ], popular_staycations: [ { id: 103, name: "Coral View Inn", location: "Raja Ampat, Indonesia", price: 1500000, image: "<https://example.com/images/staycations/inn1.jpg>", }, { id: 101, name: "Sunset Paradise Villa", location: "Bali, Indonesia", price: 1200000, image: "<https://example.com/images/staycations/villa1.jpg>", }, ], }, { id: 3, name: "Apartment", slug: "apartment", photo: "<https://cakfan.github.io/mahouse-dark-mobile/assets/images/icons/3dcube.svg>", staycations_count: 3, staycations: [ { id: 101, name: "Sunset Paradise Villa", location: "Bali, Indonesia", price: 1200000, image: "<https://example.com/images/staycations/villa1.jpg>", }, { id: 102, name: "Ocean Breeze Resort", location: "Lombok, Indonesia", price: 950000, image: "<https://example.com/images/staycations/resort1.jpg>", }, { id: 103, name: "Coral View Inn", location: "Raja Ampat, Indonesia", price: 1500000, image: "<https://example.com/images/staycations/inn1.jpg>", }, ], popular_staycations: [ { id: 103, name: "Coral View Inn", location: "Raja Ampat, Indonesia", price: 1500000, image: "<https://example.com/images/staycations/inn1.jpg>", }, { id: 101, name: "Sunset Paradise Villa", location: "Bali, Indonesia", price: 1200000, image: "<https://example.com/images/staycations/villa1.jpg>", }, ], }, ]; Pathnya: Ambil URL path dari hasil Get Data itu, terus simpan di file .env kamu, kira-kira seperti ini: # env VITE_REACT_API_URL = <http://127.0.0.1:8000/api> VITE_REACT_API_STORAGE_URL = <http://127.0.0.1:8000/storage> VITE_REACT_API_URL ini isinya alamat lokal buat akses endpoint API React kamu lewat Vite, jadi nanti buat ngambil data dari backend langsung ke sini. VITE_REACT_API_STORAGE_URL ini isinya alamat lokal buat akses folder storage API React kamu lewat Vite, biasanya dipake buat manggil file-file yang disimpen di backend. Types (TypeScript) Kalau kita liat dari data yang dikasih, kira-kira tipe TypeScript-nya bakal jadi kayak gini: // src/types/type.ts export interface Category { id: number; name: string; slug: string; photo: string; staycations_count: number; staycations: Staycations[]; popular_staycations: Staycations[]; } Download Library Lanjut ya, sekarang kita download dulu beberapa kebutuhan. Biasanya sih, walau cuma satu halaman, tetep aja ada beberapa library yang sering dipake biar semuanya enak dijalanin. axios Axios itu ibarat kurir pribadi di proyek React TypeScript kamu. Tugasnya? Bolak-balik nganter data dari frontend ke backend dan sebaliknya. Jadi kamu tinggal bilang, “Eh, ambilin data dari API ini dong,” dan si Axios langsung gerak ambilinnya buat kamu rapih, cepat, dan bisa diatur sesuai maumu. Cocok banget buat bikin komunikasi antar sistem jadi lancar tanpa ribet. Perintahin di terminal React kamu gini: npm install axios // src/services/apiServices.ts import axios from 'axios'; const BASE_URL = import.meta.env.VITE_REACT_API_URL; const apiClient = axios.create({ baseURL: BASE_URL, }); // Export axios.isAxiosError export const isAxiosError = axios.isAxiosError; export default apiClient; Bayangin kamu lagi bangun jalur kirim barang dari toko (frontend) ke gudang (backend). Nah, apiClient ini ibarat mobil pengantar yang udah disiapin jalurnya lewat peta (si VITE_REACT_API_URL). Jadi tiap kali kamu mau kirim atau ambil barang (data), tinggal panggil mobil ini nggak usah repot setel alamatnya tiap kali. Bonusnya, kamu juga dikasih alat buat ngecek kalau ada kecelakaan di jalan: isAxiosError buat tahu itu error dari jalur Axios atau bukan. Praktis banget buat urusan bolak-balik data. // HomePage.tsx import apiClient from "../services/apiServices"; Sekarang masukin aja apiClient itu biar nanti bisa langsung kamu pake di halaman HomePage.tsx, tinggal panggil dan gas ambil datanya. react-router-dom react-router-dom itu kayak GPS-nya aplikasi React kamu. Dia yang ngatur kamu mau pindah ke halaman mana tanpa harus rfresh satu halaman penuh. Jadi pas kamu klik tombol “Profile” atau “Explore”, dia langsung ngarahin ke rute yang bener halus, cepat, dan seamless! Tanpa dia, aplikasi kamu bakal kayak rumah tanpa pintu: semua ada, tapi bingung mau masuk ke mana 😄 Perintahin di terminal React kamu gini: npm i react-router-dom // HomePage.tsx import { Link } from "react-router-dom"; Sekarang masukin aja Link itu biar nanti bisa langsung kamu pake di halaman HomePage.tsx, tinggal panggil dan gas ambil datanya. swiper Swiper itu ibarat rel geser otomatis buat elemen-elemen di halaman kamu kayak galeri foto, daftar produk, atau testimoni. Tinggal kamu kasih "gerbong"-nya (alias item-item yang mau ditampilin), si Swiper yang bantuin geserin dengan mulus. Bisa geser manual, bisa otomatis, bisa juga dikustom sesuka hati. Pokoknya, bikin komponen kamu jadi lebih interaktif dan modern banget! Perintahin di terminal React kamu gini: npm i swiper // HomePage.tsx import { Swiper, SwiperSlide } from "swiper/react"; Sekarang masukin aja swiper itu biar nanti bisa langsung kamu pake di halaman HomePage.tsx, tinggal panggil dan gas ambil datanya. Setelah Semua di Atas Bisa di Tulis Gini // HomePage.tsx import { useEffect, useState } from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import type { Category } from "./types/type"; import apiClient from "../services/apiServices"; import { Link } from "react-router-dom"; // Mengambil data kategori dari API const fetchCategories = async () => { const response = await apiClient.get("/categories"); return response.data.data; }; export default function Homepage() { const [categories, setCategories] = useState<Category[]>([]); const [loadingCategories, setLoadingCategories] = useState(true); const [error, setError] = useState<string | null>(null); // Mengambil data kategori saat komponen pertama kali dimuat useEffect(() => { const fetchCategoriesData = async () => { try { const categoriesData = await fetchCategories(); setCategories(categoriesData); } catch { setError("Failed to load categories"); } finally { setLoadingCategories(false); } }; fetchCategoriesData(); }, []); // Jika masih loading atau ada error, tampilkan pesan loading atau error if (loadingCategories) { return <p>Loading categories...</p>; } if (error) { return <p>Error loading data: {error}</p>; } // Base URL untuk gambar kategori const BASE_URL = import.meta.env.VITE_REACT_API_STORAGE_URL; return ( <section className="relative w-full overflow-hidden"> ... </section> ); } Swiper Pake // HomePage.tsx <section className="relative w-full overflow-hidden"> <div className="swiper !px-6"> <Swiper className="swiper-wrapper py-5" direction="horizontal" spaceBetween={20} slidesPerView="auto" slidesOffsetAfter={20} slidesOffsetBefore={20}> <SwiperSlide className="!w-fit"> {/* City */} <a href="#" className="swiper-slide group max-w-[130px]"> <div className="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 className="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 className="text-center"> <h3 className="font-semibold text-[16px]">City</h3> <p className="text-secondary text-[14px]">829 house</p> </div> </div> </a> </SwiperSlide> <SwiperSlide className="!w-fit"> {/* Nature */} ... </SwiperSlide> <SwiperSlide className="!w-fit"> {/* Apartment */} ... </SwiperSlide> </Swiper> </div> </section> Penjelasan Pertama, kamu perlu pastiin udah install library Swiper di proyek React kamu. Bisa lewat npm install swiper atau yarn add swiper. Setelah itu, import Swiper dan SwiperSlide dari swiper/react, plus kalau mau styling-nya langsung jalan, tambahin juga import CSS-nya import 'swiper/css';. Nah, di dalam komponennya, kamu tinggal bungkus item kamu pake <Swiper> dan tiap konten di dalamnya taruh di <SwiperSlide>. Kamu juga bisa atur properti kayak slidesPerView="auto" biar jumlah slide-nya fleksibel, dan spaceBetween buat jarak antar slide. Jangan lupa slidesOffsetBefore dan slidesOffsetAfter kalau kamu pengn ada padding di kanan-kiri. Kedua, dari sisi HTML dan styling-nya, kamu bisa bungkus Swiper dalam <section> dan <div className="swiper"> buat kontrol layout dan padding. Tiap SwiperSlide kamu bisa atur lebar pakai !w-fit, dan di dalamnya isi komponen custom seperti card kategori—misalnya ikon, nama, dan jumlah rumah. Di contoh ini, pakai kmbinasi Tailwind seperti bg-accent, rounded-[16px], dan group-hover:ring biar animasi hover-nya hidup. Hasil akhirnya adalah tampilan slider kategori yang bisa digeser kanan-kiri dengan tampilan modern, responsif, dan interaktif! Hapus // HomePage.tsx <Swiper className="swiper-wrapper py-5" direction="horizontal" spaceBetween={20} slidesPerView="auto" slidesOffsetAfter={20} slidesOffsetBefore={20}> <SwiperSlide className="!w-fit"> {/* City */} <a href="#" className="swiper-slide group max-w-[130px]"> <div className="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 className="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 className="text-center"> <h3 className="font-semibold text-[16px]">City</h3> <p className="text-secondary text-[14px]">829 house</p> </div> </div> </a> </SwiperSlide> </Swiper> Nah, bagian “Nature” dan “Apartment” ini wajib kamu hapus dulu karena nanti kita bakal buat mereka jadi perulangan pakai React JS biar lebih efisien dan gampang diatur. Jadi, jangan pusing bikin slide satu-satu manual, nanti React yang handle. Pengkondisian Pake // HomePage.tsx {categories.length > 0 ? "SwiperSlide" : "belum ada data category terbaru"} Jadi gini, kalau categories kamu isinya ada lebih dari nol, berarti data kategori udah siap dan langsung kita tampilin pake komponen SwiperSlide biar slider-nya jalan. Tapi, kalau ternyata belum ada data sama sekali, kita kasih pesan santai: “belum ada data category terbaru” supaya user nggak bingung dan tau kalau datanya memang lagi kosong. Gampang, kan? Jadi user dapet info yang jelas, bukan tampilan kosong doang. Lalu“SwiperSlide” nya ubah isinya dengan tag SwiperSlide, hasilnya gini: // HomePage.tsx <Swiper className="swiper-wrapper py-5" direction="horizontal" spaceBetween={20} slidesPerView="auto" slidesOffsetAfter={20} slidesOffsetBefore={20}> {categories.length > 0 ? ( <SwiperSlide className="!w-fit"> {/* City */} <a href="#" className="swiper-slide group max-w-[130px]"> <div className="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 className="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 className="text-center"> <h3 className="font-semibold text-[16px]">City</h3> <p className="text-secondary text-[14px]">829 house</p> </div> </div> </a> </SwiperSlide> ) : ( "belum ada data category terbaru" )} </Swiper> Perulangan Caranya // HomePage.tsx categories.map((category) => ("SwiperSlide kita")) Nah, bayangin kamu punya tumpukan kategori yang pengen ditampilin. Dengan categories.map((category) => ("SwiperSlide kita")), kamu kayak lagi bilang ke React, “Eh, buat dong satu slide buat tiap kategori yang ada!” Jadi, buat setiap item di daftar kategori, React bakal bikin satu SwiperSlide baru yang isiya sesuai sama data kategori itu. Praktis banget, tinggal nambah data aja, langsung muncul slide baru. Nah, supaya bener, tag <SwiperSlide> itu kamu masukin langsung ke dalam fungsi map-nya. Jadi nanti tiap kategori bakal dibungkus oleh <SwiperSlide> secara otomatis. Hasilnya bakal kayak gini: // HomePage.tsx <Swiper className="swiper-wrapper py-5" direction="horizontal" spaceBetween={20} slidesPerView="auto" slidesOffsetAfter={20} slidesOffsetBefore={20}> {categories.length > 0 ? categories.map((category) => ( <SwiperSlide key={category.id} className="!w-fit"> {/* City */} <a href="#" className="swiper-slide group max-w-[130px]"> <div className="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 className="w-[60px] h-[60px] bg-primary rounded-full flex items-center justify-center shrink-0"> <img src={`${BASE_URL}/${category.photo}`} /> </div> <div className="text-center"> <h3 className="font-semibold text-[16px]">{category.name}</h3> <p className="text-secondary text-[14px]">{category.staycations_count} house</p> </div> </div> </a> </SwiperSlide> )) : "belum ada data category terbaru"} </Swiper> Link Pake Selanjutnya, kita perlu ubah linknya jadi kayak gini supaya pas diklik, dia langsung bawa kamu ke halaman yang sesuai dengan kategori itu. Jadi link-nya dinamis, nggak statis lagi bikin pengalaman user makin mulus dan keren. // HomePage.tsx <SwiperSlide key={category.id} className="!w-fit"> {/* City */} <Link to={`/category/${category.slug}`} className="swiper-slide group max-w-[130px]"> <div className="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 className="w-[60px] h-[60px] bg-primary rounded-full flex items-center justify-center shrink-0"> <img src={`${BASE_URL}/${category.photo}`} /> </div> <div className="text-center"> <h3 className="font-semibold text-[16px]">{category.name}</h3> <p className="text-secondary text-[14px]">{category.staycations_count} house</p> </div> </div> </Link> Jadi, di sini kamu pakai tag <Link> dari react-router-dom buat bikin area yang bisa diklik dan langsung bawa user ke halaman kategori tertentu, misalnya /category/city. Jadi bukan cuma tampilan doang, tapi ada navigasi dinamis yang bikin pengalaman browsing lebih lancar tanpa reload halaman. Nah, di dalam <Link> itu ada <img> yang sumber gambarnya (src) kita bikin dinamis juga. Jadi gambarnya diambil dari backend lewat BASE_URL ditambah path foto kategori (category.photo). Ini bikin tiap slide punya gambar unik sesuai kategorinya, jadi slider-nya nggak cuma keren tapi juga informatif. Rupiah (Bonus) Caranya // HomePage.tsx // Format currency to IDR const formatCurrency = (value: number) => { return new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0, }).format(value); }; Fungsi formatCurrency ini tugasnya buat ngerapihin angka jadi format mata uang Indonesia, alias Rupiah. Jadi misalnya kamu punya angka 1500000, nanti bakal diubah jadi Rp1.500.000 yang enak dilihat dan gampang dimengerti. Gak ada desimal, biar tampilannya simpel dan rapi. Kamu tinggal panggil fungsi ini kapan pun mau nampilin harga atau uang di UI biar tampilannya profesional. // HomePage.tsx <strong>{formatCurrency(staycation.price)}</strong> Nah, di bagian ini kamu panggil fungsi formatCurrency buat ngerubah staycation.price jadi format Rupiah yang cakep. Jadi harga staycation-nya gak cuma angka doang, tapi lagsung tampil tebal dan rapi kayak Rp1.500.000 gitu. Hasil Akhir Semua Tutorial Kita Jadi, ini dia hasil akhir proyeknya! Sebenarnya kamu bisa langsung copy-paste kode ini kalau mau, atau kalau kamu lagi ngecek-ngecek, “Eh, udah sama belum ya sama yang aku buat?” tinggal cocok-cocokin aja. Santai, tinggal pakai dan eksplorasi lebih lanjut sesuai kebutuhan kamu. import { useEffect, useState } from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import type { Category } from "./types/type"; import apiClient from "../services/apiServices"; import { Link } from "react-router-dom"; // Mengambil data kategori dari API const fetchCategories = async () => { const response = await apiClient.get("/categories"); return response.data.data; }; export default function Homepage() { const [categories, setCategories] = useState<Category[]>([]); const [loadingCategories, setLoadingCategories] = useState(true); const [error, setError] = useState<string | null>(null); // Mengambil data kategori saat komponen pertama kali dimuat useEffect(() => { const fetchCategoriesData = async () => { try { const categoriesData = await fetchCategories(); setCategories(categoriesData); } catch { setError("Failed to load categories"); } finally { setLoadingCategories(false); } }; fetchCategoriesData(); }, []); // Jika masih loading atau ada error, tampilkan pesan loading atau error if (loadingCategories) { return <p>Loading categories...</p>; } if (error) { return <p>Error loading data: {error}</p>; } // Base URL untuk gambar kategori const BASE_URL = import.meta.env.VITE_REACT_API_STORAGE_URL; return ( <section className="relative w-full overflow-hidden"> <div className="swiper !px-6"> <Swiper className="swiper-wrapper py-5" direction="horizontal" spaceBetween={20} slidesPerView="auto" slidesOffsetAfter={20} slidesOffsetBefore={20}> {categories.length > 0 ? categories.map((category) => ( <SwiperSlide key={category.id} className="!w-fit"> {/* City */} <Link to={`/category/${category.slug}`} className="swiper-slide group max-w-[130px]"> <div className="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 className="w-[60px] h-[60px] bg-primary rounded-full flex items-center justify-center shrink-0"> <img src={`${BASE_URL}/${category.photo}`} /> </div> <div className="text-center"> <h3 className="font-semibold text-[16px]">{category.name}</h3> <p className="text-secondary text-[14px]">{category.staycations_count} house</p> </div> </div> </Link> </SwiperSlide> )) : "belum ada data category terbaru"} </Swiper> </div> </section> ); } Penutup Sip, itu dia semuaya! Semoga langkah-langkahnya jelas dan kamu makin pede buat ngulik React + TypeScript. Kalau ada yng bingung atau pengen tanya-tanya, jangan ragu buat beli kelas premium BuildWithAngga, ya! Selamat ngoding, semoga proyek kamu lancar jaya dan hasilnya keren.

Pendahuluan Buat lo yang sering ngoding front-end, apalagi pake Tailwind CSS, pasti udah nggak asing lagi sama yang namanya “class utility yang numpuk kayak gundukan pasir”. Tailwind tuh emang enak sih, tinggal ketik flex, gap-4, text-center, langsung jadi tampilan kece. Gak perlu mikirin styling panjang-panjang di file CSS lagi. Tapi ya… kadang suka nyebelin juga 😅 Lo baru ngetik setengah bg-, eh lupa lagi kelanjutannya apa. Atau lebih parah, lo nulis bg-blu-500 (yes, salah ejaan!), terus heran kenapa warna gak muncul-muncul. Dan jangan lupakan class yang panjangnya kayak kereta api, flex items-center justify-between bg-white text-sm px-6 py-4 shadow-md rounded-lg, mata bisa jereng liatnya. Nah, daripada stres sendiri, mending manfaatin plugin-plugin keren di VSCode yang bisa bantuin lo ngoding Tailwind dengan lebih santai. Mulai dari auto-complete class, preview warna langsung, ngasih tahu kalau ada typo, sampai ngerapiin urutan class biar gak kayak mie kusut, semua bisa lo dapetin cuma modal install plugin. Intinya, Tailwind itu udah keren. Tapi dengan bantuan plugin, kerennya bisa naik level. Ngoding jadi cepet, rapi, gak banyak mikir, dan pastinya lebih asik. Apalagi kalo lo sering kerja di proyek yang full Tailwind, plugin-plugin ini bakal jadi temen setia banget! So, di artikel ini gue bakal kasih lo 7 plugin Tailwind CSS di VSCode yang ngebantu banget, udah gue pilihin yang paling kece, paling sering dipake, dan paling berfaedah buat workflow lo. Cus, langsung lanjut ke listnya! Tailwind CSS IntelliSense Oke, kita mulai dari yang paling wajib dan paling sering direkomenin orang, Tailwind CSS IntelliSense. Plugin ini tuh bener-bener kaya asisten pribadi lo pas lagi ngetik class Tailwind. Tailwind CSS IntelliSense 🔥 Fitur utamanya: Auto-complete class: Lo tinggal ketik bg- terus langsung keluar tuh semua opsi warna, lengkap dari bg-red-500 sampe bg-emerald-950. Gak perlu hafal semua.Hover preview: Kalo lo nge-hover di class text-xl, lo bakal dikasih tahu font-sizenya berapa, line height-nya berapa, semua ditampilin.Error warning: Salah nulis class? Misal pt-12px padahal harusnya pt-3, plugin ini bakal kasih garis merah biar lo sadar ada yang salah. Nyelametin banget. 🤓 Kenapa penting? Tailwind itu punya ratusan bahkan ribuan class. Mana mungkin lo hapalin semua? Nah, plugin ini ngebantu lo biar gak perlu browsing ke dokumentasi tiap detik cuma buat ngecek gap-4 itu berapa pixel. Kerja lo jadi lebih cepet, lebih efisien, dan ngurangin typo-typo konyol yang suka kejadian pas udah tengah malam, mata tinggal satu biji. ✋ Kekurangan? Hmm… kalo lo pake laptop kentang, kadang plugin ini kerasa agak berat sih, apalagi di project gede. Tapi selebihnya? Ini plugin wajib banget. No debat. Install Tailwind CSS IntelliSense Tailwind Shades Lo pernah gak sih, pengen bikin warna custom tapi tetep pengen vibes-nya kayak warna blue-500 bawaan Tailwind? Nah, Tailwind Shades ini solusinya. Tailwind Shades 🔧 Apa yang dia lakuin? Jadi lo tinggal masukin satu warna dasar, misal #3498db, dan plugin ini bakal generate variasi warnanya dari -50 sampe -900 otomatis. Gak perlu ngutak-atik manual di color generator. 😍 Kapan berguna? Kalo lo pengen bikin branding warna sendiri tapi tetep konsisten kayak skema Tailwind.Kalo lo kerja di tim desain-dev dan dikasih warna brand doang, lo bisa langsung turunin shadenya dengan plugin ini. ❌ Catatan kecil: Kadang hasil warnanya gak 100% mirip kaya warna default Tailwind, tapi masih masuk akal dan enak diliat kok. Worth it banget dicoba. Install Tailwind Shades Headwind Kalo lo termasuk orang yang ngetik class Tailwind asal ketik aja, kadang flex bg-white p-4, kadang p-4 bg-white flex, lo harus banget cobain Headwind. Headwind ✨ Apa sih Headwind itu? Singkatnya, ini plugin auto-formatter khusus buat Tailwind CSS. Dia bakal ngerapiin urutan class lo secara otomatis, sesuai urutan yang “standar” dan lebih readable. Misalnya lo nulis gini: <div class="text-white p-4 bg-blue-500 flex"> Setelah disave, dia langsung ubah jadi: <div class="flex p-4 bg-blue-500 text-white"> Rapi, konsisten, dan enak dibaca mata 🧼 💡 Kenapa penting? Class yang berantakan bikin susah dibaca, susah dicari, dan rawan error. Apalagi kalo kerja bareng tim, tiap orang punya gaya nulis class sendiri. Headwind bantu semuanya punya gaya yang sama. Gak cuma rapiin, dia juga bisa hapus class yang duplikat lho. 😅 Kekurangannya? Kadang urutan yang dia anggap “ideal” gak sama sama selera lo, tapi ya tinggal lo custom aja di setting-nya. Gak ribet kok. Install Headwind Tailwind Docs Nah ini buat lo yang sering banget buka tailwindcss.com cuma buat nyari satu class doang, Tailwind Docs plugin ini bakal jadi penyelamat hidup lo. Tailwind Docs 📎 Gimana cara kerjanya? Lo cukup sorot class Tailwind di file lo, terus klik kanan dan pilih “Search in Tailwind CSS Docs”, dan boom! Browser langsung buka dokumentasi resmi Tailwind ke class yang lo pilih tadi. Gak perlu ngetik manual, gak perlu buka tab baru, gak perlu googling site:tailwindcss.com segala. 🧠 Kapan berguna? Lagi belajar Tailwind dan pengen ngerti lebih dalam tiap class.Pengen liat contoh penggunaan dari dokumentasi resmi.Lagi males buka-buka tab baru karena laptop udah ngos-ngosan 🥲 😎 Tips kecil: Kalau lo sering pakai plugin ini, bisa juga bikin shortcut di keyboard biar lebih cepet aksesnya. Tinggal setting di VSCode keybindings. Install Tailwind Docs Tailwind Fold Lo tau gak sih, kadang class Tailwind bisa panjang banget sampe nyampe 3 baris sendiri di file JSX. Apalagi kalo lo tipenya yang suka styling di inline className="". Bikin pusing, beneran. Nah, Tailwind Fold ini bisa ngebantu banget buat nyembunyiin (fold) class-class Tailwind yang panjang jadi satu baris kecil aja. Jadi tampilan file lo tetep rapih dan gak penuh sama gulungan class. Tailwind Fold 🧪 Cara kerja? Contohnya gini, lo punya: <div className="flex items-center justify-between bg-white p-4 rounded shadow-md hover:bg-gray-100 transition duration-300 ease-in-out"> Nanti sama Tailwind Fold bisa dilipat jadi: <div className="…"> Tinggal klik, dan class-nya muncul lagi. Praktis bgt parah. 🧍🏻‍♂️ Kenapa penting? File lo jadi lebih bersihFokus ke struktur komponen, bukan numpuk classLebih gampang navigasi pas review kode ⚠️ Catetan dikit: Kadang plugin ini gak langsung aktif, jadi pastiin lo udah install & aktifin extensi-nya. Gue juga sempet bingung waktu itu, udah install tapi kok gak jalan. Ternyata VSCode harus direstart (iya, kadang VSCode-nya males jalan juga kek kita 😩) Install Tailwind Fold Tailwind Color Matcher Kalau lo pernah bingung nyari warna Tailwind yang paling mirip sama kode HEX tertentu, Tailwind Color Matcher ini bakal jadi penyelamat lo banget. Gak perlu nebak-nebak lagi, apalagi buka dokumen Tailwind cuma buat nyocokin warna 😵‍💫 Tailwind Color Matcher 🔥 Apa yang dia lakuin? Plugin ini nyocokin kode warna HEX yang lo masukin dengan kelas Tailwind CSS yang paling mendekati. Jadi lo tinggal masukin misalnya #38bdf8, terus plugin ini bakal kasih tau: → bg-sky-400 Warna mirip, gak perlu ribet, gak perlu pusing ngafalin semua kelas warna Tailwind yang seabrek itu 😩 🚀 Fitur-fitur utamanya: 🎯 Auto-cocokin kode HEX dengan kelas Tailwind terdekat🎨 Bisa buka color picker langsung di VSCode buat nyari warna💾 Bisa save warna favorit buat dipake berulang📋 Copy langsung ke clipboard class Tailwind-nya ⚠️ Typo Alert: Lo pasti pernah kan, ngetik warna bg-sky-400 tapi malah typo jadi bg-syky-400 atau bg-sky-44... yaudah, warnanya gak muncul. Panik, padahal salah ketik doang 😅 Nah, plugin ini bener-bener ngebantu ngurangin typo & trial-error warna, jadi lo bisa fokus ke layout, bukan malah ribet nyocokin warna. 🧪 Contoh pemakaian: Ketik perintah Match Color di Command Palette (Ctrl + Shift + P)Masukin warna HEX lo, misalnya: #facc15Dia bakal kasih tau lo: → bg-yellow-400 Mudah, cepet, dan gak pake ribet. Cocok banget buat lo yang sering kerja bareng tim desain dan dapet warna dari Figma atau Photoshop pake HEX. Install Tailwind Color Matcher Tailwind Sorter Lo pernah nulis class Tailwind yang panjang banget trus bingung sendiri bacanya? Atau pernah bandingin 2 elemen yang styling-nya sama tapi urutan class-nya ngacak? Nah, plugin Tailwind Sorter ini bener-bener penyelamat hidup lo yang suka styling pake Tailwind 🧹✨ Tailwind Sorter 🔍 Apa fungsinya? Sesuai namanya, plugin ini ngerapihin urutan utility class Tailwind lo secara otomatis. Gak cuma buat keliatan rapi, tapi juga biar gampang dibaca, dan konsisten antara satu file dengan yang lain. <!-- Sebelum --> <div class="text-white hover:bg-blue-600 bg-blue-500 p-4 rounded"> <!-- Setelah pake Tailwind Sorter --> <div class="p-4 rounded bg-blue-500 hover:bg-blue-600 text-white"> Nice kan? 😎 ✨ Fitur keren yang dibawa: 🔄 Sortir otomatis saat lo save file🧠 Urutan sesuai dokumentasi resmi Tailwind🔧 Bisa di-custom urutannya sesuai gaya lo💅 Support HTML, JSX, TSX, Vue, dan lainnya 🚨 Typo Zone: Kadang kita nulis hover:bg-blue-600 di awal, kadang di tengah, kadang di belakang. Apalagi kalo kerja tim, urutan class bisa beda-beda tiap orang. Makanya, plugin ini ngurangin typo & class conflict, dan bikin styling lo konsisten banget. 🧪 Cara make-nya gampang: Install plugin Tailwind Sorter dari VSCode MarketplaceAktifin fitur auto-sort on save biar tiap kali lo save file, class-nya langsung rapiAtur urutan custom (optional) kalo lo pengen gaya lo sendiri 🤝 Kenapa lo harus make? Lo bakal hemat waktu pas code reviewStyling jadi gampang dibaca & dipahamiNgurangin konflik merge di Git (karena beda urutan class bisa bikin konflik) Pokoknya plugin ini tuh ibarat tukang sapu otomatis buat class Tailwind lo, sekali save, langsung cling! Gak perlu lagi mantengin class panjang-panjang yang urutannya kayak abjad acak, tinggal fokus ngoding aja 🧼💻 Install Tailwind Sorter Tips Tambahan Sebelum lo install semua plugin tadi, coba perhatiin dulu beberapa hal ini biar pengalaman ngoding Tailwind lo makin josss: 🔗 Gabungkan plugin yang saling melengkapi Misalnya, lo pake Tailwind IntelliSense buat auto-complete, trus gabungin sama Tailwind Sorter biar class-nya langsung rapi. Kombinasi kayak gini bikin workflow lo makin lancar tanpa hambatan. 🧪 Cek kompatibilitas plugin sama versi Tailwind lo Beberapa plugin kadang belum support fitur terbaru dari Tailwind (apalagi kalo lo udah pake Tailwind v4). Jadi sebelum install, cek dulu di deskripsinya, jangan sampe malah error gak jelas karena versi gak cocok. 🛠️ Manfaatin fitur bawaan VSCode juga Aktifin fitur kayak format on save, emmet snippets, dan code folding. Plugin jadi makin powerful kalau didukung sama settingan VSCode yang optimal. Auto ngoding nyaman deh! Kesimpulan Plugin-plugin VSCode buat Tailwind CSS ini tuh bener-bener penolong hidup lo pas lagi ngoding. Mulai dari ngebantu nulis class yang panjang, ngecek dokumentasi tanpa buka browser, sampe ngerapiin urutan class biar gak kayak mie kusut. Gak cuma bikin kerjaan lo lebih cepet, tapi juga bikin kode lebih bersih, konsisten, dan gampang di-maintain, apalagi kalo lo kerja bareng tim. Yuk, cobain plugin-plugin yang udah gue sebutin tadi, dan rasain sendiri perbedaannya pas ngoding pakai Tailwind CSS! 🚀 “Lo sendiri udah coba plugin yang mana aja? Atau punya plugin andalan selain yang gue sebutin? Share dong di kolom komentar, biar kita saling bantu satu sama lain!” 🧠💬 🎓 Bonus: Rekomendasi Kelas Gratis dari BuildWithAngga Buat lo yang baru nyemplung ke dunia Tailwind CSS atau pengen upgrade skill desain web lo biar makin kece, ini ada beberapa kelas gratis yang super worth it dari BuildWithAngga. Gak cuma gratis, tapi materinya juga beneran daging semua 🥩🔥 1. CSS Tailwind Web Design Kelas ini cocok banget buat lo yang pengen ngedesain website modern dan clean pake Tailwind CSS. Cocok buat pemula maupun yang udah pernah nyoba Tailwind tapi pengen lebih rapi dan estetik. 2. Belajar Tailwind CSS untuk Pemula Website Designer Namanya juga buat pemula, jadi tenang aja, lo bakal dipandu dari nol. Cocok buat lo yang masih suka bingung bedain mt-4 sama mb-4 😆 3. HTML5 + Tailwind CSS: Creating Modern Eye-Catching Website Gabungan antara HTML5 dan Tailwind, lo bakal diajarin bikin website yang gak cuma fungsional tapi juga menarik secara visual. Pokoknya gak cuma ngoding asal tampil. 4. Vue 3 + Tailwind CSS: Membuat Komponen Autocomplete Khusus buat lo yang udah mainan Vue 3, kelas ini ngajarin cara bikin komponen autocomplete yang reusable dan stylish pake Tailwind. Keren buat portofolio lo juga nanti! Jadi, abis install plugin-plugin tadi, langsung aja gas ke salah satu kelas di atas biar makin pro mainin Tailwind CSS. Belajar gratis, dapet ilmu, skill naik, siapa yang nolak coba? 😎📚

Kalau kamu sering nongkrong di forum web development atau sekadar scroll TikTok dan Instagraam yang isinya tech content, pasti kamu pernah dengar nama Next.js. Buat kamu yang baru mulai ngoding, mungkin awalnya kelihatan kayayk framework yang “too advanced”. Tapi sebenarnya justru sebaliknya, Next.js itu ramah banget buat pemula—apalagi kalau kamu udah punya sedikit dasar di React. Jadi gini… Next.js adalah framework open-source yang dibangun di atas React. Dia dikembangkan sama tim Vercel, dan fungsinya itu untuk bantu kita bikin aplikasi web modern dengan cara yang lebih cepat, rapi, dan performa yang optimal. Gak cuma untuk UI doang, tapi dia juga siap produksi alias production-ready. Ibaratnya kalau React itu komponen dasarnya, Next.js itu paket hematnya—udah termasuk nasi, lauk, sambal, sama es teh. Nah, fitur-fitur di dalam Next.js ini yang bikin dia jadi favorit banyak developer dan perusahaan: Routing otomatis. Gak perlu setup react-router manual. Cukup bikin file di folder pages/, langsung jadi route.SEO-friendly karena support server-side rendering (SSR) dan static site generation (SSG).Punya fitur API Routes buat bikin backend ringan langsung dari dalam project Next.js.Optimisasi performa seperti lazy loading, image optimization, dan code splitting udah built-in.Dukungan penuh buat TypeScript, ESLint, dan integrasi ke CSS framework modern kayak Tailwind. Keren, kan? Makanya gak heran kalau sekarang banyak perusahaan—dari startup sampe korporat—lebih suka pakai Next.js buat bangun produk mereka. Karena lebih maintainable, scalable, dan cepet. Jadi kalau kamu ngerasa belakangan ini udah mulai ketinggalan tren, masih stuck di HTML statis atau belum sempat ngulik React lebih dalam, belajar Next.js bisa jadi tiket kamu buat naik level. Karena banyak banget lowongan kerja yang cari orang dengan skill Next.js, apalagi kalau kamu pengen kerja remote atau masuk ke dunia startup tech. Nah, terus kenapa kita bahas Webpack di artikel ini? Meskipun kamu jarang banget harus utak-atik Webpack secara langsung pas bikin proyek Next.js, tapi Webpack itu punya peran penting banget di belakang layar. Bisa dibilang, Webpack adalah “mesin dapur” yang bantu nyusun dan ngemas semua kode kita jadi satu aplikasi web yang bisa jalan mulus di browser. Jadi pas kamu nulis komponen, import CSS, pakai gambar, atau bahkan bikin dynamic import untuk komponen tertentu, sebenarnya Webpack yang ngerjain semua di balik layar. Dia yang nge-bundle file-file kamu, optimize performa, dan bikin build kamu jadi ringan dan cepat. Next.js udah nyediain konfigurasi Webpack bawaaaan yang powerful banget, jadi kamu gak harus setting dari nol. Tapi kalau kamu tahu dasar-dasar cara kerja Webpack, kamu jadi lebih ngerti apa yang terjadi di balik layar. Ini juga bantu banget kalau suatu hari kamu butuh kustomisasi—misalnya mau tambahin loader untuk file SVG, atau ubah cara kerja plugin tertentu. Intinya, paham Webpack bukan cuma buat developer expert. Justru kalau kamu baru mulai, sekarang saat yang pas buat kenalan sama tool penting ini, biar kamu gak cuma bisa make, tapi juga ngerti gimana dia bekerja. Oke, itu dulu sebagai pembuka ya. Di artikel selanjutnya kita bakal bahas lebih dalam soal Webpack. Kita bakal lihat gimana dia kerja, apa itu konsep bundling, loader, plugin, dan kenapa semua itu penting buat developer modern—terutama yang pakai Next.js. Siap? Yuk lanjut! Yuk kita mulai bikin project Next.js terbaru buat company profile Sekarang kita udah ngerti kenapa Next.js penting dan apa hubungannya dengan Webpack. Jadi, saatnya kita praktik langsung bikin project Next.js dari nol. Kita bakal bikin fondasi awal untuk website company profile—yang biasanya berisi halaman seperti home, about, services, contact, dan mungkin beberapa halaman tambahan lainnya. Langkah pertama yang kita butuhin tentu aja install Next.js. Next.js sekarang nyediain CLI bernama create-next-app yang super praktis dan udah support setup modern out of the box. Gak usah ribet milih-milih lagi. Langsung buka terminal kamu dan ketik: npx create-next-app@latest company-profile Setelah itu, kamu bakal ditanya beberapa pertanyaan interaktif. Untuk project company profile sederhana, kamu bisa pilih jawaban seperti berikut: TypeScript: yes (supaya kode kamu lebih aman dan modern)ESLint: yes (biar kode lebih rapi)Tailwind CSS: yes (biar styling-nya gampang dan clean)src/ directory: yes (struktur folder lebih terorganisir)App Router: yes (fitur baru pengganti Pages Router, lebih fleksibel)Customize import alias: boleh di-skip atau pakai @/ untuk root folder Tunggu proses instalasi selesai, lalu pindah ke folder project: cd company-profile Jalankan development server dengan: npm run dev Kalau udah, kamu buka browseer dan masuk ke http://localhost:3000, tampilan awal Next.js udah muncul. Ini artinya semua setup kamu udah jalan dengan baik. Struktur folder awalnya kurang lebih seperti ini: company-profile/ ├─ public/ ├─ src/ │ ├─ app/ │ │ ├─ page.tsx │ ├─ styles/ ├─ tsconfig.json ├─ next.config.js Nah, sekarang kamu bisa mulai bikin halaman kayak about, services, atau contact. Tinggal tambahin file baru di dalam folder src/app/, contohnya about/page.tsx, dan isi kontennya bebas. Misalnya: // src/app/about/page.tsx export default function AboutPage() { return ( <main className="p-10"> <h1 className="text-4xl font-bold mb-4">Tentang Kami</h1> <p className="text-lg text-gray-700"> Kami adalah tim profesional yang berfokus membangun solusi digital untuk berbagai industri. </p> </main> ); } Styling bisa kamu atur dengan Tailwind CSS, jadi kamu gak perlu ribet setup class manual. Cukup kasih class seperti text-4xl, font-bold, p-10, dan lainnya. Kalau udah, halaman kamu bisa langsung diakses lewat http://localhost:3000/about. Nah sekarang, di mana sih peran Webpack dalam project Next.js ini? Oke, ini bagian yang jarang kelihatan tapi super penting. Walaupun kamu gak ngoding Webpack secara langsung, tapi semua yang terjadi saat kamu jalankan npm run dev atau npm run build, itu kerjaannya Webpack. Contohnya begini: Saat kamu bikin halaman about/page.tsx, dan kamu impoyrt file CSS atau gambar seperti ini: import Image from 'next/image' import teamPhoto from '@/assets/team.jpg' import './styles.css' Webpack yang ngurus supaya file team.jpg bisa dioptimalkan dan ditampilin di browser dengan ukuran yang tepat. Webpack juga yang handle supaya styles.css di-parse, dikompilasi, dan dimasukin ke dalam halaman yang sesuai. Kalau kamu buka file next.config.js, sebenarnya kamu bisa tambahin konfigurasi khusus buat Webpack. Misalnya, kamu mau custom loader: // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { webpack: (config) => { config.module.rules.push({ test: /\\.md$/, use: 'raw-loader', }) return config }, } module.exports = nextConfig Di sini kamu menambahkan aturan baru untuk nge-handle file markdown (.md). Jadi, setiap kali kamu import file .md, Webpack tahu harus pakai raw-loader. Contoh lainnya, Webpack juga bantu waktu kamu pakai dynamic import di halaman tertentu: import dynamic from 'next/dynamic' const ServicesComponent = dynamic(() => import('@/components/Services')) export default function HomePage() { return ( <main> <h1>Welcome to Our Company</h1> <ServicesComponent /> </main> ) } Webpack akan otomatis bikin chunk teerpisah untuk komponen Services, supaya gak langsung dimuat semuanya dari awal. Ini bikin aplikasi kamu lebih ringan dan lebih cepat—karena pengguna cuma nge-load yang mereka butuhin dulu. Jadi intinya, Webpack adalah semacam "pengatur lalu lintas" yang memastikan semua aset (JS, CSS, gambar, font, dan sebagainya) bisa dipaketin dan dikirim ke browser dengan cara yang efisien. Dan enaknya pakai Next.js adalah kamu gak perlu mikirin semua itu dari awal, karena konfigurasi Webpack-nya udah dirancang biar optimal buat kebanyakan use case. Tapi… kamu tetap punya akses buat nge-tweak kalau emang butuh. Kenapa sih kita butuh chunk terpisah dalam Next.js (dan proyek modern lainnya)? Oke, kita bahas pelan-pelan biar gak kerasa mumet. Waktu kamu bikin aplikasi web, semua komponen, gambar, file CSS, dan segala macamnya—itu akhirnya harus dikemas jadi file JavaScript (dan CSS) yang bisa dibaca sama browser. Nah, proses ngemasin semua itu disebut bundling, dan itu kerjaannya Webpack. Kalau semuanya digabung dalam satu file besar, bayangin kayak kamu belanja di supermarket terus semua barang ditaruh dalam satu plastik, satu tumpukan tinggi, berat, dan kamu harus bawa semua itu dari awal. Berat, lama, dan bikin kesel kan? Apalagi kalau ternyata kamu cuma butuh satu barang aja dari belanjaan itu. Nah, chunk terpisah adalah solusi dari masaelah itu. Webpack (dan Next.js) otomatis memecah kode kamu menjadi bagian-bagian kecil (chunk), lalu browser hanya akan mengambil bagian yang benar-benar dibutuhkan dulu, sisanya belakangan. Contohnya: Di halaman homepage kamu cuma nampilin komponen Hero dan Services. Tapi di halaman /contact ada form panjang, peta, dan FAQ. Nah, dengan chunk terpisah, pas user buka homepage, mereka hanya nge-load file yang dibutuhkan untuk homepage aja. File untuk /contact gak dimuat dulu sampai user benar-benar klik dan buka halaman itu. Ini penting banget buat performa. Berikut mabnfaat chunking yang paling terasa: Page load jadi lebih cepat. Karena browser gak harus download semua kode sekaligus.User experience lebih baik. Website terasa responsif karena cuma load bagian yang relevan.Cache lebih efisien. Kalau cuma ada satu bagian halaman yang berubah, user bisa reuse chunk lama dari cache mereka.Skalabilitas makin mudah. Semakin besar aplikasi kamu, semakin kamu butuh strategi chunk yang baik biar gak lemot. Dan kerennya, Next.js dengan App Router dan dynamic import bisa otomatis mengatur chunk ini tanpa kamu mikirin konfigurasi ribet. Contoh kodenya kayak gini: import dynamic from 'next/dynamic' const ContactForm = dynamic(() => import('@/components/ContactForm')) export default function ContactPage() { return ( <main> <h1>Hubungi Kami</h1> <ContactForm /> </main> ) } Dengan pakai dynamic, Webpack ngerti bahwa komponen ContactForm ini bisa di-load belakangan. Nanti di-dev tools kamu bisa lihat file chunk seperti contactform.123abc.js muncul secara terpisah. Dan itu yang bikin web kamu lebih ringan. Jadi, chunk terpisah bukan cuma trik teknikal aja, tapi kunci utama bikin website kamu cepat dan nyaman diakses, terutama buat user yang internetnya pas-pasan atau pakai perangkat low-end. Inilah kenapa modern web app udah jadiin ini sebagai standar ✨ Yuk kenalan lebih dalam sama bagiana-bagian penting di Webpack: loader, plugin, dan bundling Kamu mungkin udah pernah denger istilah-istilah ini waktu baca dokumentasi atau ngulik tutorial: loader, plugin, dan bundling. Tapi jujur aja, buat pemula, semua itu awalnya kelihatan kayak istilah alien. Padahal, ini bagian penting banget dari ekosistem modern web development, terutama kalau kamu pakai Next.js yang di balik layarnya dikuatkan oleh Webpack. Di bagian ini kita gak akan bikin konfigurasi Webpack dari nol (karena Next.js udah nyiapin default config yang powerful). Tapi kita akan coba pahami gimana cara kerja Webpack lewat simulasi kecil dan contoh yang bisa bikin kamu lebih paham “mesin” di balik project kamu. Apa itu bundling? Bundling itu proses di mana Webpack menggabungkan banyak file—JavaScript, CSS, gambar, bahkan font—menjadi satu atau beberapa file final yang siap dikirim ke browser. Misalnya kamu punya struktur seperti ini: components/ ├─ Header.tsx ├─ Footer.tsx pages/ ├─ index.tsx ├─ about.tsx Waktu kamu jalanin npm run build, Webpack bakaal telusurin semua import di dalam project kamu, lalu “nge-bundle” mereka jadi satu file (atau beberapa file terpisah, alias chunk). Jadi di browser, kamu gak perlu load 20 file satu-satu. Semuanya udah di-packing rapi dalam satu paket. Apa itu loader? Loader adalah alat bantu buat Webpack ngerti cara menangani jenis file tertentu. Karena default-nya Webpack cuma ngerti JavaScript. Tapi project modern butuh lebih dari itu—ada CSS, TypeScript, gambar, SVG, dan banyak lainnya. Misalnya kamu mau pakai file .css atau .jpg, maka Webpack butuh loader tertentu biar bisa masukin file itu ke dalam bundle akhir. Di project Next.js, ini semua udah diatur otomatis. Tapi kamu tetap bisa tambahin custom loader kalau mau. Contoh sederhana: kamu mau handle file markdown (.md), biar bisa di-import ke komponen React. // next.config.js const nextConfig = { webpack: (config) => { config.module.rules.push({ test: /\\.md$/, use: 'raw-loader', }) return config }, } module.exports = nextConfig Dengan config itu, kamu sekarang bisa import markdown seperti ini: import faqMarkdown from '@/content/faq.md' export default function FAQPage() { return <div>{faqMarkdown}</div> } Tanpa loader, file .md ini bakal error karena Next.js/Webpack gak tahu cara ngebacanya. Apa itu plugin? Kalau loader fokus ke satu file atau satu jenis resource, plugin itu levelnya lebih global. Plugin bisa ngatur proses build secara keseluruhan—kayak optimasi, environment variable, bahkan auto-generate HTML. Contohnya, kamu bisa pakai plugin byuat bersihin folder dist sebelum build baru, atau buat inject variabel saat build. Sekali lagi, di Next.js semua ini udah diurusin. Tapi kamu bisa tambahin plugin custom juga kalau butuh. Misalnya mau pakai plugin webpack.DefinePlugin buat masukin variabel: const webpack = require('webpack') const nextConfig = { webpack: (config) => { config.plugins.push( new webpack.DefinePlugin({ 'process.env.APP_NAME': JSON.stringify('My Company Profile'), }) ) return config }, } module.exports = nextConfig Lalu kamu bisa akses di mana pun di app kamu: console.log(process.env.APP_NAME) Intinya… Webpack itu kayak dapur utama. Loader itu alat-alat masaknya (kompor, oven, panci), plugin itu bumbu rahasia dan strategi masak, sedangkan bundling itu proses akhir semua bahan dimasak dan disajikan jadi satu hidangan lengkap buat user. Kamu mungkin gak ngoprek semua ini setiap hari, tapi dengan ngerti dasarnya, kamu bisa jadi developer yang lebih peka dan paham struktur aplikasi modern. Karena saat error muncul, atau kamu butuh kustomisasi, kamu gak cuma bengong—kamu tahu harus ngoprek bagian mana. Dan kabar baiknya: Next.js udah nyiapin semua fondasi ini buat kamu, jadi kamu tinggal fokus bikin aplikasi yang keren, cepat, dan maintainable. Yuk kita masuk ke simulasi nyata: load SVG jadi React component & import font custom lokal Sekarang kita udah ngerti teori dasar tentang loader, plugin, dan bundling di Webpack (dan Next.js). Tapi supaya makin kebayang gimana cara kerjanya di dunia nyata, kita langsung praktekin dua hal yang sering banget ditemui pas ngembangin website company profile: Load file SVG sebagai React ComponentImport font custom lokal ke dalam project Ini penting banget, karena dua hal ini sering jadi kebutuhan real di project—baik buat branding, design system, atau custom look & feel yang gak bisa dipenuhi cuma dengan library biasa. Load file SVG sebagai React component Biasanya kalau kita cuma import file SVG biasa, SVG itu akan diperlakukan sebagai image oleh Next.js, dan harus dirender pakai <Image /> atau <img>. Tapi gimana kalau kita pengen langsung masukin SVG itu sebagai bagian dari komponen React, biar bisa dikasih props, styling, atau animasi? Nah, di sinilah loader berperan. Pertama, install loader yang dibutuhkan: npm install --save-dev @svgr/webpack Lalu buka file next.config.js, dan tambahbkan konfigurasi custom loader-nya: const nextConfig = { webpack(config) { config.module.rules.push({ test: /\\.svg$/, issuer: /\\.[jt]sx?$/, use: ['@svgr/webpack'], }) return config }, } module.exports = nextConfig Konfigurasi di atas bilang ke Webpack: “Kalau nemu file .svg yang di-import dari file .js, .ts, .jsx, atau .tsx, gunakan loader @svgr/webpack.” Setelah itu kamu bisa langsung pakai SVG sebagai komponen: import Logo from '@/assets/logo.svg' export default function Header() { return ( <header className="flex items-center p-4"> <Logo className="h-8 w-auto text-blue-600" /> <h1 className="ml-4 text-2xl font-semibold">My Company</h1> </header> ) } SVG sekarang bisa diubah warna, dikasih animasi, bahkan diberi props layaknya React component biasa. Ini yang bikin developer modern cinta banget sama SVGR. Import font custom lokal Biasanya kamu bakal butuh font khusus buat branding, dan lebih baik kalau file font-nya disimpan lokal, bukan ambil dari Google Fonts. Alasannya? Lebih cepaat, gak tergantung third-party, dan lebih private. Kamu bisa letakkan file font di public/fonts/, misalnya: public/fonts/ ├─ Inter-Regular.woff2 ├─ Inter-Bold.woff2 Lalu bikin file CSS global khusus untuk font: /* src/styles/fonts.css */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } Import CSS-nya di layout.tsx agar font tersedia di seluruh halaman: import '@/styles/fonts.css' export default function RootLayout({ children }: { childrena: React.ReactNode }) { return ( <html lang="id"> <body className="font-sans">{children}</body> </html> ) } Dan terakhir, tinggal tambahkan konfigurasi di tailwind.config.js buat pakai font tersebut: module.exports = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, } Boom. Sekarang seluruh web kamu pakai font custom lokal yang jauh lebih ringan dan cepat load-nya. Jadi, apa yang terjadi di balik layar? Pas kamu import SVG sebagai komponen, loader @svgr/webpack akan membaca file SVG, mengubahnya jadi JSX, dan dimasukin ke bundle kamu. Artinya, kamu gak perlu lagi pakai <img src="...">, tapi bisa treat SVG kayak komponen React yang bisa kamu styling langsung. Sedangkan pas kamu import font dari public/, Webpack bakal nge-handle URL-nya dan tetap masukin link itu saat build production. Jadi kamu punya kontrol penuh atas performance dan branding, tanpa harus tergantung CDN luar. Dari dua simulasi real case ini, kamu bisa lihat bahwa loader dan plugin bukan cuma sekadar istilah di dokumentasi. Tapi benar-benar punya dampak besar dalam workflow sehari-hari. Dan makin kamu paham mereka, makin fleksibel dan powerful cara kamu ngembangin web. Gak cuma make Next.js, tapi kamu sekarang ngerti banget kenapa Next.js powerful—karena di belakangnya ada Webpack yang dikonfigurasi secara cerdas. Next.js sekarang punya mesin baru bernama Turbopack: pengganti Webpack yang lebih ngebut dan modern 🚀 Oke, kita udah kenalan sama Webpack, udah paham bundling, loader, dan plugin, dan kita udah nyoba beberapa simulasi real-case yang relevan. Tapi sekarang saatnya update ilmu nih—karena Next.js versi terbaru (khususnya dari versi 13 ke atas) memperkenalkan Turbopack, sebuah game changer dalam dunia bundling dan build tool modern. Yes, Turbopack ini dikembangkan langsung oleh tim Vercel (orang-orang yang bikin Next.js juga), dan mereka secara resmi menyebut Turbopack sebagai "pengganti Webpack di masa depan" untuk Next.js. Jadi… apa itu Turbopack? Turbopack adalah bundler baru yang dibuat dari nol dengan bahasa pemrograman Rust—bahasa yang terkenal super cepat dan aman. Tujuan utama Turbopack adalah untuk mengatasi kelemahan Webpack, terutama dari segi kecepatan dan skalabilitas. Kalau Webpack itu kayak mobil keluarga yang nyaman dan fleksibel, Turbopack itu kayak motor listrik super cepat yang gak berisik dan langsung nyamber gasnya. Apa aja sih perbedaan dan manfaat Turbopack dibanding Webpack? Berikut beberapa hal yang bikin Turbopack jadi primadona baru (dan alasan kenapa kamu bakal cinta banget kalau udah nyoba): 1. Build & Hot Reload Lebih Cepat Turbopack itu berkali-kali lipat lebih cepat dibanding Webpack. Cold Start (pertama kali npm run dev): bisa 10x sampai 700x lebih cepat dibanding Webpack.Hot Reload (pas kamu ubah file): responsnya bisa nyaris instan. Buat kamu yang kerja di project besar, atau punya banyak file dan komponen, ini kerasa banget. Gak perlu nunggu lama-lama saat develop—kerjaan jadi lebih efisien dan produktif. 2. Incremental Compilation Turbopack punya pendekatan yang disebut incremental bundling, di mana dia cuma proses ulang file yang benar-benar berubah. Jadi gak kayak Webpack yang harus “nge-bundle ulang” project tiap kali ada perubahan. Artinya: makin besar project kamu, makin terasa keunggulan Turbopack. 3. Future-proof dan native Next.js Karena dikembangkan langsung oleh Vercel, Turbopack ini udah dioptimasi habis-habisan buat Next.js. Native support TypeScriptNative support React Server ComponentsIntegrasi lancar dengan App Router dan semua fitur baru di Next.js 13+aaa Pokoknya benar-benar dibikin supaya kamu bisa langsung pakai dan nikmatin kecepatannya. Oke, terus gimana cara pakai Turbopack di project kita? Kalau kamu pakai Next.js 13 ke atas, Turbopack udah tersedia secara default untuk development mode. Jadi pas kamu jalanin: npm run dev Secara otomatis, Next.js bakal jalanin project kamu pakai Turbopack. Di terminal biasanya muncul log seperti: Creating an optimized development build... Using Turbopack as bundler Tapi untuk saat ini, Turbopack baru dipakai di development mode aja, bukan production. Untuk production build (npm run build), Next.js masih pakai Webpack. Tapi Vercel udah nyiapin roadmap untuk migrasi full ke Turbopack di production juga—tinggal nunggu stabil. Jadi, apakah Webpack akan ditinggalkan? Iya, pelan-pelan. Tapi tenang, Webpack gak langsung dibuang kok. Banyak project lama masih pakai Webpack, dan ekosistem plugin Webpack juga masih luas banget. Tapi buat project baru, terutama yang dibangun dengan Next.js versi terbaru, kamu udah bisa nikmatin kecepatan Turbopack dan mulai transisi ke masa depan. Intinya… Turbopack itu bundler modern super cepat yang dirancang untuk era React masa kini. Dengan teknologi dari Rust, sistem yang lebih efisien, dan integrasi native ke Next.js, dia udah mulai menggantikan peran Webpack secara bertahap. Sebagai developer pemula, kamu gak perlu ngerti detail teknis Rust atau compiler—cukup ngerti bahwa Turbopack bantu kamu ngoding lebih cepat, reload lebih ringan, dan scaling project jadi lebih nyaman. Penutup: Saatnya naik level dengan Next.js dan siap kerja remote bareng BuildWithAngga Kita udah jalan bareng dari awal: mulai dari kenalan sama Next.js, ngulik Webpack dan semua bagian pentingnya kayak loader dan plugin, sampai akhirnya bahas Turbopack sebagai generasi terbaru bundler modern. Harapannya, sekarang kamu udah gak cuma tahu cara pake Next.js, tapi juga paham apa yang terjadi di balik layar. Belajar kayak gini itu penting banget, apalagi kalau kamu pengen serius kerja sebagai web developer, khususnya di lingkungan kerja remote yang sekarang makin banyak dibuka oleh perusahaan luar negeri. Mereka gak cuma carei orang yang bisa ngehasilin halaman doang, tapi yang ngerti struktur, performa, dan scalable architecture—dan Next.js jadi salah satu skill utama yang sering banget disebut di lowongan kerja internasional. Nah, buat kamu yang pengen belajar lebih terarah, efisien, dan ditemani mentor yang udah punya pengalaman langsung di dunia kerja nyata, **BuildWithAngga adalah tempat terbaik buat mulai**. Di sini kamu gak belajar sendirian, kamu akan: Dibimbing langsung oleh mentor expert yang udah kerja di industri tech dan pernah ngerjain project nyataBikin project nyata seperti company profile, e-commerce, portfolio, hingga admin dashboardAkses kelas seumur hidup, jadi bisa belajar ulang kapan aja tanpa takut expiredDapat sertifikat dan portfolio profesional yang bisa kamu masukin ke LinkedIn atau kirim ke HRGabung ke forum diskusi dan komunitas aktif, tempat kamu bisa tanya, dapet feedback, atau bahkan dapet referensi kerjaFokus ke skill siap kerja remote, bukan cuma teori, tapi praktik langsung seperti di dunia kerja sesungguhnya Dan yang paling penting, kamu akan dapat mindset yang bener: bahwa jadi developer itu bukan soal jago ngoding doang, tapi juga ngerti cara berpikir sistematis, komunikasi tim, dan problem-solving. Jadi… jangan cuma baca artikel ini terus diem aja. Ambil langkah konkrit. Mulai belajar bareng BuildWithAngga, dan siapkan diri kamu buat masuk ke dunia kerja remote yang lebih luas dan lebih menjanjikan 🌍✨ See you di kelas, dan semoga kita bisa kolaborasi bareng sebagai sesama developer profesional. Semangat! 💪🔥

Pendahuluan Lo pernah nggak sih, pas baru install VSCode, malah bingung sendiri? Tampilannya rame, banyak tombol yang nggak jelas fungsinya, terus pas lo ngoding juga rasanya berantakan banget. Gua kasih tau, banyak banget programmer pemula yang ngalamin hal sama. Padahal VSCode itu sebenernya powerful banget asal lo tau cara nyetting-nya biar nyaman dan nggak ribet waktu dipake ngoding. Di artikel ini, gua bakal bantu lo setup VSCode dari nol, mulai dari tema yang enak dilihat, ekstensi yang berguna, sampai setting yang bikin workflow lo makin lancar. Semua dibahas simpel, nggak ribet, dan cocok banget buat lo yang baru mulai belajar ngoding. Yuk, gaskeun! Install VSCode dan Bahasa Pemrograman Sebelum ngoding, pastiin dulu lo udah install VSCode dari situs resminya ya. Jangan asal download dari tempat nggak jelas, bahaya! Setelah itu, tinggal install extension yang sesuai bahasa pemrograman yang lo pake. Misalnya, lo mau belajar JavaScript, install extension JavaScript atau ES7 React biar codingan lo makin gampang dan rapi. Gampang banget, kan? Nggak usah ribet dulu, yang penting lo udah siap mulai ngoding. Pilih Tema & Font yang Nyaman Buat ngoding enak dan betah, tampilan VSCode harus nyaman di mata. Nah, tema dan font itu salah satu kunci pentingnya. Nih, gua jelasin beberapa tema dan font yang recommended banget buat lo: Tema VSCode yang Oke Banget One Dark Pro Tema gelap yang terinspirasi dari Atom's One Dark. Warna-warnanya kalem dan nyaman di mata, cocok buat ngoding lama tanpa bikin capek. Paling banyak diunduh di VSCode Marketplace. One Dark Pro Download One Dark Pro Dracula Theme Official Tema gelap dengan warna-warna cerah yang kontras, bikin kode lo gampang dibaca. Dracula juga tersedia di banyak editor lain, jadi kalau lo pindah-pindah editor, tampilannya tetap konsisten. Dracula Theme Official Download Dracula Theme Official GitHub Theme Mau tampilan yang mirip GitHub? Pakai tema ini. Cocok buat lo yang sering ngecek kode di GitHub dan pengen tampilan editor yang familiar. GitHub Theme Download GitHub Theme Catppuccin for VSCode Tema yang lagi hits banget karena warnanya soft dan eye-friendly, cocok buat yang pengen tampilan modern tapi nggak bikin mata cepat lelah. Selain VSCode, Catppuccin juga tersedia untuk banyak aplikasi lain, jadi lo bisa pakai tema yang konsisten di berbagai tools. Catppuccin for VSCode Catppuccin Icons for VSCode Biar makin matching, lo juga bisa install Catppuccin Icons. Ikonnya dibikin sesuai gaya temanya, jadi folder & file lo tampil lebih konsisten dan estetik. Catppuccin Icons for VSCode Font Coding yang Bikin Ngoding Lebih Nyaman Fira Code Font monospaced yang support ligatures, jadi karakter-karakter tertentu digabung jadi simbol keren kayak => jadi panah. Bikin kode lo lebih rapi dan enak dibaca. Fira Code Download Fira Code JetBrains Mono Font dari JetBrains yang dirancang khusus buat programmer. Tampilan hurufnya jelas dan nyaman, plus support ligatures juga. JetBrains Mono Download JetBrains Mono Cascadia Code Font dari Microsoft yang dirancang buat Windows Terminal dan VSCode. Support ligatures dan tampilannya modern. Cascadia Code Download Cascadia Code Cara Ganti Tema & Font di VSCode Ganti Tema: Tekan Ctrl + Shift + P (Windows/Linux) atau Cmd + Shift + P (Mac).Ketik Preferences: Color Theme.Pilih tema yang udah lo install. Ganti Font: Tekan Ctrl + Shift + P (Windows/Linux) atau Cmd + Shift + P (Mac).Ketik Preferences: Open User Settings (JSON).Tambahkan atau ubah baris berikut: "editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace", "editor.fontLigatures": true Ganti "JetBrains Mono" dengan nama font yang lo pilih. Dengan tema dan font yang pas, ngoding bakal lebih nyaman dan fokus. Coba deh beberapa pilihan di atas dan pilih yang paling cocok buat lo. Ekstensi Wajib VSCode Biar Ngoding Makin Lancar Prettier – Code Formatter Buat lo yang suka kode rapi tanpa harus ngatur indentasi manual, Prettier adalah penyelamat. Ekstensi ini bakal otomatis ngeformat kode lo sesuai aturan yang lo tentuin. 💡 Cocok buat: HTML, CSS, JavaScript, TypeScript, dll.🔗 Install Prettier Prettier - Code formatter ESLint Kalau lo ngoding pakai JavaScript atau TypeScript, ESLint penting banget buat ngecek kesalahan dan ngasih warning langsung di editor. Bisa dibilang kayak “teman cerewet” yang jagain kode lo tetap bersih. 💡 Cocok buat: JS/TS projects, terutama yang pakai React atau Next.js.🔗 Install ESLint ESLint Auto Rename Tag Nulis HTML atau JSX? Gak usah lagi repot ganti tag buka dan tutup satu per satu. Ekstensi ini otomatis ngeganti tag penutup kalau tag pembukanya lo ubah. 🔗 Install Auto Rename Tag Auto Rename Tag Path Intellisense Males nulis path atau sering typo waktu import file? Ini solusinya. Path Intellisense ngasih auto-complete buat path file di proyek lo. 🔗 Install Path Intellisense Path Intellisense Live Server Buat lo yang ngoding pakai HTML dan pengen lihat perubahan langsung di browser tanpa reload manual, ini ekstensi andalan. Sekali klik, langsung jalan! 🔗 Install Live Server Liive Server GitLens - Git supercharged Kalau lo kerja pakai Git, ekstensi ini bakal bantu banget. Bisa liat siapa yang ngedit baris tertentu, kapan, dan bisa ngebandingin versi sebelumnya dengan gampang. 🔗 Install GitLens GitLens - Git supercharged Tips Tambahan Biar Produktif di VSCode Aktifin auto save: biar gak lupa save tiap kali ngoding.Gunakan zen mode (Ctrl + K Z) biar tampilan fokus tanpa gangguan.Coba split editor buat buka 2 file sekaligus. Gampang bandingin atau salin kode.Tambahin shortcut sesuai workflow lo di keyboard shortcuts. Gimana, udah mulai kebayang kan gimana enaknya ngoding kalo VSCode lo udah di-setup dengan rapi? Tinggal install yang perlu, custom dikit, dan siap gas proyek-proyek keren lo. Bonus: Buat Tampilan VSCode Jadi Lebih Clean Udah install tema & ekstensi, tapi pengen tampilannya makin minimalis dan gak ganggu fokus? Nih beberapa tips tambahan biar VSCode lo makin clean: 📁 File & Format "files.trimTrailingWhitespace": true, Otomatis hapus spasi kosong di akhir baris pas file disimpan. Bikin file lo bersih dari "sampah tak terlihat". "files.associations": { "*.css": "tailwindcss" } Semua file .css bakal diperlakukan kayak file TailwindCSS, jadi lo dapet auto-complete dan highlight Tailwind. ✍️ Font & Formatting "editor.fontFamily": "JetBrains Mono, 'Hack Nerd Font', monospace", Nentuin font utama di editor. Kombinasi ini clean dan dukung nerd-font icon. "editor.fontLigatures": true, Aktifin ligature, jadi simbol kayak !==, =>, dll tampil lebih rapi dan keren. "editor.formatOnSave": true, Format otomatis setiap kali save. Gak perlu pencet Shift+Alt+F lagi. "editor.defaultFormatter": "esbenp.prettier-vscode", Gunain Prettier buat auto-format kode. Standar banget buat project modern. 🔍 Tampilan Editor "window.zoomLevel": 2, Perbesar tampilan VSCode biar lebih enak dibaca (zoom 200%). "editor.fontSize": 14, "editor.lineHeight": 24, Ukuran teks & tinggi baris. Kombinasi ini bikin teks padat tapi tetap nyaman. "editor.autoClosingBrackets": "languageDefined", VSCode otomatis nutup tanda kurung/kurawal sesuai bahasa pemrograman. "editor.quickSuggestions": { "other": "off", "comments": "off", "strings": "off" } Matikan auto-suggest di komentar/string supaya gak ganggu. "editor.wordWrap": "on", Otomatis wrap teks panjang biar gak horizontal scroll. "editor.cursorStyle": "line-thin", "editor.cursorWidth": 5, "editor.cursorBlinking": "smooth", "editor.cursorSmoothCaretAnimation": "on", Atur gaya kursor: tipis, halus, dan animasi smooth. Lebih clean & modern. "editor.tabCompletion": "on", "editor.snippetSuggestions": "top", "emmet.triggerExpansionOnTab": true, Aktifin auto-complete pake Tab, snippet muncul di atas, dan Emmet bisa di-trigger dengan Tab (buat HTML/CSS). Bagian: Clean Look "workbench.statusBar.visible": false, "editor.minimap.enabled": false, "breadcrumbs.enabled": true, "breadcrumbs.filePath": "off", "workbench.activityBar.location": "hidden", "editor.guides.indentation": false, Sembunyiin status bar, minimap, dan activity bar. Breadcrumbs tetap nyala tapi file path disembunyiin. Tampilan jadi bersih. "editor.scrollbar.verticalScrollbarSize": 0, "editor.scrollbar.horizontalScrollbarSize": 2, "editor.scrollbar.vertical": "hidden", "editor.scrollbar.horizontal": "hidden", Scrollbar disembunyiin (atau super tipis). Super clean! "editor.renderLineHighlight": "none", "editor.glyphMargin": false, "editor.lineNumbers": "off", "editor.showFoldingControls": "mouseover", "editor.padding.bottom": 2, "editor.padding.top": 2, Nonaktifin highlight line aktif, sembunyiin line number, dan atur padding editor. Hasilnya: minimalis banget. 💻 Clean Look "workbench.statusBar.visible": false, "editor.minimap.enabled": false, "breadcrumbs.enabled": true, "breadcrumbs.filePath": "off", "workbench.activityBar.location": "hidden", "editor.guides.indentation": false, Sembunyiin status bar, minimap, dan activity bar. Breadcrumbs tetap nyala tapi file path disembunyiin. Tampilan jadi bersih. "editor.scrollbar.verticalScrollbarSize": 0, "editor.scrollbar.horizontalScrollbarSize": 2, "editor.scrollbar.vertical": "hidden", "editor.scrollbar.horizontal": "hidden", Scrollbar disembunyiin (atau super tipis). Super clean! "editor.renderLineHighlight": "none", "editor.glyphMargin": false, "editor.lineNumbers": "off", "editor.showFoldingControls": "mouseover", "editor.padding.bottom": 2, "editor.padding.top": 2, Nonaktifin highlight line aktif, sembunyiin line number, dan atur padding editor. Hasilnya: minimalis banget. 📂 Explorer & Sidebar "workbench.sideBar.location": "right", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": false, "workbench.tree.enableStickyScroll": false, "catppuccin-icons.hidesExplorerArrows": true, Sidebar pindah ke kanan, matiin semua konfirmasi explorer, dan sembunyiin panah folder. Simpel & cepat akses. 🧱 UI Tambahan & Tab "window.density.editorTabHeight": "compact", "workbench.layoutControl.type": "menu", "window.commandCenter": false, "workbench.editor.editorActionsLocation": "hidden", "workbench.editor.showTabs": "single", "editor.scrollBeyondLastLine": false, "editor.hideCursorInOverviewRuler": true, "editor.stickyScroll.enabled": false, "window.customTitleBarVisibility": "never", "window.titleBarStyle": "custom", "window.menuBarVisibility": "hidden", "window.newWindowDimensions": "inherit", "window.nativeFullScreen": true, Semua UI disederhanain: tab height kecil, menu & command center disembunyiin, full-screen native, dll. Fokus full ke coding. 🎨 Tema & Icon "workbench.colorTheme": "Catppuccin Frappé", "workbench.iconTheme": "catppuccin-frappe", "workbench.tree.indent": 10, "workbench.tree.renderIndentGuides": "none", "explorer.decorations.colors": false, Aktifin tema Catppuccin Frappé (warna lembut), ikon juga dari Catppuccin, dan tampilan explorer dibuat bersih tanpa garis indentasi atau warna folder. 🔁 Settings Cycler "settings.cycle": [ { "id": "lineNumbers", "values": [ { "editor.lineNumbers": "off" }, { "editor.lineNumbers": "on" } ] } ], "workbench.layoutControl.enabled": false, Bisa toggle line number pake shortcut (kalau install Settings Cycler). Asik buat switching visual style. 🧬 Git "git.confirmSync": false, "git.enableSmartCommit": true, Auto sync Git tanpa konfirmasi & commit langsung tanpa ketik pesan kalau cuma satu file. 🔍 Search & Exclude "search.useIgnoreFiles": true, "search.exclude": { "**/vendor/{[^l],?[^ai]}*": true, "**/public/{[^i],?[^n]}*": true, "**/node_modules": true, "**/dist": true, "**/_ide_helper.php": true, "**/composer.lock": true, "**/package-lock.json": true, "storage": true, ".phpunit.result.cache": true } Search exclude semua folder sampah biar pencarian bersih. Tapi tetep nyisain folder penting kayak laravel, livewire, index.php, dll. 🖥️ Terminal "terminal.integrated.fontLigatures.enabled": true, "terminal.integrated.fontFamily": "JetBrains Mono, 'Hack Nerd Font', Monospace", Terminal juga dikasih font keren + ligature. Jadi matching sama editor. 🌀 TypeScript Auto Imports "typescript.updateImportsOnFileMove.enabled": "always" Kalau lo mindahin file TypeScript, import-nya langsung auto-update. Gak perlu cari-cari dan benerin manual. Full Kode settings.json { "files.trimTrailingWhitespace": true, "files.associations": { "*.css": "tailwindcss" }, "editor.fontFamily": "JetBrains Mono, 'Hack Nerd Font', monospace", "editor.fontLigatures": true, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "window.zoomLevel": 2, "editor.fontSize": 14, "editor.lineHeight": 24, "editor.autoClosingBrackets": "languageDefined", "editor.quickSuggestions": { "other": "off", "comments": "off", "strings": "off" }, "editor.wordWrap": "on", "editor.cursorStyle": "line-thin", "editor.cursorWidth": 5, "editor.cursorBlinking": "smooth", "editor.cursorSmoothCaretAnimation": "on", "editor.tabCompletion": "on", "editor.snippetSuggestions": "top", "emmet.triggerExpansionOnTab": true, "workbench.statusBar.visible": false, "editor.minimap.enabled": false, "breadcrumbs.enabled": true, "breadcrumbs.filePath": "off", "workbench.activityBar.location": "hidden", "editor.guides.indentation": false, "editor.scrollbar.verticalScrollbarSize": 0, "editor.scrollbar.horizontalScrollbarSize": 2, "editor.scrollbar.vertical": "hidden", "editor.scrollbar.horizontal": "hidden", "editor.renderLineHighlight": "none", "editor.glyphMargin": false, "editor.lineNumbers": "off", "editor.showFoldingControls": "mouseover", "editor.padding.bottom": 2, "editor.padding.top": 2, "workbench.sideBar.location": "right", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": false, "workbench.tree.enableStickyScroll": false, "catppuccin-icons.hidesExplorerArrows": true, "window.density.editorTabHeight": "compact", "workbench.layoutControl.type": "menu", "window.commandCenter": false, "workbench.editor.editorActionsLocation": "hidden", "workbench.editor.showTabs": "single", "editor.scrollBeyondLastLine": false, "editor.hideCursorInOverviewRuler": true, "editor.stickyScroll.enabled": false, "window.customTitleBarVisibility": "never", "window.titleBarStyle": "custom", "window.menuBarVisibility": "hidden", "window.newWindowDimensions": "inherit", "window.nativeFullScreen": true, "workbench.colorTheme": "Catppuccin Frappé", "workbench.iconTheme": "catppuccin-frappe", "workbench.tree.indent": 10, "workbench.tree.renderIndentGuides": "none", "explorer.decorations.colors": false, "settings.cycle": [ { "id": "lineNumbers", "values": [ { "editor.lineNumbers": "off" }, { "editor.lineNumbers": "on" } ] } ], "workbench.layoutControl.enabled": false, "git.confirmSync": false, "git.enableSmartCommit": true, "search.useIgnoreFiles": true, "search.exclude": { "**/vendor/{[^l],?[^ai]}*": true, "**/public/{[^i],?[^n]}*": true, "**/node_modules": true, "**/dist": true, "**/_ide_helper.php": true, "**/composer.lock": true, "**/package-lock.json": true, "storage": true, ".phpunit.result.cache": true }, "terminal.integrated.fontLigatures.enabled": true, "terminal.integrated.fontFamily": "JetBrains Mono, 'Hack Nerd Font', Monospace", "typescript.updateImportsOnFileMove.enabled": "always" } Maka tampilan VSCode lo akan seperti ini: VSCode Clean UI Penutup Jadi gimana? VSCode lo sekarang udah makin kece, bersih, dan pastinya lebih enak dipake buat ngoding, kan? Dengan setup yang simpel tapi efektif ini, lo nggak cuma bikin editor jadi enak dipandang, tapi juga ngebantu banget ningkatin fokus dan produktivitas pas ngoding. Gue ngerti banget, ngoding kadang bisa bikin mumet, apalagi kalau tampilannya berantakan atau fitur-fitur nggak dimaksimalkan. Makanya, jangan anggap remeh soal setup VSCode karena ini bisa jadi senjata utama lo biar makin enjoy dan efisien pas ngoding. 🎓 Rekomendasi Kelas Gratis dari BuildWithAngga Biar makin mantap dan nggak cuma jago setting VSCode doang, nih gue kasih beberapa kelas keren dari BuildWithAngga yang bisa bantu lo upgrade skill: 🔥 Adonis JavaScript Framework: Basic Web Development Cocok banget buat lo yang pengen nyobain fullstack development dengan JavaScript. Setelah VSCode lo kece, tinggal gas ngoding backend pakai Adonis!✅ Vanilla JavaScript OOP + LocalStorage: Web Task Management Pas banget buat yang pengen belajar bikin aplikasi to-do list dari nol. Kelas ini ngajarin OOP pake JavaScript murni, jadi lo bisa ngerti konsep dasarnya sebelum loncat ke framework.💸 Mastering Laravel: Bikin Web Seperti Saweria Buat lo yang suka Laravel, kelas ini bisa ngebuka wawasan lo lebih dalam lagi. Materinya real project banget, dan VSCode setup kita tadi juga cocok banget buat Laravel dev. Kalau setup lo udah rapi, tinggal tambahin ilmunya lewat kelas-kelas di atas. Belajar makin semangat, produktivitas naik, dan ngoding nggak ribet lagi. Jangan lupa share artikel ini ke temen lo yang VSCode-nya masih “default banget” biar sama-sama upgrade workspace mereka juga! Selamat ngoding, dan semoga makin jago tiap harinya. 🚀👨‍💻

Daftar Isi PendahuluanBenefit Setelah BacaDownload Proyek (Free)Menampilkan di BrowserMenampilkan ke VSCodeOpen BrowserNavigasi & Pengelolaan FileQuick Open (Buka File Cepat)Buka ExplorerSembunyikan/Tampilkan SidebarEditing & Manipulasi KodeToggle Comment (Komentar/Unkomentar)Pindah Baris ke Atas/BawahDuplikat BarisHapus Baris CepatAutocomplete / Saran KodePencarianCari dalam File AktifCari & Ganti dalam FileCari di Semua File (Global Search)Multi-kursor & Editing CepatMulti-kursor Manual (Klik Beberapa Tempat Sekaligus)Pilih Kemunculan Selanjutnya dari Kata yang SamaPilih Semua Kemunculan Kata yang SamaTerminal & EksekusiToggle TerminalPenutup Pendahuluan Kalau kamu sering ngoding di VSCode, tapi cuma pakai mouse buat buka file, cari baris kode, atau pindah-pindah baris itu ibarat naik motor tapi lupa ada gigi 2, 3, dan 4. Bisa jalan sih, tapi lambat dan capek sendiri. Sebenernya, VSCode tuh punya segudang shortcut kece yang bisa bikin kamu ngoding kayak ninja. Cepet, efisien, dan tanpa banyak klik sana-sini. Ibaratnya, kamu dan keyboard jadi partner sejati yang saling ngerti tanpa banyak basa-basi. Di artikel ini, kita bakal ngebahas 15 shortcut paling sering dipakai programmer yang bisa langsung kamu pake di Windows, Linux, maupun macOS. Cocok banget buat kamu yang pengen ngoding lebih cepat, lebih rapi, dan lebih “pro-looking”. Benefit Setelah Baca ✅ Ngoding jadi lebih cepat ✅ Fokus tetap terjaga ✅ Ngerasa makin paham VSCode ✅ Terlihat lebih pro Download Proyek (Free) Shaynakit - Ngekos Template HTML Di tutorial kali ini, kita bakal main bareng proyek kece dari Shaynakit. Kabar baiknya: ini gratisan coy, dan yang lebih keren lagi, kodenya udah disediain. Jadi lo nggak perlu start dari nol, tinggal pakai atau oprek-oprek dikit biar sesuai sama kebutuhan lo. Proses ngoding jadi lebih ringan, cepet, dan pastinya nggak bikin pusing pala barbie. Nah, Shaynakit ini tuh ibarat warung makan buat front-end dev banyak pilihan desain yang udah sepaket sama kodenya. Ada yang gratis, ada juga yang premium. Tapi tenang, yang gratis pun udah lumayan royal kok. Biasanya yang dibatesin cuma jumlah halamannya aja. Kalau yang premium? Wah, itu mah all you can code! Semua bagian udah tinggal pakai, plug & play banget. Oke, sekarang bagian pentingnya cara dapetin template gratisnya. Gampang, nggak perlu ritual khusus. Cukup ikutin langkah-langkah ini: Buka situs utamanya di sini: https://shaynakit.com/landing.Klik menu Register atau langsung aja meluncur ke https://shaynakit.com/register buat daftar akun dulu.Setelah berhasil daftar dan login, buka halaman template yang mau dipakai di sini: https://shaynakit.com/details/ngekos-find-house-details-bokking-success-html-tailwind-css-template.Klik tombol Download, lalu pilih opsi Free Trial.Lanjut klik Start Today buat mulai akses gratisnya.Setelah itu, balik lagi ke halaman template tadi dan klik tombol Download sekali lagi.File-nya bakal langsung keunduh dalam format .zip.Simpan file .zip itu ke folder lokal kamu, misalnya ke: ./source-code/ngekos.zip. Udah, beres. Sekarang kamu punya satu paket desain + kode yang siap kamu eksplor. Tinggal buka, utak-atik, terus bawa ke proyek kamu. Menampilkan di Browser Sekarang kita masuk ke tahap pamer, alias nunjukin hasilnya. Soalnya, masa iya udah ngoprek tapi nggak dicek tampilannya? Kita harus lihat dong, bener nggak sih desainnya udah nongol sesuai ekspektasi atau masih perlu sentuhan manis. Nah, cara buat nampilin proyeknya biar langsung bisa dicek, gini nih langkah-langkahnya: Menampilkan ke VSCode Menampilkan Cari filenya yang udah kalian download kayak gambar ini: File Explorer - Zip File Extract All filenya biar jadi folder biasa, kalau udah, selanjutnya.Masuk ke dalam foldernya dulu klik 2x di “ngekos”: File Explorer - Folder Proyek Terus klik kanan, cari icon VSCodenya, kalau udah nemu tinggal klik aja, nanti bakal kebuka kok kayak gini : File Explorer - Want To Open in VSCode Install Proyek Sebelum kita ngapa-ngapain lebih jauh, kamu harus ngejalanin perintah npm install. Anggap aja ini kayak lagi nyiapin perlengkapan perang. 😄 Jadi gini, pas kamu ambil proyek dari orang lain apalagi dari template, biasanya sih kodenya udah lengkap. Tapi, alat-alat pendukungnya kayak library, plugin, atau tools lainnya belum otomatis ikut ke-download. Nah, npm install itu tugasnya buat manggil semua "anak buah" yang dibutuhin proyek ini, sesuai daftar yang ada di package.json. Ibaratnya kamu lagi masak, resepnya udah ada, tapi bahan-bahannya masih harus dibeli. Nah, npm install itu kayak pergi ke supermarket dan belanja semua bahan yang tertulis di resep. Setelah itu? Baru deh bisa masak tanpa drama. Atau dalam hal ini: ngoding tanpa error. Jalanin kayak gini : npm install VSCode - Proyek Access Open Browser Nah, kalau semua udah ke-install, sekarang saatnya nikmatin hasil kerja keras kita. Iya, kodenya udah bisa langsung dilihat di browser. Tapi... biar lebih santai dan nggak ribet bolak-balik buka file manual, mendingan kita pake bantuan dari temen setia: Live Preview extension kece di VSCode. Tinggal klik, dan boom! Proyek kamu langsung muncul di panel kanan, kayak lagi buka jendela buat ngintip hasil desain. Nggak perlu buka tab browser sendiri, nggak perlu ketik-ketik alamat lokal. Praktis, cepet, dan pastinya bikin workflow makin lancar. Download Extensionsnya VSCode - Live Preview Extension Jadi ceritanya gini... Live Preview itu semacam extension kece di VSCode yang bikin kita bisa langsung liat hasil HTML tanpa harus buka browser manual. Gampangnya, ini tuh kayak kamu lagi masak mi instan biasanya harus pindah ke meja makan buat nyicipin, kan? Nah, Live Preview tuh kayak kamu nyicip langsung di dapur. Praktis, hemat tenaga, dan nggak bolak-balik. Setiap kali kamu ngedit kodenya, hasilnya langsung muncul di panel dalam VSCode. Nggak perlu repot buka Chrome, buka tab baru, atau pencet refresh setiap detik. Pokoknya real-time banget, cocok buat kamu yang suka kerja cepat tapi tetap rapi. Cara installnya gini: Buka dulu VSCode kamu, pastikan project-nya udah kebuka juga biar langsung bisa lanjut. Lalu, klik ikon Extensions di sisi kiri, itu loh yang bentuknya kayak potongan puzzle. Kalau mau cepet, bisa juga pencet Ctrl + Shift + X. Di kolom pencarian, ketik aja: Live Preview Nanti bakal muncul beberapa pilihan. Pilih yang buatan Microsoft ya, itu yang resmi dan paling stabil. Kalau udah ketemu, tinggal klik tombol Install, dan tunggu sebentar sampai prosesnya kelar. Open Proyek Setelah extension-nya terpasang, kamu bisa langsung pakai. Caranya, klik kanan di file HTML kamu, terus pilih "Show Preview". VSCode - Open Proyek In Side Bar Hasilnya gini : VSCode - Result Proyek Hasilnya super mantap, jadi bisa edit sambil langsung lihat perubahannya disamping. Karena kita sudah berhasil menampilkan, yuk langsung kita bahas shortcut-shortcut andalan yang sering dipake programmer di bawah ini: Navigasi & Pengelolaan File Ngoding itu bukan cuma soal nulis kode, tapi juga soal navigasi alias gimana caranya kamu berpindah dari satu file ke file lain, atau dari satu folder ke folder lain, secepat kilat. Kalau kamu masih suka scroll-scroll manual di sidebar atau buka file lewat mouse, fix kamu butuh shortcut ini. Yuk kita bahas 3 shortcut penting yang bakal bikin kamu serasa punya GPS dalam dunia koding: Quick Open (Buka File Cepat) VSCode - Quck Open Bayangin kamu punya ratusan file dalam satu project. Masa iya mau klik satu-satu buat nyari LoginController.js? Dengan shortcut ini, cukup tekan tombolnya, ketik nama file-nya, langsung lompat ke sana. Cepat, efisien, gak bikin jari pegel. Shortcutnya : Windows/Linux: Ctrl + PmacOS: Cmd + P Buka Explorer Shortcut ini kayak pintu masuk utama ke rumah kamu alias ke struktur folder project. Sekali tekan, sidebar muncul. Tekan lagi, sidebar hilang. Cocok banget kalau kamu butuh liat-liat file tapi gak mau layar terlalu penuh. Shortcutnya : Windows/Linux: Ctrl + Shift + EmacOS: Cmd + Shift + E Sembunyikan/Tampilkan Sidebar Kadang kamu pengen fokus full ke kodingan tanpa gangguan sidebar. Nah, shortcut ini bisa langsung nyembunyiin sidebar dalam sekali pencet. Kapanpun kamu pengen workspace yang bersih dan lega, ini tombol penyelamatnya. Shortcutnya : Windows/Linux: Ctrl + BmacOS: Cmd + B Kalau shortcut ini udah kamu hafal dan jadi kebiasaan, kamu bakal ngerasa file explorer bukan lagi tempat yang ribet, tapi jadi "temen setia" yang siap dipanggil kapan aja. Editing & Manipulasi Kode Ngedit kode itu kayak ngerakit lego. Kadang kamu perlu nyusun, kadang pindahin, kadang duplikat, kadang juga yah, buang aja sekalian. Nah, bagian ini bakal ngebantu kamu ngelakuin semua itu tanpa ribet klik-klik mouse. Cuma modal jari dan shortcut, semua bisa beres! Toggle Comment (Komentar/Unkomentar) Lagi ngoding dan pengen matiin beberapa baris buat testing? Gak usah hapus, tinggal “slash” aja! Shortcut ini ibarat remote buat bisuin baris kode komentar atau unkomentar tinggal tekan satu tombol. Hemat waktu dan gak bikin kamu lupa logic aslinya. Shortcutnya : Windows/Linux: Ctrl + /macOS: Cmd + / Pindah Baris ke Atas/Bawah Kamu salah naruh baris kode dan pengen geser naik atau turun? Jangan di-cut paste, bro. Gunain shortcut ini, baris langsung lompat ke atas/bawah kayak ninja loncat. Super handy buat rapiin function atau urutan variabel. Shortcutnya : Windows/Linux: Alt + ↑ / ↓macOS: Option + ↑ / ↓ Duplikat Baris Lagi bikin baris yang mirip-mirip? Daripada ngetik ulang, mending duplikat aja! Shortcut ini bikin baris yang kamu pilih langsung kembar dalam sekejap. Cocok banget buat ngeluarin template, struktur data, atau elemen HTML yang berulang. Shortcutnya : Windows/Linux: Shift + Alt + ↑ / ↓macOS: Shift + Option + ↑ / ↓ Hapus Baris Cepat Ada baris nganggur yang bikin kode keliatan crowded? Shortcut ini langsung hapus satu baris tanpa perlu kamu sorot dulu. Sekali tekan, bersih kayak disapu satpam mall. Shortcutnya : Windows/Linux: Ctrl + Shift + KmacOS: Cmd + Shift + K Autocomplete / Saran Kode Ini dia senjata andalan VSCode. Lagi males ngetik panjang-panjang? Tekan shortcut ini, dan VSCode langsung kasih saran nama variabel, function, bahkan import otomatis. Serasa punya asisten pribadi yang ngerti kamu banget. Shortcutnya : Windows/Linux: Ctrl + SpacemacOS: Cmd + Space(Catatan: Bisa bentrok dengan Spotlight Search di macOS, bisa diubah di System Preferences) Pencarian Kadang yang bikin capek ngoding bukan nulis kodenya, tapi... nyari! Nyari bug, nyari nama function, nyari kata “error” yang entah nongol di mana. Untungnya, VSCode punya banyak shortcut pencarian yang bikin kamu serasa punya radar sendiri. Cari dalam File Aktif Ini basic banget, tapi wajib dikuasai. Lagi buka satu file, terus pengen cari kata atau variabel? Tinggal tekan shortcut ini, dan semua keyword langsung nongol dengan highlight. Gak perlu scroll kayak cari mantan di Instagram langsung ketemu. Shortcutnya : Windows/Linux: Ctrl + FmacOS: Cmd + F Cari & Ganti dalam File Misalnya kamu nulis const data = di banyak tempat, dan tiba-tiba harus ganti jadi const userData = jangan ganti satu-satu, bro. Tekan shortcut ini dan langsung edit massal dalam satu file. Ganti nama, ganti istilah, bahkan ganti nasib (kalau bisa) 😁 Shortcutnya : Windows/Linux: Ctrl + HmacOS: Cmd + Option + F Cari di Semua File (Global Search) Ini dia jurus pamungkas. Kamu gak tahu “handleSubmit” itu ditulis di file mana? Shortcut ini bakal nyisir seluruh project kamu. Serasa punya Google pribadi buat folder VSCode kamu. Super lifesaver pas nyari bug yang sembunyi. Shortcutnya : Windows/Linux: Ctrl + Shift + FmacOS: Cmd + Shift + F Multi-kursor & Editing Cepat Pernah gak sih, kamu pengen ngetik atau edit di banyak tempat sekaligus? Misalnya mau ganti nama variabel, nambah atribut HTML, atau ubah beberapa baris kode yang mirip. Nah, fitur-fitur ini bikin kamu bisa jadi kayak punya banyak tangan. Tinggal arahkan, ketik, dan semua baris ngikutin. Kayak kamu nyuruh pasukan buat ngetik bareng-bareng 💪 Multi-kursor Manual (Klik Beberapa Tempat Sekaligus) Mau nambah kursor di banyak tempat? Tinggal Alt + Klik aja. Cocok banget buat kamu yang pengen nulis atau hapus di beberapa titik berbeda. Serasa punya 10 jari tambahan yang bisa disuruh ngetik bareng. Shortcutnya : Windows/Linux: Alt + KlikmacOS: Option + Klik Pilih Kemunculan Selanjutnya dari Kata yang Sama Lagi ganti nama variabel yang muncul berkali-kali? Daripada cari satu-satu, cukup arahkan ke salah satunya lalu tekan shortcut ini. Kursor langsung lompat ke kemunculan berikutnya. Tekan terus sampai semua kepilih. Cepat dan elegan kayak ngetik sambil ngopi ☕. Shortcutnya : Windows/Linux: Ctrl + DmacOS: Cmd + D Pilih Semua Kemunculan Kata yang Sama Ini versi ekstrim dari Ctrl + D. Langsung pilih semua kemunculan kata dalam satu file. Sekali ketik, semuanya berubah. Cocok buat rename global dalam file, atau ganti kata yang salah ketik dari awal. Tinggal tekan dan boom semuanya seragam. Shortcutnya : Windows/Linux: Ctrl + Shift + LmacOS: Cmd + Shift + L Terminal & Eksekusi Kalau editor adalah panggung utama, terminal itu backstage-nya. Tempat semua "keajaiban" dieksekusi: running server, commit git, install package, atau kadang… cuma buat ngecek apakah npm run dev masih bisa jalan 😅. Nah, biar gak bolak-balik buka terminal luar, VSCode udah sediain semuanya langsung di dalem. Dan shortcut ini bikin kamu buka-tutup terminal secepat buka snack tengah malam. Toggle Terminal Tinggal tekan tombol ini dan... jreeeng, terminal langsung muncul di bawah layarmu. Tekan lagi, hilang. Kayak sulap. Ini bikin kamu bisa tetap fokus di satu jendela tanpa harus tab-tab ke luar. Kode di atas, terminal di bawah satu layar, dua dunia ✨. Catatan: Tombol ``` ini biasanya ada di sebelah kiri angka 1 (di atas tombol Tab). Jadi inget aja, deket banget sama angka 1… kayak shortcut ini yang bakal jadi shortcut nomor satu kamu 😎 Shortcutnya : Windows/Linux: `Ctrl + ``macOS: `Cmd + `` Penutup Nah bro, itu dia 15 shortcut VSCode yang sering banget dipakai para programmer baik yang masih ngoding sambil buka tutorial YouTube, maupun yang udah ngoding sambil tutup mata 🤓. Shortcut ini ibarat jurus ninja buat kamu yang pengen kerja lebih cepat, lebih rapi, dan pastinya lebih asik. Karena ngoding itu bukan soal seberapa banyak baris yang kamu ketik, tapi seberapa cerdas kamu mengendalikannya. Dan shortcut adalah alat tempur kamu di medan perang digital. Coba bayangin, kamu bisa buka file, edit cepat, cari bug, sampai ngejalanin terminal... semua cuma pake beberapa jari. Kerja lebih efisien = waktu lebih banyak buat ngopi, scroll TikTok, atau... belajar hal baru. Win-win kan? Terakhir, inget: shortcut itu kayak kebiasaan awalnya kagok, tapi lama-lama jadi refleks. Jadi mulai sekarang, coba satu per satu. Pakai terus, dan rasain sendiri bedanya. Sampai jumpa di artikel selanjutnya! Keep ngoding, keep keren! 💻🔥

Daftar Isi PendahuluanBenefit Setelah Membaca Panduan Ini:🧠 1. Lebih Paham Tentang SEO dari Sisi HTML🔍 2. Bisa Bedakan Mana HTML Biasa dan Mana yang SEO-Friendly🛠️ 3. Tahu Tools Gratisan Buat Cek HTML📌 4. Bisa Hindari Kesalahan Umum yang Fatal☑️ 5. Siap Naik Level: Dari Front-End ke Front-End yang SEO ReadyPersiapan Proyek Dasar:Buat Folder ProyekMembuat File HTML BaruMenjalankan Proyek Menggunakan Live ServerPort Forwarding<title>: Judul Halaman yang Muncul di GoogleContoh Kode HTMLKesalahan Umum yang Harus DihindariCara NgetesTips Menulis Title yang SEO-Friendly<meta name="description"> – Penjelasan Singkat Halaman yang Mempengaruhi KlikFungsi <meta name="description"> untuk SEOContoh Kode HTMLKesalahan Umum yang Harus DihindariCara NgetesTips Menulis Deskripsi SEO-Friendly<h1> – Judul Utama di Dalam Halaman HTMLFungsi <h1> untuk SEOContoh Kode HTMLKesalahan Umum yang Harus DihindariCara NgetesTips Menulis <h1> yang Kuat<h2> – Subjudul untuk Bantu Struktur dan NavigasiFungsi <h2> untuk SEOContoh Kode HTMLKesalahan Umum yang Harus DihindariNgetes Heading <h2>Tips Praktis Penulisan Heading<a> – Tautan (Link) yang SEO-FriendlyFungsi <a> untuk SEOContoh Kode HTMLPenjelasan:Kesalahan Umum yang Harus DihindariTips Praktis Tautan SEO-Friendly<img> dan Atribut alt – Optimasi Gambar untuk SEOFungsi <img> + alt untuk SEOContoh Kode HTMLPenjelasan:Kesalahan Umum yang Harus DihindariTips Gambar SEO-Friendly<strong> dan <em> – Menegaskan Makna KontenFungsi <strong> dan <em> untuk SEOContoh Kode HTMLPenjelasan:Kesalahan Umum yang Harus DihindariTips Praktis<meta> – Metadata yang Berperan Besar dalam SEOFungsi <meta> untuk SEOContoh Kode HTMLPenjelasan:Kesalahan Umum yang Harus DihindariTips Meta Tag SEO-FriendlyStruktur HTML yang Valid – Biar SEO Nggak Babalas Karena Error!Fungsi Struktur HTML yang Valid untuk SEOContoh Struktur HTML yang Rapi dan ValidKesalahan Umum yang Harus DihindariTips Struktur HTML SEO-FriendlyPenutup Pendahuluan Kalau kamu lagi ngulik cara supaya website kamu nongol di halaman pertama Google, maka kamu wajib banget kenalan sama elemen-elemen HTML yang punya peran penting dalam SEO. Banyak orang mikir SEO itu cuma soal nulis artikel panjang atau pasang backlink di sana-sini. Padahal, struktur HTML di balik layar juga punya pengaruh besar. Search engine kayak Google baca struktur HTML buat ngerti isi halaman kamu mulai dari judul, deskripsi, heading, sampai gambar. Nah, artikel ini bakal ngebahas 10 elemen HTML yang paling krusial buat SEO, lengkap dengan: ✅ Penjelasan detail biar kamu paham fungsinya ✅ Contoh kode biar bisa langsung praktek ✅ Kesalahan umum biar kamu gak kejebak ✅ Cara ngetes dengan tools gratisan ✅ Bonus: alternatif tools premium kalau kamu mau level up Cocok banget buat kamu yang baru mulai belajar SEO ataupun yang udah lama ngoding tapi pengen optimasi web biar makin SEO-friendly. Yuk, kita bahas satu per satu elemen pentingnya. Mulai dari yang paling basic, tapi paling sering disepelein: <title>. Benefit Setelah Membaca Panduan Ini Setelah ngulik seluruh panduan ini, kamu bakal dapetin banyak manfaat langsung yang bisa kamu terapkan ke website kamu. Berikut daftarnya: 🔍 1. Lebih Paham Tentang SEO dari Sisi HTML Kamu nggak cuma ngerti teori, tapi juga tahu kode nyata yang berpengaruh langsung ke ranking di Google. 🧠 2. Bisa Bedakan Mana HTML Biasa dan Mana yang SEO-Friendly Sekarang kamu udah bisa bedain: <title> yang sekadar judul biasa vs yang teroptimasi SEO<meta> yang kosong vs yang nendang buat ranking<h1> yang asal tempel vs yang benar-benar satu per halaman 🛠️ 3. Tahu Tools Gratisan Buat Cek HTML Kamu jadi tahu: Cara publish lokal pakai VSCode port forwardingCara cek preview SEO pakai metatags.ioValidasi HTML pakai W3C Validator Dan ini semua GRATIS tanpa perlu install plugin aneh-aneh! 🧯 4. Bisa Hindari Kesalahan Umum yang Fatal Karena tiap elemen kita bahas lengkap bareng contoh kesalahan real, kamu bisa langsung ngehindarinya sebelum bikin kerusakan SEO yang susah diperbaiki. 📈 5. Siap Naik Level: Dari Front-End ke Front-End yang SEO Ready Buat kamu yang kerja di front-end atau bikin website sendiri, panduan ini bisa bantu kamu: Tampil lebih profesionalBikin klien makin percayaMeningkatkan performa website di Google Persiapan Proyek Dasar Sebelum masuk ke materi, pastikan kamu sudah menyiapkan proyek dasar untuk praktik. Berikut ini langkah-langkahnya: Buat Folder Proyek Buat folder khusus untuk proyek belajar HTML dan CSS.Misalnya, beri nama folder tersebut bwa-belajar-html.Letakkan folder ini di tempat yang mudah diakses, seperti Desktop atau Documents. Membuat File HTML Baru Di dalam folder bwa-belajar-html, buat file baru dengan nama index.html.File ini akan menjadi halaman utama proyek web yang kamu buat.Gunakan editor teks seperti Visual Studio Code untuk membuka dan mengedit file ini. <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>10 Elemen HTML Penting untuk SEO | Panduan Lengkap BuildWithAngga</title> </head> <body> <!-- isi halaman --> </body> </html> Menjalankan Proyek Menggunakan Live Server Agar setiap perubahan yang kamu buat langsung terlihat di browser tanpa harus buka file manual, gunakan ekstensi Live Server di VS Code: Buka VS Code.Klik ikon ekstensi di sidebar, cari Live Server, lalu instal.Setelah ekstensi terpasang, klik kanan pada file index.html dan pilih “Open with Live Server”.Browser akan terbuka otomatis dan menampilkan halaman index.html.Setiap kali kamu menyimpan perubahan, browser akan merefresh secara otomatis. Port Forwarding Buka VS Code.Tekan ctrl + j klik pada bagian Ports.Tambahkan Port yang berjalan contoh: 8080.Kalau belum login GitHub, kamu akan diminta login dulu.Ubah Visibility menjadi Public agar bisa diakses dari internet. VSCode Port Forwarding <title>: Judul Halaman yang Muncul di Google Elemen <title> adalah salah satu elemen HTML paling penting buat SEO. Title ini muncul di tab browser, dan yang lebih penting lagi: ini yang biasanya ditampilkan Google sebagai judul di hasil pencarian. Google pakai <title> buat ngerti topik utama halaman kamu. Kalau title kamu menarik dan mengandung kata kunci, peluang buat diklik (CTR) bakal lebih tinggi. Tapi jangan asal nulis harus tetap relevan sama konten. Apa yang bikin title bagus? Mengandung kata kunci utamaRingkas tapi informatif (ideal 50–60 karakter)Bisa bikin orang penasaran dan mau klikUnik di tiap halaman (hindari duplikat) Contoh Kode HTML <head> <title>10 Tips SEO untuk Pemula yang Wajib Kamu Tahu</title> </head> Contoh ini cocok buat artikel panduan. Kalau kamu punya halaman produk, bisa kayak gini: <title>Hijab Instan Kekinian | Hijabku.id</title> Kesalahan Umum yang Harus Dihindari Tag <title> adalah salah satu elemen HTML paling penting buat SEO. Ini yang muncul sebagai judul utama di hasil pencarian Google, dan juga di tab browser. Tapi, masih banyak banget yang nulisnya asal-asalan. Berikut kesalahan yang sering terjadi: Menulis <title>Home</title> Judul seperti “Home” terlalu umum dan nggak menggambarkan apa isi halamannya. Google juga nggak bisa tahu ini halaman tentang apa, jadi nilainya untuk SEO sangat rendah. Menulis <title>Untitled Document</title> Ini biasanya muncul kalau kita lupa ganti template default dari text editor. Hasilnya? Google bingung, user juga bingung. Bisa bikin halaman kamu dianggap tidak profesional. Judul terlalu panjang (lebih dari 60 karakter) Judul yang kepanjangan akan dipotong di hasil pencarian (SERP), jadi bagian penting di belakang bisa nggak kelihatan. Ini mengurangi peluang orang buat ngeklik halaman kamu. Tidak menyertakan nama brand atau nama website Kalau kamu nggak mencantumkan brand di judul, orang nggak tahu ini dari website mana. Padahal, nama brand bisa bikin halaman kamu lebih terpercaya dan mudah dikenali. Duplikat title di banyak halaman Kalau kamu punya banyak halaman dengan <title> yang sama, Google bisa menganggap konten kamu mirip atau bahkan duplikat. Ini bisa menurunkan nilai SEO secara keseluruhan karena Google jadi bingung mau memprioritaskan halaman yang mana. Cara Ngetes Jalankan file HTML pakai Live Server di VSCodeAktifkan Port Forwarding Bawaan → Dapatkan URL publikKunjungi https://metatags.ioTempel URL kamuCek bagian "Page Title" → Pastikan muncul dengan benar dan tidak terpotong Local Result: Page Title Tips Menulis Title yang SEO-Friendly: Taruh kata kunci di awalTambahkan nama brand di akhirBuat orang penasaran tanpa clickbaitMaksimal 60 karakter supaya nggak terpotong di Google <meta name="description"> – Penjelasan Singkat Halaman yang Mempengaruhi Klik Kalau <title> itu kayak judul besar, maka <meta name="description"> ini semacam caption atau teaser. Elemen ini nggak langsung berpengaruh ke ranking, tapi sangat penting buat ngundang klik dari hasil pencarian Google. Intinya: bikin orang tertarik buat klik halaman kamu. Fungsi <meta name="description"> untuk SEO Muncul di bawah judul saat tampil di hasil pencarian GoogleMembantu user memahami isi halaman sebelum klikMeningkatkan CTR (Click Through Rate), yang secara tidak langsung memengaruhi ranking Contoh Kode HTML <!DOCTYPE html> <html lang="id"> <head> <title>10 Elemen HTML Penting untuk SEO | Panduan Lengkap BuildWithAngga</title> <meta name="description" content="Pelajari 10 elemen HTML penting yang wajib ada di setiap halaman website kamu. Panduan lengkap, contoh kode, dan cara ngetes gratisan."/> </head> <body> <!-- isi halaman --> </body> </html> Contoh di atas konsisten dengan judul dan menawarkan value yang jelas: ada 10 elemen penting, contoh kode, dan cara testing gratis. Kesalahan Umum yang Harus Dihindari Meta description itu ibarat iklan singkat buat halaman kamu di hasil pencarian Google. Tapi banyak orang kurang memanfaatkannya dengan baik. Yuk, simak beberapa kesalahan umum yang sering terjadi: Tidak menuliskan meta description sama sekali Kalau kamu nggak nulis tag <meta name="description">, Google akan ambil teks secara otomatis dari bagian lain halaman. Sayangnya, hasilnya bisa acak dan nggak nyambung dengan isi sebenarnya. Ini bikin hasil pencarian kamu kurang menarik untuk diklik. Menulis deskripsi terlalu panjang (lebih dari 160 karakter) Deskripsi yang kepanjangan akan dipotong di hasil pencarian (SERP). Akibatnya, informasi penting di bagian akhir bisa hilang dan pesan yang mau kamu sampaikan jadi nggak utuh. Hanya mengulang judul tanpa tambahan informasi baru Misalnya judulnya “10 Tips SEO” dan deskripsinya juga “10 Tips SEO” ini bikin meta description kamu jadi hambar dan nggak memberi alasan tambahan buat orang nge-klik. Padahal fungsinya untuk meyakinkan user bahwa halaman kamu layak dikunjungi. Menulis deskripsi yang terlalu umum atau nggak menggambarkan isi halaman Deskripsi seperti “Ini adalah artikel terbaik” atau “Lihat selengkapnya di sini” sangat tidak spesifik dan nggak menjelaskan apa yang user bakal dapat. Google dan user butuh kejelasan, bukan kalimat generik. Melakukan keyword stuffing dalam deskripsi Menjejalkan banyak kata kunci seperti “SEO, tips SEO, belajar SEO, teknik SEO” secara berlebihan bikin deskripsi terlihat nggak natural. Ini bisa dianggap spam oleh Google dan justru menurunkan peringkat halaman kamu. Cara Ngetes Klik Parse Meta DataCek bgian “Page Description” → Pastikan muncul semua Local Result: Page Description Tips Menulis Deskripsi SEO-Friendly Panjang ideal: 120–160 karakterSertakan kata kunci utama secara naturalTambahkan manfaat atau ajakan seperti “pelajari”, “temukan”, “gratis”, “panduan lengkap”Hindari gaya robot tulis seperti ngobrol sama manusia <h1> – Judul Utama di Dalam Halaman HTML Elemen <h1> adalah judul utama yang tampil di halaman, bukan di tab browser (itu tugasnya <title>). Mesin pencari seperti Google dan Bing nganggap <h1> sebagai penanda paling penting buat topik utama dari konten kamu. Fungsi <h1> untuk SEO Memberi tahu Google topik inti dari halamanMenjadi rujukan struktur heading lainnya (semacam kepala keluarga heading 😄)Meningkatkan aksesibilitas, terutama buat pembaca screen readerMeningkatkan pengalaman pengguna (UX) karena membantu struktur visual konten Contoh Kode HTML <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> 10 Elemen HTML Penting untuk SEO | Panduan Lengkap BuildWithAngga </title> <meta name="description" content="Pelajari 10 elemen HTML penting yang wajib ada di setiap halaman website kamu. Panduan lengkap, contoh kode, dan cara ngetes gratisan." /> </head> <body> <h1> 10 Elemen HTML Penting untuk SEO (Lengkap + Contoh Kode + Kesalahan Umum + Cara Ngetes Gratisan) </h1> </body> </html> <h1>-nya konsisten dengan judul artikel dan meta description. Ini penting banget biar sinyal SEO kuat dan nggak bikin bingung mesin pencari maupun pembaca. Kesalahan Umum yang Harus Dihindari Heading <h1> adalah elemen paling penting untuk memberi tahu Google dan pembaca tentang inti utama dari sebuah halaman. Tapi sayangnya, masih banyak yang salah pakai. Ini dia beberapa kesalahan umum dan dampaknya: Tidak menambahkan <h1> sama sekali di halaman Kalau halaman kamu nggak punya <h1>, Google akan bingung menentukan apa topik utama dari halaman tersebut. Akibatnya, halaman kamu bisa sulit bersaing di hasil pencarian karena nggak punya sinyal yang kuat soal kontennya. Menggunakan lebih dari satu <h1> dalam satu halaman <h1> itu sebaiknya cuma satu. Kalau kamu pakai lebih dari satu, struktur dokumen jadi kacau dan bisa bikin crawler Google serta pengguna bingung tentang mana yang paling penting. Isi dari <h1> tidak sesuai dengan judul halaman (title tag) Misalnya, judul di browser “10 Tips Belajar SEO”, tapi <h1> kamu bilang “Panduan Lengkap HTML”. Ini bikin inkonsistensi yang membingungkan — baik untuk pengguna maupun mesin pencari. Bisa-bisa dianggap misleading. Ukuran visual <h1> terlalu kecil dan tidak menonjol Secara fungsional memang tetap dianggap <h1>, tapi kalau tampilannya kecil dan nggak terlihat penting di mata user, pengalaman pengguna (UX) jadi jelek. Padahal UX juga jadi faktor yang diperhitungkan oleh Google. Menjejalkan kata kunci berulang-ulang dalam <h1> Contohnya: “Belajar SEO | SEO untuk Pemula | Tips SEO Terbaik”. Ini kelihatan banget spammy. Google sekarang jauh lebih pintar dan justru bisa menurunkan nilai SEO kalau kamu terlihat terlalu “menargetkan” keyword. Cara Ngetes Untuk mengetes <h1> secara lokal dan memastikan: hanya ada satu <h1>isinya sesuai dan SEO-friendlyposisi dan struktur headingnya benar Kamu bisa gunakan cara berikut: Jalankan file HTML lokal kamu pakai Live Server di VSCodeKlik kanan pada halaman → Inspect / Periksa ElemenDi tab “Elements”, cari tag <h1>Pastikan hanya 1 kali munculCek apakah isinya relevan dan sesuai dengan topik halaman Local Result: Tag <h1> Tips Menulis <h1> yang Kuat Tulis dengan bahasa natural, tapi tetap mengandung kata kunciHindari singkatan atau istilah yang membingungkanPastikan tetap konsisten dengan judul <title> dan meta descriptionGunakan hanya satu <h1> per halaman, lalu lanjutkan dengan <h2>, <h3>, dst untuk subjudul <h2> – Subjudul untuk Bantu Struktur dan Navigasi Kalau <h1> itu judul utama, maka <h2> dan turunannya (<h3>, <h4>, dst) adalah struktur pendukung yang bikin konten kamu lebih rapi, terorganisir, dan lebih mudah dipahami oleh pembaca & mesin pencari. Fungsi <h2> untuk SEO Membagi konten menjadi bagian-bagian yang mudah dibacaMembantu Google memahami struktur isi halamanMeningkatkan pengalaman pengguna (UX)Berguna untuk featured snippet di Google (khususnya daftar dan step-by-step) Contoh Kode HTML <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> 10 Elemen HTML Penting untuk SEO | Panduan Lengkap BuildWithAngga </title> <meta name="description" content="Pelajari 10 elemen HTML penting yang wajib ada di setiap halaman website kamu. Panduan lengkap, contoh kode, dan cara ngetes gratisan." /> </head> <body> <h1> 10 Elemen HTML Penting untuk SEO (Lengkap + Contoh Kode + Kesalahan Umum + Cara Ngetes Gratisan) </h1> <h2>Bagian 1: <title></h2> <p> Ini adalah judul yang muncul di tab browser dan hasil pencarian Google. </p> <h2>Bagian 2: <meta name="description"></h2> <p> Ini adalah deskripsi singkat yang muncul di bawah judul di hasil pencarian. </p> <!-- dan seterusnya... --> </body> </html> Gunakan <h2> untuk setiap judul bagian, dan <h3> kalau kamu butuh sub-subjudul Kesalahan Umum yang Harus Dihindari Heading (seperti <h1>, <h2>, dan seterusnya) bukan hanya buat mempercantik tampilan, tapi juga membantu Google dan pembaca memahami struktur isi halaman kamu. Tapi kalau salah penggunaannya, bisa berdampak negatif ke SEO dan aksesibilitas. Berikut beberapa kesalahan yang sering terjadi: Tidak menggunakan heading sama sekali (misalnya <h2>, <h3>, dll.) Kalau kamu hanya pakai paragraf biasa tanpa heading, Google akan kesulitan memahami struktur kontenmu. Mesin pencari suka halaman yang terorganisir dengan baik — dan heading adalah sinyal penting yang menunjukkan bagian-bagian utama dari halaman. Langsung lompat urutan heading, seperti dari <h2> ke <h4> tanpa <h3> Ini bikin hirarki dokumen jadi kacau. Heading itu seperti daftar isi: harus urut dan logis. Kalau kamu loncat-loncat, mesin pencari dan screen reader bisa bingung membaca struktur kontennya. Ini bisa merugikan pengalaman pengguna — termasuk pengguna disabilitas. Terlalu banyak heading tanpa isi yang jelas di bawahnya Misalnya kamu bikin <h2>Fitur Unggulan</h2>, tapi di bawahnya kosong atau cuma satu kata. Ini bisa dianggap sebagai spam atau manipulatif oleh Google. Heading seharusnya jadi pembuka untuk penjelasan di bawahnya, bukan cuma tempelan. Menjadikan semua teks sebagai heading hanya untuk styling Banyak yang menggunakan <h2> atau <h3> karena tampilannya lebih besar dan tebal, padahal itu bukan bagian penting dari struktur konten. Ini namanya overuse heading. Gunakan heading sesuai fungsinya, dan pakai CSS biasa (seperti font-size, font-weight) untuk styling teks yang tidak bersifat struktural. Ngetes Heading <h2> Lakukan seperti ngetes <h1> Tips Praktis Penulisan Heading Gunakan <h2> untuk tiap topik utama dalam kontenGunakan <h3> untuk menjelaskan poin-poin dalam <h2>Jangan pakai heading cuma buat besar-besarin tulisanKonsisten: jangan lompati level (misal dari <h2> langsung ke <h4>) <a> – Tautan (Link) yang SEO-Friendly Tag <a> (anchor) adalah salah satu elemen HTML paling penting buat SEO karena dia menghubungkan halaman satu dengan lainnya, baik itu halaman dalam (internal) maupun luar (eksternal). Google menggunakan link ini buat merayapi website kamu (crawling), memetakan struktur konten, dan menilai kredibilitas situs kamu berdasarkan link yang keluar masuk. Fungsi <a> untuk SEO Meningkatkan internal linking antar halaman di situs kamu → bantu Google paham konteksMembuat navigasi lebih jelas untuk userMemberi otoritas dari halaman satu ke lainnya (baik internal maupun eksternal)Bisa bantu ranking halaman lain yang kamu tautkan Contoh Kode HTML <p> Baca juga panduan lengkap kami tentang <a href="/panduan-seo-html" title="Panduan SEO HTML Lengkap">SEO HTML</a> untuk optimasi konten kamu. </p> <p> Untuk analisis SEO eksternal, kamu bisa coba tools seperti <a href="<https://ahrefs.com/>" target="_blank" rel="noopener noreferrer">Ahrefs</a>. </p> Penjelasan: href: tujuan tautantitle: teks tambahan yang muncul saat hover (opsional tapi bagus untuk UX)target="_blank": buka link di tab baru (umumnya dipakai untuk link eksternal)rel="noopener noreferrer": tambahan keamanan & performa saat pakai target="_blank" Kealahan Umum yang Harus Dihindari Link atau tautan itu penting banget buat pengalaman pengguna dan performa SEO. Tapi kalau salah penggunaannya, justru bisa merugikan. Yuk, simak beberapa kesalahan umum berikut: Menggunakan anchor text seperti “klik di sini” Ini kesalahan klasik. Teks link yang cuma bilang “klik di sini” nggak kasih informasi apa pun ke Google maupun pengguna tentang isi dari halaman tujuan. Padahal, Google menilai relevansi sebuah tautan dari anchor text-nya. Jadi, pastikan kamu pakai teks yang deskriptif dan relevan, misalnya: “lihat panduan lengkap SEO untuk pemula”. Menambahkan internal link yang nggak relevan atau terlalu banyak Internal link itu bagus buat navigasi dan SEO, tapi kalau kamu menautkan ke halaman yang nggak relevan, atau terlalu banyak link dalam satu paragraf, malah bisa merusak pengalaman pengguna. Konten jadi kelihatan spammy dan bikin pembaca kabur — efeknya bounce rate bisa naik. Tidak menggunakan rel="noopener" saat membuat link ke tab baru (target="_blank") Saat kamu bikin link eksternal yang membuka tab baru, wajib banget pakai rel="noopener". Kalau nggak, ada potensi risiko keamanan dan masalah performa karena halaman tujuan bisa akses window dari halaman kamu. Menjejalkan terlalu banyak link dalam satu halaman Kalau satu halaman dipenuhi oleh link yang nggak penting atau repetitif, Google bisa menganggapnya sebagai halaman spam. Selain itu, ini juga mengganggu kenyamanan pembaca karena kontennya jadi tidak fokus. Menggunakan JavaScript untuk link internal, bukan tag <a> Kalau kamu bikin navigasi atau link antar halaman pakai JavaScript (misalnya pakai onClick), dan nggak dibarengi dengan tag <a>, Google bisa kesulitan merayapi kontennya. Artinya, halaman kamu mungkin nggak terindeks dengan benar atau bahkan diabaikan oleh crawler. Tips Praktis Tautan SEO-Friendly Gunakan anchor text yang jelas dan mengandung kata kunciPrioritaskan internal link ke halaman pentingJangan kebanyakan link dalam 1 paragrafGunakan <a> daripada onClick JavaScript buat navigasi <img> dan Atribut alt – Optimasi Gambar untuk SEO Gambar bukan cuma bikin tampilan web lebih menarik, tapi juga bisa mendatangkan traffic dari Google Images. Tapi biar gambar kamu bisa dibaca mesin pencari, kamu harus pakai tag <img> dengan atribut alt yang benar. Fungsi <img> + alt untuk SEO Alt text membantu Google "membaca" isi gambarMemudahkan aksesibilitas (screen reader untuk tunanetra)Meningkatkan peluang muncul di Google Image SearchJika gambar gagal dimuat, alt text akan tampil sebagai pengganti Contoh Kode HTML <img src="/images/logo-seo.png" alt="Logo BuildWithAngga untuk kursus SEO" width="300" height="100" /> Penjelasan: src: lokasi file gambaralt: deskripsi isi gambar (bukan keyword stuffing ya!)width dan height: penting buat bantu browser ngatur layout & kecepatan muat halaman Kesalahan Umum yang Harus Dihindari Gambar memang bisa mempercantik tampilan website, tapi kalau nggak dioptimasi dengan benar, justru bisa jadi masalah buat performa SEO. Ini dia beberapa kesalahan umum yang perlu kamu hindari: Tidak menambahkan atribut alt pada gambar Tanpa alt, Google nggak bisa memahami isi gambar yang kamu tampilkan. Ini membuat kamu kehilangan potensi traffic dari Google Images karena gambarnya tidak bisa dirayapi dengan baik oleh mesin pencari. Mengisi alt dengan keyword stuffing Memasukkan terlalu banyak keyword ke dalam atribut alt (misalnya: alt="sepatu murah sepatu keren sepatu casual pria sepatu kulit sepatu bagus") bikin deskripsi gambar terlihat spammy. Ini bisa mengundang penalti dari Google karena dianggap manipulatif. Menggunakan deskripsi alt yang terlalu umum, seperti “image” atau “foto” Alt seperti ini tidak memberikan informasi apapun. Google butuh konteks yang jelas untuk menilai gambar, jadi kamu kehilangan potensi peringkat gambar yang seharusnya bisa muncul di hasil pencarian. Menggunakan gambar berukuran besar tanpa optimasi Kalau kamu upload gambar langsung dari kamera atau desain tanpa dikompres dulu, ukuran file bisa sangat besar. Ini membuat loading halaman jadi lambat dan berdampak buruk ke skor Core Web Vitals salah satu faktor penting untuk SEO saat ini. Tidak memakai format gambar modern seperti WebP atau AVIF Masih menggunakan format lama seperti JPEG dan PNG untuk semua gambar bisa bikin ukuran file lebih besar dari seharusnya. Format modern seperti WebP dan AVIF lebih efisien dan bisa bantu meningkatkan kecepatan loading halaman. Tips Gambar SEO-Friendly Selalu isi alt dengan deskripsi singkat tapi jelasKompres gambar tanpa menurunkan kualitas (pakai TinyPNG, Squoosh, dll)Gunakan format modern seperti WebPJangan lupa atur dimensi gambar (width dan height) <strong> dan <em> – Menegaskan Makna Konten Banyak orang kira <strong> dan <em> itu cuma buat tulisan tebal dan miring. Padahal, secara semantik, dua tag ini punya arti penting untuk SEO dan juga buat aksesibilitas. Fungsi <strong> dan <em> untuk SEO Memberi penekanan makna pada kata atau kalimat → bantu Google paham fokus kontenMeningkatkan keterbacaan dan struktur informasiBantu screen reader membacakan kalimat dengan penekanan yang benarBisa memberi bobot tambahan ke kata kunci penting (jika digunakan dengan bijak) Contoh Kode HTML <p> <strong>Belajar HTML itu penting</strong> untuk semua web developer, terutama untuk optimasi SEO. </p> <p> Kursus ini <em>sangat cocok</em> buat kamu yang baru mulai ngoding dari nol. </p> Penjelasan: <strong> memberi penekanan penting → biasanya dibaca screen reader dengan intonasi berbeda<em> menunjukkan penekanan emosional atau logis (dibaca lebih ekspresif)Jangan pakai dua-duanya buat styling aja. Kalau cuma mau bold/italic, lebih baik pakai CSS (font-weight, font-style) Kesalahan Umum yang Harus Dihindari Penggunaan tag <strong> dan <em> sebenarnya sangat penting untuk memberikan penekanan makna pada sebuah kalimat, tapi masih banyak yang salah dalam menggunakannya. Ini dia beberapa kesalahan yang sering terjadi: Menggunakan <strong> atau <em> hanya untuk keperluan styling Banyak orang memakai tag ini cuma supaya teks terlihat bold atau italic, padahal fungsi aslinya bukan untuk styling. Akibatnya, HTML jadi tidak semantik, dan ini berdampak buruk buat SEO serta membuat screen reader sulit memahami struktur kalimat. Terlalu sering menggunakan <strong> untuk semua keyword Kalau kamu menebalkan semua keyword dalam satu paragraf dengan <strong>, Google bisa menganggap itu sebagai upaya over-optimization. Hasilnya? Malah bisa merusak performa SEO karena kelihatan spammy. Tidak menggunakan <strong> atau <em> sama sekali padahal ada makna penting yang perlu ditegaskan Saat kamu punya bagian kalimat yang sebenarnya penting tapi tidak ditandai dengan <strong> atau <em>, Google dan mesin pencari lainnya jadi kesulitan menangkap fokus utama dari konten tersebut. Salah urutan nesting (misalnya: <strong><em>...</strong></em>) Kalau urutan penutup tag tidak konsisten seperti contoh di atas, HTML kamu jadi kacau. Ini bisa membuat tampilan tidak sesuai harapan dan tentu saja mengganggu validitas struktur HTML secara keseluruhan. Tips Praktis Gunakan <strong> untuk menandai poin penting, bukan hanya buat "tebalin" kataGunakan <em> untuk penekanan emosional/logis, misalnya saat meyakinkan userJangan berlebihan – pakai seperlunya biar tetap natural dan efektif <meta> – Metadata yang Berperan Besar dalam SEO Tag <meta> memang nggak kelihatan di halaman web, tapi justru inilah yang dibaca pertama kali oleh mesin pencari. Meta tag yang tepat bisa bikin halaman kamu lebih mudah ditemukan, lebih menarik di hasil pencarian, dan tentu saja... lebih SEO friendly! Fungsi <meta> untuk SEO Memberikan deskripsi halaman untuk ditampilkan di hasil pencarian (SERP)Mengatur charset (karakter teks) agar halaman bisa tampil dengan benarMengontrol behavior mesin pencari (index/noindex, follow/nofollow)Memberi tahu browser & platform sosial tentang konten kamu (Open Graph, Twitter Card, dsb.) Contoh Kode HTML <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="Panduan lengkap 10 elemen HTML penting untuk SEO dari BuildWithAngga. Disertai contoh kode, kesalahan umum, dan cara ngetes gratisan!" /> <meta name="robots" content="index, follow" /> </head> Penjelasan: charset: mengatur encoding halaman, biasanya pakai UTF-8viewport: penting untuk mobile-friendlydescription: muncul di bawah judul halaman di Google – bikin semenarik dan sejelas mungkin!robots: arahkan bot Google apakah halaman ini boleh diindeks/difollow Kesalahan Umum yang Harus Dihindari Ada beberapa kesalahan yang sering terjadi saat menulis tag meta description, dan semuanya bisa berdampak buruk ke performa SEO. Yuk kita bahas satu per satu secara jelas: Tidak menulis <meta name="description"> Kalau kamu nggak menyertakan meta description, Google akan mengambil cuplikan secara otomatis dari konten halaman kamu. Hasilnya? Deskripsi yang muncul di hasil pencarian bisa asal-asalan dan kurang menarik perhatian orang buat ngeklik. Menulis description terlalu panjang (lebih dari 160 karakter) Kalau kamu menulis terlalu panjang, Google bakal memotongnya di halaman hasil pencarian (SERP). Akibatnya, pesan utama yang ingin disampaikan malah nggak tersampaikan dengan jelas. Mengulang keyword terlalu banyak dalam meta description Banyak yang berpikir kalau semakin sering menaruh keyword di meta description, makin bagus. Padahal justru sebaliknya — ini terlihat seperti spam dan bisa berdampak negatif pada SEO karena Google makin pintar membedakan mana yang natural dan mana yang manipulatif. Secara nggak sengaja pakai noindex di halaman penting Ini kesalahan teknis tapi fatal. Kalau kamu menambahkan tag noindex di halaman penting seperti homepage atau halaman produk, Google justru tidak akan menampilkan halaman itu sama sekali di hasil pencarian. Lupa menambahkan tag viewport untuk mobile (<meta name="viewport">) Tanpa tag ini, halaman kamu nggak akan tampil dengan baik di perangkat mobile. Akibatnya, SEO mobile kamu jadi jeblok dan bounce rate bisa meningkat karena user langsung pergi dari halaman yang tampilannya berantakan. Tips Meta Tag SEO-Friendly Buat deskripsi yang unik, menarik, dan mengandung kata kunci utamaPastikan setiap halaman punya deskripsi berbedaGunakan Open Graph (og:title, og:description, og:image) untuk preview di sosial mediaGunakan meta robots dengan hati-hati – jangan sampai kamu larang Google indeks halaman penting Struktur HTML yang Valid – Biar SEO Nggak Bablas Karena Error! SEO itu bukan cuma soal kata kunci. Mesin pencari kayak Google juga peduli sama struktur HTML yang bersih dan valid. Kalau struktur HTML kamu berantakan, bot Google bisa kesulitan memahami isi halaman… dan itu bisa berdampak ke ranking. Fungsi Struktur HTML yang Valid untuk SEO Memastikan konten terbaca jelas oleh crawler (Googlebot, Bingbot, dll.)Menghindari error parsing atau kegagalan render kontenMeningkatkan aksesibilitas dan pengalaman penggunaBantu tools SEO memahami halaman secara menyeluruh dan akurat Contoh Struktur HTML yang Rapi dan Valid <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>10 Elemen HTML Penting untuk SEO | Panduan Lengkap BuildWithAngga</title> <meta name="description" content="Panduan lengkap elemen HTML SEO dengan contoh, kesalahan umum, dan tips tes gratisan."> </head> <body> <header> <h1>10 Elemen HTML Penting untuk SEO</h1> <nav> <ul> <li><a href="#judul">Judul</a></li> <li><a href="#meta">Meta</a></li> </ul> </nav> </header> <main> <section id="judul"> <h2>Elemen Judul</h2> <p>...</p> </section> <section id="meta"> <h2>Elemen Meta</h2> <p>...</p> </section> </main> <footer> <p>© 2025 BuildWithAngga</p> </footer> </body> </html> Kesalahan Umum yang Harus Dihindari Ada beberapa kesalahan yang sering banget terjadi saat menulis HTML yang berpengaruh ke SEO. Berikut penjelasannya satu per satu: Tidak menggunakan <!DOCTYPE html> Ini adalah hal dasar, tapi sering dilupakan. Tanpa deklarasi ini, browser bisa masuk ke mode "quirks", yang menyebabkan tampilan jadi berantakan dan SEO bisa kena imbasnya karena struktur tidak dikenali dengan baik. Menempatkan elemen penting di luar <body> Beberapa orang secara tidak sengaja meletakkan tag penting seperti <meta> atau elemen lain di luar area yang seharusnya. Ini bisa bikin crawler seperti Google gagal membaca struktur halaman dengan benar. Struktur nesting HTML yang salah (contoh: <p><div>) Ini kesalahan umum juga. Misalnya, <div> tidak boleh berada di dalam <p> karena tidak valid secara struktur HTML. Kesalahan seperti ini bisa menyebabkan parsing error oleh browser maupun bot mesin pencari. Tidak menggunakan elemen semantik seperti <main>, <section>, atau <article> Akibatnya, struktur konten jadi flat dan membingungkan bagi crawler. Padahal, elemen-elemen semantik ini sangat membantu Google memahami konteks setiap bagian konten. Tag HTML yang tidak ditutup dengan benar atau bahkan hilang Kalau kamu lupa menutup tag seperti <div>, <li>, atau <header>, HTML kamu bisa error dan tampilannya jadi berantakan. Selain itu, bot Google mungkin gagal memahami konten secara utuh. Tips Struktur HTML SEO-Friendly Selalu mulai dengan <!DOCTYPE html>Gunakan elemen semantik (<header>, <main>, <section>, <footer>)Validasi HTML kamu secara rutin → mencegah kesalahan yang bikin SEO jeblokHindari nested yang salah atau tag yang tidak ditutup Penutup Sekarang kamu sudah kenal dan ngerti banget tentang 10 Elemen HTML Penting untuk SEO. Dari <title>, <meta>, <h1>, sampai struktur HTML, semuanya punya peran penting dalam menentukan bagaimana Google melihat dan menilai halaman kamu. 🔁 Recap cepat: Gunakan elemen HTML secara semantik, bukan cuma buat stylingHindari kesalahan umum yang bikin SEO jeblokSelalu uji HTML kamu secara gratis dengan bantuan:VSCode port forwarding (untuk publikasi lokal)Metatags.io (untuk preview konten)W3C Validator (untuk struktur HTML) 🚀 Praktikkan panduan ini di proyek kamu, dan kamu bakal lihat perbedaan signifikan dalam hasil pencarian. Selamat optimasi!

Daftar Isi PendahuluanBenefit Setelah BacaGitDownload di WindowsDownload di MacOSGitHubPerumpamaanJadi Git Sama GitHub Itu Beda?DaftarDownload Proyek (Free)Menampilkan di BrowserMenampilkan ke VSCodeOpen BrowserMeletakkan ke GitHubAbaikan SesuatuMembuat Repository GitHubEksekusi Memindahkan ke GitHubHasil akhirnya gini:Melakukan Perubahan ProyekUbah KodeMeletakkan UlangPindah Perangkat (Bonus)Jual (Bonus)Penutup Pendahuluan Kalau kamu lagi ngoding frontend dan pengin belajar cara pakai Git dan GitHub, pas banget! Di tutorial ini, kita bakal bahas bareng gimana caranya ngatur proyek frontend kamu biar lebih rapi dan terorganisir pakai Git, terus gimana juga upload proyeknya ke GitHub. Tenang aja, tutorial ini nggak ribet dan cocok buat kamu yang masih pemula. Bonusnya, ada file kode gratis yang bisa langsung kamu download dan pakai buat latihan. Yuk, kita mulai. Benefit Setelah Baca ✅ Tau di mana nemuin kode gratis buat latihan (nggak mulai dari nol lagi!) ✅ Paham cara pakai Git & GitHub buat ngatur dan nyimpen proyek ✅ Udah bisa modifikasi kode sendiri terus upload ulang ke GitHub ✅ Tau caranya ngambil kode dari GitHub kalau pindah device atau kerja bareng temen ✅ Udah pasang Live Preview di VSCode biar tampilan desain langsung bisa dicek (terutama kalau buat mobile!) ✅ Plus, makin siap buat kolaborasi dan bikin proyek kamu jadi lebih profesional Git Git - Download Git itu alat yang bantu kita nyimpen dan ngatur perubahan kode dari waktu ke waktu. Jadi misalnya kamu lagi ngoding terus tiba-tiba mau balik ke versi sebelumnya karena ada yang error gampang, tinggal pakai Git. Selain itu, Git juga keren banget buat kerja tim. Semua orang bisa ngerjain bagian masing-masing tanpa takut nabrak kerjaan temen. Download di Windows Buka aja https://git-scm.com.Di halaman depan, langsung klik tombol Download for Windows.Tunggu file-nya selesai diunduh, terus tinggal klik dua kali buat install.Waktu install, cukup klik "Next" terus aja, setting bawaannya udah oke kok.Kalau udah kelar, buka Command Prompt, terus ketik git --version. Kalau muncul angka versinya, berarti Git udah berhasil diinstal. Hasil Terminal - Cek Version Download di MacOS Cara paling gampang: pakai Homebrew. Kalau belum punya, install dulu lewat Terminal dengan perintah ini: /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)" Kalau Homebrew-nya udah siap, tinggal ketik: brew install git Atau kalau mau yang simpel, bisa juga download langsung dari https://git-scm.com dan pilih yang versi macOS.Habis itu, buka Terminal dan ketik git --version buat ngecek apakah udah terpasang. GitHub GitHub - Profile Kalau Git itu alat buat ngatur versi kode di komputer kamu, nah GitHub itu semacam “rumah online”-nya. Bayangin GitHub kayak Google Drive, tapi khusus buat nyimpen proyek kode kamu. Jadi, semua file dan riwayat perubahan yang kamu bikin pakai Git bisa kamu upload ke GitHub, biar aman dan bisa diakses dari mana aja. GitHub juga ngebantu banget kalau kamu kerja bareng tim semua orang bisa liat, kasih komentar, bahkan ikut bantuin ngoding lewat fitur seperti pull request. Dan serunya lagi, kamu bisa pamerin hasil karya kamu ke publik. Banyak recruiter atau perusahaan juga suka ngecek GitHub kandidat buat lihat portofolionya. Perumpamaan Git = alat buat nyimpen dan ngatur kode di lokal (komputer kamu).GitHub = tempat nyimpen hasil kerjaan Git kamu secara online. Jadi Git Sama GitHub Itu Beda? Iya, beda tapi saling berkaitan. Git jalan di komputer kamu, sementara GitHub ada di internet. GitHub butuh Git buat kerja, dan Git bisa jalan tanpa GitHub… tapi kalau digabung, jadi lebih powerful. Kalau udah ngerti GitHub, langkah selanjutnya tinggal bikin akun dan mulai upload proyek kamu. Nanti kita bahas bareng gimana cara bikin repo, push kode, dan lain-lain. Daftar Biar bisa mulai upload proyek ke GitHub, kamu perlu bikin akun dulu. Caranya gampang banget kok, ini dia langkah-langkahnya: 1. Buka Situs GitHub Akses https://github.com lewat browser kamu. 2. Klik Tombol Sign up Biasanya tombol ini ada di pojok kanan atas. Klik aja! 3. Masukkan Email Ketik email yang mau kamu pakai buat daftar GitHub, lalu klik Continue. 4. Buat Username Ini nama yang akan tampil di profil GitHub kamu. Bikin yang unik tapi gampang diingat atau sesuai nama kamu. 5. Buat Password Gunakan password yang kuat, tapi tetap kamu hafal. 6. Verifikasi Captcha GitHub biasanya akan minta kamu selesaikan semacam teka-teki kecil biar yakin kamu bukan robot. 7. Pilih Plan Abaikan yang berbayar, langsung scroll ke bawah dan pilih yang Free, ini udah cukup banget buat belajar dan proyek pribadi / barengan. 8. Verifikasi Email GitHub akan kirim email ke alamat yang tadi kamu daftarkan. Buka inbox kamu, cari email dari GitHub, dan klik tombol Verify Email di dalamnya. 9. Selesai Sekarang kamu udah resmi punya akun GitHub. Kamu bisa mulai bikin repository, upload proyek, dan explore open-source project dari orang lain juga. Download Proyek (Free) Shaynakit - Ngekos Page Di tutorial kali ini, kita bakal pakai proyek dari Shaynakit. Kabar baiknya, proyek ini gratis dan kodenya juga udah disediain. Jadi kamu bisa langsung pakai, atau modif-modif dikit biar sesuai sama kebutuhan. Nggak perlu mulai dari nol proses ngodingnya jadi jauh lebih gampang dan cepet. Shaynakit sendiri tuh semacam website yang nyediain kumpulan desain bareng sama kodenya. Ada yang gratis, ada juga yang premium. Tapi tenang aja, yang gratis juga nggak pelit-pelit banget kok biasanya cuma dibatesin di jumlah halamannya aja. Nah, kalau yang premium, tentu lebih lengkap dan komplit, semua bagian udah siap pakai. Cara donwloadnya kayak gini: Buka situs utama ShaynaKit di https://shaynakit.com/landing.Klik menu atau tombol Register atau langsung buka https://shaynakit.com/register untuk membuat akun terlebih dahulu.Setelah berhasil mendaftar dan login, buka halaman template kode yang akan digunakan di https://shaynakit.com/details/ngekos-find-house-details-bokking-success-html-tailwind-css-template.Klik tombol Download, lalu pada opsi yang tersedia, pilih Free Trial.Klik tombol Start Today untuk memulai akses gratis.Setelah itu, kembali ke halaman yang sama: https://shaynakit.com/details/ngekos-find-house-details-bokking-success-html-tailwind-css-template, dan klik tombol Download sekali lagi.File template code akan terunduh dalam format .zip.Simpan file .zip tersebut ke dalam folder lokal proyek Anda, misalnya ./source-code/ngekos.zip. Menampilkan di Browser Selanjutnya, kita perlu nunjukin proyeknya biar bisa langsung dilihat bener nggak sih tampilannya udah sesuai sama contoh desainnya? Nah, caranya gini nih: Menampilkan ke VSCode Menampilkan Cari filenya yang udah kalian download kayak gambar ini: File Explorer - Zip File Extract All filenya biar jadi folder biasa, kalau udah, selanjutnya.Masuk ke dalam foldernya dulu klik 2x di “ngekos”: Terus klik kanan, cari icon VSCodenya, kalau udah nemu tinggal klik aja, nanti bakal kebuka kok kayak gini : File Explorer - Want to Open VSCode Install Proyek Kamu harus jalanin npm install . Jadi gini, npm install itu kayak nyiapin semua alat yang dibutuhin biar proyek kita bisa jalan dengan bener. Waktu kita ngambil proyek dari orang lain atau mulai dari template, biasanya kodenya udah ada, tapi alat-alat pendukungnya (kayak library, plugin, dll) belum ikut ke-download. Nah, pas kita jalanin npm install, itu tuh kayak bilang ke komputer: "Eh, tolong downloadin semua alat yang dibutuhin ya, sesuai daftar yang ada di package.json." Jadi abis itu, proyeknya bisa langsung dipake atau diubah-ubah tanpa error karena semua alatnya udah siap. Jalanin kayak gini : npm install VSCode - Proyek Downloaded Open Browser Nah, kalau udah di-install, kita udah bisa liat hasil kodenya langsung di browser. Tapi biar tampilinnya lebih enak dan praktis, mending pake extension di VSCode yang namanya Live Preview. Tinggal klik, dan proyeknya langsung muncul di kanan. Download Extensionsnya VSCode - Live Preview Extension Jadi gini, Live Preview itu adalah extension di VSCode yang bisa bantu kita nampilin hasil kode HTML langsung di dalam VSCode, tanpa perlu buka browser manual. Bayangin aja kayak kamu masak mie instan, terus biasanya kan kamu harus pindah ke meja makan dulu buat nyicipin nah, dengan Live Preview, kamu bisa nyicip langsung di dapur. Praktis, nggak usah bolak-balik. Jadi setiap kali kamu ngedit kodenya, hasilnya bisa langsung muncul di panel yang ada di VSCode. Nggak perlu repot buka tab baru di Chrome atau pencet refresh tiap detik. Tinggal buka Live Preview, dan semua perubahan langsung keliatan di tempat. Cara installnya gini: Buka dulu VSCode kamu, pastikan project-nya udah kebuka juga biar langsung bisa lanjut. Lalu, klik ikon Extensions di sisi kiri, itu loh yang bentuknya kayak potongan puzzle. Kalau mau cepet, bisa juga pencet Ctrl + Shift + X. Di kolom pencarian, ketik aja: Live Preview Nanti bakal muncul beberapa pilihan. Pilih yang buatan Microsoft ya, itu yang resmi dan paling stabil. Kalau udah ketemu, tinggal klik tombol Install, dan tunggu sebentar sampai prosesnya kelar. Open Proyek Setelah extension-nya terpasang, kamu bisa langsung pakai. Caranya, klik kanan di file HTML kamu, terus pilih "Show Preview". VSCode - Show Code Hasilnya gini : VSCode - Result Hasilnya super mantap, jadi bisa edit sambil langsung lihat perubahannya disamping. Meletakkan ke GitHub Tarik napas dulu bentar... Sekarang kita lanjut ke bagian naruh project-nya ke GitHub. Tapi sebelum upload, ternyata ada beberapa hal penting yang perlu diperhatiin dulu, kayak gini nih: Abaikan Sesuatu VSCode - Ignore Folder Waktu kita naruh project ke GitHub, kita nggak mau semua folder atau file ikut ke-upload, terutama yang gede dan nggak penting buat disimpen di repo. Salah satunya adalah folder node_modules. Folder ini isinya semua library yang tadi kita install lewat npm install. Ukurannya bisa gede banget, dan sebenernya nggak perlu di-upload karena orang lain bisa install sendiri nanti cukup pake npm install juga. Nah di sinilah peran .gitignore. File ini isinya daftar nama folder atau file yang pengen kita abaikan alias nggak ikut dikirim ke GitHub. Jadi kita tinggal tulis: node_modules/ di dalam file .gitignore, dan Git bakal ngerti, “Oh oke, folder ini nggak usah dimasukin ke repo.” Kalau diibaratin, .gitignore itu kayak daftar "barang yang nggak usah dibawa pas pindahan" jadi yang dibawa ke GitHub cuma yang penting-penting aja. Membuat Repository GitHub Nah, selanjutnya kita perlu bikin repository dulu di GitHub. Caranya gampang, cari aja ikon “plus” yang ada tulisan “Create New”. Kalau udah ketemu, klik itu, nanti bakal muncul dropdown, terus pilih“New Repository” . Kurang lebih kayak gini nih: GitHub - New Repo Isi aja inputannya kayak gini lalu klik “Create Repository” : GitHub - Name Repo Kalau sudah sampai gini, lanjut eksekusi mindahinnya : GitHub - Remote Jadi, bikin new repository di GitHub itu ibarat kamu bikin “tempat penyimpanan online” buat proyek kamu. Dengan repository ini, kamu bisa simpan semua file kode, riwayat perubahan, dan kamu juga bisa kerja bareng teman tanpa takut kehilangan apa-apa. Intinya, repository ini jadi “rumah” buat proyek kamu di internet, biar bisa diakses kapan aja, dari mana aja, dan gampang untuk di-share ke orang lain juga. Eksekusi Memindahkan ke GitHub Sekarang kita mainan terminal hehehehe, di terimanal kita giniin secara berurutan: git init Hasilnya gini: VSCode - Git Init Lanjut ketik ini: git add . git add . itu intinya bilang ke Git, "Hey, siap-siap, semua perubahan di folder ini aku mau masukin ke daftar yang bakal di-save (commit) nanti." Jadi, titik (.) itu artinya semua file dan perubahan yang ada di folder sekarang. Bisa dibilang, ini kayak nge-tag semua barang yang mau kamu bawa ke gudang (commit) supaya Git tahu file mana yang harus diikutin perubahan selanjutnya. git commit -m "first commit" git commit -m "first commit" itu artinya kamu lagi nyimpen snapshot perubahan kode kamu ke dalam Git, lengkap sama catatan singkatnya. m itu singkatan dari “message” atau pesan, dan "first commit" itu isi pesannya. Jadi kamu kasih tahu Git, “Ini commit pertama aku, simpen ya!” Bisa dibilang, commit ini kayak ngerekam keadaan proyek kamu saat itu, supaya nanti kalau mau lihat perubahan atau balik ke versi sebelumnya gampang. git remote add origin <https://github.com/tegarfauzan/ngekos-latihan.git> Perintah git remote add origin <https://github.com/tegarfauzan/ngekos-latihan.git> itu intinya kamu lagi ngasih tahu Git kemana project ini harus dikirim (push). Jadi kayak bilang, “Eh Git, nanti kalau aku suruh upload, kirimnya ke link ini ya.” Kata origin itu cuma nama panggilan buat alamat GitHub-nya, biar kita gampang manggilnya nanti semacam shortcut-nya lah. git push -u origin master Jadi perintah ini artinya kamu lagi ngirim (upload) semua perubahan kode ke GitHub, tepatnya ke repository yang tadi kamu kasih nama origin, dan ke cabang (branch) utama yang namanya master. Nah, -u itu fungsinya buat ngingetin Git, biar next time kamu tinggal ketik git push aja tanpa harus sebutin origin master lagi. Jadi semacam bilang, “Ingat ya Git, ini jalur default aku buat ngirim project ke GitHub.” Hasil akhrinya gini: VSCode - Result Push on GitHub Melakukan Perubahan Proyek Yuk, sekarang kita coba ubah-ubah dulu proyek yang tadi udah kita upload ke GitHub. Tujuannya biar kamu bisa ngerasaain gimana sih proses ngirim ulang perubahan ke GitHub, atau istilah kerennya: push update. Manfaatnya? Kamu bakal makin paham gimana cara kerja GitHub buat nyimpan versi terbaru dari proyek kamu. Jadi misalnya kamu bikin revisi, nambah fitur, atau sekadar ganti tulisan semua bisa dilacak dan disimpan rapi. Ini penting banget, apalagi kalau kamu kerja bareng tim. Nggak bakal bingung lagi mana versi terbaru, dan kalau ada yang salah, tinggal balikin aja ke versi sebelumnya. Ubah Kode Di sini kita ubah judulnya aja dulu, biar gampang kelihatan perubahannya. VSCode - Modification Alert Kalau kamu lihat di sebelah nama file ada tanda huruf “M”, itu artinya file tersebut sudah dimodifikasi alias ada perubahan dari versi sebelumnya. “M” itu singkatan dari Modified. Jadi Git lagi ngasih tahu, “Eh, file ini udah kamu ubah lho, tapi belum kamu simpen (commit) perubahan barunya.” Ini jadi cara Git buat nge-track perubahan yang kamu lakukan, biar kamu nggak lupa bagian mana aja yang udah diedit. Meletakkan Ulang Jalankan perintah yang mirip kayak tadi gini: git add . git commit -m "change the page title" git push -u origin master Hasilnya gini: GitHub - Change Result Nah, kalau kamu lihat di pesan commit-nya ada tulisan “change the page title”, itu artinya kamu udah ngasih keterangan atau deskripsi buat perubahan yang kamu lakuin dalam hal ini, ganti judul halaman. Pesan ini penting banget, soalnya nanti pas kamu atau orang lain buka riwayat perubahan, bisa langsung ngerti: “Ohh ini commit yang isinya cuma ubah judul doang ya.” Jadi, meskipun cuma perubahan kecil, tetep bagus kasih pesan yang jelas dan sesuai biar proyek kamu rapi dan mudah dilacak. Pindah Perangkat ( Bonus ) Jadi gini, misalnya kamu sekarang ngodingnya di PC rumah. Terus tiba-tiba kamu pengen pindah tempat misalnya lanjut ngerjain di kafe sambil ngopi, tapi pake laptop. Atau bisa juga lagi nggak bawa laptop, terus pinjem laptop temen buat lanjutin. Nah, biar nggak ribet mindah-mindahin file satu-satu pake flashdisk, kamu tinggal ambil aja proyeknya dari GitHub. Praktis banget, tinggal buka GitHub, clone project-nya, dan semua file kamu udah siap di laptop mana pun. Terus mungkin kamu tanya, kenapa sih harus lewat GitHub? Karena di GitHub itu ada sistem yang namanya .git, semacam "mesin waktu" buat ngelacak semua perubahan di file kamu. Manfaatnya ya : Bisa nyimpen riwayat perubahan (jadi bisa lihat apa yang diubah, kapan, dan kenapa).Bisa kerja dari mana aja, asal ada internet.Kalau kamu kerja tim, bisa barengan ngedit kode tanpa saling timpa-timpaan. Jadi, GitHub itu bukan cuma tempat nyimpen file, tapi juga alat kolaborasi yang powerful banget buat ngoding. Caranya gini Pertama, buka halaman GitHub tempat kamu simpan proyeknya.Di sana kamu bakal lihat tombol warna hijau yang tulisannya "Code". Klik tombol itu, terus pilih yang "HTTPS", dan salin link-nya (biasanya formatnya kayak https://github.com/username/repo-nya.git). GitHub - Get Clone Sekarang buka terminal atau Git Bash di laptop yang baru. Terus ketik ini: git clone <https://github.com/username/ngekos-latihan.git> Abis itu kamu bisa langsung masuk ke foldernya: cd ngekos-latihan Terus tinggal buka di VSCode deh: code . Sekarang kamu udah siap lanjutin ngoding di laptop mana pun, kayak bawa "tas ajaib" berisi semua proyek kamu. Jual ( Bonus ) Kalau yang satu ini kita “menjual” atau membagikan kode, itu artinya kita pengen ngebagiin hasil kerja kita ke orang lain. Bisa dalam bentuk: Ngasih ke temen yang butuh proyek serupaUpload ke website kayak shaynakit.com , supaya orang lain bisa belajar atau pakaiAtau bahkan kamu jualin di platform kayak Gumroad, ThemeForest, Shaynakit, dll Jadi dari kode yang udah kamu bikin dengan susah payah, bisa banget jadi sesuatu yang bermanfaat buat orang lain. Manfaatnya ya: Orang lain terbantu karena nggak harus mulai dari nolKamu dikenal sebagai pembuatnya, bisa jadi portfolioBisa dapet cuan kalau dijualDan pastinya bikin kamu makin semangat ngoding, karena karya kamu dipakai banyak orang Caranya gini: GitHub - Get Zip Pertama, buka halaman GitHub proyek yang mau kamu download.Cari tombol hijau bertuliskan “Code”, biasanya ada di kanan atas tampilan repo.Klik tombol itu, nanti muncul dropdown.Di dropdown itu, kamu pilih opsi “Download ZIP”.Setelah itu, browser kamu bakal langsung mulai download file ZIP berisi seluruh isi proyek.Kalau sudah selesai, kamu tinggal ekstrak file ZIP itu di komputer kamu, misalnya di folder kerja favoritmu.Setelah diekstrak, kamu bisa buka folder itu di VSCode dengan klik kanan > Open with Code, atau buka VSCode dulu lalu buka foldernya. Nah, bedanya kalau kamu download file ZIP dari GitHub, itu cuma dapet isi file proyeknya aja, nggak ada “motor”nya, alias nggak ada folder .git yang biasanya nyimpen semua riwayat dan koneksi ke repository asal. Jadi, file ZIP itu nggak punya “remote” atau hubungan langsung ke GitHub, yang artinya kamu nggak bisa pakai perintah Git kayak git pull atau git push langsung di situ. File ZIP ini cuma cocok buat bagiin kode, belajar buat orang lain, atau pakai sementara buat kita kirim ke atasan, tapi kalau kamu mau terus update dan simpan versi perubahan, mending pakai Git clone langsung bakal kebawa juga .git-nya. Penutup Nah, itu dia langkah-langkah dasar pakai Git dan GitHub buat ngatur proyek frontend kamu. Gampang kan? Bayangin aja Git itu kayak buku harian buat proyek kamu, yang nyatet setiap perubahan kecil sampai besar, jadi kamu nggak bakal lupa apa yang kamu ubah dan kapan. Terus GitHub itu ibarat lemari arsip online tempat kamu nyimpen buku harian itu, jadi kamu bisa buka kapan aja, di mana aja, bahkan bisa berbagi sama temen buat ngerjain bareng. Dengan mulai pakai Git, kerjaan kamu bakal jadi lebih terorganisir, mudah diatur, dan siap kalau mau kolaborasi sama orang lain. Jangan lupa sering latihan pakai file kode yang udah disediain supaya makin paham.

Kalau lo baru mulai belajar jadi frontend developer, mungkin lo masih mikir kalau kerjaan utama lo cuma ngatur layout, warna tombol, bikin animasi, atau ngubah font supaya keliatan lebih estetik. Dan memang, itu bagian dari kerjaan lo. Tapi sebenarnya, tugas lo lebih dari sekadar bikin UI yang “cantik”. Lo tuh ibarat gerbang utama dari sebuah aplikasi—semua data dan fitur yang udah disiapin backend developer, ujung-ujungnya lewat lo yang nampilin ke user. Kalau lo gagal nampilin data dengan cara yang efisien, cepet, dan mudah dipahami, user gak bakal peduli backend lo sekuat apa. Buat mereka, yang keliatan di layar itulah aplikasinya. Nah, di sinilah peran penting lo sebagai frontend developer: lo harus consume data dari backend API, lalu tampilkan data itu dengan baik. Tapi bukan cuma “manggil API” doang ya. Lo juga harus mikirin banyak hal lain—misalnya, gimana ngatur loading state biar user gak kebingungan, gimana handle error kalau ada masalah saat ambil data, gimana biar data yang udah lo ambil bisa dipakai ulang di halaman lain tanpa fetch ulang, atau gimna caranya lo bisa trigger update data dengan efisien kalau user ngelakuin aksi tertentu (kayak submit form, delete item, dan sebagainya). Kebayang gak tuh? Dari luar kelihatan simple, tapi di dalamnya banyak banget yang harus lo pikirin. Dan makin besar project lo, makin banyak data yang harus di-fetch, makin kompleks logic yang harus lo kelola. Apalagi kalau datanya saling bergantung satu sama lain. Salah langkah sedikit, bisa bikin aplikasi lo jadi lambat, boros request, atau bahkan ngebug karena salah urus state. Di titik inilah lo akan sadar bahwa ngatur data di frontend itu gak semudah useEffect + useState doang. Apa yang Bakal Kita Pelajari di Artikel Ini Nah, karena tantangan consume data dari backend itu ternyata lebih ribet dari kelihatannya, lo butuh tools yang bisa bantu lo ngelola semua itu dengan cara yang lebih rapi dan scalable. Dan di sinilah React Query (TanStack Query) hadir sebagai penyelamat. Tools ini secara khusus dibuat buat ngebantu frontend developer dalam hal pengambilan, penyimpanan, dan sinkronisasi data API tanpa harus ribet setup logic sendiri. Di artikel ini, kita gak langsung loncat ke coding atau implementasi yang kompleks. Gue pengen ajak lo buat pelan-pelan kenalan dulu sama React Query. Gimana sih mindset dasarnya, kenapa tools ini penting banget buat lo pelajari sebagai pemula, dan kenapa banyak developer pro yang udah gak mau balik lagi ke cara manual setelah pakai React Query. Tujuan utamanya sih sederhana—supaya lo bisa bikin aplikasi React yang lebih raapi, efisien, dan enak dipakai, tanpa harus psing ngatur state loading, error, atau cache secara manual. Karena pada akhirnya, frontend developer yang baik itu bukan cuma yang bisa bikin UI bagus, tapi juga bisa nyajikan data dengan cara yang benar, cepat, dan stabil. Jadi lo gak cuma belajar tools baru, tapi juga belajar cara mikir yang lebih profesional dalam ngelola data di aplikasi React. Santai aja, kita bahasnya pelan-pelan. Siapin kopi dulu kalau perlu, karena abis ini kita bakal masuk ke manfaat dan contoh implementasinya langsung di React project lo. 10 Manfaat Menggunakan React Query TanStack (dibanding cara manual) Setelah kita bahas pentingnya peran frontend developer dan kenapa React Query bisa jadi solusi buat ngatur data API, sekarang saatnya masuk ke bagian serunya: manfaat nyata ketika lo pakai React Query dibanding cara manual, lengkap dengan contoh kode real-world. Gue yakin, setelah lo lihat sendiri perbandingannya, lo bakal mikir, “kenapa gak dari dulu aja gue pake ini?” Manfaat pertama: otomatis ngatuar loading state tanpa bikin state manual Kalau lo gak pakai React Query, biasanya lo bikin useState buat loading, terus atur logic true dan false di dalam useEffect. Contoh tanpa React Query: import { useState, useEffect } from "react"; import axios from "axios"; const ProductList = () => { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { axios.get("/api/products") .then(res => setProducts(res.data)) .finally(() => setLoading(false)); }, []); if (loading) return <p>Loading...</p>; return ( <ul> {products.map(product => <li key={product.id}>{product.name}</li>)} </ul> ); }; Sekarang bandingkan dengan React Query: import { useQuery } from "@tanstack/react-query"; import axios from "axios"; const fetchProducts = () => axios.get("/api/products").then(res => res.data); const ProductList = () => { const { data, isPending } = useQuery({ queryKey: ["products"], queryFn: fetchProducts, }); if (isPending) return <p>Loading...</p>; return ( <ul> {data.map(product => <li key={product.id}>{product.name}</li>)} </ul> ); }; Lebih clean, gak ada useEffect, gak ada useState, tapi semua tetap jalan rapi. Manfaat kedua: error handling lebih simpel dan konsisten Kalau gak pakai React Query, biasanya lo handle error pakai try/catch atau .catch() lalu simpen error ke state. Tanpa React Query: const [error, setError] = useState(null); useEffect(() => { axios.get("/api/products") .then(res => setProducts(res.data)) .catch(err => setError(err)); }, []); if (error) return <p>Something went wrong: {error.message}</p>; Dengan React Query: const { data, isError, error } = useQuery({ queryKey: ["products"], queryFn: fetchProducts, }); if (isError) return <p>Error: {error.message}</p>; Semuanya udah disediakan. Tinggal pakai. Manfaat ketiga: auto refetch data saat kembali ke tab browser React Query secara default akan refetch data saat user kembali ke halaman, jadi datanya selalu fresh. Tanpa React Query: useEffect(() => { const handleFocus = () => { axios.get("/api/products").then(res => setProducts(res.data)); }; window.addEventListener("focus", handleFocus); return () => window.removeEventListener("focsus", handleFocus); }, []); Dengan React Query: useQuery({ queryKey: ["products"], queryFn: fetchProducts, refetchOnWindowFocus: true, // default true }); Cuma tinggal nyebut opsinya aja. Manfaat keempat: caching otomatis dan smart React Query otomatis nyimpen hasil fetch, jadi data bisa dipakai ulang di koomponen lain tanpa loading ulang. Komponen A: const { data: products } = useQuery({ queryKey: ["products"], queryFn: fetchProducts, }); Komponen B (di halaman lain): const { data: products } = useQuery({ queryKey: ["products"], queryFn: fetchProducts, }); Kalau data udah pernah di-fetch sebelumnya, dia langsung tampil dari cache, gak loading ulang. Manfaat kelima: kontrol waktu validitas data (staleTime) Kadang kita pengen data dianggap fresh selama 5 menit. React Query bisa atur itu. useQuery({ queryKey: ["products"], queryFn: fetchProducts, staleTime: 1000 * 60 * 5, // data dianggap fresh selama 5 menit }); Kalau gak pakai React Query, lo harus bikin timer dan pengecekan manual sendiri. Manfaat keenam: cancel request lama secara otomatis Kalau user pindah halaman sebelum request selesai, React Query bakal otomatis cancel request tersebut. Manual approach? Lo harus pakai AbortController. Tanpa React Query: const controller = new AbortController(); useEffect(() => { axios.get("/api/products", { signal: controller.signal }) .then(res => setProducts(res.data)); return () => controller.abort(); }, []); Dengan React Query: cukup gunakan queryFn seperti biasa, dia handle sendiri. Manfaat ketujuh: mutation jaadi lebih rapi dengan hook useMutation Misal lo mau submit form dan setelah itu refetch data. Tanpa React Query: const handleSubmit = () => { axios.post("/api/products", newProduct) .then(() => { axios.get("/api/products").then(res => setProducts(res.data)); }); }; Dengan React Query: import { useMutation, useQueryClient } from "@tanstack/react-query"; const queryClient = useQueryClient(); const mutation = useMutation({ mutationFn: (newProduct) => axios.post("/api/products", newProduct), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["products"] }); }, }); Data langsung fresh setelah berhasil submit. Manfaat kedelapan: infinite scroll dan pagination jadi lebih gampang React Query punya useInfiniteQuery untuk bantu lo implementasi infinite scroll. useInfiniteQuery({ queryKey: ["products"], queryFn: ({ pageParam = 1 }) => fetch(`/api/products?page=${pageParam}`).then(res => res.json()), getNextPageParam: (lastPage, pages) => lastPage.nextPage, }); Kalau lo manual, lo harus simpen page number, track total data, handle load more state, dan logicnya bisa panjang banget. Manfaat kesembilan: query invalidation otomatis setelah mutasi Setelah lo update atau delete data, React Query bisa langsung re-fetch data terkait. useMutation({ mutationFn: deleteProduct, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["products"] }); }, }); Tanpa ini, user bisa lihat data lama atau harus refresh page. Manfaat kesepuluh: query logic bisa disimpan jadi custom hook Biar lebih reusable, lo bisa bikin custom hook kayak useProducts. export const useProducts = () => { return useQuery({ queryKey: ["products"], queryFn: fetchProducts, staleTime: 1000 * 60 * 5, }); }; Jadi tinggal panggil useProducts() di mana aja. Tanpa React Query, lo harus copy-paste logic useEffect dan useState di tiap komponen. Cara Membuat Project React Terbaru Menggunakan Vite Sebelum kita masuk ke dunia React Query, tentu kita harus punya dulu project React-nya. Dan sekarang, cara paling modern dan cepat untuk bikin project React adalah pakai Vite. Tools ini ringan, cepat banget waktu start-nya, dan udah jadi standar baru untuk banyak developer frontend. Langkah pertama, pastikan lo udah install Node.js versi terbaru. Cek lewat terminal: node -v Kalau udah, lo bisa langsung jalankan perintah berikut buat bikin project React dengan Vite: npm create vite@latest my-react-query-app -- --template react Perintah ini bakal bikin folder my-react-query-app dengan template React bawaan dari Vite. Setelah itu, masuk ke folder project dan install dependency-nya: cd my-react-query-app npm install Kalau lo pakai TypeScript, bisa ganti template --template react jadi --template react-ts. Setelah semuanya terpasang, jalankan development server-nya dengan: npm run dev Nanti lo bisa buka browser dan akses http://localhost:5173. Kalau tampilannya muncul tulisan “Vite + React”, berarti project lo udah berhasil dibuat dan siap dipakai. Cara Menambahkan React Query TanStack ke Project Vite React Sekarang, setelah project-nya jadi, saatnya kita tambahkan React Query ke dalam project ini. React Query itu paket resmi dari TanStack, dan cara install-nya sangat gampang. Di terminal, jalankan perintah berikut: npm install @tanstack/react-query Setelah berhasil, lo juga bisa tambahkan devtools-nya biar gampang ngecek status query saat ngembangin aplikasi: npm install @tanstack/react-query-devtools Langkah berikutnya adalah setup provider React Query di root aplikasi. Buka file main.jsx dan ubah isinya jadi seperti ini: import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; import './index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider> </React.StrictMode>, ); Dengan ini, lo udah siap pakai semua fitur React Query di seluruh aplikasi lo. Sekarang mari kita coba implementasi sederhana buat fetch data. Misalnya kita mau ambil data users dari placeholder API. Pertama, buka App.jsx dan ubah jadi seperti ini: import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; const fetchUsers = async () => { const response = await axios.get('<https://jsonplaceholder.typicode.com/users>'); return response.data; }; function App() { const { data, isPending, isError, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); if (isPending) { return <p>Loading data...</p>; } if (isError) { return <p>Error occurred: {error.message}</p>; } return ( <div> <h1>Daftar Pengguna</h1> <ul> {data.map((user) => ( <li key={user.id}> {user.name} — {user.email} </li> ))} </ul> </div> ); } export default App; Dalam contoh di atas, lo bisa lihat bahwa kita gak prerlu bikin useState, useEffect, atau handle loading dan error state manual. Semuanya udah ditangani dengan rapi oleh React Query. Kalau lo juga install devtoolsa-nya tadi, lo bisa tambahkan satu baris di bawah <App /> buat bantu debugging: import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // Di dalam render: <QueryClientProvider client={queryClient}> <App /> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> Dengan ini, lo bisa lihat status dari semua query yang lo buhat di aplikasi, termasuk apakah sedang loading, sukses, error, dan kapan terakhir kali data di-fetch. Sekarang lo udah punya project React modern dengan Vite, dan udah terpasang React Query lengkap dengan devtools. Ke depan, semua data fetching lo bakal jauh lebih clean, powerful, dan gampang dikelola — tinggal fokus ke logic aplikasinya, bukan mikirin boilerplate terus. Jika Tanppa Pake React Query Sekarang gue tunjukin versi tanpa menggunakan React Query, supaya lo bisa langsung bandingin effort dan kompleksitaasnya dengan versi yang pakai React Query tadi. Contoh ini akan ambil data dari https://jsonplaceholder.typicode.com/users dan nampilin daftar nama + email pengguna, sama seperti versi sebelumnya — tapi ditulis full manual pakai useState dan useEffect. import { useEffect, useState } from 'react'; import axios from 'axios'; function App() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchUsers = async () => { try { setLoading(true); // mulai loading const response = await axios.get('<https://jsonplaceholder.typicode.com/users>'); setUsers(response.data); // simpan data } catch (err) { setError(err); // simpan error jika ada } finally { setLoading(false); // selesai loading } }; fetchUsers(); }, []); if (loading) { return <p>Loading data...</p>; } if (error) { return <p>Terjadi kesalahan: {error.message}</p>; } return ( <div> <h1>Daftar Pengguna</h1> <ul> {users.map((user) => ( <li key={user.id}> {user.name} — {user.email} </li> ))} </ul> </div> ); } export default App; Penjelasan singkatnya: Kita harus bikin useState tiga kali: satu buat data, satu buat loading, satu lagi buat error.Di useEffect, kita bikin fungsi async manaual buat nge-fetch data.Harus handle try, catch, dan finally sendiri untuk kelola state dengan benar.Gak ada caching, gak ada invalidation otomatis, gak ada refetch on window focus, semua harus diatur manual kalau dibutuhkan. Dengan contoh ini lo bisa ngerasain sendiri bedanya: React Query bikin semua logic itu jadi lebih pendek, bersih, dan bisa di-scale ke banyak tempat. Tapi di sisi lain, penting juga paham cara manual kayak gini, karena ini jadi dasar buat ngerti kenapa kita butuh abstraction seperti React Query. 5 Contoh Analogi React Query TanStack di Dunia Restoran (Plus Kode Nyatanya) Biar konsep React Query makin nempel di kepala, kita coba bandingkan dengan sesuatu yang lebih akrab: dunia restoran. Kenapa restoran? Karena alur kerja di restoran ternyata mirip banget sama alur ambil data di aplikasi—ada dapur (backend), ada pelayan (frontend), ada pelanggan (user), dan ada alur penyajian makanan (data). Kita bahas satu per satu ya, santai aja. Analogi pertama: caching seperti pelanggan tetap yang punya pesanan langganan Bayangin lo sering banget datang ke restoran yang sama, dan setiap kali lo datang, lo selalu pesen nasi goreng. Nah, pelayannya udah hafal sama kebiasaan lo, jadi dia gak perlu nanya ulang pesanan lo tiap kali lo datang. Itulah konsep caching di React Query. Kode tanpa React Query: useEffect(() => { axios.get('/api/nasi-goreng').then((res) => setData(res.data)); }, []); Tiap buka halaman, dia fetch lagi walau datanya sama. Kode dengan React Query: const { data } = useQuery({ queryKey: ['nasi-goreng'], queryFn: () => axios.get('/api/nasi-goreng').then(res => res.data), }); React Query otomatis simpan hasil fetch di cache. Jadi kalau lo buka halaman lain dan balik lagi, datanya langsung muncul tanpa harus fetch ulang. Analogi kedua: loading state seperti pelayan bilang "makanan sedang disiapkan ya, ditunggu sebentar" Waktu lo pesen makanan di restoran, lo gak langsung dapet makanannya kan? Tapi pelayan biasanya ngasih tahu statusnya: “mohon tungagu, sedang dimasak.” Itu sama dengan isPending atau isLoading di React Query. Tanpa React Query: const [loading, setLoading] = useState(true); useEffect(() => { axios.get('/api/makanan').then(() => { setLoading(false); }); }, []); Harus atur manual kapan loading selesai. Dengan React Query: const { isPending } = useQuery({ queryKey: ['makanan'], queryFn: () => axios.get('/api/makanan').then(res => res.data), }); Langsung dapet status loading tanpa bikin state sendiri. Analogi ketiga: refetch otomatis saat pelanggan nanya "mas, makanannya udah jadi belum?" Kadang pelanggan itu gak sabaran dan nanya ke pelayan lagi buat mastiin makanannya udah selesai atau belum. Nah, ini mirip kayak refetchOnWindowFocus di React Query. Kalau user balik lagi ke halaman (misalnya habis pindah tab), React Query akan otomatis nanya ulang ke server apakah datanya udah update. Tanpa React Query, harus bikin event listener sendiri: useEffect(() => { const onFocus = () => { axios.get('/api/menu').then(res => setMenu(res.data)); }; window.addEventListener('focus', onFocus); return () => window.removeEventListener('focus', onFocus); }, []); Dengan React Query: useQuery({ queryKey: ['menu'], queryFn: () => axios.get('/api/menu').then(res => res.data), refetchOnWindowFocus: true, }); React Query udah otomatis handle ini di balik layar. Gak perlu ribet. Analogi keempat: mutasi seperti pelanggan memesan makanan baru dan dapurnya langsung update Kalau pelanggan pesen makanan baru, dapurnya langsung proses dan pelayan update statusnya. Ini mirip banget dengan useMutation di React Query. Tanpa React Query: const addMenu = (newMenu) => { axios.post('/api/menu', newMenu).then(() => { axios.get('/api/menu').then(res => setMenu(res.data)); }); }; Dengan React Query: const queryClient = useQueryClient(); const { mutate } = useMutation({ mutationFn: (newMenu) => axios.post('/api/menu', newMenu), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['menu'] }); }, }); Langsung refetch menu terbaru setelah mutasi sukses. Kayak pelayan langsung ngecek ulang ke dapur. Analogi kelima: devtools seperti kamera CCTV di dapur yang bisa liat proses masaknya Restoran profesional biasanya punya dapur terbuka atau CCTV buat mantau proses masak biar tahu kalau ada masalah. Nah, React Query juga punya Devtools yang kasih lo visual semua query yang jalan, statusnya, apakah error, loading, atau udah sukses. Setup-nya super gampang: import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; <QueryClientProvider client={queryClient}> <App /> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> Kalau lo buka aplikasi, Devtools ini akan nunjukin query yang aktif, hasilnya, dan semua history fetch. Sangat berguna buat debugging atau lihat performa aplikasi real-time. Jadi kalau ditarik benang merahnya, React Query itu kayak sistem restoran modern. Dia hafal pelanggan (caching), kasih info status pesanan (loading), nanyain ulang secara berkala (refetch), langsung respon kalau ada pesanan baru (mutation), dan kasih visualisasi ke dapur (devtools). Gak heran kenapa React Query bikin kerjaan lo jauh lebih gampang dan profesional. 5 Kesalahan Umum Pemula Saat Awal Pakai React Query (dan Solusi Lengkapnya) Gue paham banget, pas pertama kali nyobain React Query, rasanya kayak "wah enak banget ya tinggal pakai hook buat ambil data", tapi ternyata... gak semudah itu juga. Karena meskipun React Query itu powerful, tetap aja banyak pemula yang sering kejebak kesalahan kecil yang bikin datanya gak muncul, loading gak kelar, atau bahkan malah error terus. Tenang bro, di bawah ini gue bakal kasih 5 contoh kesalahan paling sering terjadi saat pemula pakai React Query, lengkap sama solusi dan contoh kode real-nya. Biar lo gak perlu ngalamin sakit kepala yang sama. Kesalahan pertama: lupa bungkus aplikasi dengan QueryClientProvider Ini adalah kesalahan yang paling sering kejadian. Lo langsung pakai useQuery di komponen, tapi lupa bahwa QueryClientProvider itu wajib banget ada di root aplikasi. Contoh yang salah: import { useQuery } from '@tanstack/react-query'; function App() { const { data } = useQuery({ queryKey: ['users'], queryFn: () => axios.get('/api/users').then(res => res.data), }); return <div>{JSON.stringify(data)}</div>; } export default App; Kalau lo jalanin, ini bakal error karena React Query belum dikasih "klien" untuk jalanin hook-nya. Solusi: import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider> </React.StrictMode> ); Baru setelah itu lo bisa pakai useQuery di komponen mana pun. Kesalahan kedua: queryKey tidak konsisten atau tidak unik Banyak pemula nulis queryKey sembarangan, misalnya pakai string doang tanpa kombinasi parameter. Akibatnya, cache-nya bentrok atau query-nya gak ke-trigger ulang ketika seharusnya dia refetch. Contoh salah: const { data } = useQuery({ queryKey: ['product'], queryFn: () => axios.get(`/api/product/${id}`).then(res => res.data), }); Kalau id berubah, data gak refetch karena queryKey gak berubah. Solusi: const { data } = useQuery({ queryKey: ['product', id], queryFn: () => axios.get(`/api/product/${id}`).then(res => res.data), }); Dengan begini, React Query tahu kalau id berubah, dia harus ambil data baru. Kesalahan ketiga: langsung pakai data.map() padahal data masih undefined Kadang lo terlalu semangat langsung render data.map() padahal data-nya belum dateng. Ini bikin error di render: Cannot read properties of undefined (reading 'map'). Contoh yang salah: const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); return ( <ul> {data.map(user => <li key={user.id}>{user.name}</li>)} </ul> ); Solusinya, pastikan lo cek dulu apakah data udah ada: if (!data) return <p>Loading...</p>; return ( <ul> {data.map(user => <li key={user.id}>{user.name}</li>)} </ul> ); Atau lo juga bisa pakai isPending: const { data, isPending } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); if (isPending) return <p>Loading...</p>; Kesalahan keempat: pakai async di queryFn tapi lupa return data-nya Lo nulis fungsi async, tapi lupa return hasilnya. Akibatnya, React Query gak nerima data apapun. Contoh salah: const fetchUsers = async () => { axios.get('/api/users'); // lupa return }; useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); Solusi: const fetchUsers = async () => { const res = await axios.get('/api/users'); return res.data; }; React Query butuh return dari queryFn buat nge-cache dan render datanya. Kesalahan kelima: lupa handle error state, bikin user bingung saat API gagal Banyak pemula cuma handle loading dan success, tapi gak kasih fallback pas data gagal di-fetch. User jadi diem aja ngeliat layar kosong, gak tahu kenapa. Contoh yang kurang lengkap: const { data, isPending } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); if (isPending) return <p>Loading...</p>; // kalau error, gak ada apa-apa di layar Solusi: const { data, isPending, isError, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, }); if (isPending) return <p>Loading...</p>; if (isError) return <p>Error: {error.message}</p>; return ( <ul> {data.map(user => <li key={user.id}>{user.name}</li>)} </ul> ); Dengan isError, lo bisa kasih feedback jelas ke user. Apalagi kalau project-nya production, penting banget transparan soal error. Kesimpulannya, React Query itu powerful banget, tapi juga butuh disiplin kecil dari kita sebagai developer buat gunain dengan benar. Kesalahan kecil kayak lupa return, queryKey gak rapi, atau lupa handle error, bisa bikin aplikasi lo gak maksimal. Tapi setelah paham logika dasarnya, semuanya jadi jauh lebih mudah. Yang penting: jangan buru-buru, pahami dulu alurnya, dan biasakan testing tiap kondisi dengan baik. Saran Buat Kamu yang Baru Mulai Jadi Web Developer Kalau lo baru masuk ke dunia web development, apalagi kalau fokusnya ke React, gue ngerti banget rasanya. Banyak hal yang harus dipelajari: dari dasar-dasar komponen, state, hingga cara kerja fetching data, dan semua itu bisa bikin lo bingung harus mulai dari mana. Apalagi kalau lo pengen serius dan punya target kerja remote, bersaing di pasar global, atau bahkan punya portofolio keren yang bisa dikirim ke klien luar negeri. Makanya, gue saranin banget buat ikut kelas React dari mentor expert di BuildWithAngga. Kelas ini bukan sekadar kumpulan video tutorial, tapi disusun langsung oleh mentor yang udah punya pengalaman kerja nyata — bahkan beberapa dari mereka udah bantu banyak student buat dapat kerja remote dan proyek global. Kelebihan dari kelas ini juga gak main-main: Portofolio berkualitas tinggi: lo bakal bangun project beneran, bukan cuma todo list. Project-nya realistis, punya tampilan profesional, dan bisa lo pajang langsung di CV atau LinkedIn lo buat narik perhatian recruiter.Akses kelas selamanya: lo gak perlu khawatir kejar-kejaran waktu. Mau belajar pagi, malam, atau pas weekend aja juga bisa. Cocok buat lo yang mungkin masih kuliah, kerja, atau punya kesibukan lain.Forum diskusi bareng mentor: ini salah satu fitur paling powerful. Lo bisa langsung tanya ke mentor kalau mentok, atau diskusi bareng temen-temen lain yang juga lagi belajar. Jadi lo gak akan merasa belajar sendirian. Kalau lo memang punya mimpi untuk jadi web developer profesional, kerja remote dari mana aja, dan bikin aplikasi yang keren dan beneran dipakai orang, gue yakin investasi waktu dan tenaga di kelas ini bakal jadi langkah awal yang sangat tepat. Jangan cuma puas bisa React. Kuasai mindset-nya, kuasai praktiknya, dan bangun portofolio yang bisa nunjukin skill lo. Kelas React di BuildWithAngga bisa bantu lo ke sana.

Daftar Isi PendahuluanTidak Memahami Dasar-Dasar HTML, CSS, dan JavaScriptMengabaikan Responsive DesignTidak Memperhatikan Struktur dan Semantik HTMLMengandalkan Framework Tanpa Memahami Cara KerjanyaStyling yang Tidak TerstrukturTidak Mengoptimalkan Performa WebsiteTidak Menggunakan Versi Kontrol (Git)Kurang Memahami Debugging dan KonsolTidak Terbiasa Membaca DokumentasiTidak Melatih Soft Skill dan KolaborasiPenutup Pendahuluan Menjadi seorang frontend developer adalah perjalanan yang seru dan menantang. Kita dituntut untuk membangun antarmuka yang bukan cuma menarik secara visual, tapi juga fungsional, responsif, dan mudah digunakan di berbagai perangkat. Tapi di balik semua itu, banyak pemula (dan kadang juga yang sudah berpengalaman) sering terjebak dalam kesalahan-kesalahan yang sebenarnya bisa dihindari sejak awal. Kesalahan itu wajar, karena itulah bagian dari proses belajar. Tapi bukan berarti kita harus jatuh ke lubang yang sama berulang kali, kan? Dengan mengetahui kesalahan umum yang sering dilakukan, kamu bisa melangkah lebih percaya diri, menghindari jebakan yang bikin frustasi, dan fokus membangun skill dengan lebih terarah. Nah, di artikel ini, kita akan bahas 10 kesalahan yang sering banget dilakukan oleh frontend developer pemula. Harapannya, kamu bisa belajar dari pengalaman orang lain dan tumbuh lebih cepat sebagai developer yang solid dan siap menghadapi tantangan industri. Yuk, kita mulai! Tidak Memahami Dasar-Dasar HTML, CSS, dan JavaScript Banyak pemula langsung ingin belajar framework seperti React atau Vue karena terlihat keren dan banyak dipakai di industri. Padahal, fondasi dari semua itu tetap HTML, CSS, dan JavaScript. Kalau kamu belum paham struktur HTML, bagaimana CSS bekerja, atau gimana cara kerja event di JavaScript, kamu akan cepat merasa bingung dan frustrasi saat masuk ke framework. Contoh kesalahan umum: Menggunakan <div> untuk segalanya (bahkan untuk heading atau tombol)Tidak tahu perbedaan == dan === di JavaScriptStyling elemen dengan cara hardcode dan tidak konsisten Solusi: Luangkan waktu untuk benar-benar memahami dasar-dasar ini. Banyak resource gratis seperti MDN Web Docs yang bisa kamu pelajari. Mengabaikan Responsive Design Di era mobile seperti sekarang, mayoritas pengguna internet datang dari smartphone. Kalau tampilan web kamu cuma enak dilihat di desktop, siap-siap aja pengunjung kabur. Contoh kesalahan: Tidak menggunakan media queriesLayout rusak di layar kecilMenyusun elemen dengan fixed width Solusi: Pelajari cara membuat layout dengan Flexbox atau CSS Grid. Gunakan @media untuk menyesuaikan tampilan di berbagai perangkat. Coba buka website-mu di HP dan lihat apakah nyaman digunakan. Tidak Memperhatikan Struktur dan Semantik HTML HTML bukan cuma soal menampilkan konten. Elemen semantik seperti <header>, <nav>, <main>, dan <footer> sangat membantu dari sisi SEO dan aksesibilitas. Contoh kesalahan: Pakai <div> untuk semua struktur halamanTidak menggunakan heading (<h1>, <h2>, dst.) dengan benarTidak menambahkan atribut alt pada gambar Solusi: Biasakan menulis HTML yang terstruktur dan bermakna. Pikirkan bagaimana screen reader atau mesin pencari akan membaca halamanmu. Mengandalkan Framework Tanpa Memahami Cara Kerjanya Framework bisa bikin ngoding lebih cepat, tapi bukan berarti kamu boleh lewati tahap memahami cara kerja JavaScript dan DOM. Contoh kesalahan: Menggunakan React tapi tidak tahu cara kerja onClick atau useStateTidak paham perbedaan props dan stateAsal copy-paste kode dari StackOverflow Solusi: Framework adalah alat bantu, bukan jalan pintas. Pelajari JavaScript murni terlebih dulu agar kamu bisa benar-benar memaksimalkan framework yang kamu pakai. Styling yang Tidak Terstruktur Styling yang berantakan bikin pengembangan jangka panjang jadi mimpi buruk. Perubahan kecil bisa merusak elemen lain tanpa sengaja. Contoh kesalahan: CSS terlalu umum atau saling tumpang tindihTidak ada konsistensi warna, margin, padding, dllMenulis styling langsung di tag HTML (inline style) Solusi: Gunakan pendekatan seperti BEM (Block Element Modifier), CSS Modules, atau library seperti TailwindCSS agar styling lebih terorganisir dan scalable. Tidak Mengoptimalkan Performa Website Tampilan boleh keren, tapi kalau website kamu lambat dibuka, pengguna bisa langsung kabur sebelum sempat melihat apa-apa. Kecepatan adalah salah satu faktor penting dalam pengalaman pengguna. Contoh kesalahan: Menggunakan gambar berukuran besar tanpa kompresiTerlalu banyak animasi beratMemuat semua konten sekaligus tanpa lazy loading Solusi: Gunakan tools seperti ImageOptim atau SquooshTerapkan lazy loading untuk gambar atau komponen yang tidak langsung terlihatMinify CSS dan JavaScriptPertimbangkan penggunaan CDN untuk distribusi aset Tidak Menggunakan Versi Kontrol (Git) Banyak pemula merasa Git itu ribet dan akhirnya malah tidak digunakan. Padahal, versi kontrol seperti Git adalah senjata wajib buat developer modern. Git bukan cuma untuk backup, tapi juga memudahkan kolaborasi, tracking perubahan, dan rollback kalau ada error. Contoh kesalahan: Tidak membuat repository GitLangsung edit file tanpa commit historyTidak tahu cara membuat branch untuk fitur baru Solusi: Pelajari dasar Git: init, add, commit, push, pull, mergeGunakan platform seperti GitHub atau GitLab untuk menyimpan proyek kamuBiasakan commit dengan pesan yang jelas dan deskriptif Kurang Memahami Debugging dan Konsol Setiap developer pasti akan menghadapi error. Masalahnya, banyak pemula yang panik atau langsung cari jawaban di internet tanpa memahami apa yang sebenarnya terjadi. Contoh kesalahan: Tidak pernah membuka DevTools di browserMengabaikan error message di consoleHanya mengandalkan console.log tanpa strategi debugging Solusi: Biasakan menggunakan fitur Inspect Element dan Console di browserPelajari cara menggunakan breakpoints untuk melacak alur kodeJangan takut membaca dan memahami pesan error Tidak Terbiasa Membaca Dokumentasi Kebiasaan buruk lain yang sering muncul adalah langsung cari solusi cepat di forum atau YouTube tanpa membaca dokumentasi resmi. Padahal, dokumentasi adalah sumber paling akurat dan up-to-date. Contoh kesalahan: Tidak tahu ada fitur tertentu karena tidak baca docsSalah paham cara pakai API atau libraryMengandalkan tutorial yang sudah usang Solusi: Jadikan dokumentasi resmi sebagai referensi utamaBiasakan eksplorasi dokumen API, konfigurasi, dan contoh kode dari library yang kamu gunakanDokumentasi juga bisa melatih kamu memahami alur berpikir teknis dengan lebih dalam Tidak Melatih Soft Skill dan Kolaborasi Frontend developer bukan cuma kerja sendiri di balik layar. Dalam dunia kerja nyata, kamu akan sering berkolaborasi dengan designer, backend developer, bahkan stakeholder non-teknis. Keterampilan komunikasi dan kerja tim itu penting banget. Contoh kesalahan: Tidak menulis dokumentasi untuk kode sendiriAsal push ke repo tanpa diskusi dengan timSulit memahami feedback atau revisi Solusi: Gunakan tools kolaborasi seperti GitHub Issues, Trello, atau NotionLatih cara memberi dan menerima feedback dengan baikDokumentasikan fitur atau perubahan penting, walau hanya singkat Penutup Belajar frontend itu memang menantang, tapi sangat menyenangkan kalau dilakukan dengan cara yang tepat. Dengan menghindari kesalahan-kesalahan umum di atas, kamu bisa lebih cepat berkembang dan tampil lebih profesional di mata tim maupun klien. Ingat, setiap developer hebat juga pernah jadi pemula. Jadi jangan takut buat salah asal kamu belajar dari setiap kesalahan, kamu pasti terus berkembang. Terus eksplorasi, banyak latihan, dan jangan lupa bersenang-senang dalam prosesnya!

Daftar Isi PendahuluanApa Itu "Skip to Content"?Kenapa "Skip to Content" Penting Banget?Cara Kerja "Skip to Content"Bikin Link-nya di AtasKasih Target di Konten UtamaGimana dengan Tampilannya?Contoh Kode Lengkap "Skip to Content"HTML:CSS (style.css):Hasilnya Gimana?Best Practices untuk "Skip to Content"Pastikan Link Bisa DifokuskanGunakan Posisi Awal yang Masuk AkalTampilan yang Jelas Saat FokusGunakan ID yang Jelas dan KonsistenUji di Berbagai BrowserTes Pakai Keyboard SajaKesalahan Umum yang Harus DihindariNgasih display: none ke Skip LinkNgasih Target ke Elemen yang Nggak Bisa DifokuskanMelupakan Uji Coba KeyboardDesain yang Nggak Kontras Saat FokusLupa Pasang di Semua HalamanKesimpulan Pendahuluan Pernah nggak sih kamu mengunjungi sebuah website, lalu harus menekan tombol tab berkali-kali cuma buat sampai ke bagian utama kontennya? Bayangin kalau kamu harus melakukannya setiap kali buka halaman baru capek banget, kan? Nah, di sinilah fitur “Skip to Content” punya peran penting. Meskipun kelihatannya sepele, fitur ini bisa bikin pengalaman berselancar di web jadi jauh lebih nyaman, terutama buat teman-teman yang mengandalkan keyboard atau screen reader. Sayangnya, fitur ini masih sering diabaikan oleh banyak pengembang web. Di artikel ini, kita bakal bahas apa itu “Skip to Content”, kenapa fitur ini penting banget buat aksesibilitas, dan gimana cara simpel buat nambahinnya ke website kamu. Yuk, kita mulai! Apa Itu "Skip to Content"? “Skip to Content” (atau kadang disebut juga “Skip Link”) adalah semacam jalan pintas yang bisa diakses pengguna keyboard untuk langsung loncat ke bagian utama dari halaman web biasanya isi artikel, produk, atau apapun yang jadi inti dari halaman tersebut. Biasanya, link ini diletakkan di bagian paling atas halaman, dan baru muncul saat pengguna menekan tombol Tab pertama kali. Jadi, daripada harus pencet Tab berkali-kali buat ngelewatin menu navigasi, pengguna cukup sekali tab, tekan enter, dan langsung nyampe ke konten utama. Simpel, tapi sangat membantu. Contohnya kayak gini: <a href="#main-content" class="skip-link">Skip to Content</a> Terus di bagian utama kontennya kamu kasih id: <main id="main-content"> <!-- isi kontennya di sini --> </main> Biasanya, link ini disembunyikan dari tampilan biasa dan cuma muncul saat difokusin, biar nggak ganggu desain tapi tetap bisa diakses. Kita akan bahas cara bikin tampilannya nanti, tapi intinya: fitur ini penting banget buat aksesibilitas. Kenapa "Skip to Content" Penting Banget? Buat kamu yang biasa pakai mouse atau touchpad, mungkin fitur ini keliatannya nggak terlalu penting. Tapi coba bayangin jadi orang yang mengandalkan keyboard atau screen reader untuk menjelajahi website setiap kali buka halaman baru, mereka harus pencet Tab berkali-kali buat lewatin header, menu, tombol-tombol, dan sidebar, sebelum akhirnya sampai ke kontennya. Melelahkan, ya? Nah, di sinilah “Skip to Content” jadi penyelamat. Dengan satu tab dan enter, pengguna bisa langsung lompat ke bagian yang mereka butuhkan. Cepat, efisien, dan nggak bikin frustrasi. Selain soal kenyamanan, fitur ini juga bisa bantu website kamu lebih ramah akses. Banyak standar aksesibilitas (kayak WCAG) yang menyarankan atau bahkan mewajibkan adanya fitur semacam ini, terutama kalau kamu ingin situsmu bisa dipakai semua orang, termasuk penyandang disabilitas. Dan jangan lupa, website yang ramah akses itu bukan cuma soal “kewajiban”, tapi juga soal pengalaman pengguna. Siapa sih yang nggak seneng kalau websitenya enak dipakai semua orang? Cara Kerja “Skip to Content” Secara teknis, cara kerja “Skip to Content” itu sederhana banget. Intinya, kita bikin sebuah link di bagian atas halaman yang mengarah langsung ke elemen utama konten kita biasanya elemen <main> atau div dengan id tertentu. Bikin Link-nya di Atas Link ini diletakkan paling atas di dalam <body>, kayak gini: <a href="#main-content" class="skip-link">Skip to Content</a> Kenapa harus di atas? Karena pengguna keyboard biasanya mulai navigasi dari atas, jadi link ini harus jadi hal pertama yang bisa mereka akses. Kasih Target di Konten Utama Pastikan bagian konten utama punya id yang sesuai: <main id="main-content"> <!-- isi artikel atau konten utama --> </main> Ketika pengguna menekan Tab, link “Skip to Content” akan muncul. Begitu mereka tekan Enter, fokus akan langsung lompat ke elemen dengan id="main-content" tadi. Gimana dengan Tampilannya? Biasanya, kita pengen link ini nggak kelihatan di tampilan normal, tapi tetap bisa diakses pas difokusin. Nah, ini contoh CSS yang bisa dipakai: .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px 16px; z-index: 100; text-decoration: none; transition: top 0.3s; } .skip-link:focus { top: 10px; } Jadi, link ini akan "ngumpet" di luar layar dan baru muncul saat dapet fokus (misalnya saat ditekan Tab). Contoh Kode Lengkap "Skip to Content” Berikut ini contoh kode HTML dan CSS lengkap buat nambahin fitur Skip to Content di website kamu. Simpel tapi langsung bisa dipakai: 🧩 HTML: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Contoh Skip to Content</title> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="#main-content" class="skip-link">Skip to Content</a> <header> <nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang</a></li> <li><a href="#">Kontak</a></li> </ul> </nav> </header> <main id="main-content"> <h1>Halo, Selamat Datang!</h1> <p>Ini adalah bagian utama dari halaman.</p> </main> </body> </html> 🎨 CSS (style.css): .skip-link { position: absolute; top: -40px; left: 0; background: #1e1e1e; color: #fff; padding: 8px 16px; z-index: 100; text-decoration: none; border-radius: 4px; transition: top 0.3s ease; } .skip-link:focus { top: 10px; } ✨ Hasilnya Gimana? Kalau kamu buka halaman ini di browser dan langsung pencet tombol Tab, link “Skip to Content” akan muncul di pojok atas. Tekan Enter, dan kamu bakal langsung lompat ke bagian utama. Nggak perlu tab-tab panjang lewat menu dulu. Praktis banget, kan? Local Result: Skip to content Best Practices untuk "Skip to Content” Walaupun fitur ini kelihatannya sederhana, ada beberapa hal yang perlu kamu perhatiin biar “Skip to Content”-mu benar-benar bermanfaat dan nggak sekadar formalitas aja. Yuk, kita bahas beberapa tips terbaiknya! Pastikan Link Bisa Difokuskan Kalau link-nya nggak bisa difokusin (nggak muncul saat Tab ditekan), ya fitur ini jadi sia-sia. Jadi, jangan matiin outline fokus atau sembunyikan link secara permanen pakai display: none. Gunakan Posisi Awal yang Masuk Akal Link sebaiknya ada di bagian paling atas <body>. Kenapa? Karena pengguna keyboard akan mulai dari atas, dan kita pengen kasih opsi “lompat ke konten” secepat mungkin. Tampilan yang Jelas Saat Fokus Waktu link ini muncul, pastikan tampilannya kelihatan jelas. Kasih background yang kontras, padding yang cukup, dan posisi yang enak dilihat. Jangan sampai pengguna bingung atau nggak sadar kalau mereka lagi fokus di link tersebut. Gunakan ID yang Jelas dan Konsisten Pastikan target dari link-nya (#main-content) memang ada, dan diletakkan di sekitar elemen konten utama. Hindari salah tulis ID atau meletakkan link ke elemen yang bukan bagian inti halaman. Uji di Berbagai Browser Meskipun ini fitur dasar, beda browser kadang bisa ngasih pengalaman yang sedikit berbeda. Coba test di Chrome, Firefox, Edge, dan Safari, plus di mode mobile kalau perlu. Tes Pakai Keyboard Saja Coba akses websitemu tanpa mouse. Gunakan Tab, Shift+Tab, dan Enter. Rasain sendiri apakah pengalaman navigasinya nyaman dan logis. Dengan mengikuti best practices ini, fitur “Skip to Content” kamu bakal benar-benar berguna buat semua pengguna bukan cuma ada buat formalitas aja. ✨ Kesalahan Umum yang Harus Dihindari Walaupun simpel, ternyata masih banyak developer (termasuk yang udah berpengalaman) yang keliru waktu bikin fitur ini. Berikut beberapa kesalahan yang perlu kamu hindari: Ngasih display: none ke Skip Link Ini kesalahan klasik. Banyak yang pengen link-nya nggak kelihatan, lalu langsung kasih display: none. Padahal, ini bikin link-nya nggak bisa diakses sama sekali pakai keyboard. Solusinya? Pakai position: absolute dan sembunyikan di luar layar, lalu munculin lagi pas difokusin. Ngasih Target ke Elemen yang Nggak Bisa Difokuskan Kalau kamu ngarahin ke elemen kayak <div> biasa tanpa tabindex atau bukan elemen fokus, bisa jadi user nggak ngerasa udah "lompat" ke kontennya. Idealnya, targetnya adalah elemen <main>, <article>, atau elemen yang bisa menerima fokus dengan tabindex="-1". <div id="konten-utama" tabindex="-1"> <!-- isi konten --> </div> Melupakan Uji Coba Keyboard Kadang kita mikir semuanya udah beres, padahal belum pernah dites pakai keyboard beneran. Jangan cuma klik-klik mouse aja ya coba navigasi pakai Tab biar tahu pengalaman pengguna beneran. Desain yang Nggak Kontras Saat Fokus Kalau skip link muncul tapi tampilannya samar, kecil, atau nggak terbaca, itu sama aja kayak nggak ada. Pastikan saat focus, link-nya punya warna, ukuran, dan posisi yang stand out. Lupa Pasang di Semua Halaman Kadang fitur ini cuma dipasang di halaman depan doang. Padahal, setiap halaman harus punya akses ke konten utamanya. Pastikan skip link ini ada di layout global atau template utama situsmu. Dengan menghindari kesalahan-kesalahan di atas, kamu udah satu langkah lebih maju dalam bikin website yang inklusif dan ramah semua orang. Kesimpulan "Skip to Content" emang fitur kecil, tapi dampaknya luar biasa terutama buat teman-teman yang mengandalkan keyboard atau screen reader. Dengan adanya fitur ini, mereka nggak perlu repot bolak-balik Tab buat lewatin menu, sidebar, atau elemen-elemen lain yang bukan inti dari halaman. Kabar baiknya, cara implementasinya juga nggak ribet. Cukup bikin satu link di awal halaman, arahkan ke bagian utama konten, dan kasih styling supaya muncul saat difokusin. Simpel, cepat, dan bikin pengalaman pengguna jadi jauh lebih nyaman. Intinya, fitur kayak gini bukan cuma soal “aksesibilitas” dalam arti teknis tapi juga soal empati. Kita bikin web bukan cuma buat orang-orang dengan kondisi ideal, tapi juga buat semua orang, tanpa kecuali. Jadi, kalau kamu peduli sama pengalaman pengguna dan pengen websitemu bisa dinikmati siapa pun, tambahin deh fitur “Skip to Content” ini. Simple but powerful. 💪