Tips All

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. 💪

Daftar Isi PendahuluanBenefit Setelah BacaDummy CodeSolusiApa itu object-topPerbaiki kodenya kayak gini:Selain object-topPenutup Pendahuluan Pernah nggak sih kamu ngalamin, udah pasang gambar di website pakai object-cover, tapi kok malah bagian penting dari gambarnya nggak keliatan? Kayak potongan rambut keren, atau ekspresi wajah, malah ketutupan? Tenang, kamu nggak sendirian kok. Di bagian ini, kita bakal bahas kenapa itu bisa terjadi dan gimana cara paling gampang buat ngatasinnya. Benefit Setelah Baca Setelah baca ini, kamu bakal: ✅ Paham kenapa gambar bisa "aneh" pas ditampilin di card.✅ Tau fungsi object-top dan kenapa itu bisa nyelametin tampilan gambarmu.✅ Dapet contoh kode yang siap pakai buat project kamu. Dummy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> <title>Image</title> </head> <body> <section class="px-5"> <div class="rounded-[24px] border bg-white p-4 transition-all duration-300 hover:border-orange-500"> <div class="flex h-[101px] w-full shrink-0 items-center justify-center overflow-hidden rounded-2xl"> <img src="<https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>" alt="image" class="h-full w-full object-cover" /> </div> <div> <h4 class="font-semibold">Potong Rambut Terbaik Kami</h4> <strong class="font-semibold text-orange-500">Rp 18.560,00</strong> </div> </div> </section> </body> </html> Dan hasilnya bakal jadi begini: Mobile View Before Object Top Solusi Nah, jadi masalahnya ada di bagian object-cover. Memang sih, object-cover bikin gambar selalu nutupin wadahnya (container), tapi kadang bagian penting dari gambar misalnya wajah, potongan rambut, atau elemen fokus lainnya malah kepotong. Solusinya? Kasih tambahan object-top di tag <img> kamu. Jadi, selain gambar nutupin wadah, posisi fokusnya ditarik ke atas. Apa itu object-top object-top adalah salah satu utility dari Tailwind CSS (dan juga properti CSS bawaan) yang ngasih tahu browser: “Hei, kalau bagian gambar kelebihan, fokusin tampilin bagian atasnya ya.” Jadi, alih-alih potong bagian atas, dia potong bagian bawah. Perbaiki kodenya kayak gini: <img src="<https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>" alt="image" class="h-full w-full object-cover object-top" /> Dan hasilnya bakal jadi begini: Mobile View After Object Top Selain object-top Tailwind juga nyediain beberapa pilihan lain tergantung arah fokus gambarnya: object-center → ini default-nya, posisi tengah.object-bottom → fokus di bagian bawah gambar.object-left dan object-right → fokus ke kiri atau kanan.Bahkan ada juga kombinasi kayak object-left-top, object-right-bottom, dll. Jadi, kamu bisa sesuaikan fokus gambarnya biar tampilannya makin kece sesuai desain. Penutup Itu dia solusi simpel tapi powerful buat ngatur gambar yang pakai object-cover. Kadang, hal kecil kayak posisi gambar bisa bikin desain jadi lebih enak dilihat. Jadi, jangan ragu buat eksplor utility Tailwind yang lain juga ya siapa tahu nemu trik baru yang makin bikin website kamu ciamik.

