🚀 PETUALANGAN CODING: BIKIN WEBSITE "CITA-CITAKU" SENDIRI!

Halo, teman-teman hebat! 👋

Pernah nggak sih kamu mimpi jadi dokter, pilot, programmer, atau apapun itu? Nah, di petualangan ini, kita bakal bikin website sendiri yang menceritakan cita-citamu. Keren, kan?

Nggak perlu jago matematika. Nggak perlu jago komputer. Yang penting kamu mau mencoba dan nggak takut salah. Siap? Yuk mulai! 💪

🎥 TONTON VIDEONYA !

Anda juga bisa mengikuti langkah-langkahnya melalui video tutorial lengkapnya pada link dibawah ini:

PART 1: https://youtu.be/__FofFd0DJI

---

🗺️ PETA PETUALANGAN KITA

text

   KAMU MULAI DI SINI
         │
         ▼
   MISI 1: Siapkan Alat (Install VS Code)
         │
         ▼
   MISI 2: Bikin Kerangka Website (HTML)
         │
         ▼
   MISI 3: Tambah Gambar & Daftar (HTML Lanjutan)
         │
         ▼
   MISI 4: Warnai Website (CSS)
         │
         ▼
   MISI 5: Percantik Tampilan (CSS Lanjutan)
         │
         ▼
   MISI 6: Website Jadi! Presentasi! 🎉

Aturan mainnya cuma 3:

1. Ikuti urutan — jangan loncat-loncat ya!

2. Coba dulu, baru tanya — kalau salah, nggak apa-apa

3. Simpan terus — tekan Ctrl + S setiap selesai nulis

---

🎯 MISI 1: SIAPKAN ALAT PERANG

Target: Kamu punya aplikasi VS Code di komputer.

1.1 Kenalan Dulu: File & Folder

Bayangkan komputer itu seperti lemari. Di dalamnya ada map (folder), dan di dalam map ada kertas (file).

Setiap file punya "nama belakang" yang disebut ekstensi:

Nama Belakang	Jenis File
.docx	Dokumen Word
.jpg	Gambar
.mp3	Musik
.html	File website ← kita bikin ini!
.css	File tampilan ← kita bikin ini!

1.2 Buat Folder Projekmu

1. Klik kanan di Desktop → New → Folder

2. Kasih nama: projek-cita-cita

3. Tekan Enter

Ini kayak bikin "markas" buat projek kita. Semua file nanti masuk ke sini.

1.3 Download VS Code

VS Code itu aplikasinya. Ibaratnya:

• Mau nulis surat → pakai Microsoft Word

• Mau nulis kode → pakai VS Code

Langkah-langkahnya:

1. Buka Google Chrome

2. Ketik: code.visualstudio.com

3. Klik tombol biru besar "Download for Windows"

4. Tunggu sampai selesai (lihat pojok kanan bawah browser)

⚠️ Hati-hati! Pastikan alamatnya code.visualstudio.com. Jangan yang lain!

1.4 Install VS Code

1. Buka folder Downloads

2. Cari file namanya VSCodeSetup

3. Klik dua kali file itu

4. Klik Yes → I accept → Next (3 kali)

5. Centang SEMUA kotak yang muncul → Next → Install

6. Tunggu sebentar → klik Finish

1.5 Buka VS Code

Klik ikon biru di Desktop. Kalau nggak ada:

• Klik Start (logo Windows)

• Ketik vs code

• Klik Visual Studio Code

Selamat! Alatmu sudah siap! 🎉

✏️ Misi Kecilmu

1. Bikin folder projek-cita-cita di Desktop

2. Install VS Code sampai selesai

3. Buka VS Code, klik-klik aja menunya (nggak akan rusak, kok!)

---

🎯 MISI 2: BIKIN KERANGKA WEBSITE

Target: Kamu bisa bikin file HTML dengan judul & paragraf.

2.1 Kenalan: Apa itu HTML?

HTML itu kerangka website. Ibarat bikin rumah:

• HTML = tembok, pintu, jendela

• CSS = cat dan hiasannya (belajar nanti)

Tag itu perintah dalam kurung siku < >. Biasanya berpasangan:

• Tag pembuka: <h1>

• Tag penutup: </h1> (ada garis miringnya)

Contoh: <h1>Halo</h1> artinya "mulai judul, isinya Halo, selesai judul".

2.2 Bikin File HTML Pertamamu

1. Buka VS Code

2. Klik File → Open Folder → pilih folder projek-cita-cita

3. Klik ikon New File (kertas dengan tanda +) di panel kiri

4. Kasih nama: index.html (huruf kecil semua ya!)

5. Tekan Enter

Kenapa harus index.html? Itu nama standar untuk halaman utama website. Wajib sama persis!

2.3 Tulis Kode Pertamamu

