Home/Tutorial/Panduan Lengkap Membuat Website Portofolio Profesional Menggunakan HTML dan CSS untuk Pemula

Panduan Lengkap Membuat Website Portofolio Profesional Menggunakan HTML dan CSS untuk Pemula

By nantarian • Posted on January 15, 2026 • Tutorial

Memiliki portofolio online bukan lagi sekadar tren, melainkan kebutuhan mutlak bagi profesional di era digital, baik Anda seorang desainer, penulis, maupun pengembang software. Portofolio adalah “rumah digital” yang bekerja 24 jam untuk memamerkan keahlian Anda kepada klien atau rekruter.

Banyak pemula tergoda menggunakan website builder instan. Namun, membangun portofolio sendiri dengan HTML dan CSS murni memberikan Anda kontrol penuh, kode yang ringan, dan yang terpenting: pemahaman mendasar tentang bagaimana web bekerja.

Dalam tutorial ini, kita akan membangun halaman portofolio single-page yang modern, responsif (cocok di HP dan Laptop), dan elegan dari nol. Tidak perlu framework berat, hanya kode murni.

Baca Juga:

Persiapan Tempur

Sebelum menulis baris kode pertama, mari siapkan lingkungan kerja Anda agar terorganisir.

  1. Text Editor: Saya merekomendasikan Visual Studio Code (VS Code), namun Notepad++ atau Sublime Text juga bisa digunakan.
  2. Web Browser: Google Chrome, Firefox, atau Edge untuk melihat hasil.
  3. Struktur Folder:
    • Buat folder baru di komputer Anda, beri nama portofolioku.
    • Di dalamnya, buat file kosong bernama index.html.
    • Buat file kosong lain bernama style.css.
    • (Opsional) Buat folder img jika Anda punya foto sendiri. Untuk tutorial ini, kita akan menggunakan gambar placeholder online agar Anda bisa langsung praktik.

Langkah 1: Membangun Kerangka HTML

HTML (HyperText Markup Language) adalah tulang punggung website Anda. Kita akan menggunakan elemen semantic (seperti <header>, <section>, <footer>) agar kode rapi dan disukai mesin pencari (SEO friendly).

Salin kode berikut sepenuhnya ke dalam file index.html Anda.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio Saya | Web Developer</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo">Portofolio.</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">Tentang</a></li>
                <li><a href="#projects">Proyek</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </div>
    </nav>

    <section id="home" class="hero">
        <div class="container hero-content">
            <div class="hero-text">
                <h1>Halo, Saya <span class="highlight">Budi Santoso</span></h1>
                <p>Seorang Web Developer yang berfokus menciptakan pengalaman digital yang fungsional dan estetis.</p>
                <a href="#projects" class="btn">Lihat Karya Saya</a>
            </div>
            <div class="hero-image">
                <img src="https://via.placeholder.com/400x400/333333/ffffff?text=Foto+Profil" alt="Foto Profil">
            </div>
        </div>
    </section>

    <section id="about" class="about-section">
        <div class="container">
            <h2>Tentang Saya</h2>
            <p>Saya adalah pengembang web antusias yang berbasis di Jakarta. Saya memiliki keahlian dalam HTML, CSS, dan JavaScript. Saya senang memecahkan masalah kompleks dan mengubahnya menjadi desain antarmuka yang sederhana.</p>
            
            <div class="skills">
                <span class="skill-tag">HTML5</span>
                <span class="skill-tag">CSS3</span>
                <span class="skill-tag">JavaScript</span>
                <span class="skill-tag">Responsive Design</span>
            </div>
        </div>
    </section>

    <section id="projects" class="projects-section">
        <div class="container">
            <h2>Proyek Terbaru</h2>
            <div class="project-grid">
                <div class="project-card">
                    <img src="https://via.placeholder.com/300x200/4a90e2/ffffff?text=Project+1" alt="Project 1">
                    <div class="card-info">
                        <h3>Website E-Commerce</h3>
                        <p>Toko online responsif dengan fitur keranjang belanja.</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="https://via.placeholder.com/300x200/e24a4a/ffffff?text=Project+2" alt="Project 2">
                    <div class="card-info">
                        <h3>Aplikasi To-Do List</h3>
                        <p>Aplikasi manajemen tugas menggunakan JavaScript murni.</p>
                    </div>
                </div>
                <div class="project-card">
                    <img src="https://via.placeholder.com/300x200/50e24a/ffffff?text=Project+3" alt="Project 3">
                    <div class="card-info">
                        <h3>Landing Page Startup</h3>
                        <p>Halaman pendaratan modern untuk perusahaan teknologi.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer id="contact">
        <div class="container">
            <h2>Mari Bekerja Sama</h2>
            <p>Tertarik membuat proyek hebat? Hubungi saya.</p>
            <a href="mailto:email@contoh.com" class="btn btn-outline">Kirim Email</a>
            <div class="socials">
                <p>&copy; 2024 Budi Santoso. Dibuat dengan HTML & CSS.</p>
            </div>
        </div>
    </footer>

</body>
</html>

Penjelasan Singkat:

  • id="home", id="about": Digunakan sebagai target link navigasi (anchor link).
  • class="container": Teknik standar untuk menjaga konten tetap di tengah layar dan tidak melebar ke pinggir monitor yang besar.

Langkah 2: Mempercantik dengan CSS

