Kita tidak belajar tag HTML secara terpisah. Kita langsung merakit sebuah halaman yang bisa dibuka di ponsel dan desktop.
HTML menentukan struktur, sedangkan CSS mengatur bagaimana struktur itu terlihat. Cara paling cepat memahami keduanya adalah membuat sesuatu yang selesai, bukan menghafal daftar properti.
- 1Buat folder
portfoliodengan fileindex.htmldanstyle.css. - 2Susun bagian header, hero, daftar proyek, dan kontak dengan elemen semantik.
- 3Tambahkan sistem warna, tipografi, grid, dan breakpoint mobile.
- 4Uji halaman dengan DevTools sebelum dipublikasikan.
Mulai dari struktur yang bermakna
Gunakan elemen sesuai fungsi. Struktur semantik membantu aksesibilitas, SEO, dan memudahkan Anda membaca kembali kode beberapa bulan kemudian.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portofolio Dimas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<a class="logo" href="#home">Dimas.</a>
<nav><a href="#work">Work</a><a href="#contact">Contact</a></nav>
</header>
<main>
<section class="hero" id="home">
<p class="eyebrow">Frontend Developer</p>
<h1>Saya membangun antarmuka web yang cepat dan jelas.</h1>
<a class="button" href="#work">Lihat proyek</a>
</section>
<section id="work" class="projects">
<article><h2>Dashboard Penjualan</h2><p>UI responsif untuk memantau transaksi.</p></article>
<article><h2>Website Restoran</h2><p>Landing page dengan reservasi daring.</p></article>
</section>
</main>
<footer id="contact">hello@example.com</footer>
</body>
</html>Bangun sistem visual, bukan tambalan
Mulailah dari variabel warna dan ukuran. Dengan begitu, perubahan desain tidak memaksa Anda mencari kode warna yang tersebar di banyak tempat.
:root {
--ink: #111318;
--paper: #f7f7f2;
--accent: #c8ff3d;
--line: #dfe2d8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.7 system-ui, sans-serif; color: var(--ink); background: var(--paper); }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:24px clamp(20px,5vw,72px); }
.hero { min-height:72vh; display:grid; align-content:center; max-width:980px; padding:64px clamp(20px,5vw,72px); }
.hero h1 { max-width:850px; font-size:clamp(42px,8vw,92px); line-height:.98; letter-spacing:-.06em; }
.button { display:inline-flex; width:max-content; padding:14px 20px; border-radius:999px; color:#111; background:var(--accent); text-decoration:none; }
.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:40px clamp(20px,5vw,72px); }
.projects article { padding:28px; border:1px solid var(--line); border-radius:24px; background:#fff; }
@media (max-width:700px) { .projects { grid-template-columns:1fr; } .site-header nav { display:none; } }Kesalahan yang paling sering terjadi
divGunakan header, nav, main, section, dan footer ketika konteksnya tepat.
Gunakan clamp(), persen, grid, dan batas lebar agar layout tidak pecah.
Pastikan tautan dan tombol memiliki keadaan :focus-visible yang jelas.
Konversi ke WebP/AVIF dan tulis atribut width serta height untuk mengurangi layout shift.
Setelah halaman stabil, unggah ke GitHub Pages, Netlify, atau server sendiri. Portofolio pertama tidak perlu kompleks; yang penting selesai, cepat, dan menunjukkan cara Anda berpikir.
Sigit W. Prasetyo