Ketik ini di editor:

text

<!DOCTYPE html>
<html>
<head>
  <title>Cita-Citaku</title>
</head>
<body>
  <h1>Halo, namaku Budi!</h1>
  <p>Aku ingin jadi dokter.</p>
</body>
</html>

Ganti "Budi" dengan namamu sendiri!

Artinya apa?

• <!DOCTYPE html> = sampul buku (wajib ada, tapi nggak kelihatan)

• <html> = pembungkus semua

• <head> = info website

• <title> = judul di tab browser

• <body> = isi yang kelihatan

2.4 Simpan & Lihat Hasilnya!

1. Tekan Ctrl + S (simpan)

2. Buka folder projek-cita-cita di Desktop

3. Klik dua kali file index.html

4. Browser terbuka! Lihat hasilmu! 🎉

🎊 Selamat! Kamu baru saja bikin website pertamamu!

2.5 Belajar Tag Judul & Paragraf

Tag judul ada 6 ukuran, dari paling besar ke paling kecil:

text

<h1>Judul Paling Besar</h1>
<h2>Judul Agak Besar</h2>
<h3>Judul Sedang</h3>
<h4>Judul Kecil</h4>
<h5>Lebih Kecil</h5>
<h6>Paling Kecil</h6>

Tag paragraf untuk nulis cerita:

text

<p>Ini paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

✏️ Misi Kecilmu

1. Buat file index.html di folder projek-cita-cita

2. Ketik struktur HTML lengkap

3. Isi <h1> dengan "Cita-Citaku"

4. Buat 3 paragraf <p>: namamu, cita-citamu, alasanmu

5. Simpan (Ctrl + S) → buka di browser!

---

🎯 MISI 3: TAMBAH GAMBAR & DAFTAR

Target: Website-mu punya gambar, daftar, dan kotak-kotak rapi.

3.1 Tambah Gambar Keren

Tag <img> buat nampilin gambar. Nggak punya tag penutup (beda sendiri!).

text

<img src="dokter.jpg" alt="Dokter" width="300">

• src = nama file gambarmu

• alt = tulisan pengganti kalau gambar gagal muncul

• width = lebar gambar (dalam pixel)

Cara nyiapin gambar:

1. Buka Google Images → cari "dokter kartun"

2. Klik kanan gambar → Save Image As

3. Simpan di folder projek-cita-cita

4. Kasih nama: dokter.jpg

⚠️ Penting! Gambar HARUS di folder yang sama dengan index.html. Kalau nggak, gambarnya nggak muncul!

3.2 Bikin Daftar Langkahmu

Tag <ul> = keranjang daftar
Tag <li> = isi daftarnya

text

<h2>Langkah-Langkahku:</h2>
<ul>
  <li>Rajin belajar</li>
  <li>Masuk SMA IPA</li>
  <li>Kuliah kedokteran</li>
</ul>

Analogi: <ul> itu keranjang, <li> itu buah di dalamnya.

3.3 Bagi Website Jadi 3 Kotak

<div> itu kotak buat ngelompokkin isi. Nanti kotak ini bisa diwarnai pakai CSS.

Bayangkan website itu terbagi 3:

• Header = bagian atas (judul)

• Isi = bagian tengah (cerita kamu)

• Footer = bagian bawah (namamu)

text

<div class="header">
  <h1>Cita-Citaku</h1>
</div>

<div class="isi">
  <img src="dokter.jpg" alt="Dokter" width="300">
  <p>Aku ingin jadi dokter.</p>
  <ul>
    <li>Rajin belajar</li>
    <li>Masuk SMA IPA</li>
  </ul>
</div>

<div class="footer">
  <p>Dibuat oleh: Budi - Kelas 8A</p>
</div>

class="header" = nama kotaknya. Bebas sih, tapi sebaiknya sesuai fungsinya.

3.4 Lengkapi Kerangkamu

text

<!DOCTYPE html>
<html>
<head>
  <title>Cita-Citaku</title>
</head>
<body>

  <div class="header">
    <h1>Cita-Citaku</h1>
  </div>

  <div class="isi">
    <img src="dokter.jpg" alt="Dokter" width="300">
    <p>Aku ingin jadi dokter.</p>

    <h2>Langkah-Langkahku:</h2>
    <ul>
      <li>Rajin belajar</li>
      <li>Masuk SMA IPA</li>
      <li>Kuliah kedokteran</li>
    </ul>
  </div>

  <div class="footer">
    <p>Dibuat oleh: Budi - Kelas 8A</p>
  </div>

</body>
</html>

Simpan (Ctrl + S) → refresh browser. Lihat! Kerangka website-mu sudah jadi!

✏️ Misi Kecilmu

1. Cari gambar di Google sesuai cita-citamu

2. Simpan di folder projek-cita-cita

