Bisnis Digital · Front-End Development

Mentransformasikan Desain Visual Menjadi Kode HTML/CSS

Sub-CPMK: Mentransformasikan rancangan visual menjadi kode HTML/CSS yang fungsional, ringan, dan responsif — dari prototype Figma hingga halaman web yang benar-benar berjalan di browser.

Indikator 1Mengubah halaman beranda prototype menjadi kode HTML.

Indikator 2Menambahkan CSS untuk mereplikasi desain visual.

Indikator 3Membuat halaman menjadi responsif (mobile, tablet, desktop).

Progres membaca materi0%

Tiga Pilar: Fungsional, Ringan, Responsif

Mentransformasikan desain visual menjadi kode bukan sekadar menyalin tampilan persis seperti di Figma. Hasil kode yang baik harus memenuhi tiga pilar sekaligus:

⚙️

1. Fungsional

Struktur HTML semantik, elemen interaktif benar-benar berfungsi (tombol, form, navigasi), dan kode mudah divalidasi/dipelihara.

⚡

2. Ringan & Cepat

CSS dioptimasi, gambar dikompresi, tidak ada kode berlebihan yang memperlambat waktu muat halaman.

📱

3. Responsif

Tata letak beradaptasi otomatis di mobile, tablet, dan desktop menggunakan Flexbox, CSS Grid, dan media queries.

1. Mengubah Halaman Beranda Prototype Menjadi Kode HTML

Langkah pertama adalah membedah setiap elemen pada prototype Hi-Fi (header, hero banner, grid produk, footer) dan menerjemahkannya menjadi struktur HTML semantik — menggunakan tag yang sesuai makna kontennya, bukan sekadar tumpukan <div> generik.

HTML Semantik

<header class="site-header"> <div class="brand">Kopi Lereng Merapi</div> <nav> <a href="#beranda">Beranda</a> <a href="#produk">Produk</a> <a href="#kontak">Kontak</a> </nav> </header> <section class="hero" id="beranda"> <h1>Promo Roasting Baru — Diskon 20%</h1> <p>Kopi robusta & arabika asli lereng Merapi</p> <button>Lihat Katalog</button> </section> <section class="produk" id="produk"> <h2>Produk Terlaris</h2> <div class="grid-produk"> <article class="kartu-produk"> <img src="robusta.jpg" alt="Kopi Robusta 250gr"> <h3>Kopi Robusta 250gr</h3> <p>Rp 45.000</p> </article>  </div> </section> <footer id="kontak"> <p>© 2026 Kopi Lereng Merapi</p> </footer>

Elemen pada Prototype	Tag HTML Semantik yang Tepat
Bilah navigasi teratas	`<header>` + `<nav>`
Banner promosi utama	`<section class="hero">`
Kartu produk berulang	`<article>` (konten yang berdiri sendiri & bisa diulang)
Bagian bawah halaman	`<footer>`

Kenapa semantik penting? tag semantik membantu mesin pencari (SEO) memahami struktur halaman, memudahkan pengguna pembaca layar (aksesibilitas), dan membuat kode lebih mudah dibaca oleh developer lain.

2. Menambahkan CSS untuk Mereplikasi Desain Visual

Setelah struktur HTML siap, langkah berikutnya adalah menambahkan CSS yang mereplikasi warna, tipografi, dan tata letak persis seperti pada prototype Hi-Fi — idealnya diambil langsung dari nilai HEX & ukuran yang tercantum di file Figma (fitur Inspect).

CSS Mereplikasi Desain

