KAL
Menu

Penyiapan lingkungan

Pemilihan editor, ekstensi Live Server, dan alur kerja DevTools pada browser.

Daftar isi

Topik ini menyiapkan lingkungan kerja untuk menulis dan menguji CSS, meliputi pemilihan editor teks, pemasangan ekstensi Live Server, susunan folder proyek latihan, dan alur kerja dasar DevTools. Seluruh perangkat yang disebut dapat digunakan tanpa biaya dan berjalan pada Windows, macOS, maupun Linux. Setelah menyelesaikannya, seluruh peralatan siap digunakan untuk menulis serta menguji berkas CSS.

Memilih editor teks#

Editor teks adalah perangkat utama untuk menulis HTML dan CSS. Syarat minimalnya sederhana, yaitu penyorotan sintaks (syntax highlighting) untuk berkas HTML dan CSS agar pasangan tag dan kurung kurawal mudah dilihat. Visual Studio Code (VS Code) dijadikan contoh sepanjang jalur ini karena gratis, lintas platform, dan didokumentasikan resmi. Editor lain seperti Sublime Text, Neovim, atau bahkan Notepad pada Windows tetap sah digunakan.

VS Code dipasang dari situs resminya di code.visualstudio.com dengan penginstal untuk setiap sistem operasi. Setelah terpasang, dua kemampuan bawaan langsung terasa, yaitu pelengkapan otomatis tag HTML dan penyorotan sintaks CSS. Folder proyek dibuka melalui menu File lalu Open Folder, sehingga seluruh berkas latihan tampil di penjelajah samping. Ekstensi tambahan bersifat opsional dan baru diperlukan ketika kebutuhannya jelas, sehingga pengaturan awal dapat dibuat seminimal mungkin.

Ekstensi Live Server#

Live Server adalah ekstensi VS Code yang menjalankan server pengembangan lokal dan memuat ulang halaman secara otomatis setiap berkas disimpan. Tanpa alat ini, hasil suntingan dilihat dengan membuka berkas langsung dari folder lalu menekan muat ulang di browser setiap kali berubah. Pemuatan ulang otomatis memangkas langkah itu, sehingga efek setiap perubahan CSS terlihat hampir seketika.

Pemasangan hanya memerlukan tiga langkah:

  1. Buka panel Extensions melalui ikon pada Activity Bar atau pintasan Ctrl+Shift+X.
  2. Cari Live Server, pilih ekstensi terbitan Ritwick Dey, lalu klik Install.
  3. Klik kanan berkas index.html pada penjelajah berkas, lalu pilih Open with Live Server.

Browser akan membuka alamat lokal seperti http://127.0.0.1:5500, dan tab tersebut tetap terhubung selama server berjalan. Untuk menghentikan server, klik Go Live sekali lagi atau tutup VS Code. Alamat 127.0.0.1 menunjuk komputer sendiri, sehingga halaman hanya dapat dibuka dari mesin yang sama.

Struktur folder proyek latihan#

Proyek latihan pada jalur ini cukup disusun sebagai satu folder bernama css-proyek yang berisi dua berkas sejajar, yaitu index.html dan style.css. Penamaan index.html mengikuti konvensi berkas utama yang dicari server secara otomatis, sedangkan nama style.css bebas dipilih asalkan tautannya konsisten. Struktur datar seperti ini memudahkan pemula karena tidak ada jalur folder yang perlu diingat. Pada proyek besar, stylesheet biasanya dikumpulkan dalam folder tersendiri, misalnya css/style.css, dan tautannya disesuaikan menjadi href="css/style.css".

Berkas pertama memuat jadwal piket kelas sebagai isi latihan:

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jadwal piket kelas</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>Jadwal piket kelas</h1>
    <table>
      <tr><th>Hari</th><th>Petugas</th></tr>
      <tr><td>Senin</td><td>Ali</td></tr>
      <tr><td>Selasa</td><td>Budi</td></tr>
      <tr><td>Rabu</td><td>Citra</td></tr>
    </table>
  </main>
</body>
</html>