Sekarang kita akan memberikan “make up” agar website terlihat profesional. Kita akan menggunakan Flexbox untuk tata letak dan Media Queries agar website tetap rapi saat dibuka di HP.

Salin kode ini ke dalam file style.css.

CSS

/* 1. Reset Dasar & Variabel */
:root {
    --primary-color: #2563eb; /* Biru modern */
    --dark-bg: #1e293b;
    --light-bg: #f8fafc;
    --text-color: #334155;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Penting agar padding tidak menambah lebar elemen */
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-bg);
}

/* Utilitas Container */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Styling Navigasi */
.navbar {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed; /* Menu tetap di atas saat scroll */
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* 3. Styling Hero Section */
.hero {
    height: 100vh; /* Tinggi layar penuh */
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding-top: 70px; /* Kompensasi fixed navbar */
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.hero-text h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.highlight {
    color: var(--primary-color);
}

.hero-image img {
    border-radius: 50%; /* Membuat gambar bulat */
    border: 5px solid var(--primary-color);
    width: 350px;
    height: 350px;
    object-fit: cover;
}

/* Tombol */
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: transform 0.3s;
}

.btn:hover {
    transform: translateY(-3px); /* Efek naik saat dihover */
}

/* 4. Sections Umum */
section {
    padding: 80px 0;
}

h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--dark-bg);
}

/* 5. About & Skills */
.about-section {
    background-color: var(--light-bg);
    text-align: center;
}

.about-section p {
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.skills {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.skill-tag {
    background: #e2e8f0;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
}

/* 6. Grid Proyek */
.projects-section {
    background-color: var(--white);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.project-card:hover {
    transform: scale(1.02);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-info {
    padding: 20px;
}

/* 7. Footer */
footer {
    background: var(--dark-bg);
    color: var(--white);
    text-align: center;
    padding: 60px 0;
}

.btn-outline {
    border: 2px solid var(--white);
    background: transparent;
    margin-bottom: 30px;
}

.btn-outline:hover {
    background: var(--white);
    color: var(--dark-bg);
}

/* 8. Responsiveness (Mobile) */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column-reverse; /* Gambar di atas teks di HP */
        text-align: center;
    }
    
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .hero-image img {
        width: 250px;
        height: 250px;
        margin-bottom: 30px;
    }
    
    .nav-links {
        display: none; /* Menyembunyikan menu di HP (sederhana) */
    }
}

Poin Penting CSS:

  • flex: Digunakan pada .navbar dan .hero-content untuk menyusun elemen bersebelahan secara otomatis.
  • grid: Digunakan pada .project-grid untuk membuat tata letak galeri yang otomatis turun ke bawah jika layar sempit.
  • @media: Blok kode di bagian paling bawah memastikan tampilan menyesuaikan diri jika dibuka di layar kecil (lebar < 768px).

Langkah 3: Menjalankan dan Menguji

Sekarang momen kebenarannya.

  1. Simpan kedua file (index.html dan style.css).
  2. Buka folder portofolioku di komputer Anda.
  3. Klik dua kali pada file index.html. File ini akan terbuka di browser default Anda.

Seharusnya Anda melihat sebuah website yang memiliki menu navigasi di atas, foto profil bulat besar, bagian skill, dan daftar proyek dalam bentuk kartu grid.

Solusi Jika Error (Troubleshooting)

Terkadang hasil tidak sesuai harapan. Berikut masalah umum dan cara memperbaikinya:

1. Tampilan Berantakan (CSS Tidak Terbaca)

  • Cek Nama File: Pastikan nama file adalah style.css (huruf kecil semua), bukan Styles.css atau style.css.txt.
  • Cek Link: Periksa baris HTML <link rel="stylesheet" href="style.css">. Apakah file CSS dan HTML berada di folder yang sama?
  • Cache: Tekan Ctrl + F5 (Windows) atau Cmd + Shift + R (Mac) di browser untuk memaksa refresh.

2. Gambar Tidak Muncul

  • Artikel ini menggunakan gambar online (placeholder). Pastikan Anda terkoneksi internet.
  • Jika Anda mengganti dengan foto sendiri, pastikan path-nya benar. Misal: <img src="img/foto-saya.jpg">. Jangan gunakan path absolut komputer seperti C:/User/Documents/... karena tidak akan bekerja saat diupload.

3. Menu Navigasi Hilang di HP

  • Dalam kode CSS di atas (bagian @media), saya menyetel .nav-links { display: none; } untuk HP agar tampilan tidak rusak. Ini normal untuk tutorial dasar. Untuk membuatnya muncul (hamburger menu), diperlukan JavaScript tambahan.

Kesimpulan

Selamat! Anda baru saja membangun fondasi identitas digital Anda sendiri. Website ini ringan, cepat, dan kodenya bersih. Anda telah belajar tentang struktur HTML semantik, properti Flexbox dan Grid pada CSS, serta konsep dasar Responsiveness.

Related posts:

Panduan Lengkap Menentukan Pilihan Antara Shared Hosting Murah atau VPS untuk Pemula

Panduan Lengkap Menentukan Pilihan Antara Shared Hosting Murah atau VPS untuk Pemula

Tutorial Lengkap Memperbaiki 500 Internal Server Error pada WordPress Tanpa Panik

Tutorial Lengkap Memperbaiki 500 Internal Server Error pada WordPress Tanpa Panik

Leave a Reply

Your email address will not be published. Required fields are marked *