.site-header { display: flex; justify-content: space-between; align-items: center; background: #3c2416; /* coklat tua khas brand */ color: #fff; padding: 12px 24px; } .hero { background: linear-gradient(135deg, #6b4226, #3c2416); color: #fff; text-align: center; padding: 60px 20px; } .hero button { background: #ff8a3d; /* warna aksen tombol */ border: none; border-radius: 999px; padding: 10px 24px; font-weight: 700; } .kartu-produk { background: #fdf6ee; border: 1px solid #e6d2b5; border-radius: 10px; text-align: center; overflow: hidden; } .kartu-produk img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

Sumber Nilai di Figma	Cara Mengambilnya
Kode warna (HEX)	Klik elemen di Figma → panel kanan "Fill" → salin kode HEX
Ukuran & jarak (px)	Mode Inspect di Figma menampilkan padding, margin, dan ukuran font persis
Jenis font	Panel "Text" menampilkan nama font & berat (weight) yang dipakai desainer
Radius sudut & bayangan	Properti "Corner radius" dan "Effects" pada panel desain

3. Membuat Halaman Menjadi Responsif (Mobile, Tablet, Desktop)

Terakhir, tata letak dibuat adaptif menggunakan kombinasi CSS Grid (untuk grid produk) dan media queries (untuk mengatur ulang susunan pada layar sempit) — sebagaimana dibahas lebih detail pada materi Flexbox & CSS Grid sebelumnya.

CSS Responsif

.grid-produk { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } @media (max-width: 640px) { .site-header { flex-direction: column; gap: 10px; } .hero { padding: 36px 16px; } }

Studi Kasus Lengkap: Dari Prototype ke Halaman Beranda yang Hidup

Studi Kasus

Kopi Lereng Merapi. Melanjutkan studi kasus high-fidelity prototype pada materi sebelumnya, berikut adalah hasil transformasi nyata dari prototype Figma menjadi halaman beranda yang benar-benar berjalan — dibangun dengan HTML semantik, CSS yang mereplikasi warna & tipografi brand, serta CSS Grid yang otomatis responsif.

🟢 DEMO HALAMAN BERANDA HASIL CODING

☕ Kopi Lereng Merapi

Promo Roasting Baru — Diskon 20%

Kopi robusta & arabika asli lereng Merapi, disangrai segar setiap minggu.

☕

Produk Terlaris

☕

Robusta 250gr

Rp 45.000

🍵

Arabika 250gr

Rp 55.000

🍫

Cokelat Batang

Rp 30.000

🍯

Madu Asli

Rp 60.000

🔍 Klik tombol Desktop / Tablet / Mobile di atas untuk melihat bagaimana halaman beradaptasi di berbagai ukuran layar.

Ukuran Layar	Perilaku Halaman
Desktop (>1024px)	Hero dua kolom (teks + ilustrasi), grid produk 4 kolom
Tablet (768–1024px)	Hero dua kolom tetap, grid produk otomatis menjadi 2–3 kolom
Mobile (<640px)	Header bertumpuk vertikal, hero menjadi satu kolom, grid produk 1–2 kolom

Catatan penting: studi kasus ini melanjutkan alur "Kopi Lereng Merapi" dari materi wireframe & high-fidelity prototype sebelumnya, bersifat ilustratif untuk pembelajaran — namun kode di atas adalah kode HTML/CSS yang benar-benar valid dan dapat langsung dicoba/dimodifikasi.

Contoh tambahan: mengubah kartu produk menjadi baris pada layar sangat sempit

@media (max-width: 420px) { .kartu-produk { display: flex; align-items: center; text-align: left; } .kartu-produk img { width: 70px; height: 70px; flex-shrink: 0; } }

Latihan Mandiri

Kerjakan bertahap sesuai indikator:

Ambil prototype Hi-Fi halaman beranda UMKM pilihan Anda dari Figma, lalu tulis struktur HTML semantik-nya terlebih dahulu tanpa CSS apa pun.
Tambahkan CSS yang mereplikasi warna, tipografi, dan jarak persis seperti di Figma menggunakan mode Inspect.
Terapkan CSS Grid pada bagian katalog produk dan media query pada header agar halaman responsif di 3 ukuran layar.
Uji kecepatan muat halaman menggunakan Lighthouse/PageSpeed Insights, lalu kompres gambar yang berukuran besar.

Referensi & Bacaan Lanjutan

Fadli, A. Y., Nuryasin, I., & Sari, Z. Optimasi Kecepatan Loading Time Web Template dengan Implementasi Teknik Front-End.

Jurnal Repositor, Universitas Muhammadiyah Malang — ejournal.umm.ac.id

Membahas teknik optimasi front-end untuk mempercepat waktu muat halaman web, relevan dengan pilar "ringan & cepat" pada transformasi desain ke kode.

Hadi, dkk. Implementasi Front End Sebagai Peningkatan Efisiensi Informasi pada Website Jasmavi Desa Jatimulyo.

Jurnal Pengabdian kepada Masyarakat — journals.arces.org

Studi implementasi HTML, CSS, dan JavaScript untuk website UMKM (jamu gendong, batik) dengan fokus pada antarmuka responsif dan optimalisasi performa.

Penerapan JavaScript React pada Perancangan Front-End Website UMKM Jemari Ragil.

IT-Explore: Jurnal Penerapan TIK — ejournal.uksw.edu

Implementasi front-end interaktif untuk UMKM yang telah bergabung ke e-commerce, diuji dengan usability testing terhadap hasil akhir antarmuka.

Framework CSS: Tailwind CSS untuk Front-End Website Store PT. XYZ.

Jurnal Informatika — jurnal.uniraya.ac.id

Menunjukkan bagaimana framework CSS mempercepat implementasi desain UI/UX toko daring menjadi kode responsif dan fleksibel.

Implementasi Bootstrap & jQuery untuk Desain Responsif serta Pengujian Performa Website.

Jurnal Media Informatika (JUMIN) — ejournal.sisfokomtek.org

Mengukur kinerja website sebelum & sesudah penerapan teknologi desain responsif menggunakan alat uji performa.

Analisis Perbandingan CSS Framework Tailwind, Materialize, dan Semantic-UI pada Front-End Website.

JOINTECOMS — e-journal.upr.ac.id

Membandingkan performa & responsivitas berbagai CSS framework populer dalam implementasi antarmuka front-end.

🔒 Token kehadiran akan muncul otomatis setelah Anda membaca materi ini minimal

3:00

Tetap buka halaman ini sampai waktu selesai.

✅ Token Kehadiran / Bukti Baca Materi

HTMLCSS-BDG26

Token disalin ✔

Batang Kayu

Transformasi Rancangan Visual menjadi Kode HTML/CSS

Mentransformasikan Desain Visual Menjadi Kode HTML/CSS