Press ESC to close

Membuat Portofolio Online Dinamis: HTML, CSS, dan Bootstrap Menengah

WhatsAppTelegramFacebookXThreadsCopy Link

Pernah membuat website portofolio sederhana, tapi merasa tampilannya masih polos dan “kurang profesional”? Anda tidak sendiri. Banyak pemula yang sudah memahami dasar HTML & CSS, namun bingung bagaimana melangkah ke tahap berikutnya: membuat portofolio yang dinamis, responsif, dan menarik secara visual.

Masalahnya sering muncul pada pertanyaan seperti:

  • “Bagaimana menata layout agar terlihat rapi di semua perangkat?”
  • “Apa cara termudah membuat tampilan modern tanpa dari nol?”
  • “Haruskah saya belajar JavaScript dulu?”

Tenang, Anda tidak perlu menjadi ahli penuh. Artikel ini akan membimbing Anda langkah demi langkah membangun Portofolio Online Dinamis menggunakan HTML, CSS, dan Bootstrap—framework yang sangat populer dan ramah bagi pemula menengah. Anda akan belajar mulai dari struktur dasar, layout grid, navigasi responsif, hingga menambahkan section portfolio dan kontak profesional.

Langkah-Langkah Membuat Portofolio Online Dinamis

1. Persiapan Awal: Struktur Folder & File Dasar

Sebelum mulai, buat struktur project berikut:

portfolio/
├── index.html
├── css/
│   └── style.css
└── img/
    └── (isi gambar Anda)

Tambahkan Bootstrap lewat CDN di <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

2. Membuat Struktur Dasar HTML Portofolio

Buat kerangka dasar pada index.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</title>
</head>
<body>
  <!-- Navbar, Hero, About, Portfolio, Contact -->
</body>
</html>

3. Membuat Navigasi Dinamis dengan Bootstrap Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="#">Nama Anda</a>
      <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="menu" class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#about">Tentang</a></li>
          <li class="nav-item"><a class="nav-link" href="#portfolio">Portofolio</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Kontak</a></li>
        </ul>
      </div>
  </div>
</nav>

Kenapa penting? Navbar responsif membuat situs Anda terasa profesional, bisa dibuka nyaman di HP dan laptop.

4. Hero Section: Identitas & Branding Pribadi

Gunakan Jumbotron atau section dengan gambar latar.

<section class="text-center p-5 bg-light">
  <h1>Halo, Saya <strong>Nama Anda</strong></h1>
  <p class="lead">Web Developer | Designer | Freelancer</p>
  <a href="#portfolio" class="btn btn-primary">Lihat Karya Saya</a>
</section>

5. Section “About Me” dengan Grid Bootstrap

<section id="about" class="container py-5">
  <div class="row align-items-center">
    <div class="col-md-4">
      <img src="img/profil.jpg" class="img-fluid rounded-circle" alt="Foto Profil">
    </div>
    <div class="col-md-8">
      <h2>Tentang Saya</h2>
      <p>Saya adalah seorang web developer yang fokus pada pembuatan UI/UX responsif dengan HTML, CSS, dan Bootstrap.</p>
    </div>
  </div>
</section>
<section id="portfolio" class="bg-light py-5">
  <div class="container">
    <h2 class="text-center mb-4">Portofolio</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card">
          <img src="img/projek1.jpg" class="card-img-top" alt="">
          <div class="card-body">
            <h5>Project 1</h5>
            <p>Desain website perusahaan.</p>
          </div>
        </div>
      </div>
      <!-- Tambahkan card lainnya -->
    </div>
  </div>
</section>

7. Form Kontak Sederhana

<section id="contact" class="container py-5">
  <h2 class="text-center">Hubungi Saya</h2>
  <form>
    <input class="form-control mb-3" type="text" placeholder="Nama Anda">
    <input class="form-control mb-3" type="email" placeholder="Email">
    <textarea class="form-control mb-3" rows="4" placeholder="Pesan"></textarea>
    <button class="btn btn-primary">Kirim</button>
  </form>
</section>

Anda telah memiliki pondasi kuat untuk membangun portofolio online profesional. Dengan kombinasi HTML, CSS, dan Bootstrap, situs Anda tidak hanya statis, tetapi dinamis, responsif, dan siap dipamerkan ke klien atau rekruter.

Ingin meningkatkan performa situs Anda?
Baca juga: Cara Mengoptimalkan Kecepatan Website dengan CSS & CDN.

👉 Jika Anda ingin memperdalam, jangan lewatkan artikel terkait lainnya:

Backup Disk Menggunakan dd dan Clonezilla

Mengatur Samba (SMB) untuk File Sharing dengan Windows

Mengenal Stratis dan Manfaatnya di RHEL-based Distro

Cara Menggunakan Btrfs Snapshot untuk Backup Cepat

Mengatur Quota Disk untuk User dan Group

WhatsAppTelegramFacebookXThreadsCopy Link