Cara Membuat Halaman Portofolio Responsive dengan HTML & CSS Internal untuk Mobile & Tablet – Part 3
Pada Part 2, kita sudah menambahkan header dan footer pada halaman portofolio sederhana. Sekarang di Part 3, kita akan membuat halaman tersebut menjadi responsive sehingga tampil rapi di berbagai ukuran layar seperti mobile dan tablet.
Apa Itu Responsive Design?
Responsive design adalah teknik membuat tampilan website agar menyesuaikan dengan ukuran layar pengguna. Website responsive akan terlihat baik di desktop, tablet, maupun smartphone tanpa perlu di-zoom.
Langkah 1: Tambahkan CSS Responsive dengan Media Query
Buka file index.html yang sudah dibuat di Part 2. Cari bagian <style> di dalam <head>. Tambahkan kode berikut di bagian paling bawah:
/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
body {
padding: 10px;
}
header h1 {
font-size: 22px;
}
nav a {
display: block;
margin: 10px 0;
}
img {
width: 120px;
}
section {
padding: 10px;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 20px;
}
p, li {
font-size: 16px;
}
footer {
font-size: 14px;
padding: 8px;
}
}
💡 Penjelasan:
@media (max-width: 768px)→ Mengatur tampilan untuk tablet.@media (max-width: 480px)→ Mengatur tampilan untuk smartphone kecil.- Menu navigasi berubah menjadi vertikal di layar kecil, teks lebih mudah dibaca, dan gambar mengecil otomatis.
Langkah 2: Pastikan Tag Meta Viewport Ada
Di bagian <head> file Anda, pastikan sudah ada tag berikut (biasanya sudah dari Part 1):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tag ini penting agar website menyesuaikan ukuran layar perangkat.
Langkah 3: Simpan dan Uji Hasil
- Simpan file
index.html. - Buka di browser desktop, lalu perkecil jendela browser untuk melihat perubahan.
- Coba juga buka di HP atau gunakan fitur Inspect > Mobile View di browser.
Jika berhasil, tampilan menu berubah jadi vertikal di HP, teks terbaca lebih jelas, dan layout menyesuaikan layar kecil.
Dengan langkah ini, halaman portofolio Anda kini tampil rapi di desktop, tablet, dan smartphone. Selanjutnya di Part 4, kita akan menambahkan desain kartu (card) untuk daftar proyek agar portofolio terlihat lebih profesional.