Kenapa Belajar HTML & CSS Dulu?
Jika kamu ingin terjun ke dunia web development, HTML dan CSS adalah fondasi yang wajib dikuasai sebelum belajar JavaScript atau framework apapun. HTML memberikan struktur pada halaman web, sementara CSS memberikan tampilan dan gaya. Tanpa keduanya, tidak ada website yang bisa berdiri.
Kabar baiknya: HTML dan CSS relatif mudah dipelajari bahkan tanpa latar belakang IT sekalipun. Kamu bisa mulai membuat halaman web sederhana hanya dalam beberapa jam belajar.
Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur konten di web. HTML menggunakan tag untuk mendefinisikan elemen-elemen seperti judul, paragraf, gambar, dan link.
Contoh struktur HTML dasar:
- <html> — Tag pembungkus utama dokumen
- <head> — Berisi informasi meta, judul halaman, dan link CSS
- <body> — Berisi semua konten yang tampil di browser
- <h1> hingga <h6> — Tag heading/judul
- <p> — Tag paragraf
- <a> — Tag hyperlink
- <img> — Tag untuk menampilkan gambar
Apa Itu CSS?
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan elemen HTML — warna, ukuran font, margin, layout, dan lain-lain. CSS dipisahkan dari HTML agar kode lebih rapi dan mudah dikelola.
Konsep dasar CSS yang perlu dipahami:
- Selector: Menentukan elemen HTML mana yang akan diberi gaya
- Property: Aspek yang ingin diubah (misal: color, font-size, margin)
- Value: Nilai yang diberikan pada property tersebut
Tools yang Kamu Butuhkan
Untuk mulai belajar HTML & CSS, kamu hanya butuh dua hal:
- Text Editor: VS Code (gratis, paling populer) atau Notepad++ sebagai alternatif
- Browser: Google Chrome atau Firefox untuk melihat hasilnya
Kamu juga bisa langsung mencoba tanpa install apapun menggunakan platform online seperti CodePen atau JSFiddle — cukup buka browser dan langsung coding!
Roadmap Belajar HTML & CSS
| Minggu | Topik | Target |
|---|---|---|
| Minggu 1 | Struktur dasar HTML, tag umum | Membuat halaman HTML pertama |
| Minggu 2 | Form, tabel, dan semantic HTML | Membuat form kontak sederhana |
| Minggu 3 | CSS dasar: warna, font, box model | Memberi gaya pada halaman HTML |
| Minggu 4 | CSS Flexbox & layout | Membuat layout halaman yang responsif |
Sumber Belajar Gratis Terbaik
- freeCodeCamp.org — Kurikulum lengkap dan interaktif, gratis 100%
- MDN Web Docs — Dokumentasi resmi dan terlengkap dari Mozilla
- W3Schools — Cocok untuk pemula, banyak contoh langsung
- The Odin Project — Kurikulum berbasis proyek nyata
Tips Belajar yang Efektif
Satu kesalahan umum pemula adalah hanya membaca tutorial tanpa langsung mempraktikkan. Coding hanya bisa dikuasai dengan cara menulis kode sendiri, membuat kesalahan, dan memperbaikinya. Mulailah dengan proyek kecil — bahkan halaman profil sederhana sudah cukup untuk latihan awal yang bermakna.