Tutorial

Belajar HTML dan CSS Dasar untuk Pemula, Latihan Membuat Website Desa Sawarna

Belajar HTML dan CSS adalah langkah pertama yang paling tepat kalau anda ingin masuk ke dunia Coding dan Informatika. Di artikel ini, saya akan memandu anda dari nol, dengan contoh nyata: membuat website sederhana untuk Desa Wisata Sawarna.

1. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang menjadi kerangka setiap website. Anggap saja HTML itu tulang, yaitu struktur yang menentukan di mana judul, paragraf, gambar, dan tautan ditempatkan.

<!DOCTYPE html>
<html>
<head>
  <title>Desa Wisata Sawarna</title>
</head>
<body>
  <h1>Selamat Datang di Sawarna</h1>
  <p>Desa pesisir di Banten dengan pantai indah.</p>
</body>
</html>

2. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang membuat website jadi enak dilihat. Kalau HTML itu tulang, CSS adalah kulit dan pakaiannya: warna, ukuran, jarak, dan tampilan visual lainnya.

body {
  font-family: sans-serif;
  background: #f7f8fa;
  color: #0b0f19;
}
h1 {
  color: #2563eb;
  font-size: 2rem;
}

3. Kenapa Belajar HTML dan CSS Penting?

• Menjadi fondasi semua website dan web app
• Pintu masuk ke JavaScript, React, dan framework modern
• Bisa membuat portfolio sendiri tanpa harus mahir coding dulu
• Membuka peluang karier sebagai Frontend Developer atau Web Developer

4. Latihan: Website Desa Wisata Sawarna

Bayangkan anda ingin membuat website sederhana untuk memperkenalkan Sawarna, desa pesisir di Kec. Bayah, Kab. Lebak, Banten, sebagai destinasi wisata. Anda membutuhkan:

1. Header dengan nama desa
2. Section tentang pantai-pantai utama
3. Galeri foto, bisa pakai placeholder dulu
4. Kontak dan lokasi

5. Langkah Praktis Belajar HTML dan CSS

Ini urutan yang saya sarankan untuk pemula:

1. Hari 1 sampai 3: Kenalan dengan tag dasar HTML seperti h1-h6, p, a, img, ul, li, dan div
2. Hari 4 sampai 7: Belajar CSS dasar seperti color, font, margin, padding, dan box model
3. Minggu 2: Layout memakai Flexbox dan Grid
4. Minggu 3: Membuat satu project mini, misalnya website profil atau landing page
5. Minggu 4: Belajar responsive design dengan media query

6. Tools yang Saya Pakai Sehari-hari

• VS Code, editor code paling populer
• Chrome DevTools, untuk inspect dan debug
• GitHub, untuk menyimpan dan membagikan project
• Lanzz Informatika, untuk belajar HTML, CSS, JS, dan HTML viewer interaktif

7. Penutup

Belajar HTML dan CSS tidak membutuhkan bakat khusus, hanya butuh konsistensi. Saya sendiri, Erlan Maulana, developer dari Sawarna Timur, Bayah, Lebak, Banten, belajar semua ini dari nol. Kalau saya bisa, anda juga bisa.