Dari Nol Sampai Bikin Website Sendiri: Panduan Belajar HTML 8 Minggu

Daftar Isi
Dari Nol Sampai Bikin Website Sendiri: Panduan Belajar HTML 8 Minggu

“Dulu saya cuma bisa buka web, sekarang saya bisa bikin web sendiri  dan kamu juga bisa!”
Adi Prayitno Pemula ya


Kenapa Harus Belajar HTML?

HTML adalah bahasa pertama yang wajib dikuasai kalau kamu ingin:

  • Bikin CV online yang keren
  • Buat landing page produk/jasa
  • Punya portofolio digital
  • Paham cara kerja website

Analogi sederhana:
HTML = kerangka rumah
CSS = cat & dekorasi
JavaScript = listrik & pintu otomatis

Tanpa HTML, tidak ada web.


Prasyarat (Gratis Semua!)

Yang Dibutuhkan Link Download
Laptop/PC
Browser (Chrome/Firefox) Sudah ada
Text Editor VS Code (Gratis)
Internet Untuk cek hasil & deploy

Roadmap Belajar 8 Minggu (1 Jam/Hari)

Minggu Fokus Proyek Mini
1 Struktur dasar HTML Profil sederhana
2 Tag semantik & teks Artikel blog
3 Link, gambar, video Portofolio foto
4 Formulir Form kontak
5 Tabel Jadwal kuliah
6 HTML5 modern FAQ interaktif
7 Aksesibilitas Audit proyek
8 Proyek akhir CV Online / Landing Page

3 Contoh Kode Siap Pakai (Copy-Paste!)

1. Profil Sederhana

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Profil Saya</title>
</head>
<body>
  <h1>Halo, Saya Andi</h1>
  <p>Belajar HTML dari nol. Sedang bikin website pertama!</p>
</body>
</html>

Cara: Simpan sebagai index.html → buka di browser.

2. Form Kontak

<form>
  <label>Nama: <input type="text" required></label><br><br>
  <label>Email: <input type="email" required></label><br><br>
  <label>Pesan: <textarea required></textarea></label><br><br>
  <button type="submit">Kirim</button>
</form>

3. Tabel Jadwal

<table border="1">
  <tr><th>Hari</th><th>Jam</th><th>Mata Kuliah</th></tr>
  <tr><td>Senin</td><td>08:00</td><td>HTML Dasar</td></tr>
  <tr><td>Rabu</td><td>10:00</td><td>Praktik Form</td></tr>
</table>

Deploy Gratis dalam 3 Menit!

  1. Buat akun GitHub (gratis)
  2. Upload folder proyekmu
  3. Buka Settings → Pages → Pilih branch main → Save
  4. Website live di: https://username.github.io/nama-folder

Alternatif: Drag & drop ke Netlify Drop


Tips Anti Bingung

  • Belajar 30 menit/hari cukup
  • Jangan takut salah — browser tidak marah
  • Gagal? Buka w3schools
  • Join grup: cari “Belajar HTML Pemula” di Facebook/Discord

Mulai Hari Ini!

  1. ✅ Buka VS Code
  2. ✅ Ketik kode profil di atas
  3. ✅ Simpan → buka di browser
  4. Share hasilnya ke temen!

“Yang membedakan pemula dan pro hanyalah: pro sudah mulai.”

Bagikan artikel ini ke teman yang ingin belajar web!
Kalau kamu sudah bikin website pertama, balas di kolom komentar:
“Saya sudah deploy di: [link]” 🚀

Artikel ini dibuat untuk pemula. Boleh dibagikan ulang dengan mencantumkan sumber.