3. Tambahkan <img> di HTML-mu

4. Buat daftar <ul> dengan 5 langkah

5. Bagi jadi 3 <div>: header, isi, footer

6. Simpan dan lihat hasilnya!

---

🎯 MISI 4: WARNAI WEBSITE-MU

Target: Website-mu jadi berwarna dan cantik!

4.1 Kenalan: Apa itu CSS?

CSS itu pengatur tampilan. Ibarat rumah:

• HTML = kerangka (tembok, pintu)

• CSS = cat dan hiasan (warna, dekorasi)

Tanpa CSS, website-mu cuma hitam-putih. Dengan CSS, jadi warna-warni! 🌈

4.2 Bentuk Dasar CSS

text

selector {
  properti: nilai;
}

Contoh:

text

h1 {
  color: blue;
}

Artinya: "Ubah semua <h1> jadi warna biru."

• selector = siapa yang mau diubah

• properti = apa yang mau diubah

• nilai = jadi apa

4.3 Bikin File CSS

1. Di VS Code, klik New File

2. Kasih nama: style.css (huruf kecil semua)

3. Tekan Enter

4.4 Sambungkan CSS ke HTML

Buka index.html, tambahkan baris ini di dalam <head>:

text

<link rel="stylesheet" href="style.css">

Jadi <head>-nya seperti ini:

text

<head>
  <title>Cita-Citaku</title>
  <link rel="stylesheet" href="style.css">
</head>

⚠️ Hati-hati! Baris <link> harus di dalam <head>, bukan di <body>.

4.5 CSS Pertamamu: Warna!

Tulis di style.css:

text

body {
  background-color: lightyellow;
}

h1 {
  color: blue;
}

Simpan (Ctrl + S) → refresh browser.

WOW! Latar jadi kuning muda, judul jadi biru! 🎨

4.6 Properti Ajaib CSS

Properti	Fungsinya	Contoh
color	Warna tulisan	color: red;
background-color	Warna latar	background-color: yellow;
font-size	Ukuran tulisan	font-size: 40px;
font-family	Jenis huruf	font-family: Arial;
text-align	Perataan	text-align: center;

Nama warna yang bisa kamu pakai:
red, blue, green, yellow, purple, pink, orange, black, white, gray, gold, lightblue, darkblue... masih banyak lagi!

✏️ Misi Kecilmu

1. Bikin file style.css

2. Sambungkan ke index.html pakai <link>

3. Ubah latar jadi warna favoritmu

4. Ubah warna <h1> jadi warna lain

5. Ubah ukuran <h1> jadi 45px, rata tengah

6. Simpan dan lihat hasilnya!

---

🎯 MISI 5: PERCANTIK TAMPILAN

Target: Website-mu punya kotak rapi dengan jarak dan warna yang pas.

5.1 Jarak Dalam: padding

padding = jarak di dalam kotak. Antara tepi kotak dan isinya.

Analogi: seperti bantal di dalam kotak. Bikin isi nggak nempel ke tepi.

text

.header {
  padding: 30px;
}

Artinya: kasih bantal 30px di dalam kotak header.

5.2 Jarak Luar: margin

margin = jarak di luar kotak. Antara kotak dan sekitarnya.

Analogi: seperti jarak antar meja di kelas. Biar nggak berdempetan.

text

.isi {
  margin: 30px;
}

💡 Ingat ya:

• padding = bantal DALAM kotak

• margin = jarak ANTAR kotak

5.3 Garis Tepi: border

border = garis di sekeliling kotak.

text

.isi {
  border: 2px solid black;
}

• 2px = tebal garis

• solid = jenis garis (lurus)

• black = warna garis (bisa diganti warna lain)

5.4 Sudut Melengkung: border-radius

border-radius = bikin sudut kotak melengkung.

text

.isi {
  border-radius: 20px;
}

• 20px = sudut melengkung lembut

• 50% = jadi bulat penuh (cocok buat foto!)

5.5 Contoh Lengkap

text

body {
  font-family: Arial;
  background-color: #f0f8ff;
  margin: 0;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 30px;
  text-align: center;
}

.isi {
  background-color: white;
  margin: 30px auto;
  padding: 25px;
  border-radius: 15px;
  max-width: 600px;
  text-align: center;
}

.isi img {
  border-radius: 50%;
  border: 4px solid #4a90e2;
}

