Proyek 1: Halaman Profil Diri
Menggabungkan semua yang sudah dipelajari: membuat halaman profil lengkap dengan struktur semantik, daftar, tabel, tautan, gambar, dan formulir kontak.
Saatnya membangun!
Di proyek ini kamu membuat halaman profil diri yang rapi. Tidak ada hal baru; kamu menggabungkan semua materi dari bab 1–17. Kerjakan bertahap dan jalankan kodenya sesering mungkin.
Rancangan halaman
header : nama (h1) + tagline + navigasi (3 tautan anchor)
main
section#tentang : foto (figure) + paragraf tentang kamu
section#keahlian : daftar keahlian (ul)
section#pendidikan: tabel riwayat pendidikan
section#kontak : formulir kontak
footer : hak ciptaLangkah kerja yang disarankan
- Tulis kerangka dokumen (doctype, head lengkap, body).
- Buat
headerbesertanav; tautan memakai#tentang,#keahlian, dan#kontak. - Buat tiap
sectiondenganidyang sesuai dan satuh2di dalamnya. - Isi kontennya: gambar dengan
alt, daftar, tabel (thead,tbody), dan formulir (label, input, textarea, tombol). - Tutup dengan
footer. - Periksa: heading berurutan, semua gambar ber-
alt, semua input ber-label, dan tidak ada tag yang lupa ditutup.
Tantangan tambahan (opsional): tambahkan <blockquote> motto hidupmu, tautan ke profil media sosial (target="_blank" dengan rel="noopener noreferrer"), dan <abbr> untuk singkatan.
Daftar periksa penilaian
| Bagian | Yang diperiksa |
|---|---|
| Kerangka | doctype, lang, charset, viewport, title |
| Struktur | header + nav + main + footer, satu h1 |
| Navigasi | 3 tautan anchor yang tujuannya ada |
| Konten | figure/img ber-alt, ul ≥ 3 butir, tabel ber-thead |
| Formulir | nama (required), email (required), pesan, tombol submit; semua ber-label |