Kenalan Dulu Sama Alat yang Bakal Kamu Pakai

Sebelum mulai menulis kode, kita perlu siapkan "alat perang" dulu. Untuk belajar HTML & CSS, kamu cuma butuh dua hal: text editor (program untuk menulis kode) dan browser (program untuk melihat hasil kodenya, misalnya Chrome atau Firefox). Tenang, dua-duanya gratis dan gampang diinstall — nggak perlu laptop spek dewa.

Langkah 1: Install Text Editor — Visual Studio Code

Text editor itu semacam "Microsoft Word" tapi khusus untuk menulis kode. Kamu bisa saja pakai Notepad bawaan Windows, tapi nggak akan nyaman karena nggak ada fitur bantu seperti pewarnaan kode (syntax highlighting) atau auto-lengkapi tag. Karena itu, kita pakai Visual Studio Code (VS Code) — text editor gratis buatan Microsoft yang paling banyak dipakai programmer web pemula sampai profesional.

Cara install-nya:

• Buka code.visualstudio.com lewat browser kamu.
• Klik tombol download yang sesuai dengan sistem operasimu (Windows, Mac, atau Linux).
• Jalankan file installer yang sudah terdownload, lalu klik "Next" terus sampai selesai (pengaturan default sudah cukup, nggak perlu diubah-ubah).
• Setelah selesai, buka aplikasi VS Code. Kalau muncul tampilan dengan sidebar di kiri dan area kosong di tengah, berarti instalasi berhasil.

Rapikan Tampilan VS Code (Opsional tapi Direkomendasikan)

Biar lebih nyaman dipakai belajar, kamu bisa install extension — semacam "plugin" tambahan yang menambah fitur ke VS Code. Dua yang berguna banget untuk pemula:

• Live Server: extension yang bikin halaman HTML kamu otomatis muncul di browser dan ter-refresh sendiri tiap kali kamu simpan perubahan kode. Ini bakal sering banget kita pakai di modul-modul berikutnya.
• Indonesian Language Pack: kalau mau tampilan menu VS Code dalam Bahasa Indonesia (opsional, banyak juga yang tetap pakai Bahasa Inggris karena istilah pemrograman memang aslinya begitu).

Cara install extension: klik ikon kotak-kotak (Extensions) di sidebar kiri VS Code, ketik nama extension-nya di kolom pencarian, lalu klik "Install".

Langkah 2: Siapkan Browser untuk Ngecek Hasil Kode

Browser yang kamu pakai sehari-hari (Chrome, Firefox, Edge) sebenarnya sudah cukup. Tapi kalau belum punya, disarankan install Google Chrome karena punya fitur DevTools yang lengkap — DevTools adalah panel khusus di browser untuk melihat dan mendebug kode HTML/CSS sebuah halaman, dan akan sangat membantu di modul-modul selanjutnya.

Download di google.com/chrome, install seperti biasa, selesai.

Langkah 3: Buat Folder Kerja Khusus

Supaya file-file latihanmu nggak berantakan, buat satu folder khusus di komputer, misalnya di Desktop dengan nama belajar-html-css. Semua file yang kamu buat selama kelas ini, simpan di folder itu.

Cara membuka folder ini di VS Code: buka VS Code, klik menu File > Open Folder, lalu pilih folder belajar-html-css yang tadi dibuat.

Tes Cepat: Pastikan Semuanya Sudah Jalan

Sebelum lanjut ke modul berikutnya, coba langkah berikut untuk memastikan text editor dan browser kamu sudah siap dipakai:

1. Di dalam folder belajar-html-css, buat file baru bernama index.html
2. Tulis satu baris teks ini di dalamnya:
   Halo Dunia, ini file HTML pertamaku!
3. Simpan file (Ctrl+S / Cmd+S)
4. Buka file tersebut lewat browser (klik kanan file > Open with > Chrome,
   atau kalau sudah install Live Server, klik kanan di dalam VS Code > "Open with Live Server")

Kalau tulisan "Halo Dunia, ini file HTML pertamaku!" muncul di tab browser, berarti setup kamu sudah benar dan siap untuk belajar HTML sungguhan di modul berikutnya.

Latihan untuk Kamu

Sebelum lanjut ke modul 2, coba kerjakan ini:

• Install VS Code dan Google Chrome (kalau belum punya) sesuai langkah di atas.
• Buat folder belajar-html-css di komputermu, lalu buka folder itu di VS Code.
• Buat file index.html, isi dengan satu kalimat perkenalan tentang dirimu (misal: "Halo, namaku Rani, aku lagi belajar bikin website!").
• Buka file tersebut di browser dan pastikan kalimatmu muncul di layar.

Kalau langkah-langkah di atas berhasil, selamat — kamu sudah resmi siap "ngoding"! Lanjut ke modul berikutnya untuk mulai memahami apa itu HTML dan CSS sebenarnya.