LKPD KKA – Proyek Klien: Website Usaha

Brief klien: "Saya punya usaha kecil dan butuh halaman web yang rapi, punya menu navigasi, daftar layanan, dan tampilannya menarik di layar." Kamu developer-nya. Selesaikan 6 tiket kerja untuk menyerahkan website.

header

nav · main · section

.kartu

flex

:hover

footer · proyek selesai

🛠️

0 / 100 poin

Bekal Materi

Konsep	Fungsi	Contoh
Tag semantik	Memberi makna pada bagian halaman	<header> <nav> <main> <footer>
Class & ID	Menandai elemen untuk di-styling	.kartu (banyak) · #logo (satu)
Box model	content + padding + border + margin	padding: 16px;
Flexbox	Menata elemen sejajar	display: flex;

Tiket 1 · Peran Tag Semantik 10 poin

Klien meminta struktur yang jelas. Pasangkan tag dengan perannya.

Tiket 2 · Kerangka Halaman 20 poin

Bangun kerangka halaman. Ganti komentar dengan tag yang sesuai.

<!-- header berisi h1 nama usaha --> <!-- nav berisi 3 tautan a href --> <main> <!-- section berisi h2 dan p tentang layanan --> </main> <!-- footer berisi hak cipta -->

Tiket 3 · Hitung Box Model 15 poin

Geser slider dan amati perubahannya, lalu jawab dua pertanyaan.

padding 20px border 5px margin 20px

content

Elemen punya width: 200px; padding: 20px; border: 5px solid;

Lebar total (tanpa margin) dengan content-box = px

Lebar total jika box-sizing: border-box = px

Tiket 4 · Gaya Tombol & Judul 20 poin

Tombol .btn dan judul #logo masih polos. Percantik dengan CSS.

.btn { } #logo { }

Tiket 5 · Tata Letak Flexbox 15 poin

Tiga kartu layanan menumpuk ke bawah. Jadikan sejajar dalam satu baris.

.layanan { }

Tiket 6 · Serah Terima: Website Usaha 20 poin

Pilih usaha (warung, bengkel, studio, toko online, dll.) dan gabungkan semua ilmunya.

<style> /* CSS-mu di sini */ </style> <header> <h1>Nama Usahamu</h1> </header> <main> <section> <h2>Tentang Kami</h2> <p>Ceritakan usahamu.</p> </section> </main> <footer>© 2026</footer>

Refleksi & Penilaian

Tiket mana yang paling menantang, dan bagaimana kamu menyelesaikannya? Bagaimana ilmu hari ini bisa dipakai di jurusanmu?

Skor	0–59	60–84	85–100
Predikat	Perlu remedial	Kompeten	Sangat kompeten