Membuat portfolio website responsive menggunakan CSS adalah langkah penting untuk membangun personal branding di dunia digital. Apalagi jika kamu seorang web developer, desainer, fotografer, atau freelancer — memiliki website portfolio bisa meningkatkan kredibilitas dan profesionalitas kamu.
Dalam tutorial ini, kita akan membahas cara membuat website portfolio dengan CSS dari nol. Kita akan belajar bagaimana menulis kode HTML dasar, menambahkan style dengan CSS, dan memastikan desainnya tetap responsif di semua perangkat — baik desktop, tablet, maupun smartphone.
Artikel ini cocok untuk kamu yang ingin belajar CSS untuk website portfolio dengan pendekatan praktis, rapi, dan mengikuti standar modern.
Daftar isi
Baca juga: Cara Menulis CSS yang Rapi dan Terstruktur (Best Practice CSS)
Tujuan Tutorial
Setelah membaca artikel ini, kamu akan bisa:
- Membuat struktur HTML dasar untuk website portfolio
- Mendesain tampilan dengan CSS modern
- Menggunakan teknik responsive web design dengan CSS
- Mengoptimalkan tampilan agar tetap rapi di berbagai ukuran layar
- Memahami best practice membuat website portfolio menarik dan cepat dimuat
Persiapan Project
Sebelum mulai coding, kita perlu menyiapkan folder proyek.
Struktur dasar project-nya akan seperti ini:
portfolio/
├── index.html
└── style.cssKamu bisa membuat dua file ini di folder mana pun di komputer kamu.
Membuat Struktur Dasar HTML
Kita mulai dengan menulis struktur HTML5 sederhana untuk website portfolio.
File: index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1 class="logo">PortfolioKu</h1>
<ul class="nav-links">
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#projects">Proyek</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</header>
<section id="home" class="hero">
<div class="hero-content">
<h2>Halo, Saya Aris</h2>
<p>Frontend Developer yang suka membangun tampilan web yang cepat dan responsive.</p>
<a href="#projects" class="btn">Lihat Proyek</a>
</div>
</section>
<section id="about" class="about">
<h2>Tentang Saya</h2>
<p>Saya seorang pengembang web dengan pengalaman dalam HTML, CSS, dan JavaScript. Saya fokus pada desain web modern dan performa tinggi.</p>
</section>
<section id="projects" class="projects">
<h2>Proyek Saya</h2>
<div class="project-grid">
<div class="project-card">
<img src="https://placehold.co/400x250" alt="Project 1">
<h3>Website Company Profile</h3>
<p>Desain modern untuk profil perusahaan menggunakan CSS Grid.</p>
</div>
<div class="project-card">
<img src="https://placehold.co/400x250" alt="Project 2">
<h3>Landing Page Produk</h3>
<p>Tampilan produk dengan animasi halus dan layout responsif.</p>
</div>
<div class="project-card">
<img src="https://placehold.co/400x250" alt="Project 3">
<h3>Portfolio Pribadi</h3>
<p>Website portfolio dengan dark mode dan responsive design.</p>
</div>
</div>
</section>
<section id="contact" class="contact">
<h2>Hubungi Saya</h2>
<form>
<input type="text" placeholder="Nama" required>
<input type="email" placeholder="Email" required>
<textarea placeholder="Pesan" required></textarea>
<button type="submit" class="btn">Kirim Pesan</button>
</form>
</section>
<footer>
<p>© 2025 Aris Munandar. Semua Hak Dilindungi.</p>
</footer>
</body>
</html>Code language: HTML, XML (xml)Struktur di atas sudah mewakili komponen umum website portfolio modern:
- Header & Navbar
- Hero Section
- About Section
- Projects Section
- Contact Section
- Footer
Mendesain dengan CSS
Sekarang kita akan menambahkan file CSS agar tampilannya menarik.
File: style.css
/* ========== Reset CSS ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ========== Global Styles ========== */
body {
font-family: 'Poppins', sans-serif;
color: #333;
background-color: #fafafa;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
h1, h2, h3 {
margin-bottom: 1rem;
}
/* ========== Navbar ========== */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #222;
color: #fff;
padding: 1rem 2rem;
}
.nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
}
.nav-links a {
color: #fff;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #ffcc00;
}
/* ========== Hero Section ========== */
.hero {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
background: linear-gradient(to right, #007bff, #00d4ff);
color: white;
text-align: center;
}
.hero-content {
max-width: 700px;
}
.hero .btn {
display: inline-block;
margin-top: 1.5rem;
padding: 0.75rem 1.25rem;
background: #fff;
color: #007bff;
border-radius: 5px;
font-weight: 600;
transition: background 0.3s ease;
}
.hero .btn:hover {
background: #ffcc00;
color: #222;
}
/* ========== About Section ========== */
.about {
padding: 4rem 2rem;
text-align: center;
}
.about p {
max-width: 600px;
margin: 0 auto;
color: #555;
}
/* ========== Projects Section ========== */
.projects {
padding: 4rem 2rem;
background: #f1f1f1;
text-align: center;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.project-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-8px);
}
.project-card img {
width: 100%;
height: auto;
}
.project-card h3 {
margin: 1rem 0;
}
/* ========== Contact Section ========== */
.contact {
padding: 4rem 2rem;
text-align: center;
}
.contact form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact input,
.contact textarea {
width: 100%;
padding: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
}
.contact .btn {
background: #007bff;
color: white;
padding: 1rem;
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
}
.contact .btn:hover {
background: #0056b3;
}
/* ========== Footer ========== */
footer {
background: #222;
color: #fff;
text-align: center;
padding: 1rem;
}
/* ========== Responsive Design ========== */
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
gap: 1rem;
}
.hero h2 {
font-size: 1.8rem;
}
.project-grid {
grid-template-columns: 1fr;
}
}Code language: CSS (css)Kode di atas sudah menerapkan konsep responsive design dengan grid, flexbox, dan media query sederhana.
Maka hasilnya kurang lebih akan seperti gambar di bawah ini.
Atau kamu bisa klik link Website Portofolio Responsive
Membuat Website Responsive dengan CSS
Agar tampilan tetap bagus di berbagai perangkat, ada beberapa strategi responsive CSS yang digunakan:
Menggunakan flex dan grid
Flexbox digunakan untuk mengatur navbar dan hero section
CSS Grid digunakan untuk layout proyek portfolio
Mengatur max-width pada container
Pastikan setiap elemen memiliki batas lebar agar tidak “pecah” di layar besar.
Menambahkan media query
@media (max-width: 768px) {
.hero {
flex-direction: column;
padding: 2rem;
}
}
Code language: CSS (css)Tips Membuat Portfolio Website Menarik
Berikut beberapa tips tambahan agar website portfolio kamu terlihat profesional:
- Gunakan warna kontras agar teks mudah dibaca.
- Tambahkan efek hover ringan di tombol dan kartu proyek.
- Gunakan font profesional seperti Poppins atau Inter.
- Tambahkan animasi halus dengan
transitionatautransform. - Optimalkan gambar agar tidak membuat website lambat.
- Gunakan favicon untuk tampilan profesional di tab browser.
- Pastikan form kontak berfungsi — bisa integrasi ke Formspree atau email API.
Optimasi Performa CSS
Selain tampilan, kecepatan website juga penting. Berikut langkah-langkah optimasi CSS:
- Gunakan minify CSS saat upload ke hosting (
style.min.css) - Kurangi selector berlebihan
- Gunakan variable untuk warna dan ukuran
- Gunakan lazy load untuk gambar besar
- Tambahkan preload untuk font CSS
Penutup
Sekarang kamu sudah tahu bagaimana cara membuat portfolio website responsive menggunakan CSS.
Mulai dari struktur HTML, styling CSS modern, hingga teknik responsive design.
Dengan mengikuti tutorial membuat portfolio website responsive ini, kamu sudah punya pondasi kuat untuk membangun portfolio profesional dan menarik perhatian calon klien atau perusahaan.
Jangan lupa terus eksplorasi desain baru, gunakan animasi halus, dan selalu jaga performa website agar cepat diakses di semua perangkat.
Kesimpulan
Membangun portfolio website responsive tidak sulit jika kamu memahami dasar-dasar CSS modern. Dengan struktur rapi, layout fleksibel, dan tampilan profesional, kamu bisa menciptakan situs yang menunjukkan kemampuan dan gaya personalmu.
Jadi, tunggu apa lagi?
Mulai coding dan jadikan website portfolio kamu sebagai etalase digital terbaik untuk kariermu di dunia web!