Elemen link pada head adalah tempat HTML dan CSS terhubung. Atribut rel="stylesheet" menyatakan jenis berkasnya, sedangkan atribut href menunjuk lokasi style.css yang berada di folder yang sama dengan index.html. Berkas kedua memuat gaya awal:

css style.css 
/* Gaya awal proyek latihan css-proyek */
body {
  font-family: sans-serif;
  max-width: 480px;
  margin: 24px auto;
  padding: 0 16px;
}

h1 {
  font-size: 24px;
  border-bottom: 2px solid #94a3b8;
  padding-bottom: 8px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #94a3b8;
  padding: 8px 12px;
  text-align: left;
}

Simpan kedua berkas, lalu buka index.html melalui Live Server. Tabel tampil dengan garis, jarak, dan huruf sesuai gaya awal. Setiap perubahan pada style.css langsung terlihat setelah berkas disimpan tanpa muat ulang manual.

Alur kerja dasar DevTools#

DevTools melengkapi siklus suntingan dengan pemeriksaan langsung pada halaman yang berjalan. Klik kanan tabel pada halaman latihan, pilih Inspect atau Periksa, dan DevTools terbuka dengan elemen tabel terpilih pada panel Elements beserta aturan gayanya pada panel Styles. Elemen lain dapat dipilih melalui ikon panah di kiri atas DevTools atau dengan klik kanan langsung pada bagian halaman yang dituju.

Nilai gaya dapat diubah langsung pada panel Styles untuk menguji dugaan. Ganti padding sel tabel menjadi 16px, dan perubahan itu berlaku seketika tanpa menyentuh berkas. Perubahan panel Styles bersifat sementara dan hilang saat halaman dimuat ulang, karena yang diedit adalah salinan gaya di memori, bukan berkas style.css.

Siklus lengkapnya menjadi sederhana. Sunting style.css, amati pemuatan ulang otomatis dari Live Server, periksa elemen yang berperilaku aneh di DevTools, lalu kembali menyunting. Dengan tiga perangkat ini, yaitu editor, Live Server, dan DevTools, seluruh latihan pada jalur ini dapat dikerjakan tanpa alat tambahan.

Kesalahan umum#

Kesalahan pertama berupa halaman yang tampil tanpa gaya sama sekali. Penyebab paling umum adalah tautan stylesheet yang tidak cocok, misalnya href tertulis Style.css sedangkan nama berkasnya style.css, karena server pengembangan membedakan huruf besar dan kecil. Perbaikannya adalah mencocokkan nama pada href dengan nama berkas yang sebenarnya, termasuk huruf besar dan kecilnya.

Kesalahan kedua berupa perubahan style.css yang tidak tampak pada halaman. Dua penyebab paling sering adalah berkas yang belum disimpan pada editor dan cache browser yang masih menyimpan versi lama. Pastikan berkas tersimpan terlebih dahulu, lalu muat ulang halaman. Apabila masih berbeda, muat ulang dengan cache dinonaktifkan, misalnya melalui pintasan muat ulang paksa seperti Ctrl+F5 pada Chrome dan Firefox.

Kesalahan ketiga adalah menaruh berkas CSS di folder yang berbeda tanpa menyesuaikan href. Tautan href="style.css" hanya tepat apabila kedua berkas sejajar, sedangkan berkas yang dipindahkan menuntut jalur baru. Gejalanya sama dengan tautan yang salah, yaitu halaman tampil polos, sehingga tautan stylesheet selalu menjadi titik periksa pertama.

Ringkasan#

  • Editor dengan penyorotan sintaks HTML dan CSS sudah memadai, dan VS Code dijadikan contoh sepanjang jalur.
  • Ekstensi Live Server menjalankan server pengembangan lokal dengan pemuatan ulang otomatis setiap berkas disimpan.
  • Proyek latihan cukup berupa folder css-proyek dengan index.html dan style.css sejajar.
  • DevTools menyempurnakan siklus kerja melalui pemeriksaan elemen dan pengujian nilai gaya sementara.

Referensi#