Pelajaran 8: Proyek: halaman CV-mu sendiri

Saatnya membuat sesuatu yang benar-benar milikmu. Di pelajaran ini kamu membuat halaman CV: satu halaman yang isinya tentang dirimu, tampilannya mirip kartu profil di LinkedIn. Ada sampul, foto bulat, nama, headline, lalu bagian Tentang, Pengalaman, Pendidikan, Keahlian, dan Kontak.

Halaman ini statis: cuma menampilkan info. Tidak ada login, tidak ada kolom komentar. Dan ini bukan latihan asal-asalan, karena hasilnya bisa kamu pakai sungguhan nanti.

Apa yang sudah kusiapkan, apa yang kamu kerjakan

Kita bagi tugas, seperti membangun rumah:

Bajunya sudah kusiapkan. Ada berkas css/gaya.css yang mengatur warna, kartu putih, foto bulat, dan susunan yang rapi. Kamu belum perlu memahaminya. Cara membuatnya diajarkan di kelas CSS nanti.
Gambarnya sudah ada. gambar/foto.svg (foto siluet) dan gambar/sampul.svg (banner abstrak).
Kerangka HTML-nya setengah jadi. Bagian ini yang kamu kerjakan.

Di <head> ada baris <link rel="stylesheet" href="css/gaya.css">. Itu “kabel” yang mencolokkan bajunya ke halaman. Penjelasannya ada di pelajaran 9, sekarang biarkan saja.

Struktur foldernya begini:

cv/
├── index.html
├── css/
│   └── gaya.css
└── gambar/
    ├── foto.svg
    └── sampul.svg

Ini pelajaran 5 yang dipakai sungguhan: index.html memanggil gambar/foto.svg dan css/gaya.css, jadi alamatnya harus benar.

Peta bagian-bagiannya

Supaya tidak bingung, ini pola yang dipakai tiap bagian. Semuanya sudah kamu kenal:

Bagian	Pembungkus	Isinya
Kartu profil	`<header class="kartu kartu-profil">`	Sampul, foto, nama, headline, lokasi
Tentang	`<section class="kartu" id="tentang">`	Satu atau dua paragraf
Pengalaman, Pendidikan	`<section>` berisi `<ul class="daftar">`	Daftar `<li class="butir">`
Keahlian	`<section>` berisi `<ul class="keahlian">`	Satu `<li>` per keahlian
Kontak	`<section>` berisi `<ul class="kontak">`	Email dan tautan

Nama class (kartu, butir, dan seterusnya) sudah ditentukan di gaya.css. Kamu cukup memakainya persis, huruf per huruf. Ingat pelajaran 7: class itu pegangan yang dicari CSS. Salah ketik satu huruf, bajunya tidak menempel.

Satu butir pengalaman

Pengalaman dan pendidikan memakai pola yang sama:

<li class="butir">
  <h3>Anggota Divisi Dokumentasi</h3>
  <p class="sub">Himpunan Mahasiswa Kampusku</p>
  <p class="waktu">Agu 2025 - Sekarang</p>
  <p class="uraian">Memotret kegiatan dan menyunting foto.</p>
</li>

Tiga tag baru muncul di sini, semuanya mudah:

<ul> dan <li> membuat daftar. ul adalah pembungkus daftarnya, li satu butirnya.
<h3> adalah judul tingkat tiga, lebih kecil dari <h2>.
<a href="..."> membuat tautan. Isi href adalah alamat tujuan, contohnya <a href="mailto:rani@contoh.com">rani@contoh.com</a> untuk email.

Nanti kalau butuh butir baru, kamu tinggal menyalin satu blok <li> lalu mengganti isinya.

Coba sendiri: isi CV-mu

Di bawah ini ada folder proyek lengkap. Buka index.html dan ikuti komentar TODO dari atas ke bawah:

Pasang gambar/foto.svg dengan <img> ber-class="foto" (sampulnya sudah dipasang sebagai contoh, tiru alamatnya).
Ganti nama, headline, dan lokasi.
Tambah satu butir pengalaman.
Isi satu butir pendidikan.
Tambah tiga keahlian.
Lengkapi kontak.

Lihat hasilnya setiap selesai satu langkah, jangan menunggu semuanya. Kalau gambar tidak muncul, cek kotak Cek alamat berkas. Kalau stuck, tombol Lihat jawaban memperlihatkan CV lengkap.

Bangun halaman CV

Isi foldernya:

Hasilnya:

Cek alamat berkas:

Jadikan milikmu

Contoh di atas masih data pura-pura. Setelah bentuknya jadi, ganti semuanya dengan datamu sendiri: nama aslimu, pengalaman aslimu, kontak yang kamu mau tampilkan.

Menyimpan hasilnya di komputermu

Kotak latihan tadi hanya hidup di halaman ini. Kalau kamu tutup, isinya hilang. Supaya tersimpan, pindahkan ke komputer. Cara singkatnya:

Buat folder baru bernama cv di komputermu.
Di dalamnya, buat folder css dan folder gambar.
Buka index.html di kotak latihan, salin seluruh isinya, lalu tempel ke berkas baru bernama index.html di folder cv (pakai code editor, bukan Word).
Lakukan hal yang sama untuk css/gaya.css, gambar/foto.svg, dan gambar/sampul.svg. Klik nama berkasnya di daftar untuk melihat isinya.
Klik dua kali index.html di folder cv. Browser akan membukanya.

Untuk langkah memasang code editor dan menyiapkan laptop, ikuti Bab 8, pindah ke laptop. Dan kalau kamu ingin CV-mu bisa dibuka orang lain lewat alamat web, lanjut ke Bab 9, online-kan.

Kesalahan umum

Foto atau sampul tidak muncul. Cek alamat: harus gambar/foto.svg, huruf kecil, dengan folder gambar.
Tampilan polos, tanpa kartu. Baris <link rel="stylesheet" href="css/gaya.css"> di <head> terhapus atau salah ketik.
Class salah ketik. class="butri" tidak dikenali. Samakan dengan tabel di atas.
Lupa menutup tag. Setiap <li>, <ul>, dan <section> butuh penutup.

Yang barusan kamu pelajari

Halaman CV memakai semua bahan sebelumnya: kerangka, teks, gambar, path, pengelompokan, dan class.
Berkas css/gaya.css sudah jadi. Kamu belajar membuatnya nanti di kelas CSS.
Tiap bagian dibungkus <section> dengan id, dan class dipakai persis seperti yang disediakan.
Pengalaman dan pendidikan memakai pola daftar yang sama: <ul> berisi <li>.
Alamat gambar dan CSS harus benar, dihitung dari index.html.
Ganti data contoh dengan datamu, lalu simpan sebagai index.html di folder di komputermu.