Membuat Website Portfolio Sederhana dengan HTML

Halo teman-teman!

Selamat! Kita sudah sampai di bagian proyek besar: membuat website portfolio pertama. Website ini adalah tempat di mana kamu bisa memamerkan hasil kerja dan proyek coding yang sudah kamu buat. Siap? Yuk kita mulai langkah-langkahnya!

Apa Itu Website Portfolio?

Website portfolio adalah halaman yang menunjukkan karya atau proyek yang sudah kamu buat. Bagi seorang web developer, memiliki portfolio adalah cara terbaik untuk menunjukkan keahlianmu kepada orang lain, seperti teman, keluarga, atau bahkan calon pemberi kerja.

Pada proyek kali ini, kita akan membuat website portfolio sederhana hanya dengan HTML.

Struktur Website Portfolio

Nantinya, website kita akan memiliki:

Judul dan Subjudul: Untuk memperkenalkan website.
Daftar Proyek: Berisi link dan gambar dari proyek yang pernah kamu buat, seperti:
- Proyek Movie Ranking (dari pelajaran sebelumnya).
- Proyek Undangan Ulang Tahun.
Halaman About Me dan Contact Me: Untuk menceritakan tentang dirimu dan cara orang menghubungimu.

Langkah-Langkah Membuat Website Portfolio

1. Siapkan HTML Boilerplate

Mulailah dengan HTML boilerplate seperti yang sudah kita pelajari:

<!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>
</head>
<body>
  <h1>Selamat Datang di Portfolio Saya</h1>
  <h2>Proyek Saya</h2>
  <hr>
</body>
</html>

2. Tambahkan Proyek-Anda

Setiap proyek akan memiliki:

Judul Proyek.
Gambar (screenshot).
Link ke proyek.

Berikut contoh menambahkan proyek:

<h3>Movie Ranking Project</h3>
<a href="./public/movie-ranking.html">
  <img src="./assets/images/movie-ranking.png" alt="Movie Ranking Project" height="200">
</a>
<hr>
<h3>Birthday Invite Project</h3>
<a href="./public/birthday-invite.html">
  <img src="./assets/images/birthday-invite.png" alt="Birthday Invite Project" height="200">
</a>

3. Tambahkan Halaman About Me dan Contact Me

Di bagian bawah portfolio, tambahkan link untuk halaman tambahan:

<hr>
<h2>Halaman Lain</h2>
<a href="./public/about.html">About Me</a> | 
<a href="./public/contact.html">Contact Me</a>

Cara Menambahkan Screenshot Proyek

Ambil Screenshot Proyek:
- Gunakan tombol Print Screen (Windows) atau Command + Shift + 4 (Mac).
- Simpan gambar di folder assets/images/.

Tambahkan Gambar ke HTML: Gunakan tag <img> dengan atribut src:

<img src="./assets/images/movie-ranking.png" alt="Movie Ranking Project" height="200">

Tips:

Gunakan atribut height="200" agar gambar tidak terlalu besar.
Beri nama file gambar yang jelas, misalnya: movie-ranking.png.

Contoh Kode Lengkap

Berikut adalah kode lengkap untuk website portfolio sederhana:

<!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>
</head>
<body>
  <h1>Selamat Datang di Portfolio Saya</h1>
  <h2>Proyek Saya</h2>
  <hr>

  <h3>Movie Ranking Project</h3>
  <a href="./public/movie-ranking.html">
    <img src="./assets/images/movie-ranking.png" alt="Movie Ranking Project" height="200">
  </a>
  <hr>

  <h3>Birthday Invite Project</h3>
  <a href="./public/birthday-invite.html">
    <img src="./assets/images/birthday-invite.png" alt="Birthday Invite Project" height="200">
  </a>
  <hr>

  <h2>Halaman Lain</h2>
  <a href="./public/about.html">About Me</a> | 
  <a href="./public/contact.html">Contact Me</a>
</body>
</html>

Tantangan: Buat Portfolio Versimu!

Kustomisasi judul, gambar, dan proyek.
Tambahkan halaman "About Me" dengan cerita tentang dirimu.
Tambahkan halaman "Contact Me" dengan cara orang bisa menghubungimu (email, media sosial, dll).

Kesimpulan

Selamat! Kamu baru saja membuat website portfolio pertama. Website ini adalah awal yang bagus untuk menunjukkan keahlianmu. Nantinya, kita akan belajar cara mempercantik website ini dengan CSS.

Jangan lupa bagikan website portfolio-mu kepada teman atau keluargamu. Sampai jumpa di pelajaran berikutnya, ya!