.footer {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

Simpan, refresh browser... TA-DA! Website-mu udah cantik banget! ✨

✏️ Misi Kecilmu

1. Kasih padding pada .header

2. Kasih margin pada .isi

3. Kasih border-radius pada .isi dan .isi img

4. Kasih warna berbeda untuk header, isi, dan footer

5. Simpan dan lihat hasilnya!

---

🎯 MISI 6: TANTANGAN AKHIR!

Target: Bikin website cita-citamu SENDIRI dan pamerkan!

6.1 Contoh Website Lengkap

File index.html:

text

<!DOCTYPE html>
<html>
<head>
  <title>Cita-Citaku</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="header">
    <h1>Cita-Citaku</h1>
    <p>Website Impian Budi</p>
  </div>

  <div class="isi">
    <img src="dokter.jpg" alt="Dokter" width="200">
    <h2>Aku Ingin Jadi Dokter</h2>
    <p>
      Aku ingin menjadi dokter karena aku suka membantu orang.
      Saat ada temanku sakit, aku selalu ingin merawatnya.
      Dengan menjadi dokter, aku bisa menolong banyak orang
      dan membuat keluargaku bangga.
    </p>

    <h3>Langkah-Langkahku:</h3>
    <ul>
      <li>Rajin belajar</li>
      <li>Masuk SMA IPA</li>
      <li>Kuliah kedokteran</li>
      <li>Praktik di rumah sakit</li>
      <li>Jadi dokter yang baik</li>
    </ul>
  </div>

  <div class="footer">
    <p>Dibuat oleh: Budi - Kelas 8A</p>
  </div>

</body>
</html>

File style.css:

text

body {
  font-family: Arial;
  background-color: #f0f8ff;
  margin: 0;
}

.header {
  background-color: #4a90e2;
  color: white;
  text-align: center;
  padding: 30px;
}

.header h1 {
  margin: 0;
  font-size: 40px;
}

.isi {
  background-color: white;
  max-width: 600px;
  margin: 30px auto;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
}

.isi img {
  border-radius: 50%;
  border: 4px solid #4a90e2;
}

.isi h2 {
  color: #4a90e2;
}

.isi ul {
  text-align: left;
  display: inline-block;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px;
}

6.2 Tugas Akhirmu

Bikin website Cita-Citaku versi KAMU SENDIRI. Wajib ada:

✅ Judul dengan namamu
✅ Gambar cita-citamu
✅ Paragraf alasan (minimal 5 baris)
✅ Daftar 5 langkah mencapai cita-cita
✅ Minimal 3 warna berbeda
✅ Footer berisi nama & kelas

6.3 Penilaiannya

Aspek	Nilai 4	Nilai 3	Nilai 2	Nilai 1
Kelengkapan	Semua ada	4-5 elemen	3 elemen	Kurang dari 3
Kerapian Kode	Rapi banget	1-2 error	3-4 error	Banyak error
Kreativitas	Warna serasi & unik	Warna serasi	Cukup	Berantakan
Keaslian	Buat sendiri	Sedikit modif	Tanpa modif	Copy-paste

Nilai = (Total Skor ÷ 16) × 100

6.4 Waktunya Pamer!

Maju ke depan kelas, lalu:

1. Tunjukkan website-mu

2. Ceritakan cita-citamu

3. Sebutkan 1 bagian kode yang paling kamu suka

Bangga ya! Ini karya PERTAMAMU! 🎉

---

📌 CONTEKAN CEPAT (BIAR NGGAK LUPA)

Tag HTML

Tag	Fungsinya
<h1> sampai <h6>	Judul (h1 paling besar)
<p>	Paragraf
<img>	Gambar
<ul> + <li>	Daftar
<div>	Kotak

Properti CSS

Properti	Fungsinya
color	Warna tulisan
background-color	Warna latar
font-size	Ukuran huruf
font-family	Jenis huruf
text-align	Perataan
padding	Jarak dalam kotak
margin	Jarak luar kotak
border	Garis tepi
border-radius	Sudut melengkung

Struktur File

text

📁 projek-cita-cita/
├── 📄 index.html   ← isi website
├── 🎨 style.css    ← tampilan website
└── 🖼️ dokter.jpg   ← gambar

5 Aturan Emas

1. Selalu Ctrl + S setelah nulis kode

2. Nama file huruf kecil semua (index.html, style.css)

3. Cek tanda baca: <, >, {, }, ;, "

4. Kalau error → jangan panik, baca pesannya

5. Refresh browser setiap habis simpan

---

🎉 SELAMAT, KAMU BERHASIL!

Kamu baru saja menyelesaikan 6 misi petualangan coding!

Dari yang tadinya nggak tahu apa-apa, sekarang kamu bisa:

• ✅ Bikin file HTML & CSS sendiri

• ✅ Nulis kode dengan tag dasar

• ✅ Warnai website jadi cantik

• ✅ Bikin website "Cita-Citaku" sendiri

Ingat ya: Website ini cuma langkah pertama. Masih banyak hal keren yang bisa kamu pelajari. Yang penting, jangan berhenti belajar dan jangan takut salah.

Terus kejar cita-citamu! Kamu pasti bisa! 🚀✨