Belajar CSS - Pre-Requisites Skill & Setup Environment
Sebelum menyentuh CSS, kalian perlu menguasai HTML dasar, struktur dokumen, dan perangkat yang dipakai untuk menulis serta menguji stylesheet. Di episode ini kalian menyiapkan text editor, browser, live server, dan project pertama berisi index.html dan style.css, lalu memverifikasi hasil styling di DevTools.
#Pendahuluan
Selamat datang di series Belajar CSS! Series ini akan membawa kalian menguasai CSS — bahasa styling yang membentuk penampilan halaman web — dari fondasi selector sampai teknik layout modern, responsif, animasi, dan optimasi untuk web produksi. Total ada 23 episode yang tersusun dari empat fase.
Tapi sebelum menulis deklarasi CSS pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena CSS tidak berdiri sendiri. CSS bekerja di atas HTML — struktur konten — dan ditampilkan oleh browser. Kalau kalian belum paham bagaimana elemen HTML disusun, semua selector akan terasa seperti tebakan.
Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan tooling, membuat project pertama, dan memverifikasi bahwa stylesheet benar-benar termuat di browser. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.
#Skill Dasar yang Wajib Dikuasai
#Memahami Struktur HTML
CSS menargetkan elemen HTML, jadi kalian wajib mengenal tag dasar seperti h1, p, a, img, div, dan span. Pahami juga konsep parent dan child, atribut seperti class dan id, serta dokumen yang valid dengan doctype, head, dan body.
Contoh dokumen HTML minimal:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Pertamaku</title>
</head>
<body>
<h1>Halo Dunia</h1>
<p>Ini paragraf pertama.</p>
</body>
</html>Struktur inilah yang nanti akan dihias oleh CSS. Seluruh episode berikutnya akan menulis markup serupa, jadi pastikan pola di atas sudah familier.
#Browser dan DevTools
Browser adalah runtime CSS. Gunakan Google Chrome, Firefox, atau Microsoft Edge versi terbaru. Semua browser modern punya DevTools yang menjadi laboratorium kalian: inspeksi elemen, edit CSS secara langsung, dan simulasi ukuran layar.
Buka DevTools dengan menekan F12 atau Ctrl+Shift+I. Di panel Elements, kalian bisa mengklik elemen apa pun dan melihat stylesheet yang memengaruhinya. Kebiasaan mengeksplorasi lewat DevTools akan dipakai di hampir setiap episode series ini.
#Perangkat Lunak yang Perlu Disiapkan
#Text Editor
Kalian membutuhkan text editor. Rekomendasi utama adalah Visual Studio Code karena gratis, ringan, dan punya ekosistem extension yang bagus untuk frontend. Alternatif lain: Neovim, Sublime Text, atau IDE apapun yang kalian nyaman pakai.
Untuk VS Code, pasang dua extension berikut: Live Server untuk preview dengan reload otomatis, dan Prettier untuk memformat kode secara konsisten.
node --version
npm --versionNode.js sebenarnya tidak wajib untuk CSS murni, tapi berguna untuk menjalankan tooling modern seperti bundler dan linter di episode-episode akhir. Verifikasi versi dengan perintah di atas; bila belum ada, unduh dari situs resmi Node.js.
#Live Server dan Browser
Dengan extension Live Server terpasang, kalian cukup mengklik kanan index.html lalu memilih Open with Live Server. Browser akan membuka halaman di localhost:8080 dan otomatis me-refresh setiap kali file berubah.
Alternatif tanpa extension, jalankan server statis lewat Node:
npx serve .Server statis penting karena beberapa fitur dan konvensi hanya bekerja lewat protokol HTTP, bukan lewat file lokal yang dibuka langsung.
#Menyiapkan Project Pertama
#Struktur Folder
Buat folder project dengan struktur yang rapi sejak awal:
mkdir belajar-css
cd belajar-css
touch index.html
mkdir css
touch css/style.cssDengan struktur ini, semua stylesheet berada di subfolder css. Konsistensi struktur folder akan memudahkan kalian saat project membesar di episode 19 dan 20.
#Menyambungkan Stylesheet ke HTML
Sekarang isi index.html dan sambungkan stylesheet eksternal:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Judul Halaman</h1>
<p>Paragraf yang siap dihias.</p>
</body>
</html>Baris link menghubungkan HTML dengan css/style.css. Perhatikan urutan atribut: rel menandakan ini stylesheet, href berisi path menuju file CSS. Kalian akan selalu memakai pola link rel="stylesheet" ini di setiap halaman.
#Menulis CSS Pertama
Isi css/style.css dengan aturan sederhana:
h1 {
color: #2563eb;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
color: #374151;
}Aturan di atas menargetkan elemen h1 dan p, lalu mengubah warna dan ukuran teks. Buka index.html di Live Server — judul kini berwarna biru, dan paragraf lebih mudah dibaca.
#Verifikasi Environment
#Memastikan Stylesheet Termuat
Buka halaman di browser, tekan F12, dan pilih panel Elements. Klik elemen h1. Di sisi kanan seharusnya muncul properti color dengan nilai #2563eb yang berasal dari css/style.css. Kalau tidak muncul, periksa path pada tag link dan pastikan file berada di folder yang benar.
Verifikasi cepat lewat terminal juga bisa dilakukan:
curl -s http://localhost:8080/css/style.cssJika server aktif, perintah ini akan mengembalikan isi stylesheet. Command curl -s http://localhost:8080/css/style.css menunjukkan file CSS dapat diakses melalui HTTP — konfirmasi bahwa struktur project kalian benar.
#Checklist Kesiapan
Sebelum lanjut ke episode 1, pastikan semuanya sudah terpenuhi:
- Dokumen HTML valid dan tersimpan sebagai
index.html. - Browser modern terpasang dan DevTools bisa dibuka.
- Text editor dan extension Live Server siap.
- Stylesheet eksternal berhasil termuat dan terbukti di DevTools.
- Node.js terverifikasi bila ingin memakai tooling tambahan.
Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi. Fondasi yang kuat akan membuat 22 episode berikutnya terasa jauh lebih ringan.
Info
Simpan project ini baik-baik. Struktur index.html dan css/style.css akan terus dipakai sebagai wadah praktik sepanjang series, jadi buatlah nyaman untuk dikembangkan.
#Penutup
Inti yang harus dibawa pulang:
- CSS bekerja di atas HTML dan ditampilkan browser, jadi kuasai struktur HTML dasar.
- DevTools adalah laboratorium utama untuk menginspeksi dan menguji CSS.
- Gunakan text editor dengan Live Server untuk workflow yang cepat.
- Simpan stylesheet di file terpisah dan hubungkan dengan tag
link. - Verifikasi bahwa stylesheet termuat lewat DevTools atau
curl. - Struktur folder yang rapi menjadi fondasi maintenance di episode-episode akhir.
Di episode 1 selanjutnya kita akan membahas apa itu CSS dan cara menyisipkannya — definisi dan sejarah singkat CSS, tiga cara menyisipkan stylesheet (inline, internal, dan eksternal), plus aturan urutan yang berlaku. Pastikan environment kalian sudah siap, karena perjalanan Belajar CSS baru saja dimulai!