Daftar Isi PendahuluanBenefit Setelah BacaMeta DescriptionTitleTips Nulis Title yang MantapFaviconTips Bikin Favicon yang KerenMeta ChartsetKenapa Ini Penting?Tag Viewport untuk ResponsivitasCara PakainyaPenjelasan SingkatKenapa Ini Wajib?Canonical TagCara pakainya:Kenapa harus pakai?Tips:Optimalkan Link dan ResourceApa sih maksudnya optimasi link dan resource?Cara gampangnya:Contoh simple:Kenapa ini penting?Open GraphContohnya kayak gimana?Cara pakai Open Graph gampang banget, taruh di <head>:Penjelasan singkatnya:Kenapa wajib?Twitter CardCara pakai Twitter CardPenjelasan singkat:Kenapa penting?Tag Language di HTMLCara pakainya gampang banget, tinggal pasang di tag <html> kamu:Kenapa ini penting?Hindari Penggunaan JavaScript BerlebihKenapa harus hati-hati sama JavaScript?Tips supaya JavaScript kamu tetap ngebut:Contoh loading JavaScript yang baik:Penutup Pendahuluan Kalau kamu sering ngoding HTML, pasti nggak asing sama yang namanya <head>. Nah, walaupun bagian ini nggak nongol langsung di tampilan web, tapi jangan salah, ini salah satu bagian yang paling penting buat bikin website kamu dilirik Google sama teman-temannya. Benefit Setelah Baca ✅ Nggak bingung lagi fungsi tag-tag di <head>.✅ Bisa bikin website yang nggak cuma keren tapi juga SEO-ready.✅ Bikin Google makin ngunggulin sama website kamu. Meta Description Ini kayak caption buat halaman web kamu. Kalau kamu bisa bikin caption IG, kamu pasti bisa bikin meta description. Intinya: singkat, padat, jelas, dan bikin orang pengen ngeklik. <meta name="description" content="BuildWithAngga adalah platform belajar coding terbaik di Indonesia yang di ajarkan berdasarkan kasus nyata."> Title Tag <title> adalah bagian dari HTML yang wajib ada di setiap halaman web. Letaknya di dalam <head>, dan fungsinya penting banget buat muncul di tab browser dan muncul di hasil pencarian Google. Title ini penting karena Google baca dan nilai isi <title> buat nentuin topik halaman kamu. Judul yang jelas dan nyantol bisa naikin CTR (Click-Through Rate) alias bikin orang lebih tertarik ngeklik link kamu di Google. Judul yang asal-asalan bisa bikin Google mikir halaman kamu gak relevan Tips Nulis Title yang Mantap Masukin Kata Kunci Utama Misalnya kamu nulis artikel tentang "Cara Membangun Website Belajar", ya tulis aja kata itu di judul. <title>Cara Membangun Website Belajar Buat Paling Pemula</title> Bikin Menarik & Jelas Judul itu ibarat etalase toko. Kalau membosankan, ya orang males masuk. Jadi tambahin daya tarik: <title>Cara Membangun Website Belajar Buat Paling Pemula</title> Pada bagian “Buat Paling Pemula” bikin orang langsung berpikir pembelajaran yang akan mereka dapatkan pasti tidak sangat sulit jadi bikin mereka pengen baca. Jangan Kepanjangan Idealnya antara 50–60 karakter. Kalau terlalu panjang, Google bisa motong dan hasilnya jadi kurang bagus. Favicon Favicon (singkatan dari favorite icon) adalah ikon kecil yang muncul di: Tab browserDaftar bookmarkHistory browserSidebar tab di mobile browserBahkan kadang muncul juga di hasil pencarian Google (kalau beruntung) Contohnya? Kalau kamu buka YouTube, pasti lihat logo merah kecil di tab browser. Nah itu favicon-nya YouTube. Keliatannya remeh, tapi ini bikin web kamu keliatan lebih “niat”. Contoh buatnya kayak gini : <link rel="icon" href="/favicon.ico" type="image/x-icon"> Tips Bikin Favicon yang Keren Ukurannya kecil, biasanya 16x16 px atau 32x32 pxSimpel, jelas, dan mudah dikenaliBoleh pakai logo, inisial, atau simbol khas dari brand kamuGunakan generator favicon kalau butuh banyak versi (favicon untuk dark mode, Android, iOS, dll) Meta Chartset Ini buat ngatur biar karakter kayak huruf é atau emoji bisa tampil dengan benar. <meta charset="UTF-8"> Kenapa Ini Penting? Supaya karakter tampil dengan benar, contohnya: <p>Saya suka belajar di BWA dan membaca artikel-nya!</p> Tanpa UTF-8, bisa-bisa emoji dan huruf artikel-nya jadi simbol aneh karena encoding-nya salah. Tag Viewport untuk Responsivitas Sekarang coba buka website yang nggak responsive di HP. Pasti tampilannya kayak nge-zoom out total, kecil semua, dan harus di-pinch buat baca isinya. Nah, itu karena web-nya belum pakai tag viewport. Tag ini penting banget supaya tampilan web kamu bisa menyesuaikan diri dengan ukuran layar pengunjung mau itu HP, tablet, laptop, atau monitor ultrawide. Tanpa tag ini, browser bakal nganggep lebar layar web kamu tuh tetap kayak layar desktop (sekitar 980px), padahal sekarang banyak user buka dari HP. Cara Pakainya Masukin ini ke dalam <head> HTML kamu: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Penjelasan Singkat width=device-width: Maksudnya, lebar tampilan website bakal ngikutin lebar layar perangkat yang dipakai.initial-scale=1.0: Ngatur tingkat zoom awal jadi 1 (alias 100%), biar tampilannya langsung pas. Kenapa Ini Wajib? Bikin tampilan web kamu mobile-friendly tanpa harus ngoding dua kali.Gak perlu zoom-zoom kalau buka dari HP.Desain kamu tetap rapi dan terbaca di semua ukuran layar.Google juga lebih suka web yang responsive (poin plus buat SEO!). Fun Fact: Google ngasih ranking lebih bagus ke website yang mobile-friendly, jadi jangan sampai ketinggalan pakai tag ini, ya! Canonical Tag Nah, pernah nggak sih kamu punya dua URL yang isinya sama aja? Contohnya nih, kamu punya: https://contoh.com/produk/sepatuhttps://contoh.com/produk/sepatu?ref=instagram Padahal isinya sama, cuma URL-nya doang yang beda. Nah, Google tuh bisa bingung, nih, kira-kira mana yang asli? Kalau bingung, bisa-bisa website kamu malah kalah saing di hasil pencarian. Makanya, ada yang namanya Canonical Tag. Fungsinya kayak bilang ke Google, “Eh, yang ini ya versi asli dan yang harus diutamain!” Cara pakainya: Pasang ini di <head> halaman kamu yang duplikat: <link rel="canonical" href="<https://contoh.com/produk/sepatu>"> Jadi Google ngerti, yang ini yang bener-bener kamu pengen muncul di pencarian. Kenapa harus pakai? Biar Google gak bingung dan gak kasih nilai jelek karena ada konten duplikat.Biar SEO kamu tetep joss dan gak ‘terpecah’ karena banyak URL.Biar website kamu kelihatan lebih profesional di mata Google. Tips: Selalu tulis URL lengkap, jangan setengah-setengah.Jangan dipakai buat halaman yang isinya beda ya, cuma buat yang mirip banget aja.Ini penting banget buat kamu yang suka upload produk sama konten yang mirip-mirip. Optimalkan Link dan Resource Nah, ini juga bagian penting banget supaya website kamu nggak cuma tampil keren, tapi juga cepat banget loadingnya. Kamu pasti nggak mau kan, pengunjung nunggu lama cuma buat liat gambar atau CSS yang berat? Apa sih maksudnya optimasi link dan resource? Intinya, kamu harus pinter-pinter ngatur gimana file-file kayak gambar, CSS, JavaScript, sama font dimuat di halaman web kamu. Kalau asal-asalan, bisa bikin website kamu lemot, dan itu bikin pengunjung bete dan cabut! Cara gampangnya: Gunakan file versi kecil (minified) buat CSS dan JS. Jadi, file-nya diperkecil tanpa mengurangi fungsi supaya loading lebih cepat.Pakai lazy loading buat gambar dan video, supaya file multimedia cuma dimuat saat pengunjung scroll ke situ.Gunakan format gambar modern kayak WebP yang ukurannya kecil tapi kualitas tetap oke.Manfaatkan caching browser supaya file yang sama nggak terus-terusan didownload ulang.Gunakan CDN (Content Delivery Network) supaya file kamu disimpan di server yang deket sama pengunjung. Contoh simple: <!-- Minified CSS --> <link rel="stylesheet" href="style.min.css"> <!-- Lazy loading gambar --> <img src="foto.webp" loading="lazy" alt="Foto BuildWithAngga"> <!-- Script di bagian bawah biar nggak blocking --> <script src="script.min.js" defer></script> Kenapa ini penting? Google suka banget sama website yang cepet loading-nya. Selain itu, pengunjung juga pasti senang karena gak perlu nunggu lama buat liat konten kamu. Open Graph Pernah nggak sih kamu share link website di sosmed kayak Facebook, Twitter, atau WhatsApp, terus yang muncul cuma link doang? Atau malah gambarnya nggak sesuai sama judulnya? Nah, itu karena kamu belum pasang yang namanya Open Graph. Ini semacam “kartu identitas” buat halaman web kamu supaya pas dibagiin ke sosmed, tampilannya cakep dan informatif. Contohnya kayak gimana? Pas kamu pasang Open Graph, kalau kamu share link, yang muncul bisa kaya gini: Gambar kerenJudul yang menarikDeskripsi singkat yang jelas Jadi yang liat langsung tergoda buat ngeklik. Cara pakai Open Graph gampang banget, taruh di <head>: <meta property="og:title" content="BuildWithAngga - Belajar Coding dari Kasus Nyata"> <meta property="og:description" content="Platform belajar coding terbaik yang bikin kamu siap kerja!"> <meta property="og:image" content="<https://buildwithangga.com/assets/og-image.jpg>"> <meta property="og:url" content="<https://buildwithangga.com>"> <meta property="og:type" content="website"> Penjelasan singkatnya: og:title = Judul yang tampil di preview.og:description = Deskripsi singkat.og:image = Gambar yang muncul di preview.og:url = URL halaman.og:type = Jenis konten, biasanya website atau article. Kenapa wajib? Biar link kamu di sosmed makin menarik dan profesional.Meningkatkan klik dari sosmed karena tampilannya kece.Biar branding kamu makin kuat. Twitter Card Kalau kamu aktif di Twitter dan sering share link, kamu pasti pengen tampilannya kece juga, kan? Nah, Twitter Card ini fungsinya mirip sama Open Graph, tapi khusus buat Twitter. Dengan Twitter Card, saat kamu share link, bakal muncul preview yang cakep: ada gambar, judul, dan deskripsi singkat yang bikin orang pengen klik. Cara pakai Twitter Card Taruh ini di <head> halaman kamu: <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="BuildWithAngga - Belajar Coding dari Kasus Nyata"> <meta name="twitter:description" content="Platform belajar coding terbaik yang bikin kamu siap kerja!"> <meta name="twitter:image" content="<https://buildwithangga.com/assets/twitter-image.jpg>"> <meta name="twitter:site" content="@buildwithangga"> Penjelasan singkat: twitter:card: Jenis kartu yang mau dipakai. summary_large_image biasanya paling cakep karena ada gambar besar.twitter:title: Judul yang muncul di kartu.twitter:description: Deskripsi singkatnya.twitter:image: Link gambar yang mau ditampilkan.twitter:site: Username Twitter kamu (optional tapi bagus buat branding). Kenapa penting? Biar tweet kamu makin menarik perhatian.Bisa ningkatin klik dan followers juga karena tampilannya lebih kece.Bikin branding kamu makin dikenal. Tag Language di HTML Pernah nggak sih kamu buka halaman web terus teksnya aneh-aneh, kayak kebalik, atau malah hurufnya nggak muncul dengan benar? Salah satu penyebabnya bisa karena kamu nggak set bahasa di HTML kamu. Nah, tag language ini berguna buat ngasih tau browser dan mesin pencari, ini website kamu pakai bahasa apa. Jadi, mereka bisa nampilinnya dengan bener, dan mesin pencari juga ngerti target audiens kamu. Cara pakainya gampang banget, tinggal pasang di tag <html> kamu: <html lang="id"> Kalau website kamu pakai bahasa Indonesia, pakai id. Kalau bahasa Inggris, pakai en. Kenapa ini penting? Biar browser ngerti bahasa yang dipakai, supaya teks bisa ditampilkan dengan tepat.Mesin pencari bisa lebih mudah memahami target pengunjung kamu.Membantu tools aksesibilitas buat pengguna dengan kebutuhan khusus. Hindari Penggunaan JavaScript Berlebih Kadang, kita suka semangat banget pas bikin website, pengen segala fitur serba keren dan interaktif pake JavaScript. Tapi, jangan sampai kebanyakan JavaScript malah bikin website kamu jadi lemot dan berat, ya! Kenapa harus hati-hati sama JavaScript? Karena kalau file JS-nya besar atau kebanyakan, loading website jadi lama, pengunjung jadi bete, dan Google juga bisa kasih nilai kurang bagus buat SEO kamu. Tips supaya JavaScript kamu tetap ngebut: Gunakan hanya yang perlu saja. Jangan asal comot library atau script yang gak dipakai.Minify dan compress file JavaScript biar ukurannya kecil.Load script secara asynchronous pakai async atau defer supaya gak blocking proses loading halaman.Pakai lazy loading buat fitur yang gak langsung dipakai di awal.Evaluasi terus performa website kamu pake tools kayak Google PageSpeed Insights atau Lighthouse. Contoh loading JavaScript yang baik: <script src="script.min.js" defer></script> Dengan defer, browser bakal tetap ngebaca HTML dulu, baru eksekusi JavaScript setelahnya. Jadi, halaman bisa tampil lebih cepat. Penutup Nah, itu dia teman-teman, beberapa tag penting di <head> yang wajib kamu tahu biar website kamu nggak cuma cakep dilihat, tapi juga ramah sama mesin pencari dan pengunjung. Ingat, walaupun tag-tag ini kelihatannya kecil dan tersembunyi, pengaruhnya besar banget buat performa dan SEO web kamu. Jadi, jangan cuma asal bikin website, tapi pastiin juga kamu ngerti dan manfaatin tag-tag ini dengan baik. Dengan begitu, website kamu bukan cuma keren, tapi juga makin gampang ditemukan orang di internet. Selamat ngoding dan terus semangat bikin website kece.

Daftar Isi PendahuluanBenefit Setelah Membaca Artikel IniPersiapan Proyek DasarBuat Folder ProyekMembuat File HTML BaruMembuat File CSS BaruMenautkan File CSS ke HTMLMenjalankan Proyek Menggunakan Live ServerApa Itu CSS dan Cara Menghubungkannya dengan HTMLSelektor Dasar CSSProperti WarnaFont dan TeksBox ModelWidth, Height, Max/MinDisplayPositionFlexbox DasarGrid Layout DasarBorder dan Border-RadiusShadow (Bayangan)Pseudo-Class dan Pseudo-ElementZ-index dan LayeringOverflow dan Text OverflowResponsive Design Dasar (Media Queries)Unit CSSTransition dan Animation DasarBackground PropertyCursor, Opacity, dan VisibilityCSS Variables (Custom Properties)Inheritance dan SpecificityBest Practice Penulisan CSSTools & Resources untuk Belajar CSSKesalahan Umum Pemula dalam CSSPenutup Pendahuluan Kalau HTML itu ibarat kerangka atau tulang dari sebuah website, maka CSS (Cascading Style Sheets) adalah kulit dan bajunya. CSS yang bikin website kelihatan keren, rapi, dan nyaman dilihat. Nah, biar kamu nggak bingung harus mulai dari mana, di sini aku rangkum 25 topik dasar CSS yang wajib kamu pahami dulu. Yuk, kita bahas satu per satu, lengkap dengan penjelasan dan contohnya! Benefit Setelah Membaca Artikel Ini Nah, dengan kamu ngerti dasar-dasarnya, kamu bakal lebih mudah: Ngatur tampilan halaman web mulai dari warna, ukuran font, sampai posisi elemen.Bikin desain yang responsif, jadi website kamu tetap oke dilihat dari HP maupun laptop.Nerapin layout modern pakai Flexbox dan Grid tanpa kebingungan.Ngerti cara kerja CSS, jadi kamu bisa ngedit atau nge-debug kode dengan percaya diri.Gabung ke proyek nyata tanpa minder karena udah paham istilah dan konsep dasarnya. Intinya, dengan menguasai dasar CSS, kamu udah selangkah lebih dekat buat jadi frontend developer yang jago dan siap ngebangun tampilan website yang keren dan profesional. Persiapan Proyek Dasar Sebelum masuk ke materi HTML dan CSS, 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> <head> <title>Judul Halaman</title> </head> <body> <h1>Halo, BuildWithAngga!</h1> <p>Ini adalah paragraf pertama.</p> </body> </html> Membuat File CSS Baru Masih di dalam folder yang sama, buat file baru dengan nama styles.css.File ini akan berisi aturan styling CSS untuk memperindah halaman webmu. Menautkan File CSS ke HTML Buka index.html dan di dalam tag <head>, tambahkan kode berikut agar file CSS terhubung dengan HTML: <link rel="stylesheet" href="styles.css" /> Maka kodenya akan seperti ini: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>Halo, BuildWithAngga!</h1> <p>Ini adalah paragraf pertama.</p> </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. Apa Itu CSS dan Cara Menghubungkannya dengan HTML CSS digunakan untuk mengatur tampilan elemen HTML. Ada 3 cara umum buat menghubungkan CSS ke HTML: Inline — Langsung di elemen HTML <p style="color: red;">Teks ini menggunakan inline CSS</p> Internal — CSS ditulis di dalam <style> di tag <head>. <head> <style> p.blue { color: blue; } </style> </head> External (Paling direkomendasikan) — CSS ditulis di file terpisah (styles.css), lalu dipanggil pakai <link>. <head> <link rel="stylesheet" href="styles.css"> </head> /* styles.css */ .yellow { background-color: yellow; width: fit-content; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .blue { color: blue; } </style> </head> <body> <p style="color: red">Teks ini menggunakan inline CSS</p> <p class="blue">Teks ini menggunakan internal CSS</p> <p class="yellow">Teks ini menggunakan external CSS</p> </body> </html> Hasilnya: Local Result: Menghubungkan CSS Selektor Dasar CSS Selektor ini berfungsi untuk “memilih” elemen mana yang mau di-style. /* Tag */ p { color: black; } /* Class */ .title { font-weight: bold; } /* ID */ #main { background-color: #f0f0f0; } Tag: langsung nama elemen HTML.Class: diawali dengan titik . dan bisa dipakai berulang.ID: diawali # dan idealnya unik (satu halaman, satu ID). Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> /* Tag */ p { color: red; } /* Class */ .title { font-weight: bold; } /* ID */ #main { font-style: italic; } </style> </head> <body> <p>Teks ini menggunakan style default</p> <p class="title">Teks ini menggunakan style title</p> <p id="main">Teks ini menggunakan style id</p> </body> </html> Hasilnya: Local Result: Selektor Dasar CSS Properti Warna Atur warna teks dan background h1 { color: #ff6600; background-color: #f9f9f9; } Kamu bisa pakai: Nama warna (red, blue, dsb.)HEX (#ff0000)RGB (rgb(255, 0, 0))HSL (hsl(0, 100%, 50%)) Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> h1 { color: #ff6600; background-color: #f9f9f9; } h2 { color: whitesmoke; background-color: goldenrod; } </style> </head> <body> <h1>Ini heading 1</h1> <h2>Ini heading 2</h2> </body> </html> Hasilnya: Local Result: Properti Warna Font dan Teks Ngatur tampilan huruf biar enak dilihat. CSS bisa dipakai buat ngatur tampilan teks biar lebih enak dilihat. Beberapa properti yang sering dipakai: font-family: jenis huruf (Arial, sans-serif, dll)font-size: ukuran huruffont-weight: ketebalan hurufline-height: tinggi baristext-align: posisi teks (kiri, tengah, kanan) p { font-family: 'Arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; text-align: justify; } 📌 Tip: Gunakan unit rem atau em buat ukuran supaya responsif. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> p.custom { font-family: "Arial", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; text-align: justify; } </style> </head> <body> <p>Teks dengan style default</p> <p class="custom">Teks dengan style CSS</p> </body> </html> Hasilnya: Local Result: Font dan Teks Box Model Setiap elemen HTML di halaman punya "kotak tak terlihat" yang disebut Box Model. Ini penting banget buat atur layout. Content: isi dari elemen, seperti teks atau gambar.Padding: jarak antara isi elemen dan garis pinggir (border).Border: garis pinggir dari elemen.Margin: jarak antara elemen dengan elemen lain. Ilustrasi urutan: margin → border → padding → content .kotak { width: 200px; padding: 20px; border: 2px solid black; margin: 30px; background-color: lightblue; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .kotak { width: 200px; padding: 20px; border: 2px solid black; margin: 30px; background-color: lightblue; } </style> </head> <body> <div class="kotak">Ini contoh box model</div> </body> </html> Hasilnya: Local Result: Box Model Width, Height, Max/Min Kita bisa atur ukuran elemen pakai properti: width, height: lebar dan tinggi elemen.max-width, min-width: batas maksimal dan minimal lebar.max-height, min-height: sama, tapi untuk tinggi. .gambar { width: 100%; max-width: 500px; height: auto; } 📌 max-width dan min-height penting buat desain responsif. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .gambar { width: 100%; max-width: 500px; height: auto; } </style> </head> <body> <img src="./assets/logo_bwa_text.svg" alt="Gambar" class="gambar" /> </body> </html> Hasilnya: Local Result Display Nentuin bagaimana elemen ditampilkan: Properti display ngatur bagaimana elemen ditampilkan. block: elemen menempati satu baris penuh (contoh: <div>, <p>).inline: elemen menempel di baris yang sama (contoh: <span>, <a>).inline-block: seperti inline tapi bisa diatur width dan height.none: menyembunyikan elemen. .inline { display: inline; background-color: yellow; } .block { display: block; background-color: lightgreen; } .hilang { display: none; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .inline { display: inline; background-color: yellow; } .block { display: block; background-color: lightgreen; } .hilang { display: none; } </style> </head> <body> <span class="inline">Ini inline</span> <div class="block">Ini block</div> <p class="hilang">Teks ini tidak terlihat</p> </body> </html> Hasilnya: Local Result: Display Position Properti position digunakan untuk mengatur posisi elemen di halaman: static: default, ikut alur normal dokumen.relative: geser posisi relatif terhadap posisi awalnya.absolute: posisi relatif terhadap elemen induk terdekat yang memiliki position: relative.fixed: nempel di layar, nggak geser waktu di-scroll.sticky: nempel di posisi tertentu saat discroll. .relative-box { position: relative; top: 20px; left: 40px; background: coral; padding: 10px; } .fixed-box { position: fixed; top: 10px; right: 10px; background: black; color: white; padding: 10px; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .relative-box { position: relative; top: 20px; left: 40px; background: coral; padding: 10px; } .fixed-box { position: fixed; top: 10px; right: 10px; background: black; color: white; padding: 10px; } </style> </head> <body> <div class="relative-box">Ini relative</div> <div class="fixed-box">Ini fixed</div> </body> </html> Hasilnya: Local Result: Position Flexbox Dasar Flexbox digunakan untuk menyusun elemen secara fleksibel dalam satu baris atau kolom. Kapan digunakan? ➡️ Gunakan Flexbox kalau kamu ingin menyusun elemen satu arah (horizontal atau vertical) dan butuh perataan yang fleksibel seperti center, space-between, wrap, dll. Properti penting: display: flexjustify-content: mengatur posisi horizontalalign-items: mengatur posisi vertical .container { display: flex; justify-content: space-between; align-items: center; background: #f0f0f0; padding: 20px; } .item { background: lightblue; padding: 10px 20px; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .container { display: flex; justify-content: space-between; align-items: center; background: #f0f0f0; padding: 20px; } .item { background: lightblue; padding: 10px 20px; } </style> </head> <body> <div class="container"> <div class="item">Kiri</div> <div class="item">Tengah</div> <div class="item">Kanan</div> </div> </body> </html> Hasilnya: Local Result: Flexbox Dasar Grid Layout Dasar CSS Grid digunakan untuk menyusun layout dua arah (baris dan kolom) — cocok untuk membuat layout kompleks seperti galeri, dashboard, dll. Kapan digunakan? ➡️ Gunakan Grid jika kamu butuh kontrol penuh di baris dan kolom, seperti menyusun elemen dalam bentuk tabel, galeri, atau layout kompleks. Properti penting: display: gridgrid-template-columnsgrid-template-rowsgap .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid-item { background-color: #ddd; padding: 20px; text-align: center; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid-item { background-color: #ddd; padding: 20px; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> </body> </html> Hasilnya: Local Result: Grid Layout Dasar Border dan Border-Radius border digunakan untuk memberikan garis di sekeliling elemen, sedangkan border-radius bikin sudut elemen jadi melengkung. .kotak { border: 2px solid #333; padding: 20px; border-radius: 10px; background-color: #f5f5f5; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .kotak { border: 2px solid #333; padding: 20px; border-radius: 10px; background-color: #f5f5f5; } </style> </head> <body> <div class="kotak">Ini contoh border dengan radius</div> </body> </html> Hasilnya: Local Result: Border dan Border-Radius Shadow (Bayangan) Bayangan bisa menambah efek visual. Ada dua properti: box-shadow: untuk elemen kotaktext-shadow: untuk teks .bayangan { padding: 20px; background: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-shadow: 1px 1px 2px gray; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .bayangan { padding: 20px; background: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-shadow: 1px 1px 2px gray; } </style> </head> <body> <div class="bayangan">Teks ini punya bayangan!</div> </body> </html> Hasilnya: Local Result: Shadow Pseudo-Class dan Pseudo-Element Digunakan untuk menargetkan keadaan tertentu (:hover, :focus) atau bagian elemen (::before, ::after). a:hover { color: red; } .box::before { content: "👉 "; } .box::after { content: " ✅"; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> a:hover { color: red; } .box::before { content: "👉 "; } .box::after { content: " ✅"; } </style> </head> <body> <a href="#">Arahkan kursor ke link ini</a> <p class="box">Teks dengan before dan after</p> </body> </html> Hasilnya: Local Result: Pseudo-Class dan Pseudo-Element Z-index dan Layering Kalau elemen saling tumpuk (overlapping), z-index mengatur siapa yang muncul di atas. Catatan: Hanya berfungsi pada elemen dengan position selain static. .kotak1, .kotak2 { width: 100px; height: 100px; position: absolute; } .kotak1 { background: red; top: 30px; left: 30px; z-index: 1; } .kotak2 { background: blue; top: 50px; left: 50px; z-index: 2; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .kotak1, .kotak2 { width: 100px; height: 100px; position: absolute; } .kotak1 { background: red; top: 30px; left: 30px; z-index: 1; } .kotak2 { background: blue; top: 50px; left: 50px; z-index: 2; } </style> </head> <body> <div class="kotak1"></div> <div class="kotak2"></div> </body> </html> Hasilnya: Local Result: Z-Index dan Layering Overflow dan Text Overflow overflow: mengatur apa yang terjadi saat konten melebihi ukuran wadah.text-overflow: digunakan saat teks terlalu panjang.Biasanya dipakai bareng white-space: nowrap dan overflow: hidden. .teks { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000; padding: 10px; } Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> <style> .teks { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000; padding: 10px; } </style> </head> <body> <div class="teks"> Ini adalah teks yang sangat panjang dan tidak akan muat dalam satu baris. </div> </body> </html> Hasilnya: Local Result: Overflow dan Text Overflow Responsive Design Dasar (Media Queries) media queries memungkinkan tampilan berubah sesuai ukuran layar — penting untuk tampilan mobile. body { background: lightgreen; } @media (max-width: 600px) { body { background: lightcoral; } } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> body { background: lightgreen; } @media (max-width: 600px) { body { background: lightcoral; } } </style> </head> <body> <p>Resize ukuran layar untuk melihat perubahan background!</p> </body> </html> Hasilnya: Unit CSS Satuan dalam CSS bisa dibagi jadi dua: Absolut: pxRelatif: %, em, rem, vh, vw UnitPenjelasanpxPixel (tetap)%Persentase dari elemen indukemBerdasarkan ukuran font elemen indukremBerdasarkan ukuran font root (html)vh1% dari tinggi viewportvw1% dari lebar viewport .box { width: 50vw; height: 20vh; background: teal; color: white; padding: 1rem; } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> .box { width: 50vw; height: 20vh; background: teal; color: white; padding: 1rem; } </style> </head> <body> <div class="box">Kotak ini pakai unit responsive</div> </body> </html> Hasilnya: Local Result: Unit CSS Transition dan Animation Dasar transition = efek halus saat suatu properti berubah (misalnya warna).animation = animasi yang bisa diatur sendiri dengan keyframes. /* Transition */ .tombol { padding: 10px 20px; background: dodgerblue; color: white; border: none; transition: background 0.3s ease; } .tombol:hover { background: navy; } /* Animation */ @keyframes geser { from { transform: translateX(0); } to { transform: translateX(100px); } } .kotak { width: 100px; height: 100px; background: orange; animation: geser 2s infinite alternate; } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> /* Transition */ .tombol { padding: 10px 20px; background: dodgerblue; color: white; border: none; transition: background 0.3s ease; } .tombol:hover { background: navy; } /* Animation */ @keyframes geser { from { transform: translateX(0); } to { transform: translateX(100px); } } .kotak { width: 100px; height: 100px; background: orange; animation: geser 2s infinite alternate; } </style> </head> <body> <button class="tombol">Hover saya!</button> <div class="kotak"></div> </body> </html> Hasilnya: Local Result: Transition dan Animation Background Property Properti background bisa digunakan untuk menambahkan warna, gambar, atau bahkan gradasi ke elemen. .kotak { padding: 30px; background-image: linear-gradient(to right, #6dd5ed, #2193b0); color: white; } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> .kotak { padding: 30px; background-image: linear-gradient(to right, #6dd5ed, #2193b0); color: white; } </style> </head> <body> <div class="kotak">Ini adalah background gradient</div> </body> </html> Hasilnya: Local Result: Background Property Cursor, Opacity, dan Visibility cursor: mengubah bentuk kursor saat diarahkan ke elemen.opacity: mengatur transparansi elemen.visibility: menyembunyikan elemen, tapi tetap mengambil ruang. .kotak { cursor: pointer; opacity: 0.7; } .hilang { visibility: hidden; } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> .kotak { cursor: pointer; opacity: 0.7; } .hilang { visibility: hidden; } </style> </head> <body> <div class="kotak">Arahkan kursor ke saya</div> <p class="hilang">Saya tidak terlihat tapi masih ada di halaman</p> </body> </html> Hasilnya: Local Result: Cursor, Opacity, Visibility CSS Variables (Custom Properties) CSS sekarang bisa pakai "variabel" supaya styling lebih mudah dikelola dan diubah. :root { --warna-utama: teal; --padding-biasa: 20px; } .box { background: var(--warna-utama); color: white; padding: var(--padding-biasa); } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> :root { --warna-utama: teal; --padding-biasa: 20px; } .box { background: var(--warna-utama); color: white; padding: var(--padding-biasa); } </style> </head> <body> <div class="box">Variabel CSS bikin kode lebih rapi</div> </body> </html> Hasilnya: Local Result: CSS Variables Inheritance dan Specificity Inheritance: beberapa properti CSS (seperti color, font) akan diturunkan ke anak-anaknya.Specificity: urutan prioritas selector (ID > class > tag). /* Inheritance */ .parent { color: blue; } /* Specificity */ h1 { color: green; } .text { color: blue; } #utama { color: red; } Contoh: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> <style> /* Inheritance */ .parent { color: blue; } /* Specificity */ h1 { color: green; } .text { color: blue; } #utama { color: red; } </style> </head> <body> <div class="parent"> Ini teks parent <p>Ini anaknya, ikut warna biru</p> </div> <h1 id="utama" class="text">Warna ini akan merah karena ID menang</h1> </body> </html> Hasilnya: Local Result: Inheritance dan Specificity Best Practice Penulisan CSS Tips-tips penting: Gunakan class, hindari terlalu banyak styling dengan ID.Buat kode terstruktur dan modular.Hindari penggunaan !important kecuali benar-benar perlu.Gunakan CSS reset atau normalize untuk hasil konsisten di semua browser.Pisahkan CSS eksternal (style.css) daripada menulis langsung di HTML. Tools & Resources untuk Belajar CSS MDN Web Docs - CSSCSS-TricksCodePenCan I use untuk cek dukungan browserFlexbox Froggy & Grid Garden — game belajar CSS interaktif Kesalahan Umum Pemula dalam CSS Terlalu bergantung pada !importantTidak memahami box model → layout jadi kacauPakai banyak ID untuk styling (susah di-reuse)Tidak pakai konsistensi unit (px vs rem)Menulis CSS langsung di HTML (inline) berantakan Penutup Nah, itu dia pembahasan lengkap soal dasar-dasar CSS yang wajib banget kamu kuasai kalau pengen jadi frontend developer. Mulai dari hal paling dasar kayak cara hubungin CSS ke HTML, sampai yang agak teknikal kayak Flexbox, Grid, dan animasi. Belajar CSS itu memang nggak instan, tapi kalau kamu rajin latihan dan eksperimen, pelan-pelan pasti paham kok. Coba aja otak-atik sendiri, bikin komponen kecil, atau tiru desain yang kamu suka. Semakin sering praktik, semakin cepat kamu terbiasa. Kalau kamu stuck atau bingung, jangan ragu buat buka dokumentasi kayak MDN Web Docs, main ke CodePen, atau cari inspirasi di CSS-Tricks. Terakhir, ingat: CSS bukan cuma soal bikin tampilan bagus, tapi juga soal bikin pengalaman pengguna yang nyaman dan konsisten di berbagai perangkat. Jadi, semangat belajar dan jangan takut eksplorasi! Selamat ngoding dan semoga makin jago styling halaman web! 🚀

Daftar Isi PendahuluanBenefit Setelah Membaca Artikel IniPersyaratanPersiapan Proyek DasarBuat Folder ProyekMembuat File HTML BaruMembuat File CSS BaruMenautkan File CSS ke HTMLMenjalankan Proyek Menggunakan Live ServerDasar-Dasar HTMLStruktur Dasar HTMLHeading (Judul)Paragraf dan TeksGambarTautan atau LinkDaftar (List)TabelFormulir HTML SederhanaKomentar di HTMLElemen Semantic HTMLMedia (Audio & Video)Elemen Inline vs BlockAtribut HTML UmumElemen Inline vs BlockCharacter EntitiesElemen <div> dan <span>Aksesibilitas DasarMeta TagElemen <iframe>Elemen <script> dan <link>Elemen <style> dalam HTMLJavaScript dalam HTMLBest Practice Penulisan HTMLValidasi HTMLTools & ResourcesKesalahan Umum PemulaPenutup Pendahuluan Kalau kamu baru mulai belajar jadi frontend developer, HTML adalah hal pertama yang wajib banget kamu kuasai. HTML (HyperText Markup Language) ini ibarat kerangka bangunan dari sebuah website. Tanpa HTML, halaman web nggak bakal punya struktur—nggak ada judul, paragraf, gambar, atau tombol. Meski kelihatannya simpel, HTML punya banyak elemen penting yang perlu kamu pahami satu per satu. Mulai dari cara bikin heading, link, sampai form buat input data. Semua itu jadi dasar utama sebelum kamu lanjut ke styling dengan CSS atau interaktivitas pakai JavaScript. Nah, di artikel ini kita bakal kupas tuntas dasar-dasar HTML yang paling sering dipakai dalam dunia frontend. Cocok banget buat kamu yang baru mulai belajar atau pengen nge-review lagi biar makin paham. Benefit Setelah Membaca Artikel Ini Setelah kamu baca artikel ini sampai tuntas, kamu akan: Lebih paham struktur dasar HTML dan fungsinya.Bisa menulis HTML dengan benar dan rapi.Siap lanjut belajar CSS atau JavaScript tanpa bingung.Lebih percaya diri bikin halaman web sederhana dari nol. Siap? Yuk langsung mulai belajar HTML dengan cara yang santai tapi tetap ngena! 🚀 Persyaratan Sebelum mulai belajar HTML dan CSS, pastikan kamu sudah menyiapkan hal-hal berikut: Editor Teks – Gunakan Visual Studio Code (VS Code) karena ringan dan banyak fitur pendukung.Browser Modern – Seperti Google Chrome, Firefox, atau Edge untuk melihat hasil kode secara langsung.Pengetahuan Dasar Komputer – Misalnya membuat folder, menyimpan file, dan menyalin kode.Semangat dan Konsistensi – Karena belajar coding perlu ketekunan agar cepat mahir. Persiapan Proyek Dasar Sebelum masuk ke materi HTML dan CSS, 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> <head> <title>Judul Halaman</title> </head> <body> <h1>Halo, BuildWithAngga!</h1> <p>Ini adalah paragraf pertama.</p> </body> </html> Membuat File CSS Baru Masih di dalam folder yang sama, buat file baru dengan nama styles.css.File ini akan berisi aturan styling CSS untuk memperindah halaman webmu. Menautkan File CSS ke HTML Buka index.html dan di dalam tag <head>, tambahkan kode berikut agar file CSS terhubung dengan HTML: <link rel="stylesheet" href="styles.css" /> Maka kodenya akan seperti ini: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>Halo, BuildWithAngga!</h1> <p>Ini adalah paragraf pertama.</p> </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. Dasar-Dasar HTML HTML (HyperText Markup Language) itu bahasa yang dipakai buat nyusun struktur halaman web. Buat kamu yang pengen jadi frontend developer, ngerti dasar-dasar HTML itu penting banget biar bisa bikin halaman web yang rapi, gampang dipahami, dan gampang juga dirawat ke depannya. Nah, di bawah ini ada beberapa elemen HTML dasar yang wajib banget kamu pelajari di tahap awal: Struktur Dasar HTML Setiap dokumen HTML dimulai dengan deklarasi <!DOCTYPE html> diikuti dengan elemen dasar seperti <html>, <head>, dan <body>. Struktur ini menjadi fondasi dari setiap halaman web. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Judul Halaman</title> </head> <body> <h1>Halo, BuildWithAngga!</h1> <p>Ini adalah paragraf pertama.</p> </body> </html> Penjelasan: <!DOCTYPE html>: Mendefinisikan bahwa ini adalah dokumen HTML5.<html>: Elemen utama yang membungkus seluruh isi halaman.<head>: Berisi metadata, seperti judul halaman, karakter encoding, dan viewport.<body>: Berisi konten yang ditampilkan di browser. Maka hasilnya akan seperti berikut: Local Result: Struktur Dasar Heading (Judul) <h1>Judul Utama</h1> <h2>Sub Judul</h2> <h3>Sub-sub Judul</h3> Penjelasan: Heading digunakan untuk memberi struktur pada dokumen. <h1> adalah yang paling penting, sedangkan <h6> paling rendah. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>Belajar HTML dan CSS di BuildWithAngga!</h1> <h2>Struktur Dasar HTLM</h2> <h3>Membuat File index.html</h3> </body> </html> Hasilnya: Local Result: Heading Tips SEO: Gunakan hanya satu <h1> per halaman, karena ini penting untuk optimasi mesin pencari. Paragraf dan Teks Gunakan tag <p> untuk membuat paragraf teks. <p><strong>Ini penting</strong> dan <em>ini miring</em>.</p> <p>Baris pertama<br>Baris kedua</p> <p>Kata ini <span style="color: red;">diwarnai</span>.</p> <p><mark>Disorot</mark> dengan tag mark.</p> Digunakan untuk memperkaya konten: <strong>: Penekanan penting (tebal).<em>: Penekanan (miring).<br>: Ganti baris.<span>: Kontainer inline.<mark>: Menyorot teks. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p><strong>Ini penting</strong> dan <em>ini miring</em>.</p> <p>Baris pertama<br>Baris kedua</p> <p>Kata ini <span style="color: red;">diwarnai</span>.</p> <p><mark>Disorot</mark> dengan tag mark.</p> </body> </html> Hasilnya: Local Result: Paragraf dan Teks Gambar Menampilkan gambar dengan tag <img> Buat folder dengan nama assets dan simpan gambar di folder tersebut Struktur Proyek Maka tag <img> akan seperti berikut: <img src="./assets/logo_bwa_text.svg" alt="Logo BuildWithAngga" width="200" height="auto" /> Penjelasan: src: Lokasi file gambar.alt: Teks alternatif yang ditampilkan jika gambar gagal dimuat (dan penting untuk SEO & aksesibilitas).width & height: Mengatur ukuran gambar. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <img src="./assets/logo_bwa_text.svg" alt="Logo BuildWithAngga" width="200" height="auto" /> </body> </html> Hasilnya: Local Result: Tag <img> Tautan atau Link Gunakan tag <a> untuk membuat hyperlink: <a href="<https://buildwithangga.com>" target="_blank">Kunjungi BuildWithAngga</a> Penjelasan: href: URL tujuan.target="_blank": Membuka link di tab baru (jaga pengalaman pengguna). Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <a href="<https://buildwithangga.com>" target="_blank">Kunjungi BuildWithAngga</a> </body> </html> Hasilnya: Local Result: Tautan atau Link Daftar (List) HTML memiliki dua jenis daftar: Daftar tidak berurutan (bullet points): <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> Daftar berurutan (angka): <ol> <li>Install editor</li> <li>Tulis HTML</li> <li>Lihat hasil di browser</li> </ol> Gunakan <li> (list item) di dalam <ul> atau <ol>. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Daftar tidak berurutan (bullet points):</p> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>Daftar berurutan (angka):</p> <ol> <li>Install editor</li> <li>Tulis HTML</li> <li>Lihat hasil di browser</li> </ol> </body> </html> Hasilnya: Local Result: Daftar (List) Tabel Menampilkan data tabular. <table> <tr> <th>Nama</th> <th>Umur</th> </tr> <tr> <td>Ani</td> <td>22</td> </tr> </table> Penjelasan: <table>: Membuat tabel.<tr>: Table row (baris).<td>: Table data (sel data).<th>: Table heading (judul kolom).colspan, rowspan: Menggabungkan kolom atau baris. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <table> <tr> <th>Nama</th> <th>Umur</th> </tr> <tr> <td>Ani</td> <td>22</td> </tr> </table> </body> </html> Hasilnya: Local Result: Tabel Formulir HTML Sederhana Digunakan untuk mengumpulkan data dari pengguna. <form> <label for="nama">Nama:</label> <input type="text" id="nama" name="nama"> <label for="pesan">Pesan:</label> <textarea id="pesan" name="pesan"></textarea> <button type="submit">Kirim</button> </form> Penjelasan: <label>: Label untuk input.<input>: Bidang input (bisa text, email, password, dll.).<button>: Tombol kirim. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <form> <label for="nama">Nama:</label> <input type="text" id="nama" name="nama" /> <label for="pesan">Pesan:</label> <textarea id="pesan" name="pesan"></textarea> <button type="submit">Kirim</button> </form> </body> </html> Hasilnya: Local Result: Formulir Komentar di HTML Komentar digunakan untuk memberi catatan dalam kode, yang tidak akan ditampilkan di browser. <!-- Ini adalah komentar, tidak akan tampil di browser --> Komentar berguna saat bekerja dalam tim atau saat menulis catatan pribadi. Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <!-- Ini adalah komentar, tidak akan tampil di browser --> <p>Ini akan tampil di browser</p> </body> </html> Hasilnya: Local Result: Komentar di HTML Element Semantic HTML Elemen semantik membuat kode lebih mudah dibaca dan dimengerti, baik oleh developer maupun mesin pencari. <header> <h1>Judul Website</h1> </header> <nav> <ul> <li><a href="/">Beranda</a></li> <li><a href="/tentang">Tentang</a></li> </ul> </nav> <main> <article> <h2>Artikel Terbaru</h2> <p>Konten artikel...</p> </article> </main> <footer> <p>© 2025 Website Kamu</p> </footer> Elemen semantik penting untuk: SEO (karena mesin pencari lebih memahami struktur konten).Aksesibilitas (pengguna pembaca layar bisa menjelajah lebih mudah). Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <header> <h1>Judul Website</h1> </header> <nav> <ul> <li><a href="/">Beranda</a></li> <li><a href="/tentang">Tentang</a></li> </ul> </nav> <main> <article> <h2>Artikel Terbaru</h2> <p>Konten artikel...</p> </article> </main> <footer> <p>© 2025 Website Kamu</p> </footer> </body> </html> Hasilnya: Local Result: Semantic HTML Media (Audio & Video) Memutar media langsung dari halaman web. <audio controls> <source src="./assets/lagu.mp3" type="audio/mpeg" /> </audio> <video controls autoplay> <source src="./assets/video.mp4" type="video/mp4" /> </video> Tambahkan file audio dan video di folder assets Struktur Proyek Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <audio controls> <source src="./assets/lagu.mp3" type="audio/mpeg" /> </audio> <video controls autoplay> <source src="./assets/video.mp4" type="video/mp4" /> </video> </body> </html> Hasilnya: BuildWithAngga Elemen Inline vs Block Inline: Tidak mulai baris baru (<a>, <span>)Block: Mengisi satu baris penuh (<div>, <p>) Atribut HTML Umum Penjelasan: id: Identifikasi unik.class: Mengelompokkan elemen, berguna untuk styling.title: Tooltip ketika hover.alt: Alternatif teks gambar.value: Nilai awal input.name: Nama yang dikirim saat submit form. <input type="text" id="email" class="input-form" title="Masukkan email kamu" value="[email protected]" name="email"> Elemen Inline vs Block Penjelasan: Block: Mengambil satu baris penuh (<div>, <p>, <h1>, <section>)Inline: Tidak memulai baris baru (<span>, <a>, <strong>, <img>) Character Entities Digunakan untuk menampilkan karakter khusus: <p>5 < 10 dan 10 > 5</p> <p>© 2025</p> <p>Gunakan & untuk simbol &</p> Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>5 < 10 dan 10 > 5</p> <p>© 2025</p> <p>Gunakan & untuk simbol &</p> </body> </html> Hasilnya: Local Result: Character Entities Elemen <div> dan <span> Perbedaan: <div>: Kontainer block.<span>: Kontainer inline. <div class="container"> <p><span class="highlight">Teks ini</span> memiliki latar belakang khusus.</p> </div> Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="container"> <p> <span class="highlight">Teks ini</span> memiliki latar belakang khusus. </p> </div> </body> </html> Hasilnya: Local Result: Element <div> dan <span> Aksesibilitas Dasar Tips: Gunakan alt pada gambar.Gunakan elemen semantik.Tambahkan aria-label untuk elemen interaktif. Meta Tag Berada di dalam <head>, mempengaruhi pengaturan dasar halaman. <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Belajar dasar-dasar HTML untuk pemula"> Elemen <iframe> Digunakan untuk menyematkan halaman lain ke dalam halaman saat ini. <iframe src="<https://www.youtube.com/embed/WxQnBRwm7h8>" width="600" height="400"></iframe> Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <iframe src="<https://www.youtube.com/embed/WxQnBRwm7h8>" width="600" height="400" ></iframe> </body> </html> Hasilnya: Local Result: Elemen <iframe> Elemen <script> dan <link> <script>: Menyisipkan JavaScript, biasanya ditempatkan sebelum tag penutup </body>.<link>: Menghubungkan file CSS, biasanya ditempatkan sebelum tag penutup </head>. <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Teks style <span class="highlight">file CSS</span>.</p> <script src="script.js"></script> </body> </html> File styles.css .highlight { background-color: yellow; } File script.js alert("Halo BuildWithAngga!"); Hasilnya: Local Result: JavaScript Local Result: CSS Elemen <style> dalam HTML Kita juga bisa meletakkan CSS di file HTML dengan menggunakan tag <style>. Biasanya ditempatkan diantara tag <head> dan <body>. <style> p { color: red; } </style> Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <style> p { color: red; } </style> <body> <p>Tag style di file html</p> </body> </html> Hasilnya: Local Result: Tag <style> di file HTML JavaScript dalam HTML Kita juga bisa menuliskan kode JavaScript di dalam file HTML dengan menggunakan tag <script>. <script> alert("Halo BuildWithAngga!"); </script> Contoh: <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <body> <p>JavaScript di dalam file HTML.</p> <script> alert("Halo BuildWithAngga!"); </script> </body> </html> Hasilnya: Local Result: JavaScript di dalam file HTML Best Practice Penulisan HTML Gunakan indentasi.Gunakan lowercase untuk tag.Tambahkan atribut alt untuk gambar.Gunakan elemen semantik untuk struktur. Validasi HTML Gunakan validator.w3.org untuk mengecek kesalahan HTML secara otomatis. Validasi HTML Tools & Resources Berikut beberapa tools dan resources yang bisa kita gunakan: 📚 MDN Web Docs📘 W3Schools🛠️ HTML Validator Kesalahan Umum Pemula Tidak menutup tag HTML.Tidak menggunakan elemen semantik.Duplikat id.Meletakkan elemen <script> sebelum konten selesai dimuat. Penutup Itu dia pembahasan lengkap tentang dasar-dasar HTML yang penting banget buat kamu kuasai sebagai frontend developer. Meskipun HTML terlihat simpel, sebenarnya fondasi ini punya peran besar dalam membangun struktur dan semantik sebuah website. Dengan paham HTML, kamu jadi tahu bagaimana cara menyusun konten yang rapi, mudah diakses, dan ramah SEO. Selain itu, kamu juga bakal lebih mudah kerja bareng CSS dan JavaScript nantinya, karena semuanya dimulai dari struktur HTML yang baik. Ingat, meskipun kamu udah masuk ke hal-hal yang lebih kompleks kayak React atau Tailwind, skill HTML yang kuat tetap jadi kunci biar hasil akhir websitemu nggak cuma keren, tapi juga terstruktur dan bisa di-maintain dengan baik. Jadi, terus latihan ya — bikin halaman web sederhana, otak-atik tag, dan pelajari elemen-elemen baru. Semakin sering kamu praktik, makin cepat kamu jadi makin jago! Selamat belajar dan semoga makin mantap jadi frontend developer! 💻✨

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

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